Back to Basics # 48: ShowAndHide 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,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);

As shown in the below figure

Step 5:

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

formContext.ui.headerSection.setBodyVisible(true);

As shown in the below figure

Step 6:

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

formContext.ui.headerSection.setTabNavigatorVisible(true);

As shown in the below code

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);

    }

}

As shown in the below figure

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
   1. ex : To Hide header command bar use the following code formContext.ui.headerSection.setCommandBarVisible(false);

• Contact Form on load event should be registered as an event handler after creation / updation of the new/existing Webresource of type js.
• 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.
• 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.