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 

]

[R3dKap]

Hi @rampprakash,

Yes it did work for me. But on my side I started from scratch. I generated a blank app from the Theme Editor application made by @mehdis (you can find it here https://github.com/microsoft/powerapps-tools).

• I renamed the MSAPP file to a ZIP file
• I decompressed it with 7-ZIP
• I opened the theme.json file
• I changed (for instance) the PrimaryColor1 from RGBA(56, 96, 178, 1) to PrimaryColor1Value and set the "type" to "x"
• I recompressed all the files with 7-ZIP
• I renamed the file from ZIP to MSAPP
• I created a new canvas app in Power Apps
• Once in the Studio, I opened the MSAPP file
• I added a Set(PrimaryColor1Value, RGBA(...some color here...)) in the OnStart event of the app
• I ran the OnStart event
• And the PrimaryColor1 was set throughout all the Studio and I could change it how I wanted

Hope this helps you in anyway...

[iAm_ManCat]

Hey @rampprakash

Yes videos will cover all of that, but I can explain what you are trying to do in these 4 steps:

1. Extract the Branding template to a folder (right click, 7zip>extract to XYZFolder)

2. Edit the Themes.JSON file as you said (changing BGColor), save it:

3. Run the PowerShell Script I provided here (direct link here to file - Right-click, Save As "Build.ps1" into the folder you extracted the App to) and give it a name [all the script does is create a .msapp from that folder]

4. Go to Create.PowerApps.com  - Import the file, create a new screen to test that new screen items are having the new background applied (NB, existing items in Apps are considered as already-set items, theming files apply to any New created items)

Success!

Let me know if that doesn't work for you or if PowerShell flakes out and I'll help determine what the issue might be 😺

(PowerShell issues are usually to do with execution policies blocking any unsigned scripts from running)

Cheers,

Sancho

[gmanasseh]

Thanks Sancho,

Was trying to utilize the template and add a couple of variables mainly related to Font and Font Size, finally got it working after trying the latest post on how to utilize the PowerShell script inside the folder which had the files extracted.

It's working perfectly.

[sthota]

@iAm_ManCat 

First of all, thank you very much for helping us by creating the branding template. 
I am having trouble in figuring out changing the label color for Edit Form and label and text color for Display Form using themes.json.
These label colors are picked up as PrimaryColor3Value by default. However, I would like to apply 3 different colors for the highlighted in the attachment using custom variable in themes.json.

Thanks in advance.

[iAm_ManCat]

Hi @sthota 

I don't think you will be able to do that exactly as you want it in the Themes.json (you can change them, but titles are used from one object for both form types) - The Form is an object, and inside that Form are container objects called DataCards and inside those are different controls, so each card is themed using the same set of default controls - so if you changed it using the themes.json file it will change for all of them.

What you are looking for in the Themes.json file is the following objects as they control the labels that are used throughout the editor, but be aware it will change them everywhere else they are used:

defaultLabelColor

basicNoSizeLabelColor

basicNoSizeInvertedBkgLabelColor

basicNoSizeWeightColorLabelColor

invertedBkgHeaderLabelColor

titleLabelColor

subtitleLabelColor

contentLabelColor

accentLabelColor

For example, if you changed the titleLabelColor, it will change the Titles on the DisplayForm and on the EditForm (the same titles you have highlighted in your attachment).

Have a play around with those and see if that does what you need, otherwise look at customizing it manually using the variables within the App.

Cheers,

Sancho

[sthota]

@iAm_ManCat  Thank you very much for posting the solution. However, a small correction here is that we need to change accentLabelColor instead of titleLabelColor to reflect in the DisplayForm and EditForm label colors.

As you mentioned, it is changing for both the forms at the same time which will not be an issue.

Once again, I would like to appreciate your solution as I am able to customize a theme for our needs which saves a lot of time in styling for the other developers and serving the purpose your effort. 

Regards,

Srinivas Thota

[Anonymous]

1. This is absolutely awesome, thank you for sharing

I might have missed it in the detail but what would be really cool is a description on recommendations for sending this out and its use in a business once you've sorted the themes out.  What screens must be there for the app to work, what's the slimmest version that can be distributed across and org for it to work?

When I try to trim it down everything goes a bit weird!

Thanks for all your hard work 

[iAm_ManCat]

Thanks for the comment @Anonymous,

I'm actually working on V3 which is a lot more detailed on that - I know I do mention in the comments inside the App somewhere that you can basically get rid of everything if you want and just have the variables, you just need to make sure that the array of chart colours is also set to some variable or colour as they currently point to a few objects on one of the screens (which is where the errors pop up).

The new version will have a separate App for creating/storing themes (saved to SharePoint), and then the App template itself will come with instructions as to what you can/should include with it. There will also be components that use that branding in the user-facing App. There will also be a WCAG 2.1 checker for the theme creator App.

Cheers,

Sancho

[Anonymous]

You sir deserve a medal!  Fantastic job, looking forward to V3

[PaulB3]

Hi @iAm_ManCat ,

I watched this recently on MS Ignite, as a complete nwebie, it was both frightening and amazing seeing the skills you guys have and then to share your knowledge in this way is brilliant. I can't think of many areas of business where the community share their knowledge in such a way. Thank you. 

Regards

Paul