Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Portals
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find consulting services
    • Blog
    • Customer stories
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • User groups
    • Register
    • ยท
    • Sign In
    • ยท
    • Help
    Go To
    • Power Apps Community
    • Welcome to the Community!
    • News & Announcements
    • Get Help with Power Apps
    • Building Power Apps
    • Microsoft Dataverse
    • AI Builder
    • Power Apps Governance and Administering
    • Power Apps Pro Dev & ISV
    • Power Apps Portals
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Power Apps Community Demo Extravaganza 2020
    • Galleries
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Business Value Webinars and Video Gallery
    • Emergency Response Gallery
    • 2019 Microsoft Business Applications Summit Recordings (Archived)
    • Microsoft Business Applications Summit 2020 Session Recordings
    • Ideas
    • Power Apps Ideas
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results forย 
    Search instead forย 
    Did you mean:ย 
    • Power Apps Community
    • Galleries
    • Community App Samples
    • Branding Template App V2

    Branding Template App V2

    09-17-2019 17:24 PM - last edited 03-25-2020 09:17 AM

    Super User II iAm_ManCat
    Super User II
    27713 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    iAm_ManCat
    Super User II iAm_ManCat
    Super User II
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    Branding Template App V2

    โ€Ž09-17-2019 05:24 PM

    (if you downloaded this before 12:40 Jan 20th 2019, please re-download!)

     

    Having demo'd this version for the first time at Microsoft Ignite The Tour London,
    I have now released this for you all to use and remix!

    I have completely re-vamped the method of theming Power Apps.
    No longer do you have to rely on a static set of colours, or a screen of controls to copy.

    Make theme changes on-the-fly, enable accessibility as a default option.

    Save yourself time by using this template, or create your own template
    that works for you by remixing the work I have already done.

     

    There are (at the time of writing this) 2.5 million Power Apps developers. If each of us is only spending 1 hour in their entire lifetime changing the properties of controls, then we've collectively spent:

    2.5 Million Hours

    = 104,166 days

    = 285 Years

    And I'm sure we can safely say that we've all spent a lot more than just one
    hour changing every colour property of every control in an on-brand App.


    There had to be a better way!

     

    Imagine being able to create .msapp files that your client can open or import
    as part of a solution and start using straight away with their brand as a default!

    Or templates that you can give to your citizen developers to empower them to create
    beautiful Apps with minimal effort allowing them to focus on the LOB functionality!

     

    Power Apps already lets us create Apps in a fraction of the time of standard development, however, there are some things that still take us a fair amount of time and lack certain accessibility features.

     

    • How do we do more in less time and with less energy and time required? #LessCodeMorePower
    • How can we empower our citizen developers to create better Apps and with standardised branding & colours while maintaining accessibility functions?
    • How can we make PowerApps save us EVEN MORE time than it already does for development?

     

    The company I work for had 7+ brands until recently (4 unique colours, a logo and explicit branding guidelines each), which meant a LOT of configuration of Apps and thousands of Control property changes to meet these requirements every time.

     

    There had to be a better way! (Spoiler Alert: "There is always a better way)

     

    This App will allow you to pre-brand any inserted controls or screens without having to manually edit any properties of controls or of screens. It will also allow your user to jump between themes while using the App and comes with two accessibility themes (a dark-mode and light-mode version)

     

    This App is intended for:
    - Anyone whoโ€™s ever spent time changing the branding colours of every item and object within your PowerApps (everyone?)

    - Anyone who feels strongly about accessibility - these features should be there by default!!
    - Anyone who wants to empower their citizen developers to develop amazing-looking Apps without having to spend their time modifying each property of every Control
    - Anyone who wants to create pre-branded Templates for their clients that enable them to develop Apps within their company colours.

    - Everybody else! Seriously, everyone should be using something like this to make their development process even faster than Power Apps already makes it, and without having to spend so much time on themes or branding!

     


    So here's how to use it: You open (not import) the .msapp file from Power Apps and choose from the Theme Palette Screen, or if you would like to, you can edit the App's OnStart to either have the startup colours changed (comments and explanations are included within the App), you can also add additional themes, Menus etc (or remove the existing ones) by editing the OnStart.

     

    Initial Screen when opening AppInitial Screen when opening App

     

    The current default theme is Microsoft Light Blue ( a slight alteration on their default theme so that it works correctly when theming), a DarkMode version of that, a Light and Dark Monochrome theme for accessibility, as well as my purple and green themes (these last two are Definitely not for production use, just for fun!)

     

    You can add your own Theme settings quite easily by editing the array of themes, each has three colours, and then three text colours that should contrast those colours correctly, then a default label that will be used on any new labels or background-contrasted labels. Any themes you add to the OnStart Themes array will automatically populate the Theme Palette screen.

     

    image.png

    image.png

     

    I highly suggest using the Theme Tester screen to play around with your theme quicker than typing out the colours.

    Change the box Fills and colours at the top as well as setting the default label colour and whether it is darkmode.

    Darkmode here affects how the backgrounds are set and will affect the background colour of the checkboxes and options.

     

    image.png

     

    Now I know what you're thinking, This is just like the theme editor, well let me clarify a few things around that:

    • The Theme Editor is static, you set the colours and then the default item colour or settings can never be changed without creating a new file using the Theme Editor
    • Without changing the properties of every Control to a variable manually (meaning more painful hours doing this), the theme editor doesn't allow changes on the fly - my App template allows instant theme changes.
    • Any New inserted or existing items in the Branding Template App have their colours set to variables. VARIABLES! (think of the possibilities)
    • You can hardcode the desired theme colours into the App start (and then potentially get rid of or hide the Theme Palette if you don't want it). All of the settings are applied during the App's OnStart!
    • YOU DONT HAVE TO EDIT EVERY NEW ITEM

     

    Ok, so onto the demo-ing, the default colour is set to the Microsoft Blue to keep users comfortable with building with the colours and interface they are used to. Create a new screen and just pop in a Few Controls using the insert menu:

     

    image.png

     

    NOW:

    Instead of going through and changing all of these objects to match our brand colours, we choose another Theme from our Theme Palette (i.e our accessibility theme for those with low-vision or colour-blindness)

    - this automatically rebrands the controls:


    image.png

    image.png

    image.png

     

    Some things you may not have noticed from this:

    • Pen Input is a different default colour depending on the theme
    • Input Text fields have a clear button by default
    • Date Picker is branded out-of-the-box, no components needed!

     

    All controls default as branded. Additionally, timer text is slightly larger so that itโ€™s easy to read (letโ€™s be honest, we all hide our timers, so the text size is purely for us!). Gallery defaults to Branded Colours as well.

     

    There is now a screen for determining the default graph colours used within all controls - simply change the fill colours of the boxes to have them apply to all new and existing graphs:

     

    image.png

    image.png

     

    But wait, there's more!

    The default Insert Screen options are also branded by default:

     

    image.png

     

    We also have new abilities like using buttons to trigger code, an admin overlay for buttons to show only to certain administrators and to keep your code contained to one place, some example galleries and menus to give any entry-level Power App makers some inspiration of how the galleries don't need to look like this:

     

    image.png

     

    And could instead look like this:

    image.png

     

     

    After reading all of this, your reaction right now should be:

    https://www.youtube.com/watch?v=uwmeH6Rnj2E

     

     

    I've included two versions of the App - the reasoning is that Power App's current Insert Screen function incorrectly creates items if you change the App Orientation after you have created an App in one orientation (I'm sure they'll resolve that eventually but for now: two versions).

     

     

    FOR THOSE WHO WANT TO KNOW HOW I DID THIS: (video coming soon!)
    I deconstructed the .msapp file after using a file identifier to determine the type of file a .msapp is (spoiler alert: it's a zip), then I extracted out the Themes.JSON file within References, structured it so it's easier to read (its about 4k+ lines when properly JSON formatted) then I changed ONE property to RGBA(255,0,0,0), I then I had to create an App using that modified file and insert every possible control and screen to see where it was being used. Then I did the same process for the next property, etc ad infinitum. There are about 3700 lines of code that are properties, so roughly 900+ properties to do. Then you also have to create Relative properties within the top section for each of the values that you define to be a variable.

     

    This is exactly why I have done this for you - imagine if thousands of us are then wasting time doing all of this when instead only one of us needs to go through and do it so that the rest can benefit.

     

    So I did.

     

     

     

    If you have any thoughts about these or want to ask questions please feel free to give me a shout on Twitter - there will be a video within the next two weeks covering ALL sorts of details ๐Ÿ™‚

     

    [

    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/V2

    ]

     

    Original (V1) post is here: https://www.iammancat.dev/2019/09/branding-template/

     

     

    Cheers,

    Sancho Harker (iAm_ManCat)

    @iAm_ManCat


    Please 'Mark as Solution' if someone's post answered your question and always 'Thumbs Up' the posts you like or that helped you!


    Thanks!
    You and everyone else in the community make it the awesome and welcoming place it is, keep your questions coming and make sure to 'like' anything that makes you 'Appy
    Sancho Harker, MVP


    Preview file
    76 KB
    iAm_ManCat Branding Template App Tablet V2.msapp
    iAm_ManCat Branding Template App Phone V2.msapp
    Labels:
    • Labels:
    • Featured
    • Formulas and controls
    • Galleries and forms
    • Mobile app design and user experience
    • Web Desktop Hub app design and user experience
    Message 1 of 45
    27,713 Views
    85 Kudos
    Reply
    • All posts
    • Previous Topic
    • Next Topic
    • « Previous
      • 1
      • 2
      • 3
      • 4
      • 5
    • Next »
    MacaurlyW
    MacaurlyW
    New Member
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    โ€Ž09-19-2019 01:18 AM

    Hi, this is a great build. I have only introduced myself to its capabilities this morning  and I am very impressed with its value for a PowerApps developer.

    I have been building a template app myself which currently allows you to configure at a control level accross the app (similar to what you said you are looking to do in the future). This means that controls have to be copied from a library screen as opposed to from the Insert ribbon, but any properties can then be configured in one place for all controls of the same type accross the app. I look forward to merging the ideas you have used into my template!

     

    I previously stored them colors in an Excel file in OneDrive so your version of a theme picker is massively more effiecient. I will be happy to share and get your input / after I have finished a version 2 of my template and also see whee you're at with your version. 

     

    Good work!

     

     

    Message 2 of 45
    26,427 Views
    4 Kudos
    Reply
    iAm_ManCat
    Super User II iAm_ManCat
    Super User II
    In response to MacaurlyW
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    โ€Ž09-19-2019 04:12 AM

    Thanks for your comment @MacaurlyW - Really appreciate it Cat Very Happy

     

    Yes, I originally had a copy-paste screen with controls and anyone could easily make something similar using this by creating a default copypaste screen with the Insert controls and then defining the shape or size to your needs - my main gripe with the copypasta method is/was that its not intuitive and your users will generally keep trying to use the Insert> method and will then set the colours manually which you then need to clean up or fix later if you are using theming

    - so creating this by reconstructing the actual .msapp file was my attempt at making it as user-friendly as possible while still allowing customization throughout ๐Ÿ˜„

     

    Future versions I plan on releasing will be:

    • a stripped-down version where you only need to set three colours and three text colours (to match those colours)
    • a version where you can set the default colours, width, height etc at a control-level (for Insert> items) so you could specify buttons as one set of colours for all new items and labels as another set of colours and sizes etc etc

    Cheers,
    Sancho

    @iAm_ManCat


    Please 'Mark as Solution' if someone's post answered your question and always 'Thumbs Up' the posts you like or that helped you!


    Thanks!
    You and everyone else in the community make it the awesome and welcoming place it is, keep your questions coming and make sure to 'like' anything that makes you 'Appy
    Sancho Harker, MVP


    Message 3 of 45
    26,405 Views
    5 Kudos
    Reply
    R3dKap
    Super User R3dKap
    Super User
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    โ€Ž09-19-2019 08:47 AM

    @iAm_ManCat,

    I've been working for quite a time now on an application called PowerApps CTG (Custom Theme Generator) that would be similar to the PowerApps Theme Editor by @mehdis but that would be made WITH PowerApps so one could see the result right away on the various PowerApps controls.
    splash-screen.png   main-screen.png
    Its imperfections lies in the fact that it produces a JSON file that you must then manually reinject in you package file and that any existing control within the targeted app (when the theme JSON file is repackaged) would not automatically use the new template but only newly added controls.
    So I must admit your idea of putting variables directly inside the JSON theme file instead of just RGBA values is just brilliant (I am so disappointed at myself for not thinking about it earlier Smiley Happy).
    But now I am trying to see how I could mix the idea of using variables in the theme file with a more sophisticated interface to edit the palette values and change the default controls properties directly in the target application (thus replacing your Theme palette screen with a screen like the one I was building in my PowerApps CTG app). Also, the goal would be to try to get rid of the list of variables declared in the OnStart part of the application.
    In this reflexion I ended up imaginating that we could design a Theme screen as this:

    Image 23.png

    In the upper PALETTE section we would use rectangles'fill property to define palette color values, text inputs for numbers, etc.

    In the lower CONTROLS section we could insert every possible PowerApps controls which properties would be pointing at the palette above. You can see an example on the capture above: the button's Fill property would be set to point to the PrimaryColor1.Fill property of the rectangle in the PALETTE section.

    Then in the JSON file we would set the values of the palette to point to the colors and values in the PALETTE section of the screen, like this:

    Image 24.png

    And the controls styles properties values would point to the controls properties in the CONTROLS section of the screen, like this (all controls properties would have to be added in the JSON file):

    Image 25.png

    Putting all this together would allow us to:

    • change the palette by altering the elements in the upper PALETTE section of the screen, thus impacting the lower CONTROLS section controls, then impacting all controls used in the actual application screens
    • change the properties of the lower CONTROLS section controls, thus impacting all controls used in the application
    • make sure that (just like in your proposed solution) when inserting a new control from the PowerApps Insert tab, it relies on the THEME CONTROLS and THEME PALETTE
    • avoid having to declare any variable in the OnStart event of the application

    I'm eager to have your opinion on this... Smiley Happy

    Emmanuel

    Message 4 of 45
    26,268 Views
    5 Kudos
    Reply
    iAm_ManCat
    Super User II iAm_ManCat
    Super User II
    In response to R3dKap
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    โ€Ž09-20-2019 08:25 AM

    Hey @R3dKap 

     

    That's a really impressive App you're working on - I really like the design and layout! Cat Happy

     

    Yes, I'm am sure it is possible to do it via controls and label boxes because I've already been working on that myself Cat Very Happy - the next version to be published will include a set of screens for defining the colours, however I still want it to be able to jump between whole themes with one click so I will be consolidating the colours and keeping the existing Theme Palette page. Additionally, I am already in the process of moving the items from the OnStart as part of that process - this App was published publicly to define the concept as a first version and as a minimum viable product with additional versions, updates and features coming later.

     

    I really like the look of your App and am looking forward to seeing it published on the App Gallery for everyone to use ๐Ÿ˜„

     

    Cheers,

    Sancho

    @iAm_ManCat


    Please 'Mark as Solution' if someone's post answered your question and always 'Thumbs Up' the posts you like or that helped you!


    Thanks!
    You and everyone else in the community make it the awesome and welcoming place it is, keep your questions coming and make sure to 'like' anything that makes you 'Appy
    Sancho Harker, MVP


    Message 5 of 45
    25,984 Views
    0 Kudos
    Reply
    R3dKap
    Super User R3dKap
    Super User
    In response to iAm_ManCat
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    โ€Ž09-25-2019 02:13 PM

    Hi @iAm_ManCat,

    I've been trying (without luck) to reproduce just the basics of your technique to dynamically set the theme colors to variables.

    I opened the XML theme file from my blank app, I modified the PrimaryColor2 property of the default theme palette to a variable named THMPrimaryColor2Value and set the type to x just as you did it in your own theme file.

    Image 1.png

    After repackaging my app and loading it into PowerApps, any control using the PrimaryColor2 property doesn't take the THMPrimaryColor2Value variable as its default value. By example, the Button control's fill color should be THMPrimaryColor2Value but it sticks to its default RGBA value.

    Any clue on what I could be missing here ?

    Emmanuel

    Message 6 of 45
    25,706 Views
    0 Kudos
    Reply
    Gabrz
    Gabrz Advocate IV
    Advocate IV
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    โ€Ž10-09-2019 08:05 AM

    Wow, this is a very nice timesaver.

     

    I've tried editing the Themes.json (changed a value "%CONTROL.ID%.Fill" into "%Palette.PrimaryColor2%" in the dropdown component) and then replaced the file in the .msapp.

     

    But when I open the file/App again in PowerApps and insert a Dropdown, all default values are reverted to the default RGB blue color. Also for every other input item the default values are reverted.

     

    Do you know what is happening, and how I can change the default values

     

    Message 7 of 45
    24,968 Views
    0 Kudos
    Reply
    Gabrz
    Gabrz Advocate IV
    Advocate IV
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    โ€Ž10-12-2019 04:39 AM

    I have this idea of storing all the values in a Collection (instead of all those single variables)

    // Set Palette Color Values for Light Theme
    ClearCollect(
        colCurrentPalette,
        { Name: "PrimaryColor1", Value: RGBA(238,243,246,1) },
        { Name: "PrimaryColor2", Value: RGBA(181,198,214,1) },
        { Name: "DisabledColor1", Value: RGBA(68,68,68,1) },
        { Name: "DisabledColor2", Value: RGBA(136,136,136,1) },
    );
    // Set Palette Derived Color Values for Light Theme
    Collect(
        colCurrentPalette,
        { Name: "TextColor1", Value: LookUp(colCurrentPalette,Name="PrimaryColor9",Value) },
        { Name: "HoverColor1", Value: LookUp(colCurrentPalette,Name="PrimaryColor9",Value) },
        { Name: "PressedColor1", Value: LookUp(colCurrentPalette,Name="PrimaryColor9",Value) },
        { Name: "PressedColor2", Value: LookUp(colCurrentPalette,Name="PrimaryColor3",Value) },
    );
    // Store Light Theme
    ClearCollect(
        colThemes,
        { Theme: "Light", Palette: colCurrentPalette }
    )

    And use LookUp in the Themes.json

    "palette": [
       {
          "name": "PrimaryColor1",
          "value": "LookUp(colCurrentPalette,Name=\"PrimaryColor1\",Value)",
          "type": "v"
       },

    But I'm not sure that would be beneficial?

     

    Pro's:  Less Variables, just one or two Collections.  Less Code when switching Theme/Brand.

    Con's: Not sure about performance (Lookup versus just a Variable)

     

    I'd like to hear your thoughts about it.

     

    Thanks

     

     

     

    Message 8 of 45
    24,906 Views
    0 Kudos
    Reply
    iAm_ManCat
    Super User II iAm_ManCat
    Super User II
    In response to R3dKap
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    โ€Ž10-24-2019 02:22 PM

    Hi @R3dKap

     

    Apologies for the delay in response, I've been working on something exciting that I'm not allowed to share Cat Wink

     

    I think the problem you might be facing is that your blank App has the structure of an App with controls and settings already in it - you will need to use a .msapp whose structure matches that of the Theme Generator files (or the older blank items) - there must be no folders within it and only a specific list of files:

    AuxDataMap.json

    Entities.json

    Header.json

    MacroTable.json

    Properties.json

    PublishInfo.json

    Themes.json

     

    Additionally, I initially set the properties as 't' for text rather than 'x' for variable and the process of opening the .msapp then changes these once they are exported again.

     

    I hope this helps with your Custom Theme Generator! I am looking forward to seeing it published to the Community App Samples Cat Very Happy

     

    Cheers,

    Sancho

    @iAm_ManCat


    Please 'Mark as Solution' if someone's post answered your question and always 'Thumbs Up' the posts you like or that helped you!


    Thanks!
    You and everyone else in the community make it the awesome and welcoming place it is, keep your questions coming and make sure to 'like' anything that makes you 'Appy
    Sancho Harker, MVP


    Message 9 of 45
    24,579 Views
    4 Kudos
    Reply
    R3dKap
    Super User R3dKap
    Super User
    In response to iAm_ManCat
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    โ€Ž10-29-2019 02:11 AM

    Thanks @iAm_ManCat, I'll check that out soon... Thanks for the tip...

    Message 10 of 45
    24,485 Views
    2 Kudos
    Reply
    Preview Exit Preview

    never-displayed

    You must be signed in to add attachments

    never-displayed

    Additional options
    You do not have permission to remove this product association.
    ย 
    • « Previous
      • 1
      • 2
      • 3
      • 4
      • 5
    • Next »

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Automate
    • Power Virtual Agents

    Power Apps

    • Sign in
    • Sign up

    Browse

    • Sample apps
    • Services

    Downloads

    • Studio
    • iOS
    • Android

    Learn

    • Documentation
    • Support
    • Community
    • Give feedback
    • Blog
    • Partners

    • © 2021 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks