[CRM 2011] Dynamically show or hide fields using javascript

3. October 2011 10:10 by Renaud in   //  Tags:   //   Comments (2)

It's pretty easy to enhance the user experience with some javascript in CRM 2011. One of the things you should be able to do is to hide fields that are not necessary in some case and show them only when it's required. For example, imagine you have an account entity with an account type picklist (type A, type B, etc...) and for each type a couple of fields. if all of those fields are always visible,  it could fastly become confusing for the user. To fix this, you'll simply add some javascript on the onChange event of the paymenttype picklist.

1/ link a new javascript sheet to the form

Open the customization form of the entity, and click on Form Properties.

In the new window, there are two grids: the first one contains the javascript sheets loaded with the form, and the second one display the events handlers. Click on the Add button above the first grid and then click New. Add a name to your resource, select the Script (JScript) type, and click the Text Editor button. You can write your code here! To help you understand the following javascript code, here is what the form looks like: The structure is:

  • Tabs: Details
    • Section typea
      • Field Type A
    • Section typeb
      • Field Type B
First, we will simply add a new function to test the value of the new_type picklist (the one which contains account types). And according to the value we will display or hide the corresponding items.
function onTypeChange(){
    if( Xrm.Page.getAttribute("new_type").getValue() ==1)
    {
        Xrm.Page.ui.tabs.get("details_tab").sections.get("details_typea_section").setVisible(true);
        Xrm.Page.ui.tabs.get("details_tab").sections.get("details_typeb_section").setVisible(false);
    }
    else if(Xrm.Page.getAttribute("new_type").getValue() ==2)
    {
        Xrm.Page.ui.tabs.get("details_tab").sections.get("details_typeb_section").setVisible(true);
        Xrm.Page.ui.tabs.get("details_tab").sections.get("details_typea_section").setVisible(false);
    }else
    {
        Xrm.Page.ui.tabs.get("details_tab").setVisible(false);
        Xrm.Page.ui.tabs.get("details_tab").sections.get("details_typea_section").setVisible(false);
        Xrm.Page.ui.tabs.get("details_tab").sections.get("details_typeb_section").setVisible(false);
        return;
    }

    Xrm.Page.ui.tabs.get("details_tab").setVisible(true);
}

If the value of new_type equals 1 (Type A) then we show TypeA section and hide TypeB section, etc... Then you can click close this window, and it will appear on the first grid of the Properties Form window.

2/ call a function when an event is fired

In the same window, you can add a new event handler. First select the attribute (Type). The onChange attribute will then be selected. Click add, and type the name of the function you want to call: onTypeChange. To make this even better, you can also do the same with the onLoad event of the Form. [1] Nothing selected: Details tab is hidden. [2] Type A selected: Details tab and typea section are visible. [3] Type B selected: Details tab and typeb section are visible.

3/ explanations

The truth is that you have more than one possibility to show/hide fields. But in my opinion you should:

  • Prefer to hide section instead of fields. If you hide a field, it will not collapse the space, but a blank space will replace the field. So wherever you can, group your fields that need to be show/hide at the same time under one section, and play with that section!
  • Think to uncheck the Visible by default checkbox in the properties of the item you want to show/hide.  Otherwise, it will be visible during a fraction of a second while the page is loading, and it's not really what you want!
  • Finally, use the setVisible method of the crm sdk. It's easir than trying to retrieve element from the DOM and changing its display or visibility style because if you look at the HTML code of a CRM form, you'll see that the section name doesn't appear anywhere. You will only find a guid. So it will be a little tricky to find the right DOM element except if you look in your code to find the guid of each section you want to work with.

Comments (2) -

mshahzadg
mshahzadg
11/26/2012 6:11:54 PM #

Great....

saurabh gupta
saurabh gupta
2/12/2013 6:02:57 AM #

Very Helping ......do keep posting.....Smile

Add comment

  Country flag

biuquote
Loading

TextBox

About the author

I'm a developer, blog writer, and author, mainly focused on Microsoft technologies (but not only Smile). I'm Microsoft MVP Client Development since July 2013.

Microsoft Certified Professional

I'm currently working as an IT Evangelist with an awesome team at the Microsoft Innovation Center Belgique, where I spend time and energy helping people to develop their projects. I also give training to enthusiastic developers and organize afterworks with the help of the Belgian community.

MIC Belgique

Take a look at my first book (french only): Développez en HTML 5 pour Windows 8

Développez en HTML5 pour Windows 8

Membre de l'association Fier d'être développeur

TextBox

Month List