Branding Template App V2 09-17-2019 17:24 PM - last edited 05-07-2021 12:25 PM

[iAm_ManCat]

(if you downloaded this before 12:40 Jan 20th 2019, please re-download!)

Having demo'd this version for the first time at Microsoft Ignite The Tour London,
I have now released this for you all to use and remix!

I have completely re-vamped the method of theming Power Apps.
No longer do you have to rely on a static set of colours, or a screen of controls to copy.

Make theme changes on-the-fly, enable accessibility as a default option.

Save yourself time by using this template, or create your own template
that works for you by remixing the work I have already done.

There are (at the time of writing this) 2.5 million Power Apps developers. If each of us is only spending 1 hour in their entire lifetime changing the properties of controls, then we've collectively spent:

2.5 Million Hours

= 104,166 days

= 285 Years

And I'm sure we can safely say that we've all spent a lot more than just one
hour changing every colour property of every control in an on-brand App.

There had to be a better way!

Imagine being able to create .msapp files that your client can open or import
as part of a solution and start using straight away with their brand as a default!

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!

Power Apps already lets us create Apps in a fraction of the time of standard development, however, there are some things that still take us a fair amount of time and lack certain accessibility features.

• How do we do more in less time and with less energy and time required? #LessCodeMorePower
• How can we empower our citizen developers to create better Apps and with standardised branding & colours while maintaining accessibility functions?
• How can we make PowerApps save us EVEN MORE time than it already does for development?

The company I work for had 7+ brands until recently (4 unique colours, a logo and explicit branding guidelines each), which meant a LOT of configuration of Apps and thousands of Control property changes to meet these requirements every time.

