Hjem > Blog > The powerful Power App design tip no one has told you about
The powerful Power App design tip no one has told you about
AlfaPeople DK |
apr 16, 2021

The powerful Power App design tip no one has told you about

If you have been working with Power Apps for more than a minute, you probably already know that working with the colors and styling takes some time. After having created my first number of apps I realized that most of my time was spend on color changes, font changes, and the Power App’s design in general.

I started to look for other ways to do it and found some pretty cool solutions. In the following sections, I will take you through the 4 stages of solutions, I have used along my learning path with Power Apps.

(The last one is without a doubt the most powerful Power Apps design tip no one has told you… before now.)

Stage 1: The “I’m new to Power Apps”-solution to Power App design

When you’re new to Power Apps, you will start by creating your first ever Canvas-type app. When you’ve added a list of components, you will usually want to change the styling of them, so they are more in line with the look and feel of your business.

Let’s say you want to set the background color and the font color of a number of the components – e.g. a button. Then you would have to select each button and change the “Fill” and “Color” properties to make sure you have the relevant values.

Here’s what it would look like:

Now imagine if you have created 50 components and want to make changes to 4 design properties. Then you would have to make 200 different changes in total.

Just for reference, the latest Power App we created for a customer had more than 500 components…

Generally, this is a good way to get started and the way most people does it when they build their first apps – but it’s definitely also the least effective way to do you Power App design. So I moved on to the next solution.

Stage 2: The “I’m starting to get the hang of this” solution

When I had manually configured quite a few components and their design properties, I figured out that I could copy and paste the components that I had already configured with the relevant design.

So, if I had to add 5 different buttons with the same design to my app, I could create one button with the intended design and then copy and paste it until I had the right amount of buttons.

But what if I want to change my design in the future?

That’s the weakness of this solution. Because then I would have to either change all the controls manually again, or change one into the new design and then copy and paste everything again. And I would also have to redo any other configuration, e.g. navigation or logic related to each button.

Overall, this is absolutely a better solution than the first one, but there’s still room for improvement. So, let’s have a look at the next solution.

Stage 3: The “I figured it out” solution

With this solution we still have to do some copy and pasting – but in a more structured way. That’s because we will have a structure where all the components we copy and paste are referencing back to components of the same type from a “Theming” screen.

To get stated with this solution we have to start by creating to screens in our Power App: A “Theming” screen and a “Components” screen.

The “Theming” screen

On this screen we will add all the relevant components and make them have exactly the design and theme we want. Allow me to illustrate:

The “Components” screen

On this screen, we will add the same components that is on our “Theming” screen – but instead of configuring all the design properties of the component with hard-coded values, we will make them reference back to our “Theming” screen.

So for instance, a button’s “Fill” property should be: ThemingScreen_Button.Fill.

Whenever we have to add a new components, we should go to our “Components” screen, copy that particular component and paste it where we want to use it.

If we want to make changes to the component at some point, all we would have to do is go to the “Theming” screen and make those changes. From there it will be reflected in all the copied components.

Stage 4: The “Someone knows better!” solution – the powerful Power App design tip

I came across an article mentioning a “Power Apps Branding Template” which made me curious. So, I searched for it and found out that Sancho Harker and Michael Wright had both created branding templates for Canvas Apps.

These templates have been created by extracting .msapp files and modifying all the default properties that is used when creating new components.

So when we use this template and create new components – instead of having hard-coded values, they have variables. That means we can simply set the variables to the design we want, and all components will follow our Power App design – both the one already created and new. No more need for copy and pasting!

Let’s use buttons as an example.

When you create a new button, you will see that its fill property is set to “Buton.Fill” – that’s our variable.

All the relevant variables are defined and set with a pre-defined value. These are stored in the App.OnStart property, so this is where we will need to add our company colors, style and brand guidelines.

Another thing that is also possible with this solution – but not with any of the others – is to change the color of the date picker, when it is expanded.

With the other solutions, the color of the date picker can only be changed according to the themes defined by Microsoft. Here, you can make it follow your own Power App design and brand guidelines. This is awesome!

To illustrate, here’s how it would look with the AlfaPeople brand colors:

Why this is the most powerful solution to Power App design

I downloaded the template that Michael Wright had created and started to modify it to fit our needs and guidelines in AlfaPeople. Now, it is the starting point for all apps that we create internally. It saves us a lot of time when we create different apps that need to share the same look and feel.

Also, we have added a header, footer and a menu component in our Power App – all in our brand colors. So, this can be added directly onto any screen in the app, without having to rebuild it over and over again.

Basically, this is the most efficient to build a Power App – while also giving you the most possibilities in terms of designing and styling your app in line with your brand guidelines.

How to get started with Power Apps

Here are 3 easy ways to get more familiar with Power Apps: