Hide and Show Tab in Dynamics 365 CRM Using JavaScript

In Dynamics 365 CRM, sometimes you want to hide and show tab according to some conditions. We will see how to show and hide tab while using fields.

In this example, we will show the tab ‘Scheduling‘ when user puts value in ‘Ticker Symbol‘ otherwise the tab will be hidden. Let’s see how to achieve this through JavaScript.

This is the end result we are expecting.

Show and Hide Tabs in Dynamics 365 CRM Using JavaScript

Let’s see the steps to make this functionality.

STEP 1: Set Tab Visibility Hidden By Default

In the CRM app go to the Advance Settings -> Customizations -> Customize the System -> Entities -> Account -> Forms -> Account (Main Form).

Open form. You will see all the tabs present there. Select ‘Scheduling’ Tab and Click on ‘Change Properties’.

Inside properties you will find visibility section. Make option ‘Visible by default’ uncheck and click OK.

If it is already unchecked, then in the account information you couldn’t be able to see the ‘Scheduling’ tab.

STEP 2: Add JavaScript Web Resource

Note: We would suggest you to create separate solution to perform this activity.

Go to Advance Settings -> Settings -> Customization (Go to Customize the System OR inside the solution you made) -> Web Resources -> Click on ‘New’.

Below window will open.

Give any meaningful display name like ‘HideShowOnTicker’.

Next, in the Content section, select Type ‘Script (JScript)’.

Note: I have saved and publish this already that’s why you could see Type textbox is disabled.You can select the Type When you create new Web Resource.

Select Language as English. Now you can click on Save.

Open ‘Text Editor’ next to Type and put below JavaScript code.

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

In above JavaScript code, name of attribute and tab should be correct. Go to tab properties and check exact tab name and put the same in the Code. Similarly, go to the Ticker Symbol field’s change properties and pick up the name from there.

Note: How to go to the ‘Change Properties’ of these elements shown in the ‘Set Tab Visibility Hidden By Default’ section of this article. Please refer that.

Now, click on save and then click on publish. Now your Web Resource is ready to use.

STEP 3: Link Web Resource to ‘Ticker Symbol’ Field Properties

Go to the Advance Settings -> Customizations -> Customize the System -> Entities -> Account -> Forms -> Account (Main Form).

Open Form.

Select Ticker Symbol field. Double click on it OR select and click on ‘Change Properties’. You will get window as below.

Inside Events Tab, expand Form Libraries. Click on Add Button. You will get below pop up.

In the Search box, You need to search for your Web Resource. Search only works on Name field. So in search box, just put initials of resource display name. In the above image you could see that I have just typed *hide* (enclosing asterisk) to search resource.

Select resource you get that in the list and click on add button.

Now, in the Event Handlers section, click on Add button.

OnChange is the only event you will find selected. After clicking on Add you will get below pop-up.

Select your Web Resource from library and in the Function textbox write your JavaScript function name. In this example it is ‘TickerChange’. Click On OK.

Function should be added to properties window. Click OK on Properties window.

STEP 4: Link Web Resource to ‘Account’ Form Properties

Now, Click on ‘Form Properties’.

You will get the following popup.

You need to add ‘Web Resource’ similarly you did for Field Properties. After Adding, come to Event Handlers section. Select values for Control – Form & Event – OnLoad.

Now click on Add button to add Function (Similar to Field Properties you did). See below.

Click on OK.

Finally, you need to Save and Publish Changes.

Note: Without publishing changes won’t reflect on UI.

We are done with the changes. Now, you can go to the UI and in one of the accounts. Try to add and remove value in ‘Ticker Symbol’ field and check if ‘Scheduling’ Tab is showing and hiding properly or not. Also, Save the form and check if the tab’s current state persists or not.

Output:

TEST CASE 1: No Value in ‘Ticker Symbol’. ‘Scheduling’ Tab is not visible.

TEST CASE 2: Value is in ‘Ticker Symbol’. ‘Scheduling’ Tab should be Visible.

TEST CASE 3: Save the record WITH value in ‘Ticker Symbol’ and load the page (press F5). ‘Scheduling’ tab SHOULD be visible.

(Perform this yourself and check results)

TEST CASE 4: Save the record WITHOUT value in ‘Ticker Symbol’ and load the page (press F5). ‘Scheduling’ tab SHOULD NOT be visible.