Show And Hide Form Header With Webresource In Dynamics CRM

Introduction

In Dynamics 365 CRM, at times we must show or hide form header, header command bar, header body, and header tab navigator for a selected entity. This can be achieved by using client API Reference. As an example, contact record was taken to show this functionality.

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, open any contact record and understand Header Command Bar, Header Body, Tab Navigator as shown in the below figure

Step 4

After Step 3, write the below code for show header Command bar

formContext.ui.headerSection.setCommandBarVisible(true);

Step 5

After Step 4, write the below code for show header body

formContext.ui.headerSection.setBodyVisible(true);

Step 6

After Step 5, now to show header tab navigator use the below code

formContext.ui.headerSection.setTabNavigatorVisible(true);

Step 7

After Step 6, collectively use the below code on the onload function to show header command bar, header body, tab navigator

ContosoVaccination.Scripts.ContactForm = {
    handleOnLoad: function(executionContext) {
        console.log('on load - contact form');
        hideHeaderCommandBar(executionContext);
        hideHeaderBody(executionContext);
        hideTabNavigator(executionContext);
    },
    __namespace: true
}

function hideHeaderCommandBar(executionContext) {
    let formContext = executionContext.getFormContext();
    if (formContext !== null && formContext != 'undefined') {
        formContext.ui.headerSection.setCommandBarVisible(true);
    }
}

function hideHeaderBody(executionContext) {
    let formContext = executionContext.getFormContext();
    if (formContext !== null && formContext != 'undefined') {
        formContext.ui.headerSection.setBodyVisible(true);
    }
}

function hideTabNavigator(executionContext) {
    let formContext = executionContext.getFormContext();
    if (formContext !== null && formContext != 'undefined') {
        formContext.ui.headerSection.setTabNavigatorVisible(true);
    }
}

Step 8

After Step 7, now save and publish the Webresource and open a contact record and observe as shown in the below figure

Note

1. Make sure to publish all customizations and upload JavaScript (js) file.
2. To hide header command bar, header body, header tab navigator then to the respective method pass false

ex : To Hide header command bar use the following code

formContext.ui.headerSection.setCommandBarVisible(false);

1. Contact Form on load event should be registered as an event handler after creation/updation of the new/existing Webresource of type js.
2. To show as an example, I have used same function names for both showing and hiding. In short to show you must pass true and to hide you must pass false.
3. Microsoft documentation found here.

Conclusion

In this way, one can easily show and hide header related components of crm form with Webresource using Client API Reference using custom code with web resource in Dynamics 365 CRM.