Friday, June 8, 2012

MSCRM 2011: Hiding a section based on a selection from a picklist field.


There are multiple steps/tasks that must be performed in order to change the visibility of a tab or section based on a selection from a picklist.

Task 1 – Change the Names of the tabs and sections that you will be working with to hide/show

* Go to "Settings", "Customizations", "Customize the System".

* Choose the Entity that you will be working with from the Entities section and choose the Form that you will be working with.

* When you are in the Form, click on the tab/section that you will be hiding/showing and change the Name to something readable. IE. If the Label of the tab is General, change the Name to General.

Note: The name cannot have spaces included

*"Save" the changes, and then choose "Publish" from the Ribbon.

Task 2Create a new JavaScript Library that will include the function to hide/show the tab/section.

* From the Customization area, scroll down to Web Resources and click "New" from the toolbar.

     * Enter the following Information in the New Web Resource Dialog:

* Name= “HideSectiononChoicefromPicklist”

* Display Name= “Hide Section on Choice From Picklist”

* Language = “English”

* Type = “Script (Jscript)”

* Click the  Text Editor button

* Paste the following script in to the source dialog and make the changes described in the Note comments.

function HideSectiononPicklist (context) {
// Note: preferredappointmenttimecode should be replaced with the Name of the field you are examining
// Note: Be sure to use the Name of the field and NOT the Schema Name
// Note: change the name of the var to make sense for the field you are checking

var preferredtimeselected =
Xrm.Page.getAttribute ("preferredappointmenttimecode").getSelectedOption().text;
//Note: check the selection on the variable field you set up above
if (preferredtimeselected == "Morning"){

// Note: the first variable in the commands below is the tab name, the second is the section name
Xrm.Page.ui.tabs.get("Details").sections.get("CompanyInformation").setVisible(false);

}
else
{

Xrm.Page.ui.tabs.get("Details").sections.get("CompanyInformation").setVisible(true);
}
}

* Click "OK".

* Click "Save".

* Click "Publish".

* Click "Save and Close".

Task 3 -  Attach JScript function to onChange event handler

Next we need to setup the event handlers on the form being modified.

* In the Customizations area, click on the Entities to expand.

* Select the Entity where the function will be called from and then click "OK".

* Expand the Entity, choose Form, and the Information form type Main.

* Now that you are in the form editor we need to attach the event handler to the Form onChange event.

* Go to the picklist field that will be changed and double-click. This will bring up the field properties dialog.

* Go to the Events tab and choose to "Add a Forms Library".

* The Web Resource Lookup will be displayed. Choose the Web Resource added above and Click OK.

* In the Event Handler section for the On_change event, click "Add".

* In the Handler Properties dialog do the following:
  * Function =  HideSectiononPicklist

       * 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 then Publish the form.
Task 4 – Test your Changes.

No comments: