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 

]

[MichaGue]

Hi @iAm_ManCat,

in which file are the parameters configured for the screens that can be added via "New Screen"? In the screens from "New Screen", for example, ControlsTheme.IconFill is used for shapes. I would like to make a difference here between "classic" icons and the "New Screens", so I would have to adjust the variable. Thanks for your great work and help.

Greetings Michael

[iAm_ManCat]

Hi @MichaGue,

Unfortunately there are some things that we cannot change - the New screens utilize a combination of default controls and specific controls. Where they have used specialized controls, I have added the properties for those specialized controls near the bottom section of the ControlsTheme variable, with descriptions of what they each apply to.

I really wish we had the level of control you would like, but when new screens are added it uses a layout and other options that are not held in the actual files (likely held online as part of the Studio editor), only the additional properties of certain labels and controls that they have customized beyond the standard control settings are available to us to change.

Cheers,

Sancho

[iAm_ManCat]

Not with the settings we currently have available - only the external focusedborder around the whole control can be changed with the properties they surface in the settings 😞

[MichaGue]

@iAm_ManCat,

You have configured your "Text Input" so that the text "Text Input" appears as the "Default Value". This way you have to delete the text "Text Input" first when you have to enter a new value. Especially on the smartphone I find this inconvenient. From my point of view it would be better to insert the text "Text Input" as a hint. The default Text Input has no entry. In which file did you do this configuration? Thanks.

Greetings Michael

[iAm_ManCat]

Hi @MichaGue,

I have not configured that - it is only possible to configure Design properties in the backend at present.

That is a default property of Text Inputs in Power Apps. If you create a blank app from Power Apps and insert a new Text Input, you will see that it has the default text of "Text Input".

Kind Regards,

Sancho

[g_bystron]

Hi @iAm_ManCat ,

Inspired by your template I want to create my own, less complex theme. Recently I have issues (with MSAPP file and apps saved in cloud) that I can't open my theme without any errors, I just have blank window and I can't click anything within this area (can't go to "Screens", can't click on left side menu). Did you encounter similar? For a quite long time I didn't have any problems with app, came up recently and I don't see a way to find what can cause it 😞 Yesterday I worked on a few things and app works perfectly, today I can't access it.

My workaround is to create new app, export, edit, paste theme code, save, load to powerapps. However now I'm affraid if I release it to my team, after a while they can have a problem with editing their app 😞

[MichaGue]

Hi @iAm_ManCat,

thanks for your great work. I have one question. If I integrate a from to view data, I can use "Forms -> Display" or "Forms -> Edit (and set default mode to view).

Depending on which I choose, the design is different (see screenshot).

Where can I configure "Forms -> Display" to have the same style as "Forms -> Edit with display mode = view"?

Thanks for your help.

Best regards,

Michael

[iAm_ManCat]

The layout is applied by the Power Apps Studio with no ability for us to edit which controls they use, so we can change what the basic controls look like (theme changes) but the forms themselves are generated outside of our control - this is something the Power Apps team have done when creating the Power Apps Studio, so there's not much we can do for how it creates the forms as these values are not exposed.

I have tried to create different versions myself by modifying the templates.json file within the App files, however these properties are ignored when the App is opened in the studio and the values are pulled from the could via the Studio itself every time.

As a general rule, I only ever use the Edit Forms and then set their DisplayMode property - I would suggest not using the View Form as the Edit form can perform the same function as well as others 🙂

[MikeDemster]

I think one of the biggest advantages of your approach is Edit forms and the ability to control the properties of the forms controls specifically, to override the overall theme.  This solves something I hear the most complaints about: "How can I change the font for all my edit form labels at once?"  It also does not suck that it doesn't require copypasta!

[MikeDemster]

I agree with your premise, mixing an org-wide theming app (persisted to an attached table/SP List) with Sancho's excellent solution would be amazing.

This guy has the second piece worked out pretty well https://www.youtube.com/watch?v=23pkexuqVkk .  This seems like it could "easily" be added to Sancho's solution to be the best of both worlds.