Modern HEADER Control in Power Apps: A Beginner's Guide

In this Power Apps Tutorial video. we'll take a first look at the all-new Header Control for Canvas Power Apps. This modern header control is a new control that streamlines the process of designing a header experience for your Canvas PowerApps. It effortlessly adapts to modern theming, and supports responsive design as it dynamically adjusts to the size of the parent container or app. We will take a look at this control step by step in this Power Apps beginners' tutorial.

Here's what you can expect in this tutorial:

Header Control Overview: I'll start by giving you a comprehensive overview of the modern Header Control and we will explore all of its key properties.

Modern Theme: Learn how this control seamlessly responds to themes and adjusts its appearance based on the chosen theme colors.

Responsive Header Control: Discover how the Header Control smartly adapts to the size of the parent container or your app, ensuring a seamless user experience.

Key Features: Explore the Header Control's ability to support a logo, a page title, and the user's profile picture, while offering a range of unique style options to customize your header look.

Header modern control in Power Apps

⬇️ Download sample Power App showcased in the video:
Exclusive for Channel Members (Silver 🥈 & Gold 🥇 Club)
Find the download link in the Community Tab for Members.

Power Apps Modern Controls and Themes

#PowerApps #PowerPlatform #responsivedesign

Table of Contents:
00:00 - Introduction to the new Modern Header Control for Power Apps
00:34 - Get started with Modern Header Control in Power Apps
01:36 - Power Apps Modern Header Control Key Properties
04:37 - Responsive Header Control in Power Apps
05:32 - Dynamic Size for Header control
07:10 - Header control User Profile Properties in PowerApps
08:17 - Is Power Apps header control a Component?
08:56 - Base Palette Color in Power Apps
09:47 - Add new header control to existing Canvas Power App
11:45 - How to add actionable buttons and icons to Modern Header control
14:16 - READY to subscribe to Reza Dorrani’s channel

🤝 Let’s connect on social:

[akshaynm]

Hello Reza, Indeed the modern controls are evolving but these are your efforts that you are creating videos to show the hidden gems from it. Thanks a lot as always..!!😊🙏

[oluwatobipaul]

The modern controls will save a lot of effort. Thank you Reza

[gunasekaran]

Reza, one of the best professional in this industry... You are great man... forever

[AssassinUK]

Great Video Reza. I'm just surprised this took so long to come out. I have this as a library dynamic component I created from scratch like 2yrs ago! I can update the library component and all my apps get the update. I do like your font size changing base on screen size, I like that a lot.

[necdetsaritas]

Great! Enjoying by learning. Thank you so much Reza

[datadragyn]

Thank you for creating this video so I can see below the surface 😊

[dougydoe]

Looks like this Modern Header Control is really going to save us lots of time plus, the responsive nature will enhance responsive designs greatly. Can't wait to start using them. Great video and thanks or sharing.😄

[nickfaulkner]

Thank you Reza for the video. Hopefully more and more controls become available in the Modern Controls.

[RaniSingh-nlrj]

Nice content as always . For the header control is it possible to align the text in Center?

[bobbyw]

Thanks for the video! So do you recommend using this modern header control or component headers? I can technically copy and paste headers to other screens.

[dhruv]

First i would thank you for so detailed videos.

I created one multi-step form and used this header.
Can I change the height of the Header, and also, is there any way I can add more text than the title?

[mawlimaw]

Thanks Reza for another very helpful video. Thanks to you and others, I spend lesser time building PowerApps.
Question: Can I use the modern header control in a component? I would like to merge or include it in my navigation menu component.

[JohnHall]

Hmmm...I hadn't even noticed this yet. However, it does appear that it's always a header. Versus a sidebar, or a footer. Of course, while I went to the trouble of designing a control years ago that could be placed on any side of the screen as a "control bar", I only used one that wasn't at the top 2-3 times in 5 years.

[AcucsThamarai]

Hi Reza thanks for the videos for me its the modern option is not showing can i know what is the reason ?

[glennbullion]

Hey Reza, I have a nagging issue with the Modern Header. Wondering if you've seen it. I did what you did in the video, as I wanted to add an "action" icon to the right of the header. Followed your instructions, added the icon, gave the container a fill, etc. But you can actually "see" the split between the header and the icon. A very tiny white border, for lack of a better description. Have you seen that in playing around?

[avskadoo]

Is there a way to add Exit() in Any where Modern Header control? or any other recemented way to add close button?

[jreyesvega]

I can not see the base pellete color, can you share the version of powerapps that you are using thanks

[SmartLearningAI]

I wish they would also improve the copilot control: 1) I tried it but the font is very small for me 2) the control is too rigid and not very customizable but does work.

[bretttallada]

how would you place an icon before the profile picture? as in overlay icon, button, tab galleries between the header title and profile pic image?

[shashank]

For some reason when I view the orientation in app, the length is not scaling to full
Can you tell me if I am missing anything?