Hiding Form Header and Footer Through JavaScript in Dynamics 365 Power Apps

Leave a comment

In this post, we will look at how to hide and show various elements of a Dynamics 365 model-driven Power App form, including the header and footer, using JavaScript.

First, let’s take a look at the elements of a form based on the formContext. The formContext provides us with a headerSection and a footerSection. The header is then divided into 3 parts, header command bar, header body, and header tab navigator:

Let’s hide and show each one using JavaScript.

Header Command Bar

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

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

Header Body

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

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

Header Tab Navigator

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

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

Footer

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

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

Of course, you can hide all of the above. Diana has a good use case for this where she turns forms into dialogs here.

THANKS FOR READING. BEFORE YOU LEAVE, I NEED YOUR HELP.
 

I AM SPENDING MORE TIME THESE DAYS CREATING YOUTUBE VIDEOS TO HELP PEOPLE LEARN THE MICROSOFT POWER PLATFORM.

IF YOU WOULD LIKE TO SEE HOW I BUILD APPS, OR FIND SOMETHING USEFUL READING MY BLOG, I WOULD REALLY APPRECIATE YOU SUBSCRIBING TO MY YOUTUBE CHANNEL.

THANK YOU, AND LET'S KEEP LEARNING TOGETHER.

CARL

https://www.youtube.com/carldesouza

 

ABOUT CARL DE SOUZA

Carl de Souza is a developer and architect focusing on Microsoft Dynamics 365, Power BI, Azure, and AI.

carldesouza.comLinkedIn Twitter | YouTube

 

Leave a Reply

Your email address will not be published. Required fields are marked *