Power Apps Branding Template V3

You may also like...

27 Responses

  1. Deval says:

    Thank you very much Sancho for this brilliant template.
    Need your help for one thing, I was trying to apply one theme to my already existing app.
    I downloaded msapp file, unpacked it using vs code extension for power platform, changed the entire content of Theme.JSON file with one new app that uses this template, then used the powershell to convert the main app into zip and tried to import it, but I am getting error and it does not get imported successfully.

    Am I doing something wrong here?
    Would it be possible for you to brief me about how we can apply the themes to existing app please?

    Many Thanks in Advance! 🙂

    • Deval says:

      PS: The App OnStart code is already there for initialisation of Theme, I just removed not requried items from Themes collection and copy pasted other stuff as it is from new app to main app’s OnStart, so both are same at the moment.

    • iAm_ManCat says:

      Hi Deval – The PowerShell script creates a .msapp formatted file rather than a .zip (the msapp is an archive, but its treated differently, so if you renamed it to zip then that won’t work), so if you have tried to import that then it won’t work as its not designed to be imported – you will need to use File > Open from within the Power Apps Studio to open the file and it must be the .msapp format 🙂

  2. Tony says:

    Thank You for the hard work and for sharing it with the community. I’m new to the Platform. I have downloaded the .msapp and when I try and upload the app it continually fails ” Wrong Format expected .zip”. I’ve used the PowerShell script to create the zip file by commenting out the rename App portion. A little guidance would be greatly appreciated.

    • iAm_ManCat says:

      Hi Tony,

      This is a .msapp file so you don’t need to convert or change it into anything – the PowerShell script is for if you have extracted the .msapp into a folder to make changes to the underlying files and need to recombine it back into an msapp file, it is not designed to create .zip files, it creates an archive yes, but .msapp files are archives containing Power Apps canvas App data.

      It looks like you tried to import it rather than open it – You can open any .msapp file within Power Apps Studio by going to ‘File > Open > Browse ‘ – the quickest way is to create a blank app, then once the editor loads, click File> Open> Browse

      Cheers,
      Sancho

  3. Muhammad Usman Azmat says:

    Thank you for creating such a wonderful template and saving us from spending countless hours in UI designing. May be i am getting greedy but no harm in asking :), any plan to make this template responsive?
    May i know how i can apply background color to horizontal / vertical containers?

    • iAm_ManCat says:

      Hi Muhammad,

      Unfortunately we are limited by what controls the Power Apps team use in their themes.json for defaults, and containers are not included in this at present.

      Cheers,
      Sancho

  4. Ross says:

    Hello,

    I would like to take the time and thank you for creating this. Saves a ridiculous amount of time.

    • iAm_ManCat says:

      Thank you for saying that – I really do appreciate it. I spent a lot of time working on this so that others don’t have to spend that same amount of time! 🙂

      • Ross says:

        On the OnStart section to set the themed Font, how would I use a proprietary font? Currently in PowerApps, I would type the name in double quotes in the Font property of a control.

        Thank you.

  5. Muhammed says:

    How could I go about setting more defaults? I want to set a default screen background image, and I want to change label colors in forms so that it is different depending on whether it is an edit form or a view form. Thanks

    • iAm_ManCat says:

      Hi Muhammed, unfortunately we can only work with what properties are exposed in the themes.JSON file – background colour is a default property of a screen so can be modified, but an image is not currently supported (even in the editor – you can’t change the background to an image, you have to insert an image and make it the size of the screen, so we can’t affect that by default). The forms use the same types of label types within them, so I don’t think its possible to change them contextually like you are asking. We are unfortunately limited by the properties and objects exposed by the Power Apps team. I do hope that they allow us to customize further in future!

  6. Mark says:

    Hi Sancho – this is great! Is it possible to configure other properties not explicitly called out already in the control level properties, for instance margins and padding? Many thanks!

    • iAm_ManCat says:

      Hi Mark, yes it is – however the number of additional properties to do so resulted in an extra 125+ properties that need to be set and referenced, and this came at a slight performance hit so I’ve not included those.

  7. Vincent says:

    Hello,
    Great work !
    I the template the properties
    ControlsTheme.ButtonRadiusTopLeft
    ControlsTheme.ButtonRadiusTopRight
    ControlsTheme.ButtonRadiusBottomLeft
    ControlsTheme.ButtonRadiusBottomRight
    were missing. So I just added it and it works.

    I embed all of this in a Component Library. Seems working but I have to test it deeply.

  8. Reiner Knudsen says:

    I have a question. Going through the themes.json there are a lot of “style” definitions. There are multiple for labels and buttons etc. Where do they come into the game? How does one reference one of these styles? Or are they styles PowerApps automatically applies when creating a label in a certain context?

    • iAm_ManCat says:

      You are correct – Power Apps uses these when creating the Insert>New Screen templated controls for each screen – there is currently no way to insert or reference these unfortunately as you can only insert the default type of control – this is a limit imposed by the IDE itself. If you find a way to reference them please let me know!

  9. Stuart says:

    Hi. Can you please describe how I can add / import these into an existing Power App?

    • Reiner Knudsen says:

      This template is based on a manipulated .json file in the .msapp file. It is a bit of a hassle to change files within the .msapp file. You could add your app to Github and swap the themes.json file. Not sure whether that would do the trick, though.

  10. Reiner Knudsen says:

    Such an incredible effort. Thank you for sharing. That really saves time!!
    I have a question: How would I set all labels to bold font weight. Is that possible?

  11. Bob Cobra says:

    Thanks for the template! One question: Every time I run the app i get a divide by zero error on first load. Any ideas?

    • iAm_ManCat says:

      Hi Bob, there is a divide by zero issue whereby Power Apps is looking at a value before a Countrows() action has completed, which results in the rows equating to zero which it then divides by – I should have resolved this in a recent release so please try download it again.

  12. Ramesh Mukka says:

    After reading through the post, it definitely helps to bring this branding template to my apps. However I will be much interested if we have videos demonstrating about creating new themes out of this and/ or modify existing variables/collections too. This can give more visual appeal of how to use it. I am sure am coming back to read this again until I make best use of this. So should have so much effort for all 3 versions. All I can is Thank you so much giving so much to the community and am running short of words. 🙂

  13. Valerie Schaffer says:

    Thank you, thank you, thank you! I’m spending today to look through this and make it my default branding app by adding all my components and our organization’s colors to it. Love the new home screen choices.

Leave a Reply

Your email address will not be published.