Monday, December 5, 2011

Add/Remove OptionSet Value at Run time Microsoft Crm 2011

Problem:
           In my post "Loop through OptionSet Using Javascript in Microsoft CRM 2011" regarding how to read all the values in the optionSet of the Microsoft Crm 2011 one of the read post question "Would you know how to remove an option from the list getOptions(), because I want the picklist to show only what needed". So in this post I will give you idea how to add remove optionSet using JavaScript.

Solution:
            For the test code I have used the account entity and from account entity I have choose "Preferred Day" and  "Preferred Time" attributes because these attribute are already added when you create only organization which for trial for 30 day. You can see the selected attributes in the Image 1.

Image 1
JavaScript code is listed in the List 1 here you can see first I have get the selected text of the Preferred Day attribute by using getText and store it in the variable which will then used in the comparison. Then in the next line  I have get the Preferred Time option set control and store it in the variable and then by using that variable get all the optionSet of the Proffered Time optionSet and store it in another variable with name "optionSets". Next I have called clearOptions function to remove all the options from the Preferred time Option set.
List 1

Next is the simple check of the Preferred Day text which user selected. I have set First option which is the Morning for the Monday , Afternoon for the Tuesday and Evening for the Wednesday , All option for the Thursday and first two option for the Friday. Here are some of the screen shots when user click the Monday there are only two option one is the empty and second is the Morning as you can see in the Image 2.
Image 2
And in Image 3 you can see the all option when user select Thursday from the Preferred Day option set.
Image 3
In above JavaScript code I have just use the addOption to add option in the option set which take the option set and the location where to add the option set in the OptionSet dropdown.
 
All and any comments / bugs / suggestions are welcomed!

Sunday, December 4, 2011

Bringing SelectedItem Into Focus Using DataGrid Control

Problem :
              When using datagrid control of the silverlight control there is situation when datagrid control has lots of records and vertical scrolling of the datagrid control is visible and the selected item of the datagrid control is not in the view as the scrolling (vertical scrolling of the datagrid is visible due to large record). So it is important to give focus to the selected item of the datagrid control.In this post I will give you solution of this problem which many of you may have face.
Solution :
               To start with how to solve above problem I have one button control with is used to bring the selected item of the datagrid control in the focus and one datagrid control which is used to show the records. The main form of the test application is shown in the Image 1 here you can see that datagrid display all the records which are assign to it ( as I have small number of records in my grid so i have reduce the height of the datagrid control so that it has vertical scrolling and the selected item is not seen when datagrid control first display). In the Image 1 you can see that selected item is not displayed which I have mention in my problem.

Image 1
The solution to above problem is quite simple but it take time when I first come across this problem. You can see the code used to bring the selected item of the datagrid control in the focus just one line of code which is used. Here I have used ScrollIntoView function of the datagrid control which take The data item (row) to scroll to as its first parameter ( here you can see that I have passed the selected item of the datagrid control) and the second parameter of the ScrollIntoView is the column of the datagrid control(the column to scroll to here I have passed the first column of the datagrid control).

List 1

The output can be seen in the Image 2, when you client the "Selected Item" button then it will focus the selected item of the datagrid control.

Image 2
Note: In the HomeViewModel which is the viewModel for the home page. I have assigned value to the Selectedcustomer before sorting the PagedCollectionView(CustomerList property) so that after sorting the selected item will disappear from the view and it should.If I assigned the first element of the PagedCollectionView (CustomerList) after sorting then first element will be selected..

If you have similar situation then you solved it by using above technique as I have done when I got similar situation.You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!

Communication Between Silverlight And JavaScript (Part 2)

This post is the second part of the series of Communication Between Silverlight And JavaScript. In the First part I have discuss how to call JavaScript from the managed code.Now in this post I will discuss how to call the managed code from the JavaScript.

Calling Managed Code From JavaScript :
                                                                  In order to access managed code from the JavaScript you have to do following steps.

Step 1:
          In step 1 what you have to make is the to create function (which I want to access from the JavaScript). You can do this by using ScriptableMember . So here in List 1 you can see that I have ReceiveMessageFromJavaScript function which is mark as ScripableMember. This function will called from the JavaScript and this function will take just one parameter which is of type string ( which is used to display the current time) and that string parameter is assigned to the Text proerty of the textblock which is used to show the current time on the form.
