Branding Template App V3 09-17-2019 17:24 PM - last edited 05-19-2024 07:57 AM

[iAm_ManCat]

(if you downloaded this before Mar 19th 2024, please re-download!)

[Edit: fixed the component errors introduced by Power Apps team through new settings]

This template will allow you to customize your theming (down to the control-level), and allows you to theme items that are not currently possible within the normal Power Apps Editor!

There are also accessibility tools available within it that allow you to change your theme to an accessible theme or to change your font size on-the-fly.

If you want to read the full write-up on V3 of my Power Apps branding template, please feel free to view this on my site (although reading that is not required to download it at the bottom of this post, I do recommend it!):

https://www.iammancat.dev/2022/01/power-apps-branding-template-v3/

If you just want to download the template, you can download it at the bottom of this article 🙂

Cheers,

Sancho Harker (iAm_ManCat)

[

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/V3 

]

[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...