Branding Template App V3 09-17-2019 17:24 PM - last edited 02-02-2022 10:31 AM

[iAm_ManCat]

(if you downloaded this before Feb 2nd 2022, please re-download!)

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:

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 

]

[iAm_ManCat]

Hey @Gabrz 

Before I made the template I used LookUps, and ran into an issue once there are a certain number of LookUps - once you reach a certain number of items doing LookUps to a collection then it just stops doing the LookUps, and the items fail to render their colour, which is why I then moved to variables. If you are setting all the properties and colours for every object it will be literally thousands of LookUps after just a few Screens, as the objects are set to the LookUp, not to the static colour variable.

So, what I've done with the most recent version is to do away with the extra settings, there will only be:
3 colours,
3 complimentary text colours,
a default label colour,
a setting for whether DarkMode is on.

So the number of variables needing to be set has been reduced to just these 8. If you are creating your own lookups, you should be able to set it up as you said, however I would be mindful of how many potential lookups you will be creating within your App if it is re-used 😺

[Gabrz]

Thanks for your reply. In the end I used variables instead of the lookup idea.

And I've also created my own template. Generated a blank App with the Theme Editor tool, saved a blank App from PowerApps and copied over that Themes.json (to get a most recent version).

Then I did what you did, the tedious job of adjusting the Themes.json to my liking. Setting up the Palette and figuring out what all those style items are/do.

I even added some screens to the Entities.json. So when I load the file I already have some screens (home, info and settings) with headers and navigation buttons.

(This would all be a lot easier if we just could alter the json files after the App is saved to file with PowerApps. After all it's just a .zip with json files. But I can't figure out why it's not working.)

Although I made my own template I'm still eager to see what you did with version 2.0 🙂

[R3dKap]

Hi @Gabrz,

When you say you can't figure out why it's not working, can you describe your problem. Is it the screens you added ? Is it the import process that triggers the error ?

Have you already managed to re-zip a PowerApps package and import it in Power Apps ? If not, it could be related to the tool you are using to generate the zip file. On my side, the only one I found was working is 7-zip (maybe I wasn't using the other ones correctly, that I don't know).

[MichelH]

@iAm_ManCat 

Thank you Sancho for your hard work in this.

If I understand correctly you have made a template, that is linked to the powerapps development environment, where you make all controls look towards variables, to get their parameters for color/radius/font-size/etc .

That is amazingly great and will work a lot better than what I had for now, where I need to copy-paste controls, from a template screen.

However we still cannot theme existing apps, right?

For these we will still need to select all the controls to point their properties towards the variables.

Or could you make that work as well? If so, can you explain how?

Can we manipulate the colors of the default theme using some "special" variables?

I'm wondering how we can adjust current apps and apply theming to them so people can switch between themes on the fly.

I've made a CLI python script that can "digest" the json files in the Controls directory and list me the names of the controls.

Next step, would be to select the controls I would want to change and recreate the json files with the control's properties looking toward a master control or (probably better) towards a variable containing a color/radius/font-size/etc 

I'm still wondering if I will ever be able to import such modified json files.   🙂 

There are no messages that would indicate, what is wrong with your import, when it fails.

Thanks,

Michel

[SimTfL]

Saw this demoed ay MS Ignite! Excellent demo and I managed to sit down with the developer after to pick his brain about his app. Have to say, I will be tearing this apart and using this in my app going forward! Well done!!

[iAm_ManCat]

Hi @MichelH

Yes, unfortunately the open/import error message is not very descriptive (found that out the hard way while testing) - even a single typo will fail the whole item. Some things I can give advice on from my own experiences are that depending on how the file is added back into the .msapp will also affect whether it is importable.

My current method of re-injecting files into the .msapp is to use 7zip and then drag-and-drop the content, this seems to match the existing compression and not break the file - I imagine the open/import script that the actual online IDE uses has a fixed method of extracting files and can't deal with different compression levels within the .msapp.

I do believe we can theme existing Apps in the same way, however, this would require doing what you have done and navigating through all of the controls' .json files and changing all of their settings to the reference values - I've not tested this myself, so can't guarantee this will work, but I'm thinking there definitely must be a way, even if it is a bit convoluted!

Let me know if you get any further with that, I'd be very interested to see how if you do manage to resolve that issue,

Thanks!

Sancho

[Gabrz]

Hi @iAm_ManCat

Nice to see version 2 has been released!

Did you test opening the .msapp file and adding an item? Because when I add a button, the Fill value is the default blue RGBA code, and not the variable PrimaryColor2Value.

Love the idea/trick with the Select(hidden button). Is it possible to select a button from another screen? In case you have the same code you want to run from multiple screens. (Currently I'm using Toggle Items to execute re-usable code).

[iAm_ManCat]

@Gabrz - Thank you for spotting that - I uploaded the two test items where I was trying to incorporate the new Stream control as well, instead of the final product *facepalm* - this should now work as intended!

You can't select a button from another screen, and I moved away from the Toggle method, as toggles don't correctly trigger when users are using Internet Explorer, so could result in loss of business data.

[Gabrz]

Regarding the injection of files into the .msapp I would like to add that for me 7zip (or Winzip) did not work.

Problems I faced when Opening the file in PowerApps were:

   - Error opening file

   - (when the App did open) New Items did not get the color of the template, they reverted back to the default colors.

What works for me is a small PowerShell script that creates the .msapp file. 

Compress-Archive -Path $templateFolder"\*" -DestinationPath $templateName".zip" -Update
Rename-Item $templateName".zip" $templateName".msapp"

[Anonymous]

Excellent stuff! Huge applause to you for making such a great tool and making it available to the rest of us 🙂

As a user, I am missing a little guidance or a directory where I can find the different elements.
For example, you have placed some logic in the OnStart Syntax, but it does not contain the collection for Menu 3, here I had to find out myself that this was located at the SetTheme button on the Theme tester screen.

I still haven't found out where MenuItem2Selected_Example3_Dev is located, to edit the notifications from the menu icon selected.

I know there are a lot of elements, but it would be very helpful to know on the particular screen where I can edit the elements for that screen.
Let's say for Menu Example 3, you store a brief text in OnVisible, that you as user can edit the collection of menu items in screen Theme tester --> SetTheme button --> Onselect and you can change the notification dialogue in another location.

I'm looking forward to being using your template

Best regards
Ajazz