CRM 2011: Launch a Dialog on click of custom ribbon button located at homepage grid (landing page) of an entity

In my previous post, I have explained how to launch a dialog on click of ribbon button located at entity form. Here, in this post I am going to describe how to open a dialog on click of ribbon button located at homepage grid (landing page) of an entity.

In this Example, I’ve used custom entity “Flight Route” contains a button called “Test Button” which will launch a dialog. Dialog will select a flight name from the option set and insert new note record on the selected flight route record.

Following are steps that demonstrate launch dialog from ribbon button.

Before to start with a launch dialog, we need to create
1. Create a dialog for “Flight Route” entity
· Select Solution.
· Select Processes.
· Create new process.



· Specify the Process name.
· Select Entity.
· Select “Activate as” as “Process” and “Category” as “Dialog”.
· Configure it as an on-demand process.
· For this dialog make sure that it should contain at least one “Prompt and Response”


2. Javascript Library as a web resource
· Create new Web resource” /javascripts/LaunchModalDialog.js”


· Click on Text Editor.
· Insert below functions in Text editor window.

1: function LaunchModalDialog(dialogId,typeName,recordId) 2: { 3: recordId = recordId.toString(); 4: recordId =recordId.replace("{", ""); 5: recordId =recordId.replace("}", ""); 6: 7: dialogId=dialogId.replace("{", ""); 8: dialogId=dialogId.replace("}", ""); 9: 10: var serverUrl = getServerUrl(); 11: // Load modal 12: var serverUri = serverUrl +'/cs/dialog/rundialog.aspx'; 13: 14: var mypath = serverUri +'?DialogId=%7b' +dialogId.toUpperCase() +'%7d&EntityName=' + typeName+'&ObjectId=%7b' +recordId+'%7d'; 15: 16: // First item from selected contacts only 17: window.showModalDialog(mypath); 18: 19: // Reload form. 20: window.location.reload(true); 21: }

In above JavaScript method I have used 3 different parameters.

dialogId is id of the dialog we need to open from button (String Parameter)
typeName is entity’s logical name (CRM Parameter)
recordId is entity’s current record id form where the dialog will be launched(CRM Parameter).

1: function getServerUrl() 2: { 3: // Generate the URL schema using a basic check for SSL 4: var url = 'http' + (WEB_SERVER_PORT == 443 ? 's' : '') + '://'; 5: 6: if (IS_SPLA) 7: { 8: // Add the Organisation name in the IFD format 9: url += ORG_UNIQUE_NAME + '.'; 10: } 11: 12: // Append the web server host 13: url += WEB_SERVER_HOST; 14: 15: // Add your custom URL suffix 16: //url += '.mycompanyname.com' 17: 18: if (WEB_SERVER_PORT != 80 && WEB_SERVER_PORT != 443) 19: { 20: // Add the port if it is not standard HTTP or HTTPS 21: url += ':' + WEB_SERVER_PORT; 22: } 23: 24: if (IS_ONPREMISE) 25: { 26: // Add the on-premise organisation name 27: url += '/' + ORG_UNIQUE_NAME; 28: } 29: 30: // Return the URL 31: return url; 32: }

The above function will create server URL according to the CRM configuration. This takes into account IFD and On-premise environments. You can modify or simplify this as needed.

3. Get the Dialog Id Value

· Once you have created new dialog.
· Click Start Dialog.



· That will open new dialog window.
· Get the dialog id value from the URL(Ctrl+N) and note it down somewhere for future use .



4. Insert custom button on entity’s Homepage (landing page) using Visual Ribbon Editor. ( To create a new button on ribbon, you can refer below link---)

http://ankit.inkeysolutions.com/2012/01/crm-2011-how-to-use-visual-ribbon.html


5. After inserting a new custom button, follow the below steps to add javascript function with parameters

· Click on Add link for specifying the “Function name” and “Library”

         a. Specify function name and library name.
         b. Click on “Add” link as shown below. It will open a list of parameter types which you can pass
             with the function.



As discussed earlier (refer step 2) we need 3 different parameters to call JavaScript method. Pass those values as described below. The first parameter will be the value which we have noted in step 3. The second one is entity name. And the last one is the record GUID.



· Now you can set Enable Rule for this button.
· Click on “Add” link and select “SelectionCountRule” in “Enable Rules” as shown below.



· Specify the require details as shown below.



Due to above Rule user cannot select more than one record to launch a dialog. By default this custom ribbon button will be disabled. Once you select a record it gets enabled. Also, while user selects more than 1 record, this button gets disabled.

· Clicks on save. It will save and publish the changes on CRM server.

6. Now you can verify the button on your entity’s Homepage ribbon.



7. On click of this button your dialog will be launched.



8. Select Flight Name from the list and click next and then Finish on the last screen.



9. At the end, a note will be generated on Flight Route entity

CRM 2011: How to launch a Dialog on click of custom ribbon button?

In this post I will explain how to launch a Dialog from Ribbon Button in Dynamics CRM. The requirement is like configure a custom ribbon button on custom entity which will launch a dialog (Process).

In this Example, I’ve used custom entity “Flight Route” contains a button called “Test Button” which will launch a dialog. Dialog will select a flight name from the option set and insert new note record on the selected flight route record.

Following are steps that demonstrate launch dialog from ribbon button.

Before to start with a launch dialog, we need to create
1. Create a dialog for “Flight Route” entity
· Select Solution.
· Select Processes.
· Create new process.



· Specify the Process name.
· Select Entity.
· Select “Activate as” as “Process” and “Category” as “Dialog”.
· Configure it as an on-demand process.
· For this dialog make sure that it should contain at least one
  “Prompt and Response”



2. Javascript Library as a web resource
· Create new Web resource” /javascripts/LaunchModalDialog.js”



· Click on Text Editor.
Insert below function in Text editor window.

   1: function LaunchModalDialog(dialogId,typeName,recordId)

   2: {

   3: var serverUrl = Xrm.Page.context.getServerUrl();

   4: recordId=recordId.replace("{", "");

   5: recordId=recordId.replace("}", "");

   6:  

   7: dialogId=dialogId.replace("{", "");

   8: dialogId=dialogId.replace("}", "");

   9:  

  10: // Load modal

  11: var serverUri = serverUrl +'/cs/dialog/rundialog.aspx';

  12:  

  13: var mypath =  serverUri +'?DialogId=%7b' +dialogId.toUpperCase()  +'%7d&EntityName=' + typeName+'&ObjectId=%7b' +recordId+'%7d';

  14:  

  15: // First item from selected contacts only

  16: window.showModalDialog(mypath);

  17:  

  18: // Reload form.

  19: window.location.reload(true);

  20: }

In above JavaScript method I have used 3 different parameters.

dialogId is id of the dialog we need to open from button (String Parameter)
typeName is entity’s logical name (String Parameter)
recordId is entity’s current record id form where the dialog will be launched.

3.  Get the Dialog Id Value
· Once you have created new dialog.
· Click Start Dialog.



· That will open new dialog window.
· Get the dialog id value from the URL(Ctrl+N) and note it down somewhere,
   to use the same in coming steps.



4. Insert custom button on entity’s form using Visual Ribbon editor. ( To create a new button on ribbon, you can refer below link---)

http://ankit.inkeysolutions.com/2012/01/crm-2011-how-to-use-visual-ribbon.html

5. After inserting a new custom button,
follow the below steps to add JavaScript function with parameters
· Click on Add link for specifying the “Function name” and “Library”
           a. Specify function name and library name.
          b. Click on “Add” link as shown below. It will open a list of
              parameter types which you can pass with the function.



As discussed earlier (refer step 2) we need 3 different parameters to call JavaScript method. Pass those values as described below. The first parameter will be the value which we have noted in step 3. The second one is entity name. And the last one is the record GUID.



· Clicks on save. It will save and publish the changes on CRM server.



6. Now you can verify the button on your entity’s form ribbon.



7. On click of this button your dialog will be launched.



8. Select Flight Name from the list and click next and then Finish on the last screen.



9. At the end, a note will be generated on Flight Route entity

CRM 2011: How to use Visual Ribbon Editor Tool?

Recently, I was assigned a task of ribbon customization in Dynamics CRM. The requirement was like configure a custom ribbon button on custom entity to call some JavaScript methods. I’ve used the Visual Ribbon Editor Tool. This tool is quite handy and intuitive for ribbon customization. I would like to share my experience here in below post.

Before to start with a Ribbon Editor Tool, let’s first configure the web resources (Images and JavaScript file).

The images will be used as an icon on a button. Below are 3 different types that CRM supports. Image formats can be PNG, JPG, GIF or ICO.

1. Small: 16 x 16 pixels
2. Medium: 32 x 32 pixels
3. Large: 66 x 48 pixels

Following are the steps to add image to web resource
1. Click Web Resources on left navigation pane in your solution.



2. Click New to add web resource record.
3. Specify the name and the display name.
4. Select Format of the image.
5. Click browse to select an image path to upload image.
6. Save and publish the newly created web resource record.



Follow the same process to add 32x32 Image.
 
Let’s add a JavaScript function which will be called on custom button click
These are the steps to add new Library as web resource

1. Repeat steps 1-3 as above
2. Select Script(JScript) as Type of web resource.



3. Click on Text Editor.
4. Insert below function in Text editor window 

   1: function TestRibbon()

   2: {

   3:    alert("Test Ribbon Customization using Visual Ribbon Editor.");

   4: }

5. Click ok.
6. Save and publish a web resource

 
Now it’s time to play with Visual Ribbon Editor Tool. Use below link to download it. http://crmvisualribbonedit.codeplex.com/releases/view/75530

Extract the files and Run “VisualRibbonEditor.exe”



1. Click on top – left of the screen named as “Connection Info..” ,



2. Specify the connection details



3. Once connected, click on button.





4. Select the required entity for ribbon customization.




5. By default, It Loads the ribbon type as Form



6. If you want to create a new Group then click on “New Group” button.




7. Specify the ID



Instead of creating new group, you could also add the button on existing group.For that you just need to select any existing group.



In this example I have created a new group. It will be added at the last position on ribbon toolbar.


8. Click on New Button to insert a button on above group.



9. Specify the button name.



10. Specify the following details for the newly created button on Details tab.

a. Id: Defines button id. 
b. Label: Defines caption or display text for button.
c. Tooltip: Defines tooltip text for the button.
d. Template Alias: Defines how button will be displayed on ribbon with Large, medium, small icon and it also vary depending on the selected Template of group.(step-7)

• 01(Large) : Defines large image (32x32).
• 02(Medium): Defines small image (16x16).
• isv(Medium): Defines small image (16x16).

                

e. Sequence: Use arrow buttons to setup a sequence of custom button.
f. 16x16 Image: Name of button image from web resource (16x16).(Created as a web resource earlier)
g. 32x32 Image: Name of button image from web resource (32x32). (Created as a web resource earlier)

11. Now, click on Action tab shown as below.
12. Click on Add link for specifying the “Function name” and “Library”



You can also use “Display Rules” and “Enable Rules” via this tool which will allow us to configure many criteria for enabling/disabling a custom button.

13. Click on Save button that will import the solution in CRM





14. Now you can verify the button on your entity’s form ribbon.



15. On click of this button you’ll get the JavaScript alert Message.

CRM 2011 – Get Optionset labels in Silverlight 4 using SOAP endpoints

 

Recently, I need to fetch the optionset values of one of the custom entities named as ‘Candidate’. It has one a custom attribute like job type. The job type is having values like Permanent, Temporary, Part time, on contract. I developed a Silverlight 4  data grid control to show the all candidates with some search criteria. By design, using OData service reference you can’t fetch the metadata of CRM entity. So here only get the related values of the optionset like 1 for Permanent, 2 for Temporary and so on. So, if you would like to show the label you have to choose the SOAP endpoint service reference.

Now, to start with SOAP endpoint development I referred a very useful link of MSDN. I am sharing the same here,

http://msdn.microsoft.com/en-us/library/gg594452.aspx 

With the help of this link you can setup the required service reference and the utility classes to use messages or methods of CRM SDK.

Below is the code snippet which I have used to fetch the labels using SOAP endpoints in my candidates.xaml.cs file. You can use the same code by just passing the entity and attribute names. I hope this will be helpful. 

   1: /// <summary>

   2: /// Get options set labels for specified entity's optionset type attribute

   3: /// </summary>

   4: /// <param name="entityName"></param>

   5: /// <param name="attributeName"></param>

   6: private void GetOptionSetLabels(string entityName, string attributeName)

   7: {

   8:     OrganizationRequest request = new OrganizationRequest();

   9:     request.RequestName = "RetrieveAttribute";

  10:     request["EntityLogicalName"] = entityName;

  11:     request["LogicalName"] = attributeName;

  12:     request["MetadataId"] = Guid.Empty;

  13:     request["RetrieveAsIfPublished"] = true;

  14:  

  15:     IOrganizationService service = SilverlightUtility.GetSoapService();

  16:     service.BeginExecute(request, new AsyncCallback(OnGetOptionSetLabelsComplete), service);

  17: }

  18:  

  19:  

  20:  

  21: /// <summary>

  22: /// Retrieve the resutls

  23: /// </summary>

  24: /// <param name="result"></param>

  25: private void OnGetOptionSetLabelsComplete(IAsyncResult result)

  26: {

  27:     //Get the original query back from the result.

  28:     OrganizationResponse response = ((IOrganizationService)result.AsyncState).EndExecute(result);

  29:  

  30:     if (response != null && response.Results.Count > 0)

  31:     {

  32:  

  33:         //Get the actual optionset meta data

  34:         OptionSetMetadata optionSetMetadata = ((EnumAttributeMetadata)(response.Results[0].Value)).OptionSet; 

  35:  

  36:         //Set the metadata object in required field

  37:         Common.JobTypeOptionSetMetadata = optionSetMetadata;

  38:     }

  39: }