List 1

Step 2:
          In step 2 what you have to do is to registers a managed object for scriptable access by JavaScript code. As you can see in the List 1 I have used HtmlPage.RegisterScriptableObject function is used to register managed object to be access from the JavaScript. First argument is the key which is used to access the function from the JavaScript here I have used "PageName" as key and second argument is the instance name which I have pass "this".  

Step 3: 
          If you complete Step 1 and Step 2 then managed code is ready to be access from the client side mean from JavaScript. Now we have to make some changes so that we can access the managed code from JavaScript. Now is the next what you have to do is to set the id of the object which has the silverlight application as you can see in the Image 1 here I have set "silverlightApplication" id to the object which is placed inside the div tag with id "silverlightControlHost".

Image 1
The callManagdCode function is simple function which is used to set the current time as string and then pass to the managed code. Let me discuss the important code from the callManagedCode function which is started from where I get the silverlight object by using the "silverlightApplication" id and which is store in the control variable after accessing the "silverlightApplication" control by using document.getElementById next is to call the function from the managed code.
List 2

To call the managed code what you have to do is to used the control which I have store in the control variable and then use the Content and then the key name which I have set in the Step 2 and then the function name which I have set in the Step 1. As you can see in the Image 2

Image 2
At the end of the callManagedCode function I have used the setTimeOut to call the "callManagedCode()" function after every 1 second as my clock display second as well in the time so clock will be updated(if the blnStartClock is true then it will called itself after every second and update the time on the form by calling the managed code).
This how you can call the managed code from the JavaScript. I have tried my best to give full detail of how to make the communication between Silverlight and JavaScript. Hope you get idea of how to call managed code from the JavaScript.You can download the source code from here.

You can read the first part of this series from here where I have discuss how to call the JavaScript from the managed code.

All and any comments / bugs / suggestions are welcomed!

Friday, December 2, 2011

Communication Between Silverlight And JavaScript

Problem:
           While developing silverlight application there are some situation when you need to pass some information from silverlight application (which you can say managed code) to the JavaScript and also from JavaScript to silverlight application (which you can say calling managed code from the JavaScript). So in this post I will discuss how you can communicate between JavaScript and silverlight  application and vice verse.
Solution:
               I have develop simple application which display current time on the screen which you can see in the Image 1 here you can see that see I have one button which is used to start the clock and also to stop the clock. The text of  the button is changed which will return from the JavaScript function if clock is started then its text will be "Stop Clock" and if clock is stopped then button text will be "Start Clock". On button click I call JavaScript which is used to set value of the Boolean variable in JavaScript either true or false and call the function which then call managed code to display the current time on the form.
Image 1

Calling JavaScript From Managed Code:
                                                                 First I will discuss how to call JavaScript from the managed code then I will discuss how to call the Managed code from the JavaScript. First you can see the JavaScript listed in List 1 Here you can see that I have simple JavaScript function which is used to set the inverse of the blnStartClock to blnStartClock which is define globally in the JavaScript sot that other function which is the callManagedCode can used it if the value of the blnStartClock is true. Then is the value which is to set the text of the button control depending of the value of the blnStartClock mean if the it has value true then return "Stop Clock" and if the value is false then "Start Clock" string is return from the function. Which is then use to set the content property of the button control.

List 1

In the List 1 you have seen the simple of the JavaScript function which I will call from the managed code. In list 2 you can see the managed code which is used to call the JavaScript function. Here you can see that I have used HtmlPage.Window.Invoke to call the JavaScript function which you can found in System.Windows.Browser namespace (mean if System.Windows.Browser is not included in your project in the reference then you have to add it in your project).
List 2

In the list 2 you have seen that I have converted the return value from the JavaScript to string as I am return string value which is then use to set the content property of the button control. Here you can see that I have used the sender of the event as I didn't set any name to the button control. When you click the button control you will see the text on the button will changed from "Start Clock" to "Stop Clock" and from "Stop Clock" to "Start Clock". This is the simple way to call JavaScript from managed code.
In this post you have learned how to call JavaScript from managed code and also how to use the return value of the JavaScript function. In next post I will discuss how to call the managed code from the JavaScript.
You can read the second part of "Communication Between Silverlight and JavaSript" from here where I have discuss how to call the managed code from the JavaScript.

All and any comments / bugs / suggestions are welcomed!