Show/Hide Header and Footer elements in JavaScript

In this blog post, I will talk about the possibility to show/hide header and footer elements of the form using Client API.

Let's start with the header which is divided into three parts : Command bar, Body, and Tab navigator. 

In order to dynamically control the visibility of each part, you can call the following functions:

- Header command bar visibility

  Hide : formContext.ui.headerSection.setCommandBarVisible(false);

  Show  : formContext.ui.headerSection.setCommandBarVisible(true);

- Header body visibility

  Hide : formContext.ui.headerSection.setBodyVisible(false);

  Show : formContext.ui.headerSection.setBodyVisible(true);

- Header tab navigator visibility

  Hide : formContext.ui.headerSection.setTabNavigatorVisible(false);

  Show : formContext.ui.headerSection.setTabNavigatorVisible(true);

As for the footer, it is composed of one element and its visibility can be managed by calling the following functions:

  Hide : formContext.ui.footerSection.setVisible(false);

  Show : formContext.ui.footerSection.setVisible(true);

Bonus Tip:

You can return the visibility of each element by calling the functions getCommandBarVisible(), getBodyVisible(), getTabNavigatorVisible(), and getVisible()

Hope This Helps!