We will learn to hide & show form header using JavaScript in Dynamics 365. Before we start, make sure to subscribe to CRM Crate so that you stay up-to-date in field of Dynamics 365.

What is a form header in Dynamics 365?

The header section in Microsoft Dynamics 365 is been displayed at the upper right corner of main form screen. It displays information that a user may want to see consistently when viewing a form and scrolling which usually includes critical fields such as owner, name etc.

Why do we need to dynamically hide / show headers?

Consider a business scenario where we need to hide and show the header section as per the input provided by the end-user. We can achieve this requirement with help of the below given procedure.

Using setBodyVisible (Client API reference) to hide / show the header –

We will use the setBodyVisible (Client API reference) to dynamically change the visibility of form header section.

formContext.ui.headerSection.setBodyVisible(bool);

Sets the header’s body visibility.
Note: – This method is supported only on Unified Interface.

JavaScript snippet code –

Below is the JavaScript code which is triggered during the OnChange event of form’s field “Hide Header?”.

//CRM Crate - JavaScript Snippet
function CallMethod (executionContext) {

//Reading Attribute Value From The Form.
var formContext = executionContext.getFormContext();
var Input = formContext.getAttribute("cc_input").getValue();
if(Input == true)
{
formContext.ui.headerSection.setBodyVisible(false);
}
else if(Input == false)
{
formContext.ui.headerSection.setBodyVisible(true);
}
}

Validate the output in Dynamics 365 form –

Once deployed, verify if you are able to dynamically hide / show the header based on the given input as shown below.

• LinkedIn
• Facebook
• Telegram