In this course, we will learn how to hide and show tabs and sections using JavaScript in Dynamics CRM. Before we start make sure to go through the below links.

• Understanding JavaScript in Dynamics CRM
• How to use JavaScript in Dynamics CRM?
• Using formContext in JavaScript
• Get & Set value in fields using JavaScript
• Hide / Show fields using JavaScript

In Microsoft Dynamics 365, you can hide and show sections and tabs using JavaScript. This is possible by using the “setVisible” property of formContext.

JavaScript for hide/show tab on entity form

Firstly, in the form editor, select the tab which you want to hide show and click on “Change Properties”.

Here we can find the tab name as shown below.

Now lets add the code to the change event of the Ticker Symbol to show the tab when the Ticker Symbol is populated, else hide it.

function TickerChange() {
   if(Xrm.Page.getAttribute("tickersymbol").getValue() == null) {
       Xrm.Page.ui.tabs.get("DETAILS_TAB").setVisible(false);
   }
   else {
       Xrm.Page.ui.tabs.get("DETAILS_TAB").setVisible(true);
   }
}

Now in CRM, when the Ticker Symbol is populated in the form, then the tab is been displayed.

As soon as the field Ticker Symbol is blank, the tab is hidden out from the form.

JavaScript for hide/show section on entity form

We can do the same show/hide with sections. If we want to show or hide the Contact Preferences section, first we have to find the name of that section in the form editor by selecting the section and clicking on Change Properties.

Below is the JavaScript code for hiding the sections on form using the same above used logic.

function TickerChange() {
   if(Xrm.Page.getAttribute("tickersymbol").getValue() == null) {
       Xrm.Page.ui.tabs.get("DETAILS_TAB").sections.get("CONTACT_PREFERENCES").setVisible(false);
   }
   else {
       Xrm.Page.ui.tabs.get("DETAILS_TAB").sections.get("CONTACT_PREFERENCES").setVisible(true);
   }
}

Now in the CRM record, if the Ticker Symbol is blank, the section will be hidden by the JavaScript code.

Once, the field Ticker Symbol is populated, the section will be shown by the JavaScript code.