Hide and Show Tab in Dynamics 365 CRM Using JavaScript

Hide and Show Tab in Dynamics 365 CRM Using JavaScript

Dynamics 365 CRM provides flexible form customization capabilities that allow developers to control the visibility of tabs, sections, and fields based on business requirements. One common requirement is dynamically showing or hiding tabs depending on field values or user selections.

Using JavaScript, you can create intelligent forms that display only relevant information to users, resulting in a cleaner user interface and improved productivity.

Business Scenario

Suppose a Customer Type option set contains:

When Business is selected, a tab named "Business Information" should become visible. Otherwise, the tab should remain hidden.

Benefits of Dynamic Tab Visibility

Create JavaScript Function 

function hideShowTab(executionContext)
{
   var formContext =
   executionContext.getFormContext();
}

Get Field Value 

var customerType =
formContext.getAttribute(
"new_customertype"
).getValue();

Show or Hide Tab 

if(customerType == 100000001)
{
   formContext.ui.tabs.get(
   "tab_businessinfo"
   ).setVisible(true);
}
else
{
   formContext.ui.tabs.get(
   "tab_businessinfo"
   ).setVisible(false);
}

Register the JavaScript

  1. Create a JavaScript Web Resource.
  2. Upload the script.
  3. Add the library to the form.
  4. Register the function on Form OnLoad.
  5. Register the function on Field OnChange.
  6. Save and Publish customizations.

Hide Tab on Form Load 

formContext.ui.tabs.get(
"tab_businessinfo"
).setVisible(false);
Important: Register the function on both OnLoad and OnChange events to ensure the tab visibility updates correctly when records are opened and modified.

Common Use Cases

Benefits

Key Takeaways