Show or Hide Tab Based on Field Value Using JavaScript in Dynamics 365 CRM

JavaScript is an essential part of modern web development. It is used to create interactive and dynamic websites, allowing for better user engagement and interaction. It runs on the user’s browser rather than the server, allowing for faster loading speeds and content manipulation without requiring a page to be reloaded.

REQUIREMENT:

In this case the requirement is to show and hide the “Fulfillment” tab in the Order form based on the condition that if the field Status is in Active, then hide the Fulfillment tab or else if the Status field is in Fulfilled then show the Fulfillment tab using the JavaScript.

SOLUTION:

Step 1: We have to get the Logical name of the field “Status” and name of “Fulfillment” Tab from the solution.

Fig 1.

Step 2: Write the JavaScript Code

JavaScript Code:

// function to show or hide tabs based on Status
function showHideTabsBasedonStatus (executionContext){
var formContext = executionContext.getFormContext();

// Get the Status type field value
var Status = formContext.getAttribute("statecode").getValue();

//Get the tab controls
var FulfillmentTab = formContext.ui.tabs.get("tab_4");

// Show or hide tabs based on Status type
if (Status == 0) { // Active
    FulfillmentTab.setVisible (false);

  }  else if (Status == 3) { //Fulfilled
    FulfillmentTab.setVisible (true);

  } else {
    // If the Status type is not set or doesn't match any condition, hide the Fulfillment tab
    FulfillmentTab.setVisible (false);

  }

  }