Power Apps Application Header

In this video, we will build a basic component example you'll use in almost all your Power Apps apps: an application header component. You want to have a familiar and predictable look and feel throughout your application. An application header goes a long way towards this. Perhaps your user uses many Power Apps applications. What’s the name of the application they are currently in? Why not display the organization’s logo and branding at here? You may want to show who the system recognizes the user as in the upper right corner like most other applications and web sites they are used to seeing. More than likely, your application has more than one screen. You should let the user know what screen they are on and give an indication on what they should be doing there. Example: “Customer Edit Screen”.

⬇️ Get access to all of my FREE courses ⬇️

🚩The code for the color theme has been posted as a pinned comment!

Darren Neese, Microsoft MVP, PowerApps Tutorial

TIMESTAMPS =======================================
0:00 - Intro
2:49 - Create the new component
3:49 - Create first property
5:35 - Adding the component to your application screen
8:48 - Passing in theme colors
11:10 - Adding in a purple theme to match the logo
14:30 - Adding a screen heading bar
18:30 - Adding a back button
22:56 - Adding corresponding code in App.OnStart

#DarrenNeese
#PowerAppsTutorial
#LowCode

[PowerAppsTutorial]

CODE
Set(
gblTheme,
{
Name: "Power Apps Purple",
PrimaryDark: ColorValue("#572B57"),
SecondaryDark: ColorValue("#732773"),
BodyBackground:
PrimaryLight: ColorValue("#e5e5e5"),
SecondaryLight: ColorValue("#62E61C"),
PrimaryDarkForecolor:
SecondaryDarkForecolor: ColorValue("#EAEEF2"),
BodyBackgroundForecolor: ColorValue("#572B57"),
PrimaryLightForecolor: ColorValue("#572B57"),
SecondaryLightForecolor: ColorValue("#572B57"),
DefaultBorderRadius: 10
}
);

[andrewhess]

Awesome work Darren! Love your videos!

[krishnaaveersinghhada]

Hi I have a question, I created a Microsoft list and integrated it with Power app to help sales team raise ticket and that will be published in SharePoint list (created using List app), I am able to connect data source, but when I am clicking on Submit in the app, the data is not updating in the SharePoint.. Could u please assist? Btw, thanks for amazing video again

[MrJethro]

best 25:17 mins of my life. Thanks Darren!

[PPIMRPA]

Hi Darren, I created component twice, thinking I had made a mistake the first time. But each time, the logo does not show up at all with the Purple Theme. Not sure what the issue is.

[wendymeyer]

Another fantastic tutorial - thank you very much!
May I ask though, why we aren't simply applying the global values into the compHeader component itself - so that, for instance, any changes to the App Heading content & color and the logo update on all screens automatically, and if we add a new screen and insert a new compHeader it automatically contains all the right properties for the app? I understand that this is a template, but am not quite sure why you wouldn't just go in once and adjust the Component values as opposed to going into each screen to update the values there?

[DuncanCunningham]

thanks.. you said that it means a lot to you.. so.. you got it

[ThePassiontea]

How do you remove the back button when the header is in the home screen? I tried to delete the back icon in screen mode but they are not allowing me. If i delete in component mode, all my other screen will not have the back function.

[zanguinetti]

Hello Darren, thanks for your video! I have a question, is there another way to sort the objects 'cause with your shortcut (control + bracket) is impossible for me, the object doesnt' move.

[nicolneal]

Cannot thank you enough for your instruction! Thank you so much!