Show And Hide Tabs With Webresource In Dynamics CRM

Introduction

In Dynamics 365 CRM, at times we must show respective tabs based on some values of controls that were kept on form. Tabs can be shown or hidden based on the form context object. As an example, in contact form, if at all vaccination was completed then only Vaccination details tab will be shown to the user otherwise it will be hidden.

Step 1

Login to the required environment and select required solution [Contact Customizations Solution in this case] as shown in the below figure.

Step 2

After Step 1, select contact web resource in solution and click on Edit as shown in the below figure.

Step 3

After Step 2, in contact web resource javascript file write the code to show/hide a tab by taking the tab name from the form and by using the following syntax

formContext.ui.tabs.get(arg);
As
formContext.ui.tabs.get("tab_3");

Step 4

After Step 3, under write a function to get the two options value of vaccination completed and then get the object details of the tab by using Step 3 and if vaccination completed (Yes) then show tab else hide the tab by using the following code as shown below

function vaccinationcompletedchangelogic(executionContext) {
    let formContext = executionContext.getFormContext();
    if (formContext !== null && formContext != 'undefined') {
        // Yes-1 , No-0
        let vaccinationcompleted = formContext.getAttribute("cr5bc_vaccinationcompleted").getValue();
        let tabObj = formContext.ui.tabs.get("tab_3");
        if (vaccinationcompleted == 1) {
            tabObj.setVisible(true);
        } else {
            tabObj.setVisible(false);
        }
    }
}

Step 5

After Step 4, call this function from on change event of Vaccination completed two choices code by registering below event method with the below code

handleOnVaccinationCompletedChange: function(executionContext) {
    console.log('on Vaccination Completed change - contact form');
    vaccinationcompletedchangelogic(executionContext);
}

Step 6

After Step 5, now the complete code looks like this

if (typeof(ContosoVaccination) == "undefined") {
    var ContosoVaccination = {
        __namespace: true
    };
}
if (typeof(ContosoVaccination.Scripts) == "undefined") {
    ContosoVaccination.Scripts = {
        __namespace: true
    };
}
ContosoVaccination.Scripts.ContactForm = {
    handleOnLoad: function(executionContext) {
        console.log('on load - contact form');
        vaccinationcompletedchangelogic(executionContext);
        // jobtitlemandatorylogic(executionContext);
    },
    handleOnTitleChange: function(executionContext) {
        console.log('on title change - contact form');
        //jobtitlemandatorylogic(executionContext);
    },
    handleOnVaccinationCompletedChange: function(executionContext) {
        console.log('on Vaccination Completed change - contact form');
        vaccinationcompletedchangelogic(executionContext);
    },
    __namespace: true
}

function vaccinationcompletedchangelogic(executionContext) {
    let formContext = executionContext.getFormContext();
    if (formContext !== null && formContext != 'undefined') {
        // Yes-1 , No-0
        let vaccinationcompleted = formContext.getAttribute("cr5bc_vaccinationcompleted").getValue();
        let tabObj = formContext.ui.tabs.get("tab_3");
        if (vaccinationcompleted == 1) {
            tabObj.setVisible(true);
        } else {
            tabObj.setVisible(false);
        }
    }
}

function jobtitlemandatorylogic(executionContext) {
    var notificationTime = 3000; // 3 seconds in milliseconds -
    var formContext = executionContext.getFormContext();
    if (formContext !== null && formContext != 'undefined') {
        var jobtitle = formContext.getAttribute("jobtitle").getValue();
        var jobtitlecontrol = formContext.getControl("jobtitle");
        console.log('job title-' + jobtitle);
        if (jobtitle == null) {
            formContext.ui.setFormNotification("Job title Mandatory- Error notification.", "ERROR", "JobTitleMandateNotification");
            jobtitlecontrol.setNotification("Job title Mandatory- Error notification.", "jobtitlecontrolnotification");
            Xrm.Utility.showProgressIndicator("Validation is going on ...");
            setTimeout(function() {
                Xrm.Utility.closeProgressIndicator();
            }, notificationTime);
        } else {
            jobtitlecontrol.clearNotification("jobtitlecontrolnotification");
        }
    }
}

Step 7

After Step 6, now save and publish the Webresource and open a contact record and observe when vaccination completed custom field was selected to Yes then vaccination details tab will be visible to the user else it will be hidden as shown in the below figure

Note

1. Make sure to publish all customizations and upload JavaScript (js) file.
2. Carefully Tab name should be copied and respective null checks to be taken care as I have more concentrated on the logic related to this article have not used other null checks, for production ready code these things to be taken care.
3. Call the method which was mentioned in Step 4, on load as well, so that during form load if at all vaccination completed was selected as no, then Vaccination details tab will be hidden.
4. Make sure to hide Vaccination details tab at form level by changing its properties.
5. Microsoft documentation found here

Conclusion

In this way, one can easily show or hide tabs based on attribute values that are present in web resource Dynamics 365 CRM.