Hide and Show Tabs and Sections in Dynamics 365 using JavaScript

Leave a comment

In Dynamics 365, you can hide and show sections and tabs using JavaScript. In this post we will go through examples of how to do this.

Let’s say on the Account form you would like to hide the Details tab when the Ticker Symbol field is empty. First, find the name of the Details tab by selecting it and clicking Change Properties:

We can see it is called DETAILS_TAB:

Let’s 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, when the Ticker Symbol is populated:

The Details tab is displayed:

When the ticker is blank, the Details tab disappears:

We can do the same show/hide with sections. If we want to show or hide the Contact Preferences section, first find the name:

Now the JavaScript to show and hide the section:

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, if the Ticker Symbol is blank, the section will be hidden:

And if populated, it will show:

 

ABOUT CARL DE SOUZA

Carl de Souza is a developer and architect focusing on Microsoft Dynamics 365, BI, Web, Cloud and Data Science.

carldesouza.comLinkedIn Twitter | YouTube

 

Leave a Reply

Your email address will not be published. Required fields are marked *