Power Apps Branding Template V3

This post will cover the newest release of my Power Apps branding template for canvas apps! There are some new features and the visuals have been given an overhaul.

Imagine being able to create branding that applies to every new inserted item, allowing you/your App makers to spend time focusing on building rather than on correcting every item to be in line with branding guidelines. Well, you can!

Granted there are other methods for how to do this however they all have their pitfalls.

• You could create a theme record/table/collection in your App’s OnStart and then use ThemeName.Property on each control, however this takes a lot of time.
• You could create a screen with formatted controls of every type, and have users copy from that screen, however this assumes they will remember to always use those.
• You could create a duplicated reference-item screen, where there is a copy of the above-themed controls that reference the original screen full of referenced controls – this however comes at a performance hit once you have a larger number of controls within the App as they are constantly checking the property-state of the referenced control’s properties.

Wouldn’t it just be easier if we could set a few colours and the App deals with the rest Automatically? And if we wanted to override a few of the existing colours for certain items then it should be as easy as adding a property to the theme and setting it or setting the default for the theme.

You can save yourself, your team and your friends so much time by using this template to set up your branding/theming and then not have to do it again after that.

Why did I create this? §

The concept behind Power Apps is to be able to build ‘low-code’ Apps in a fraction of the time that pro-code Apps would take. The only problem with this is that the theming of controls and screens takes up a massive amount of time. I created the original version of this template to get around having to do that theming on every control.

There are over 2.5 million Power Apps developers, and if each of us is only spending one hour of our lives changing the theming properties of controls, then we’ve collectively spent 2.5m + hours, which is 285 years of 24/7 time, and that’s only for one hour each! We all know that we’ve spent WAY longer than that.

There had to be a better way! (There is always a better way!)

• Additionally in the more recent V3 version I have taken a stronger focus on enabling the accessibility features that I believe should already exist as a native part of the Power Platform, with the hope that these will be introduced in the future 🙂
  Continue reading below to find out what these are!
  
  

Who is this App intended for? §

• Anyone who has ever spend time changing the branding or theming of a canvas Power App (ummm, so everyone?)
• Anyone who feels strongly about accessibility – the features I’ve added should be there by default
• Anyone who wants to either empower their citizen developers to help them develop clean and standardised theming throughout their jobs
• Anyone who wants to create pre-branded templates for their clients that enable their clients to easily generate Apps with their company branding/theming
• Everyone!
  

How do you use this? §

TLDR: §

Download the .msapp file from the Power Apps Community Forum post here and then navigate to https://create.powerapps.com and open the file you downloaded.
There are some TLDR Options here, and you can read if you want to see how each screen and pattern could benefit you.

• Option 1:
  Edit the App OnStart to change/add/remove the list of themes.
  Remove any un-needed screens.
  Start inserting new controls.
  Use the theme screen to allow your users to choose their theme.
  
• Option 2:
  Edit the App OnStart to change the default theme and the default control properties outright and don’t use the themes.
  Remove any un-needed screens.
  Start inserting new controls and components.
  
• Option 3:
  Edit the App OnStart to change the default theme and the default control properties outright and don’t use the themes.
  Remove all screens.
  Remove any references from the OnStart to those screens.
  Start inserting new controls and components.
  

You can safely remove all of the screens and start with a Blank template.

I would suggest keeping the accessibility code from the components for Font Sizes and for Accessible Theming and using those on your own accessibility controls.

I’ll explain the screens in more detail and how it all works below:

The Loading screen §

The first screen you will see is the Loading Screen

The loading screen is important, and I’ll explain why – When a user opens your App, you want them to get into the App as fast as humanly possible, and not spend any significant time in the pre-loading phase before the App opens. There is a study by Microsoft (see reference in quote below) that you can read, or, if your attention span has already waned, then don’t read it – the point is that when your user opens the App, you want to engage them visually as soon as possible. This is why you should never have any significant data loads within the App’s OnStart. In addition to this the “Non-blocking OnStart” rule that is in preview will likely be rolled into the main App experience as it makes sense to get makers incentivized to shorten their OnStart process.

“We are moving from a world where computing power was scarce to a place where it now is almost limitless, and where the true scarce commodity is increasingly human attention”, Satya Nadella

