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 

]

[TxH]

Hi, @iAm_ManCat,
Thank you for this impressive tool - it really made my day!
I tried for a few hours without success to modify Themes.json to use a record variable instead of a single variable

(theme.PrimaryColor1Value instead of PrimaryColor1Value).

Your response to R3dKap from above made me realize that I need to start with a blank .msapp file exported from the Theme Editor app.

@R3dKap, thank you for having the same problem as me. 😉

[iAm_ManCat]

Hey @Anonymous!

Thanks for having a look - I'm doing a video on all of this soon to include with this post, as there was honestly so much to cover I couldn't do it all quickly enough in this article 🙀

Menu Example 1 & 2 both use MenuItems defined during the OnStart

Menu Example 3 uses MenuItems2 defined during the OnStart:

In terms of editing the actions/notifications that are triggered from menus, these are done using the button-trigger method - we store the code in buttons hidden to the normal user, and then have the code triggered from there instead of having to look through every object on the screen to find out where we have code running (I will be going into more detail on this in the video).

If you go to your Admin Settings screen and turn on 'Hidden Developer Things', you will see the buttons overlayed on the screen, which are part of the top-level group on each screen called 'Hidden Developer Logic Example 1/2/3':

Regarding your question about finding the MenuItems2Selected_Example_Dev the best way to search for any specific control such as MenuItem2Selected_Example3_Dev, is to type in the searchbar under Tree View which will search/filter your Screen/Control list 😺

In terms of editing the menus and collections - these are entirely contained within the App OnStart - the Set Theme button only applies the colours within the gallery, which are all defined during App OnStart.

In terms of Editing the actions that happen when you click items (whether notifications/patches/submits/ any code you can think of) - these I have defined using the buttons within the 'Hidden Developer Logic' group. You can create more of these and alter existing ones as needed.

I'd kindly ask that you please also wait for the long-form video which will be coming out within the next two weeks once I have some more time to work on it during the evenings, as there is certainly a lot contained in the Template that I would love everyone to understand but due to its size and complexity, there was only so much I could easily put into a written article without making it pages and pages... 😺

Thanks again for having a look!

Sancho

[iAm_ManCat]

Hi @TxH!

Yes, the problem with creating your own template from scratch is that the structure of the App is different when Exported from the theme editor vs when Saved from the editor (this will also be within the video).

The Theme Editor creates a flat structure, with no folders, however, you can take the Themes file from a Saved Power App and insert it there too. I highly recommend this if you are planning on creating a template from scratch as this will definitely save a lot of time as the saved version from the editor will have all the latest properties and controls included (ie the stream control which is currently being rolled out to GA).

Thanks!

Sancho

[iAm_ManCat]

Thanks for the tip @Gabrz - that's really useful! I will give the PowerShell method a try myself later when I'm back home - I don't think most entry-level makers / citizen developers will be able to use PowerShell or even know of it, so I will be demoing the 7zip method within the video and have your method as a backup for those who have a bit more experience 😺

[MichelH]

@iAm_ManCat 

Hi Sancho,

Looking very much forward to your video explaining things.

Cheers,

Michel

[Anonymous]

Hi @iAm_ManCat 

Thanks a lot for your very detailed and informative answer. It makes a lot of sense now.

I'm very impressed by your work.

// Ajazz

[MichelH]

Finally figured it out.
Careful re-reading helps. 🙂

Indeed, the msapp file generated by the theme editor is much different and power apps reacts as expected when you open the msapp file in there.

Now checking what component properties are still missing.

[Anonymous]

Thank you 🙂
Very Good Job 👍

[markslosberg]

@iAm_ManCat 

OK, I watched your presentation on the Power Apps Online Conference 2020 and was impressed.  I have it downloaded and installed now.  I am wondering if you have a short tutorial or write-up on "best practices" for how to use it in an actual situation with a client.

I am starting a new series of apps for the client and thought this might be a very good way to introduce both consistency and UX flexibility.  Initially, I will be the only one doing development so I want to make certain that I set the tone and use it correctly.  Then I will likely be introducing it to a variety of both professional developers and citizen developers at the client and will then have to train them on the same.

Thoughts?  Also, this could morph into a paying consulting gig if you are interested.

Thanks,

Mark

[rampprakash]

Hi @R3dKap,

Did it work for you?

@iAm_ManCat : we are trying to change BGColor in themes.json using 7-zip and save the file --> open the msapp app--> new screen--> it's taking RGB Color instead of BGColor from themes.json

As i mentioned above i changed PrimaryColor1Value to PrimaryColor2Value, is there any other place that we need to change apart from this?

{
"name": "BGColor",
"value": "If(DarkMode, ColorFade(PrimaryColor2Value, -50%), ColorFade(PrimaryColor2Value, 50%))",
"type": "x"
}