Branding Template App (Automagical!) 08-03-2022 23:55 PM

[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 

]

[iAm_ManCat]

Yeah, have purposely kept my template data-agnostic up until recently so that for new makers (largest target audience) they don't have to worry about configuring data sources or anything like that - would be really easy to create a simple list (SP/DV/SQL/etc) to store/retrieve themes or other settings, so have left that to the more advanced makers to expand on my template 🙂

[MikeDemster]

Sancho, is it possible in your next version to add control overrides for containers?

Less importantly, I often mask underlying neutral colors (like screen fill) with a semi-transparent version of the primary color (like RGBA(0,18,107,0.3)) as the fill property of header containers (Microsoft blue theme in this example), so having a set of "glass" colors or semi-transparent colors or incorporating a way to apply a transparency level to a primary color dynamically would be very useful to me.

Awesome product btw!

[jlau18]

Hi there, can this work for phone size apps as well. If so, how do I accomplish this. Thanks!

[MichaGue]

@jlau18, yes - it works. You have to convert the tablet layout to the phone layout. An example can be found here: https://toddbaginski.com/blog/how-to-convert-a-powerapp-from-one-layout-to-another/

[jlau18]

That worked perfectly, thank you!!

[MichaGue]

Hello Sancho,

for the first time in a long time I did not use your template as a starting point for a new app but a completely empty Power App.

I noticed that in the PowerApp environment that is provided to me in my company, the user interface is completely new to me (see screenshot).

The authoring version is:

But if I use your template as a starting point for a new app, the old - known to me - user interface is displayed (see screenshot).

 

The authoring version is:

So, authoring version in both apps is the same. Even if I change it to recommendation 3.22091.23 nothing changed. 😞

- What effect does your template have on the Power Apps environment shown?

- Does this also affect the available functions, i.e. can I not participate in new developments on the part of Power App when using your template?

- Is there way to change the interface to the newest style when using your template?

Thanks and best regards,

Michael

[iAm_ManCat]

Hey @MichaGue

Thanks for raising this - the addition of the command bar is actually a hidden feature flag, so it will be applied to historic apps over time when they are edited and is not defined by authoring version alone. If you open any older Apps you have from the .msapp file you will see the same thing.

I've added the feature flag for this to a quick/dirty edit of the 3.3 version, so 3.4 has no other difference other than the feature flag for the command bar is enabled - you can download this from the link at the top of this screen.

There's no impact when using the existing 3.3 template - the feature flags will get added to your apps by the studio automatically at some point.

Cheers,

Sancho

[MichaGue]

Hello Sancho,

thank you very much for the hint. Can you explain the change regarding the feature flag in more detail? Background is that I made some adjustments to your template and don't want to start at the beginning again. If I can adopt this feature flag, that would probably be the easier solution.

Thanks for your help.

Greetings Michael

[iAm_ManCat]

Hey Michael,

Yes happy to explain!

So in the root folder of the extracted app is properties.json, inside that there is a section for AppPreviewFlagsMap

You will need to add a line in there for:

"enablecommandbar": true,

 

So in your case, save a copy of your modified template locally by downloading it, extract the contents, update the properties.json, then use the powershell script I included (you can get that from my github) and repackage it - then you can open up and overwrite your existing template with the edited one.

 

Or, you can wait for it to automatically get applied to your template - this may take some time but its always the same with preview flags, there have been a number of preview flags added since the 3.3 version was published, and it normally just takes time for them to apply to apps that are saved in the cloud.

 

The full list of flags added since 3.3 is:

"cdsdataformatting": false,
"enablerpawarecomponentdependency": true,
"enableeditcacherefreshfrequency": false,
"formularepair": false,
"dataverseactionsenabled": false,
"expandedsavedatasupport": true,
"reverttooldpowerautomate": false,
"appinsightserrortracing": false,
"appinstrumentationcorrelationtracing": false,
"enablecommandbar": true,
"excelcompatibility": false,
"namedformulas": false,
"zeroalltabindexes": true,
"untypedobject": false

Cheers,

Sancho

[MichaGue]

@iAm_ManCat: Wow - great! Thanks a lot for the explanation.