Power Apps Branding Template V3

You may also like...

45 Responses

  1. Petra says:

    I would like to use your solution, but when I try to open the file (iAm_ManCat Branding Template V3.msapp) in PowerApps, I always just get an error message that something went wrong. I also tried in the Microsoft Developer environment, but no chance.
    Do you have a tip what else I can try?

    • iAm_ManCat says:

      Hi Petra,

      Are you trying to Open it or are you trying to Import it? This file is for opening, not for import.
      You will need to go into the editor, and click Open from inside there, using the “…” menu at the top of the editor.
      If you’re still having issues doing it that way, could you let me know if you are able to download (not export) one of your own apps and Open it in the same way? I have seen from others that some tenants like GCC are preventing Open of solutions altogether.

      Cheers,
      Sancho

      • Petra says:

        Hello Sancho
        Thank you very much for your reply.
        Meanwhile I found out that my business laptop caused the problem. It’s quite secured and the opening of locally saved apps is blocked. With my personal laptop I could open the app without any problems.
        I think it’s great what you have developed. This will make my custom design work so much easier.
        Regards
        Petra

  2. Darren says:

    Are there any legal restrictions on using the template? Is it considered open source? Thanks!

    • iAm_ManCat says:

      No Legal restrictions – I made this for people to use, build upon and share. Would be nice if you kept my name in a comment somewhere inside whatever you build, but it’s not a requirement 🙂

  3. Kaly says:

    Hello Sancho, thank you for this wonderfull work !
    I have a question, when i add a new button control, it comme all default value like “ChosenControlsTheme.ButtonColor”, but when i add a new gallery, it is not the case, the font size, font color, etc. are not the dafeult.
    Did you not configure all those properties or i have a problem ?
    Thank you in advance for your help

    • iAm_ManCat says:

      Hi Kaly,

      The problem here is that Microsoft updated the galleries in Power Apps a few weeks ago, which broke all of the defaults code as they overwrote this.

      I will try get a new version out with fixes as soon as I can,

      Cheers,
      Sancho

      • Selin says:

        Hello Sancho,
        i was wondering why it didn’t work. I thought i had a problem! Thank you for explaining it!
        Thank you for this solution!
        Best regards,
        Selin

  4. Fritz Lenker says:

    After years in a MS web development environment where HTML and CSS are common whatever the language, you have brought design sanity to PowerApps. Thank you! I learned of you from my Matthew Devaney blog and have been experimenting with my own Power Apps using your Theme framework and have been amazed at the ease of bringing complex theming to them. However, a question: Can one have individual fonts and text sizes for each theme? I’ve tried it and get lots of errors. Thank you.

    • Fritz Lenker says:

      Never mind. After reading the entire app.OnStart text, the answer is clear, especially after looking at the Garish Control-level Test.

      • iAm_ManCat says:

        Hey Fritz,

        I’ve just seen these comments, Thanks for the compliment regarding design of Power Apps 🙂 Glad you found what you needed in the OnStart – the garish example showed how to do the individual overrides but I guess I also could have done more tutorials etc for using this but struggled to find the energy to so tried to contain as much of the information inside the App itself to keep it self-contained.

        Thanks again!
        Cheers,
        Sancho

  5. Brian says:

    Should this work in the GCC environments as well? I keep getting “There was an error opening the file.” with simply a session ID

    • iAm_ManCat says:

      Hi Brian,

      I’m not able to answer that – the GCC docs don’t mention anything about the ability to open Apps, but I would suspect it has to do with data concerns and importing data that shouldn’t be allowed via an app. I don’t have access to any GCC tenants so can’t test it myself, but I would try and see if you can Save As/Open a blank app, and if you can export/import an app – if you can export/import but not open/save as then I could make you an importable copy to use

      Cheers,
      Sancho

  6. Daniel says:

    Hi!

    Great template for ensuring a organizational design across apps.

    Have you found a method to similarly apply this to any behavior/action properties of the controls? Such as OnSelect, OnChange etc. 🙂

    • iAm_ManCat says:

      Hey Daniel!

      I certainly tried, many times, but sadly no – there’s no way to default the behaviour/action properties – the IDE only picks up defaults from the themes.json file so there’s only UI info in there, the rest is defaulted by using the IDE itself rather than entries in the msapp (for the record, they are in there, it just doesn’t read them as defaults to be used).

      Cheers,
      Sancho

      • Daniel says:

        Hi Sancho,

        Aww, to bad. Perhaps one day in the future…

        Another question then 🙂 I was messing around with the Templates.Json to see what could be achieved with this. I had the idea that it would be nice with two different type of buttons, a primary button with a filled design and a secondary button with a outline design.

        I managed to create an additional button that could be used in the app, but I might have broken some referencing somewhere, because the coloring/design did not come out as intended.

        Have you tried something similar? If so, any success with it so far?

        Best,
        Daniel

        • iAm_ManCat says:

          I have also tried creating additional styles for buttons and other objects, but the Power Apps editor doesn’t pick these up correctly and from what I can see there’s a server-side template that it looks at for the controls it can interpret, so yeah I didn’t have any luck with that either unfortunately.

  7. Michael Demster says:

    Great Template. I have been promoting this with my customers. I haven’t seen anything else quite this nice.

  8. 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 🙂

  9. 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

  10. 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

  11. 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.

  12. 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!

  13. 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.

  14. 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.

  15. 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!

  16. 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.

  17. 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?

  18. 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.

  19. 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. 🙂

  20. 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. Required fields are marked *