{"id":27402,"date":"2021-03-18T13:11:31","date_gmt":"2021-03-18T13:11:31","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=27402"},"modified":"2021-09-03T04:18:00","modified_gmt":"2021-09-03T04:18:00","slug":"managing-header-and-footer-of-the-form-in-dynamics-365-using-client-api","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2021\/03\/managing-header-and-footer-of-the-form-in-dynamics-365-using-client-api\/","title":{"rendered":"Managing header and footer of the form in Dynamics 365 using Client API"},"content":{"rendered":"

Introduction<\/h2>\n

In this blog, we will see how to show\/hide header and footer parts using Client API.
\nAs we know, form is divided in 3 parts i.e. Header, Body and Footer.<\/p>\n

Let\u2019s discuss how to show\/hide header and footer section using script.<\/p>\n

Header Section:<\/h2>\n

The header is divided into 3 elements<\/p>\n

1. Header Command Bar.
\n2. Header Body.
\n3. Header Tab Navigator.<\/p>\n

\"Managing<\/a><\/p>\n

To show \/ hide one of the above, we can use the below 3 methods:<\/strong><\/p>\n

setCommandBarVisible<\/strong><\/p>\n

syntax: formContext.ui.headerSection.setCommandBarVisible(bool);
\nHere, bool is the parameter, specify true to show the command bar; false to hide the command bar.
\nLet\u2019s show\/hide Command Bar using below client API:<\/p>\n

Show: formContext.ui.headerSection.setCommandBarVisible(true);<\/strong>
\nHide: formContext.ui.headerSection.setCommandBarVisible(false);<\/strong><\/p>\n

Example:<\/strong> Use below typescript code to get and set Form Command Bar on load of form.
\nBut, we need Javascript code to upload it into CRM. You need to compile this code into Javascript, so to compile this code, you can open Visual Studio Code<\/a> and run command \u201ctsc filename.ts\u201d. You can see how to compile typescript file at this link<\/a>. If you face any issue relate to Xrm while compiling this code, run \u201cnpm install –save-dev @types\/xrm\u201d command before compiling.<\/p>\n

<Code><\/strong>
\nnamespace CRM {
\n\/\/Namespace
\nexport namespace Entity {
\n\/\/Class
\nexport class Lib {
\n\/\/Function
\npublic onLoad(executionContext: Xrm.Events.EventContext) {
\n\/\/declaring local variable
\nlet functionName = “onLoad”;
\nlet formContext: Xrm.FormContext = null;
\ntry {
\n\/\/Get Form Context
\nformContext = executionContext.getFormContext();
\n\/\/returns true or false
\nlet commandBar = formContext.ui.headerSection.getCommandBarVisible();
\n\/\/To hide Command Bar
\nif (commandBar == true) {
\nformContext.ui.headerSection.setCommandBarVisible(false);
\n} else {
\n\/\/To show Command Bar
\nformContext.ui.headerSection.setCommandBarVisible(false);
\n}
\n}
\ncatch (ex) {
\nXrm.Navigation.openAlertDialog({ confirmButtonLabel: “Ok”, text: ex.message, title: functionName });
\n}
\n}
\n}
\n}
\n}
\n\/\/initializing object
\nlet _crmLib = new CRM.Entity.Lib();
\n<\/Code><\/strong><\/p>\n

Output:<\/strong> You can see the below screenshot, the ribbon buttons are hidden.<\/p>\n

\"Managing<\/a><\/p>\n

setBodyVisible<\/strong><\/p>\n

syntax: formContext.ui.headerSection.setBodyVisible(bool);<\/p>\n

Here, bool is the parameter, specify true to show the body; false to hide the body.<\/p>\n

Let\u2019s show\/hide Header body using the below client API:<\/p>\n

Show: formContext.ui.headerSection.setBodyVisible(true);<\/strong>
\nHide: formContext.ui.headerSection.setBodyVisible(false);<\/strong><\/p>\n

Example: Use below typescript code to get and set Form Header Body on load of form. But, we need Javascript code to upload it into CRM. You need to compile this code into Javascript, so to compile this code you can open Visual Studio Code<\/a> and run command \u201ctsc filename.ts\u201d. You can see how to compile typescript file at this link<\/a>. If you face any issue relate to Xrm while compiling this code, run \u201cnpm install –save-dev @types\/xrm\u201d command before compiling.<\/p>\n

<Code><\/strong>
\nnamespace CRM {
\n\/\/Namespace
\nexport namespace Entity {
\n\/\/Class
\nexport class Lib {
\n\/\/Function
\npublic onLoad(executionContext: Xrm.Events.EventContext) {
\n\/\/declaring local variable
\nlet functionName = “onLoad”;
\nlet formContext: Xrm.FormContext = null;
\ntry {
\n\/\/Get Form Context
\nformContext = executionContext.getFormContext();
\n\/\/returns true or false
\nlet headerBody = formContext.ui.headerSection.getBodyVisible();
\n\/\/To hide header body
\nif (headerBody == true) {
\nformContext.ui.headerSection.setBodyVisible(false);
\n}else{
\n\/\/To show header body
\nformContext.ui.headerSection.setBodyVisible(true);
\n}
\n}
\ncatch (ex) {
\nXrm.Navigation.openAlertDialog({ confirmButtonLabel: “Ok”, text: ex.message, title: functionName });
\n}
\n}
\n}
\n}
\n}
\n\/\/initializing object
\nlet _crmLib = new CRM.Entity.Lib();
\n<\/Code><\/strong><\/p>\n

Output:<\/strong><\/p>\n

You can see Head body is hidden in the below screenshot.<\/p>\n

\"Managing<\/a><\/p>\n

setTabNavigatorVisible<\/strong><\/p>\n

syntax: formContext.ui.headerSection.setTabNavigatorVisible(bool);
\nHere, bool is parameter, specify true to show the tab navigator; false to hide the tab navigator.
\nLet\u2019s show\/hide Tab Navigator using below client API:<\/p>\n

Show: formContext.ui.headerSection.setTabNavigatorVisible(true);<\/strong>
\nHide: formContext.ui.headerSection.setTabNavigatorVisible(false);<\/strong><\/p>\n

Example:<\/strong> Use below typescript code to get and set Form Tab Navigator on load of form.
\nBut, we need Javascript code to upload it into CRM. You need to compile this code into Javascript, so to compile this code you can open Visual Studio Code<\/a> and run command \u201ctsc filename.ts\u201d. You can see how to compile typescript file at this link<\/a>. If you face any issue relate to Xrm while compiling this code, run \u201cnpm install –save-dev @types\/xrm\u201d command before compiling.<\/p>\n

<Code><\/strong>
\nnamespace CRM {
\n\/\/Namespace
\nexport namespace Entity {
\n\/\/Class
\nexport class Lib {
\n\/\/Function
\npublic onLoad(executionContext: Xrm.Events.EventContext) {
\n\/\/declaring local variable
\nlet functionName = “onLoad”;
\nlet formContext: Xrm.FormContext = null;
\ntry {
\n\/\/Get Form Context
\nformContext = executionContext.getFormContext();
\n\/\/returns true or false
\nlet tabNavigator = formContext.ui.headerSection.getTabNavigatorVisible();
\n\/\/To hide Tab Navigator
\nif (tabNavigator == true) {
\nformContext.ui.headerSection.setTabNavigatorVisible(false);
\n} else {
\n\/\/To show Tab Navigator
\nformContext.ui.headerSection.setTabNavigatorVisible(true);
\n}
\n}
\ncatch (ex) {
\nXrm.Navigation.openAlertDialog({ confirmButtonLabel: “Ok”, text: ex.message, title: functionName });
\n}
\n}
\n}
\n}
\n}
\n\/\/initializing object
\nlet _crmLib = new CRM.Entity.Lib();<\/p>\n

<\/Code><\/strong><\/p>\n

Output:<\/strong><\/p>\n

You can see in the below screenshot navigation bar is hidden.<\/p>\n

\"manage<\/a><\/p>\n

Footer Section:<\/strong><\/p>\n

setVisible<\/strong><\/p>\n

syntax: formContextformContext.ui.footerSection.setVisible(bool);<\/p>\n

Here, bool is the parameter, specify true to show the footer section; false to hide the footer section.<\/p>\n

Let\u2019s show\/hide Footer Section using below client API:<\/p>\n

Show: formContext.ui.footerSection.setVisible(true);<\/strong>
\nHide: formContext.ui.footerSection.setVisible(false);<\/strong><\/p>\n

Example: Use below typescript code to get and set Form Footer on load of form
\nBut, we need Javascript code to upload it into CRM. You need to compile this code into javascript, so to compile this code, you can open Visual Studio Code<\/a> and run the command \u201ctsc filename.ts\u201d. You can see how to compile typescript file at this link<\/a>. If you face any issue relate to Xrm while compiling this code, run \u201cnpm install –save-dev @types\/xrm\u201d command before compiling.<\/p>\n

<Code><\/strong>
\nnamespace CRM {
\n\/\/Namespace
\nexport namespace Entity {
\n\/\/Class
\nexport class Lib {
\n\/\/Function
\npublic onLoad(executionContext: Xrm.Events.EventContext) {
\n\/\/declaring local variable
\nlet functionName = “onLoad”;
\nlet formContext: Xrm.FormContext = null;
\ntry {
\n\/\/Get Form Context
\nformContext = executionContext.getFormContext();
\n\/\/returns true or false
\nlet footer = formContext.ui.footerSection.getVisible();
\n\/\/To hide Footer
\nif (footer == true) {
\nformContext.ui.footerSection.setVisible(false);
\n} else {
\n\/\/To show Footer
\nformContext.ui.footerSection.setVisible(true);
\n}
\n}
\ncatch (ex) {
\nXrm.Navigation.openAlertDialog({ confirmButtonLabel: “Ok”, text: ex.message, title: functionName });
\n}
\n}
\n}
\n}
\n}
\n\/\/initializing object
\nlet _crmLib = new CRM.Entity.Lib();
\n<\/Code><\/strong><\/p>\n

Output:<\/strong><\/p>\n

You can see the below screenshot, the footer section is hidden like Status Column has disappeared.<\/p>\n

\"Managing<\/a><\/p>\n

Note:<\/strong>
\n– You need to compile the Typescript code and convert it into JavaScript and then upload that JS file in the CRM web resource.
\n– Above methods is only supported in Unified Interface.<\/p>\n

Conclusion<\/h2>\n

Using Client API, we can show\/hide header and footer of the FORM in Dynamics 365 CE.<\/p>\n

\"click2clone\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction In this blog, we will see how to show\/hide header and footer parts using Client API. As we know, form is divided in 3 parts i.e. Header, Body and Footer. Let\u2019s discuss how to show\/hide header and footer section using script. Header Section: The header is divided into 3 elements 1. Header Command Bar.\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[16,19],"tags":[1979],"class_list":["post-27402","post","type-post","status-publish","format-standard","hentry","category-dynamics-365","category-dynamics-crm","tag-client-api"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/27402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=27402"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/27402\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=27402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=27402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=27402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}