Branding Template V1

Hi Everyone!

Imagine being able to create .msapp files that your client can import and start using straight away that will default to their branding!

Or templates that you can give to your citizen developers to empower them to create beautiful Apps with minimal effort allowing them to focus on the LOB functionality!

The idea for this Branding Template App follows on from the overall idea of PowerApps – how do we do more in less time and with less energy and time required? #DoLessWorkMore

• How do we do more in less time and with less energy and time required?
• Additionally, how can we make PowerApps save us EVEN MORE time than it already does for development?

This can be downloaded from the PowerApps Community App Samples

The company I work for had 7+ brands until recently (each with four unique colours and a logo with explicit branding guidelines and instructions), which meant a LOT of configuration of Apps and thousands of Control property changes to meet these requirements every time. I worked out how much time I spend setting the colours and size of items within my PowerApps creations, and after totaling a week’s worth, I was a bit shocked, to be honest.

The numbers grows astronomically when we work out how much time the community is wasting on this:

Let’s say you’ve spent 1 hour in your entire PowerApps journey from start to finish on changing properties of controls. This means that as a 2.5million-strong community, we would have wasted
2.5 MILLION hours.
That’s 285 YEARS of 24/7 work-time!

A more realistic number for me, would be that in a month I was spending at least 4 Hours a week branding.
That’s 16 hours a month.
16 hours x 2.5million PowerApps developers = 40mil hours
That is 1 666 666 days.
That’s 4566 YEARS of 24h/365d

4566 YEARS OF TIME spent collectively by the community per month on changing properties and colors

There had to be a better way!

This App will allow you to pre-brand any inserted controls or screens without having to manually edit any properties of controls or of screens.

This App is intended for:
– Anyone who’s ever spent time changing the branding colours of every item and object within your PowerApps (everyone?)
– Anyone who wants to empower their citizen developers to develop amazing-looking Apps without having to spend their time modifying each property of every Control
– Anyone who wants to create pre-branded Templates for their clients that enable them to develop Apps within their company colours.
– Everybody else! Seriously, everyone should be using something like this to make their development process even faster than PowerApps already makes it, and without having to spend so much time on themes or branding!

So here’s how to use it: You open the .msapp file from PowerApps and choose from the Theme Palette Screen, or if you would like to, you can edit the App’s OnStart to either have the startup colours changed (full comments on what every colour setting applies to is provided within the OnStart), you can also add additional themes (or remove the existing ones) by editing the Array in the bottom of the App’s OnStart configuration.

Then once the App opens, You can keep the iAm_ManCat purple colours, or you can click the Theme Palette screen to choose one from the list.

The current default themes are Purple, Green and Monochrome schemes for accessibility as well as my take on the Microsoft Colours in both Light And Dark. You can also add your own Theme settings quite easily.

Now I know what you’re thinking, This is just like the theme editor, well let me clarify that:

• The Theme Editor is static, you set the colours and then the default item colour or settings can never be changed without creating a new file using the Theme Editor
• Without changing the properties of every Control, the theme editor doesn’t allow changes on the fly – unlike the theme palette I have on screen
• New items in the Branding Template App have their colours and settings set to variables. VARIABLES!
• You can hardcode the desired theme colours into the App start (and get rid of or hide the Theme Palette if you don’t want it). All of the settings are applied during the App’s OnStart!
• YOU DONT HAVE TO EDIT EVERY NEW ITEM

Ok, so onto the demo-ing, the default colour is my standard purples, so I’m going to create a new screen, and just pop in a Few Controls using the insert menu:

Some things you may not have noticed from this:

• Input boxes have a Clear button by default (you can turn this off as well by default by changing the variable ClearSetting to false)
• Pen Input is  a different default colour
• Date Picker is branded out-of-the-box, no components needed!

All toggle, radio etc controls come out as branded. Give it a 5-star and then another 5-star! And look, that timer’s text is actually easy to read!

What’s that? You want the corporate colours to appear by default on all new Graphs and Charts even if a consumer creates the App? CAN DO!

Awesome! But what if they want to create galleries and forms as well?

ABSOLUTELY! But wait, there’s more! How about the default Insert Screen options? Consumers are sure to use that!

NOW FOR SOME REAL MAGIC!

WITHOUT WRITING ANY CODE OR CHANGING ANY PROPERTIES
(I’ve only done what I’ve shown in the gifs above)
WE WILL RE-BRAND THE ENTIRE APP

This Should be you right now:

---

Additional features:

• Set Default Left/Right/Top/Bottom Padding for objects
• Don’t like rounded buttons? Set Default TopLeft/TopRight/BottomLeft/BottomRight Radius for new items
• Set Default Font sizes, Fonts, Emphasis, Italics, Underline, Strikethrough, Overflow
• Set Default Border settings, Type, thickness, style, focused settings as well

Please Thumbs-up this post and share it if you think it will save you time! I know I spend way too much time making these colour adjustments, and this is going to make things a lot easier for me.

My next step is to have it brand the app according to the domain of the logged-in person. Then I will release three or four ‘flavours’ of the App – This Version, another where you only set the Primary/Secondary and it does the rest, another where you can change the branding at the control level – you want all new buttons to be a different colour to the rest of the brand? – sure! Fourth iteration will likely be a combination of the above with the App determining which part of the business you are from (or which department the App is for?) and then branding accordingly, with options to override to Monochrome for accessibility reasons.

Thanks so much for visiting, don’t forget to register with and sign up for the PowerApps / Flow Community Forums – so many great people helping out there purely for the joy of helping others!

Thanks!
Sancho Harker (iAm_ManCat)