Tuesday, January 10, 2012

MSCRM 2011: Web Resources: Using JScript to Hide/Show Tabs

In Microsoft Dynamics CRM 2011, there are a number of Web Resources available.
They are:
*HTML Web Pages
*Style Sheets (CSS)
*Script (JScript)
*Data (XML)
*Images(PNG, JPG, GIF, or ICO)
*Silverlight (XAP)
*Style Sheets (XSL)

With the addition of the Jscript Web Resource, there is no longer a need to copy the Jscript to each of the Functions where the Jscript is needed.

In this example, we are going to create a simple JScript function which hides a tab on the Campaign Entity depending on a value in a picklist field – namely, Campaign Type. The Additional Information tab will only be show when the value in the Campaign type picklist field is set to Trade Show. (Note: Trade Show is a custom value that has been added to this picklist)

Following are the steps:

* Task 1 – Create a new JavaScript Library
* Go to Settings, Customizations, Customize the System.
* Click New from the toolbar and select Web Resource from the list.
* Enter the following Information in the New Web Resource Dialog:
* Name= “hideshowAddlInfoTabCampaign”
* Display Name= “Hide Show Addl Info Tab Campaigns”
* Type= “Script (Jscript)”
* Click the Text Editor button
* Paste the following script in to the source dialog.

Function hideshowaddlinfotabcampaigns (eventContext)
{
var option = Xrm.Page.getAttribute (“typecode”).getSelectedOption().text;
If (option == “Trade Show”)
{
Xrm.Page.ui.tabs.get (“AdditionalInfo).setVisible(true);
}
Else
{
Xrm.Page.ui.tabs.get (“AdditionalInfo).setVisible(false);
}
}


* Click OK
* Click Save and Close

* Task 2 - Attach JScript function to onLoad event handler
* Next we need to setup the event handlers on the Campaign form
* Click on the Entities
* Select Campaign in the entity list and then click OK.
* When the Campaign appears in the list of available entities in your solution, expand the Campaign node and then expand the Forms node.
* In the forms grid, double-click Information form type Main
* Now that you are in the form editor we need to attach the event handler to both the Form onLoad and the Campaign Type OnChange events.
* Click Form Properties in the ribbon to bring up the dialog.
* Click the Form Libraries Add button.
* In the lookup dialog select the “Hide Show Addl Info Tab Campaign” web resource and Click OK
* In the Event Handler section Click Add.
* In the Handler Properties dialog do the following: Function = ” hideshowaddltabcampaigns”, Check Enabled, Check Pass execution context as first parameter
* Click OK, to close the Handler Properties dialog
* Click OK, to close the Form Properties dialog

* Task 3 – Attach Jscript function to Campaign Type onChange event handler
* Next, we need to attach the event handler to the Campaign Type picklist.
* In the form editor click to select the “Campaign Type” field
* Click Change Properties button in the ribbon.
* In the Field Properties dialog, select the Events tab.
* Click the Add button in the Event Handlers grid.
* In the Handler Properties dialog do the following:
* Function = ” hideshowaddlinfotabcampaigns”, Check Enabled, Check Pass execution context as first parameter
* Click OK, to close the Handler Properties dialog
* Click OK, to close the Field Properties dialog
* Click Save and Close

* Task4 - Publish changes and see the results
* While still in the Customizations, Click Publish All Customizations in the top toolbar of the Solution Explorer.
* Close the Solutions explorer

Go the campaigns module and click the New button. The Campaign form loads and the Additional Information tab is hidden.

Enter the following items:

*Name = “Test Campaign”
*Campaign Type= “Trade Show”
*Once the Campaign Type is “Trade Show” you will see the Additional Information Tab.

This is a simple demonstration that shows how the Java script only needs to be written once and can then be included in multiple On_Load, On-Change etc functions.