Wednesday, July 25, 2012

How to hide a tab section in Microsoft CRM 2011 using javascript

How to hide a tab section in Microsoft CRM 2011 using javascript

Short answer

Xrm.Page.ui.tabs.get('tab_name').sections.get('section_name').setVisible(false);

Long answer

Sooner or later you end up in a situation where you have to hide or show certain tab sections based on certain conditions. While I was searching a solution I noticed many people use tab and section sequence numbers when referring a certain section. It works as well but may cause problems when someone modifies the form itself. Hence I prefer using tab and section names instead.

As you already may know Xrm.Page object offers a strong way to interact with forms. For more information check out the Xrm.Page Reference. We are interested in Xrm.Page.ui, more specifically Xrm.Page.ui.tabs and Xrm.Page.ui.tabs section Methods and controls.

The first step is to select a tab in which you want to hide or show a section. You can select the tab by using get() method from Xrm.Page.ui.tabs. As you can see you can refer the tab with the name or number. I find myself using the name more ofter since I think it's more secure.

Xrm.Page.ui.tabs.get('tab_name');

After you have selected the tab you have to select the section. Sections collection has same methods than the tabs collection. Refer Xrm.Page.ui.tabs.sections Collection. By using get() again you can select a section you'd like. Once again you can either use the name or number when selecting a section.

Xrm.Page.ui.tabs.get('tab_name').sections.get('section_name');

Notice that you can also use get() method without any parameter. Method will then return an array including all sections inside the tab. You can then refer a section using normal array element numbering. For example the code below would return the first section inside the tab.

Xrm.Page.ui.tabs.get('tab_name').sections.get()[0];

This is extremely handy when you have to loop through all the sections for some reason.

After you have the section selected you have an access to section methods and controls. We are using setVisible() method to change the visibility of the section. Give a boolean value as a parameter.

Xrm.Page.ui.tabs.get('tab_name').sections.get('section_name').setVisible(false);

That's it. If you are running into any trouble please leave a comment below.

Thank you!

2 comments:

  1. Can you send me the code for getting all sections like

    function Form_Onload()
    {
    for(var i=0;i<5;i++)
    {
    Xrm.Page.ui.tabs.get(i).setDisplayState("expanded");
    }
    }

    in place of 5 i need the count of sections , send me to firoze.pathan.khan@gmail.com

    ReplyDelete
    Replies
    1. Hi,

      If I were you I would use forEach function in Xrm.Page.ui.tabs. Please refer this http://msdn.microsoft.com/en-us/library/gg334347#BKMK_tabsForEach

      I haven't tested this but something like this:

      Xrm.Page.ui.tabs.forEach(function (tab, index) {
      tab.setDisplayState("expanded");
      });

      Delete