There had to be a better way! (Spoiler Alert: "There is always 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. It will also allow your user to jump between themes while using the App and comes with two accessibility themes (a dark-mode and light-mode version)

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 feels strongly about accessibility - these features should be there by default!!
- 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 Power Apps already makes it, and without having to spend so much time on themes or branding!

So here's how to use it: You open (not import) the .msapp file from Power Apps 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 (comments and explanations are included within the App), you can also add additional themes, Menus etc (or remove the existing ones) by editing the OnStart.

Initial Screen when opening App

The current default theme is Microsoft Light Blue ( a slight alteration on their default theme so that it works correctly when theming), a DarkMode version of that, a Light and Dark Monochrome theme for accessibility, as well as my purple and green themes (these last two are Definitely not for production use, just for fun!)

You can add your own Theme settings quite easily by editing the array of themes, each has three colours, and then three text colours that should contrast those colours correctly, then a default label that will be used on any new labels or background-contrasted labels. Any themes you add to the OnStart Themes array will automatically populate the Theme Palette screen.

I highly suggest using the Theme Tester screen to play around with your theme quicker than typing out the colours.

Change the box Fills and colours at the top as well as setting the default label colour and whether it is darkmode.

Darkmode here affects how the backgrounds are set and will affect the background colour of the checkboxes and options.

Now I know what you're thinking, This is just like the theme editor, well let me clarify a few things around 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 to a variable manually (meaning more painful hours doing this), the theme editor doesn't allow changes on the fly - my App template allows instant theme changes.
• Any New inserted or existing items in the Branding Template App have their colours set to variables. VARIABLES! (think of the possibilities)
• You can hardcode the desired theme colours into the App start (and then potentially 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 set to the Microsoft Blue to keep users comfortable with building with the colours and interface they are used to. Create a new screen and just pop in a Few Controls using the insert menu:

NOW:

Instead of going through and changing all of these objects to match our brand colours, we choose another Theme from our Theme Palette (i.e our accessibility theme for those with low-vision or colour-blindness)

- this automatically rebrands the controls:

Some things you may not have noticed from this:

• Pen Input is a different default colour depending on the theme
• Input Text fields have a clear button by default
• Date Picker is branded out-of-the-box, no components needed!

All controls default as branded. Additionally, timer text is slightly larger so that it’s easy to read (let’s be honest, we all hide our timers, so the text size is purely for us!). Gallery defaults to Branded Colours as well.

There is now a screen for determining the default graph colours used within all controls - simply change the fill colours of the boxes to have them apply to all new and existing graphs:

But wait, there's more!

The default Insert Screen options are also branded by default:

We also have new abilities like using buttons to trigger code, an admin overlay for buttons to show only to certain administrators and to keep your code contained to one place, some example galleries and menus to give any entry-level Power App makers some inspiration of how the galleries don't need to look like this:

And could instead look like this:

After reading all of this, your reaction right now should be:

https://www.youtube.com/watch?v=uwmeH6Rnj2E

I've included two versions of the App - the reasoning is that Power App's current Insert Screen function incorrectly creates items if you change the App Orientation after you have created an App in one orientation (I'm sure they'll resolve that eventually but for now: two versions).

FOR THOSE WHO WANT TO KNOW HOW I DID THIS: (video coming soon!)
I deconstructed the .msapp file after using a file identifier to determine the type of file a .msapp is (spoiler alert: it's a zip), then I extracted out the Themes.JSON file within References, structured it so it's easier to read (its about 4k+ lines when properly JSON formatted) then I changed ONE property to RGBA(255,0,0,0), I then I had to create an App using that modified file and insert every possible control and screen to see where it was being used. Then I did the same process for the next property, etc ad infinitum. There are about 3700 lines of code that are properties, so roughly 900+ properties to do. Then you also have to create Relative properties within the top section for each of the values that you define to be a variable.

This is exactly why I have done this for you - imagine if thousands of us are then wasting time doing all of this when instead only one of us needs to go through and do it so that the rest can benefit.

So I did.

If you have any thoughts about these or want to ask questions please feel free to give me a shout on Twitter - there will be a video within the next two weeks covering ALL sorts of details 🙂

[

If you want to edit your existing App to do granular edits to the .json files inside, extract it to a folder, do your editing, and then run the following powershell script (within this repository) from within that extracted folder after you've done modifications, which will reconstitute it into a .msapp file:

https://github.com/iAmManCat/PowerApps-Branding-Template/tree/master/V2

]

Original (V1) post is here: https://www.iammancat.dev/2019/09/branding-template/

Cheers,

Sancho Harker (iAm_ManCat)

[MacaurlyW]

Hi, this is a great build. I have only introduced myself to its capabilities this morning  and I am very impressed with its value for a PowerApps developer.

I have been building a template app myself which currently allows you to configure at a control level accross the app (similar to what you said you are looking to do in the future). This means that controls have to be copied from a library screen as opposed to from the Insert ribbon, but any properties can then be configured in one place for all controls of the same type accross the app. I look forward to merging the ideas you have used into my template!

I previously stored them colors in an Excel file in OneDrive so your version of a theme picker is massively more effiecient. I will be happy to share and get your input / after I have finished a version 2 of my template and also see whee you're at with your version. 

Good work!

[iAm_ManCat]

Thanks for your comment @MacaurlyW - Really appreciate it

Yes, I originally had a copy-paste screen with controls and anyone could easily make something similar using this by creating a default copypaste screen with the Insert controls and then defining the shape or size to your needs - my main gripe with the copypasta method is/was that its not intuitive and your users will generally keep trying to use the Insert> method and will then set the colours manually which you then need to clean up or fix later if you are using theming

- so creating this by reconstructing the actual .msapp file was my attempt at making it as user-friendly as possible while still allowing customization throughout 😄

Future versions I plan on releasing will be:

• a stripped-down version where you only need to set three colours and three text colours (to match those colours)
• a version where you can set the default colours, width, height etc at a control-level (for Insert> items) so you could specify buttons as one set of colours for all new items and labels as another set of colours and sizes etc etc

Cheers,
Sancho

[R3dKap]

@iAm_ManCat,

I've been working for quite a time now on an application called PowerApps CTG (Custom Theme Generator) that would be similar to the PowerApps Theme Editor by @mehdis but that would be made WITH PowerApps so one could see the result right away on the various PowerApps controls.
   
Its imperfections lies in the fact that it produces a JSON file that you must then manually reinject in you package file and that any existing control within the targeted app (when the theme JSON file is repackaged) would not automatically use the new template but only newly added controls.
So I must admit your idea of putting variables directly inside the JSON theme file instead of just RGBA values is just brilliant (I am so disappointed at myself for not thinking about it earlier ).
But now I am trying to see how I could mix the idea of using variables in the theme file with a more sophisticated interface to edit the palette values and change the default controls properties directly in the target application (thus replacing your Theme palette screen with a screen like the one I was building in my PowerApps CTG app). Also, the goal would be to try to get rid of the list of variables declared in the OnStart part of the application.
In this reflexion I ended up imaginating that we could design a Theme screen as this:

In the upper PALETTE section we would use rectangles'fill property to define palette color values, text inputs for numbers, etc.

In the lower CONTROLS section we could insert every possible PowerApps controls which properties would be pointing at the palette above. You can see an example on the capture above: the button's Fill property would be set to point to the PrimaryColor1.Fill property of the rectangle in the PALETTE section.

Then in the JSON file we would set the values of the palette to point to the colors and values in the PALETTE section of the screen, like this:

And the controls styles properties values would point to the controls properties in the CONTROLS section of the screen, like this (all controls properties would have to be added in the JSON file):

Putting all this together would allow us to:

• change the palette by altering the elements in the upper PALETTE section of the screen, thus impacting the lower CONTROLS section controls, then impacting all controls used in the actual application screens
• change the properties of the lower CONTROLS section controls, thus impacting all controls used in the application
• make sure that (just like in your proposed solution) when inserting a new control from the PowerApps Insert tab, it relies on the THEME CONTROLS and THEME PALETTE
• avoid having to declare any variable in the OnStart event of the application

I'm eager to have your opinion on this... 

Emmanuel

[iAm_ManCat]

Hey @R3dKap 

That's a really impressive App you're working on - I really like the design and layout! 

Yes, I'm am sure it is possible to do it via controls and label boxes because I've already been working on that myself - the next version to be published will include a set of screens for defining the colours, however I still want it to be able to jump between whole themes with one click so I will be consolidating the colours and keeping the existing Theme Palette page. Additionally, I am already in the process of moving the items from the OnStart as part of that process - this App was published publicly to define the concept as a first version and as a minimum viable product with additional versions, updates and features coming later.

I really like the look of your App and am looking forward to seeing it published on the App Gallery for everyone to use 😄

Cheers,

Sancho

[R3dKap]

Hi @iAm_ManCat,

I've been trying (without luck) to reproduce just the basics of your technique to dynamically set the theme colors to variables.

I opened the XML theme file from my blank app, I modified the PrimaryColor2 property of the default theme palette to a variable named THMPrimaryColor2Value and set the type to x just as you did it in your own theme file.

After repackaging my app and loading it into PowerApps, any control using the PrimaryColor2 property doesn't take the THMPrimaryColor2Value variable as its default value. By example, the Button control's fill color should be THMPrimaryColor2Value but it sticks to its default RGBA value.

Any clue on what I could be missing here ?

Emmanuel

[Gabrz]

Wow, this is a very nice timesaver.

I've tried editing the Themes.json (changed a value "%CONTROL.ID%.Fill" into "%Palette.PrimaryColor2%" in the dropdown component) and then replaced the file in the .msapp.

But when I open the file/App again in PowerApps and insert a Dropdown, all default values are reverted to the default RGB blue color. Also for every other input item the default values are reverted.

Do you know what is happening, and how I can change the default values

[Gabrz]

I have this idea of storing all the values in a Collection (instead of all those single variables)

// Set Palette Color Values for Light Theme
ClearCollect(
    colCurrentPalette,
    { Name: "PrimaryColor1", Value: RGBA(238,243,246,1) },
    { Name: "PrimaryColor2", Value: RGBA(181,198,214,1) },
    { Name: "DisabledColor1", Value: RGBA(68,68,68,1) },
    { Name: "DisabledColor2", Value: RGBA(136,136,136,1) },
);
// Set Palette Derived Color Values for Light Theme
Collect(
    colCurrentPalette,
    { Name: "TextColor1", Value: LookUp(colCurrentPalette,Name="PrimaryColor9",Value) },
    { Name: "HoverColor1", Value: LookUp(colCurrentPalette,Name="PrimaryColor9",Value) },
    { Name: "PressedColor1", Value: LookUp(colCurrentPalette,Name="PrimaryColor9",Value) },
    { Name: "PressedColor2", Value: LookUp(colCurrentPalette,Name="PrimaryColor3",Value) },
);
// Store Light Theme
ClearCollect(
    colThemes,
    { Theme: "Light", Palette: colCurrentPalette }
)

And use LookUp in the Themes.json

"palette": [
   {
      "name": "PrimaryColor1",
      "value": "LookUp(colCurrentPalette,Name=\"PrimaryColor1\",Value)",
      "type": "v"
   },

But I'm not sure that would be beneficial?

Pro's:  Less Variables, just one or two Collections.  Less Code when switching Theme/Brand.

Con's: Not sure about performance (Lookup versus just a Variable)

I'd like to hear your thoughts about it.

Thanks

[iAm_ManCat]

Hi @R3dKap

Apologies for the delay in response, I've been working on something exciting that I'm not allowed to share 

I think the problem you might be facing is that your blank App has the structure of an App with controls and settings already in it - you will need to use a .msapp whose structure matches that of the Theme Generator files (or the older blank items) - there must be no folders within it and only a specific list of files:

AuxDataMap.json

Entities.json

Header.json

MacroTable.json

Properties.json

PublishInfo.json

Themes.json

Additionally, I initially set the properties as 't' for text rather than 'x' for variable and the process of opening the .msapp then changes these once they are exported again.

I hope this helps with your Custom Theme Generator! I am looking forward to seeing it published to the Community App Samples 

Cheers,

Sancho

[R3dKap]

Thanks @iAm_ManCat, I'll check that out soon... Thanks for the tip...