Microsoft Attention Spans Research Report | Attention | Advertising (scribd.com)

In the loading screen, I have a timer, tmr_LoadingScreen_LS, which is set to start when the OnVisible for that screen is run and is set to 5000 milliseconds (5s). During the OnTimerStart property, you should have your data loaded in and then navigate to the required screen. The OnTimerEnd function also navigates to the required screen.

The idea behind this is to have your data loaded within a reasonable 5 second timeframe or else navigate while it is dealing with the remaining parts of the request. You should set the LoadingText variable to describe what you are currently doing, i.e “Loading Users from List ABC”. If there is any data that needs to be loaded before the Required screen, then prioritize that in your loading order. The loading screen’s slider bar will fill itself as that timer increases.

The other pattern you can use is to not have a timer but instead have all of your data loads done concurrently (and sequentially where applicable) during the OnVisible of the loading screen, then update the LoadingText variable each time you do, also changing the value of the width of the btn_LoadingBar_LS at the same time. This will ensure that all data is loaded before you navigate to any other screens

I have left links to a free-for-use image site and to Pen Warner’s Icon Menu Builder for you to get image and icon resources for your canvas Power Apps.

The Home Screen §

This screen should be your landing page for when your loading screen has completed. The usual pattern used is for this screen to be the central navigation point for the rest of your App.

I have included a few other example layouts in the App:

These screens should hopefully help and give you some ideas for presenting your content in a visually-pleasing way.

In order to talk about the upcoming screens we need to talk about Theming:

Theming §

The App’s OnStart defines four global variables that are then used for default theming of controls and for generating the Themes to choose from.

• ThisTheme
• FontSizes
• ControlsTheme
• ControlsFontSizes

ThisTheme §

ThisTheme defines the base colours (1-3) and their respective text counterparts (text colour should always be correctly contrasted against its pair base colour).
These are then used to define the colour properties for the Control-Level properties.

ThisTheme also defines the base font and base font size. These are then used to determine the FontSizes, which are then used to determine the Control-Level font sizes.

ThisTheme also defines the default Text Colour which is used on Controls that have a transparent background.

ThisTheme also defines the Dark Mode property, which is used on the inner background of checkboxes and radios, and the background of all Forms and Screens.

Set(
    ThisTheme,
    {
        Name:               "Microsoft Blue Light",

        Color1:             RGBA(186, 202, 226, 1),
        Color2:             RGBA( 56,  96, 178, 1),
        Color3:             RGBA(  0,  18, 107, 1),
        Color1Text:         RGBA( 15,  15,  15, 1),
        Color2Text:         RGBA(245, 245, 245, 1),
        Color3Text:         RGBA(245, 245, 245, 1),

        defaultTextColor:   RGBA( 15,  15,  15, 1),
        
        Font:               Font.'Segoe UI',
        FontSize:           14,

        DarkMode:           false
    } 
);

FontSizes §

FontSizes sets the standard sizes of font which are then used to define font sizes at the Control-level.

Set(
    FontSizes,
    {
        TextMain:      ThisTheme.FontSize -1,
        TextEmphasis:  ThisTheme.FontSize +1,
        Content:       ThisTheme.FontSize +2,
        Title:         ThisTheme.FontSize +6,
        SubTitle:      ThisTheme.FontSize +4,
        AddPicture:    ThisTheme.FontSize -3
    }
);

ControlsTheme §

This is where the magic happens.
The variables here are referenced by default for every new control. If you change a value here it will affect every new control created and every control that has been created previously that is still pointing to these values.
This new V3 version of the template has properties for every control that can be customized.
Additionally, there are some properties that you can set with this template that are not possible to do from the normal canvas App editor.

List of supported controls:
Label, Button, Text Input, Pen Input, Dropdown, Combobox, DatePicker, Listbox, Checkbox, Radio, Toggle, Slider, Timer, Image, Camera, Barcode, Video, Stream, Audio, Microphone, AddPicture, Import, Export, Chart(s), Gallery, Icon, Attachment, Form, Screen, DataTable, PdfViewer

List of things you can change with this template that are entirely IMPOSSIBLE from a normal Canvas App:

• Override default colours and fonts for all new inserted items
• Override the default inserted screens to use the theme you’ve set up
• DataTable border-lines between headers
• DatePickerSelectedDateFill, DatePickerHeaderFill

