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:
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);
}
}
Now add a Form OnLoad event to execute Functions.OnLoad function and pass execution context as parameter.
Add a Tab State Change event to execute Functions.ExpandTab and pass execution context as parameter.