Hide and Show Tabs Using JavaScript in Dynamics 365

Hide and Show Tabs Using JavaScript in Dynamics 365

Dynamics 365 forms often contain multiple tabs that organize information into logical sections. In many business scenarios, certain tabs should only be visible when specific conditions are met.

Using JavaScript, you can dynamically hide or show tabs based on field values, user roles, record status, or other business requirements.

Why Hide or Show Tabs?

Hide a Tab

Use the setVisible(false) method to hide a tab. 

function hideTab(executionContext)
{
    var formContext =
        executionContext.getFormContext();

    formContext.ui.tabs
        .get("tab_details")
        .setVisible(false);
}

Show a Tab

Use setVisible(true) to display the tab again. 

function showTab(executionContext)
{
    var formContext =
        executionContext.getFormContext();

    formContext.ui.tabs
        .get("tab_details")
        .setVisible(true);
}

Show or Hide Based on a Field Value 

function toggleTab(executionContext)
{
    var formContext =
        executionContext.getFormContext();

    var category =
        formContext.getAttribute("new_category")
                   .getValue();

    if(category === 100000001)
    {
        formContext.ui.tabs
            .get("tab_details")
            .setVisible(true);
    }
    else
    {
        formContext.ui.tabs
            .get("tab_details")
            .setVisible(false);
    }
}
Important: Register the function on Form Load and On Change events to ensure tabs appear or disappear automatically when field values change.

Implementation Steps

  1. Create a JavaScript Web Resource.
  2. Add the script to the form.
  3. Register the function on Form Load.
  4. Register the function on field On Change event.
  5. Pass execution context.
  6. Publish customizations.
  7. Test tab visibility behavior.

Common Use Cases

Best Practices

Key Takeaways