Dynamics Form - Display Options


We can control Header and Footer Visibility using Client API formcontext.UI

formContext.UI Client API provides required functions to control visibility of Header and Footer to get more screen space for Form Data.

  • Hiding Command bar

formContext.ui.headerSection.setCommandBarVisible

  • Hiding form header

formContext.ui.headerSection.setBodyVisible

  • Hiding the tab navigator

formContext.ui.headerSection.setTabNavigatorVisible

  • Hiding the form footer

formContext.ui.footerSection.setVisible

  • Hiding the business process flow

formContext.ui.process.setVisible



Sample Script - Maximize Specific Tab

We can use these functions on tab state change event to maximize the specific tab to full screen. I have created Tab with iframe and On Load of the form I have set the Source Url for iframe.

And then On tab state change I have called ExpandTab function to hide or show header and footer.

In the screenshot you can see the Tab got maximum screen space after hiding Command Bar and Body in Header Section and also the footer section.

Steps:

  1. Include the below JavaScript functions in your web resource file and replace the values of url and tab as required.

var Functions = Functions || {};

Functions.OnLoad = function (executionContext) {

var formContext = executionContext.getFormContext();

var url="https://www.xrmtoolbox.com/";

formContext.getControl("IFRAME_WebFrame").setSrc(url);

}

Functions.ExpandTab = function (executionContext) {

"use strict";

var formContext = executionContext.getFormContext();

var tab = "TabWeb";

var tabCtrl = formContext.ui.tabs.get(tab);

var tabName = null;

if (tabCtrl !== null && tabCtrl.getDisplayState() === "expanded") {

tabName = tab;

}

if (tabName !== null) {

formContext.ui.headerSection.setCommandBarVisible(false);

formContext.ui.headerSection.setBodyVisible(false);

formContext.ui.footerSection.setVisible(false);

formContext.ui.process.setVisible(false);

formContext.ui.tabs.get(tabName).setContentType("expandAvailableSpace");

}

else {

formContext.ui.headerSection.setCommandBarVisible(true);

formContext.ui.headerSection.setBodyVisible(true);

formContext.ui.footerSection.setVisible(true);

formContext.ui.process.setVisible(true);

}

}

  1. Now add a Form OnLoad event to execute Functions.OnLoad function and pass execution context as parameter.

  2. Add a Tab State Change event to execute Functions.ExpandTab and pass execution context as parameter.