December 13, 2022

How to Hide and Show Tab in Dynamics 365 CRM Using JavaScript

Dynamics 365
By Vinay Alapaka 9 Comments

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 ‘Tick‘ when user puts value in ‘Material Description‘ otherwise the tab will be hidden. Let’s see how to achieve this through JavaScript.

This is the end result we are expecting.

Add JavaScript Web Resource

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 ‘HideShowOnTick’.

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

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

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

function HideOrShow(executionContext) {
const formContext = executionContext.getFormContext();
let materialdescriptions = formContext.getAttribute(“crmonce_materialdescription”).getValue();

if (materialdescriptions == true) {

formContext.ui.tabs.get(“Tick”).setVisible(true); //Shows Tab
} else {
formContext.ui.tabs.get(“Tick”).setVisible(false); //Hide Tab
}
}

 

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 Material Description field’s change properties and pick up the name from there.

Link Web Resource to ‘Ticker Symbol’ Field Properties

Entities -> Sales and Service -> Forms -> Service (Main Form).

 

Open Form.

Select Material Description 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 or with schema name. In the above image you could see that I have just typed *crmonce 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 ‘Material Description’.Select your Web Resource from library and in the Function textbox write your JavaScript function name. In this example it is ‘HideorShow’.we need Pass execution context as first parameter. Click On OK.

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

 Now, Click on ‘Form Properties’.


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.


 

we need Pass execution context as first parameter

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 Sales and Service. Try to add and remove value in ‘Material Description’ field and check if ‘Tick’ Tab is showing and hiding properly or not. Also, Save the form and check if the tab’s current state persists or not.

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

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

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)

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

(Perform this yourself and check results)

This is how we can achieve showing and hiding tabs functionality by using JavaScript in Dynamics 365 CRM.