Let’s look at the Label section to see how these properties are set:

Set(
    ControlsTheme,
    {

        LabelTextColor:    ThisTheme.defaultTextColor,
        LabelFill:         Transparent,
        LabelBorderColor:  ThisTheme.Color2,
        LabelFont:         ThisTheme.Font,

As you can see, they reference the ThisTheme values. You could also set them to specific colours if you wanted your defaults to appear as those colours.
In this case the fill is set to transparent, this is because on the insertion of new templated screens, the label is used extensively for headers and other sections and overriding this fill will mean the new insert-screens will have fill values that may not match the rest of the new screen items.

You can also set these to logic-based values that are evaluated every time the OnStart is run:

CheckBoxInnerBackground:  If(
                             ThisTheme.DarkMode,
                             ColorFade(ThisTheme.Color1, -50%),
                             ColorFade(ThisTheme.Color1,  50%)
                          ),

Additionally:
You can now create a theme that overrides any of the specific properties set during the ControlsTheme with a control-level override.

We don’t set the Font size within the ControlsTheme, that is done in the ControlsFontSizes ( this is to isolate it from the themes, so that we can have a font-size change on-the-fly without re-applying the theme properties every time )

ControlsFontSizes §

This is where we set the font sizes for all of the controls. We can use Set() in other parts of the App to change these or to make adjustments on-the-fly. These values are currently based on the FontSizes variable

Set(
    ControlsFontSizes,
    {
        LabelFontSize:                FontSizes.TextMain,
        ButtonFontSize:               FontSizes.TextEmphasis,
        InputFontSize:                FontSizes.TextMain,
        DropdownFontSize:             FontSizes.TextMain,
        ComboBoxFontSize:             FontSizes.TextMain,
        DatePickerFontSize:           FontSizes.TextMain,
        ListBoxFontSize:              FontSizes.TextMain,
        CheckBoxFontSize:             FontSizes.TextMain,
        RadioFontSize:                FontSizes.TextMain,
        ToggleFontSize:               FontSizes.TextMain,
        TimerFontSize:                FontSizes.Title,
        BarcodeFontSize:              FontSizes.TextEmphasis,
        AddPictureFontSize:           FontSizes.AddPicture,
        ImportFontSize:               FontSizes.TextEmphasis,
        ExportFontSize:               FontSizes.TextEmphasis,
        ChartLegendFontSize:          FontSizes.AddPicture,
        GallerytitleLabelFontSize:    FontSizes.Title,
        GallerysubtitleLabelFontSize: FontSizes.SubTitle,
        GallerycontentLabelFontSize:  FontSizes.Content,
        AttachmentFontSize:           FontSizes.TextMain,
        FormTitleLabelFontSize:       FontSizes.TextMain,
        DataTableFontSize:            FontSizes.TextMain,
        DataTableHeadingFontSize:     FontSizes.TextEmphasis
    }
);

Setting Chart Colours §

The ReservedChartColorSet variable is set immediately after this – it sets the colour array to use for all charts inserted via the ribbon.

Creating Additional Themes §

The next part of the OnStart creates a collection of themes that can be switched between either using the theme choice screen I created or one of your own creation.

ClearCollect(BrandingColours,

    {
        Name:             "Microsoft Blue Light",
        Color1:           RGBA(186, 202, 226, 1),
        Color2:           RGBA( 56,  96, 178, 1),
        Color3:           RGBA(  0,  18, 107, 1),
        Color1Text:       RGBA( 15,  15,  15, 1),
        Color2Text:       RGBA(245, 245, 245, 1),
        Color3Text:       RGBA(245, 245, 245, 1),

        defaultTextColor: RGBA( 15,  15,  15, 1),
        
        Font:             Font.'Segoe UI',
        FontSize:         14,

        DarkMode:         false
    },

..........

Multiple themes are created this way, and (DRUMROLL):
We can now override ANY of the control-level properties for a theme! All you need to do is add one of the properties that we set during ControlsTheme and it will set it for that theme, i.e. if I set the following, I can change the default datepicker:

DatePickerColor:             Chartreuse,
DatePickerFill:              DarkGreen,
DatePickerIconFill:          White,
DatePickerIconBackground:    Red,
DatePickerSelectedDateFill:  DarkOrange,
DatePickerHoverDateFill:     LightCoral,
DatePickerHeaderFill:        Fuchsia,
DatePickerFont:              Font.'Great Vibes',

Then my DatePicker will look like this
(hint: please don’t make your DatePicker look like this, it’s terrible 🤣):

Adding your own theme §

To add your own theme, you will need to add an entry to the collection (and remove any that you don’t want shown in the datepicker). You can use the code I’ve commented out to add your own theme or you can edit one of the existing items.

CAUTION

If you are going to use my theming screen and the individual overrides for each theme (your other option is to edit the base ControlsTheme to your required colours and not have the Themes collection), then you will need to keep the “Control-level Override” theme in the list of themes. This theme allows the schema to be maintained for any other possible control properties, if you remove it and try add a custom theme then you will get loads of errors.

The Theme Palette Screen §

This screen allows the user to select which theme they wish to use. The potential for this screen can also be increased by potentially storing your user’s chosen theme to a datasource, and having this theme load when the App is started. At present the App is datasource-agnostic, so you will need to create the code and logic for that yourself if you wish to give users that additional functionality.

When you first reach the screen, it has no theme selected, so you can select one from the left-hand menu:

When you select a theme from the left-hand side, it will set some variables and display the theme on the various controls:

You can then choose the Set Theme button in the Top Right to Apply this theme to your app for this runtime experience. (To enable the App to use this by default we would need to store this preferred choice in a datasource, and then have it read during what that particular user’s choice is and Apply that theme.)

Here we have an example of where this Power Apps branding template reaches above expectations: control-level overrides for individual properties of controls.

In this picture we have different:
Fonts,
Colours (sorry I went a bit off-brand here, colours were chosen for shock value!),
Fontsizes,
Datatable has been colour-customized,
Default form has been made to use different colours,
Gallery has different defaults
…the possibilities are endless!

Once we hit Set Theme, these changes will apply to all inserted new items or any existing items that have been inserted in this Power Apps branding template. You could also set these to default to those colours by editing ControlsTheme directly in the OnStart if you want that level of customization to be your default.

Now that I have set the theme, if I insert a new screen, add a form, it will use those default colours of the theme. If I set these by default then there is no need to change the theme (or to have alternative themes)

If I don’t like the way the attachments look in this theme, I can:

Edit the theme and add a few lines to alter the properties (or edit the default ControlsTheme if I am not using themes)

AttachmentTextColor:    Red,
AttachmentFill:         RGBA(22, 137, 55, 25%),
AttachmentBorderColor:  Fuchsia,
AttachmentFont:         'Dancing Script',
AttachmentItemColor:    White,
AttachmentItemFill:     Brown

Trigger the OnStart, Set the theme again, and voila:

The Admin Screen §

This screen (or similar) should be a staple in all of your Apps – this is where you store your admin settings, features, flags and information. It is fairly common for me to also have some kind of useful debug information within this screen.

I have included two basic concepts (again, same as with V2 of the template), however you should add to this whatever will help you administer your Apps:
DeveloperMode – shows or hides certain features throughout the App, such as being able to navigate to this screen from the menubar.
DevHidden – used to set the visibility of items within each screen for items that should only be visible to the developer.

The other screens

These screens are just for inspiration and provide you with a few examples of how you could lay out your Home Screens or your data screens. Please feel free to use or copy these for your own purposes.

Accessibility features §

This version of the Power Apps branding template now has the ability to set font size and black-and-white accessible theme on-the-fly. This is achieved by changing the ThisTheme and ControlsTheme variables (for the accessible theme), and by changing the FontSizes and ControlsFontSizes.

The code for this can be found on the components supplied with this App, so if you want to make your own controls/methods, please feel free to take that code and modify it as you see fit.

Thank you for reading if you got this far!

I hope this Power Apps branding template helps you customize your Apps to a level you never thought possible and that the screen ideas inspire you to create your own (especially if you are new to Power Apps!)

I’ll be putting out some very short videos soon covering the TLDR Options 1 to 3, so if you’re interested, make sure to subscribe to my YouTube channel.

OLD V1 version:

If you’d like to see the original V1 version post (to see how far we’ve come), it’s here.