Guide to Theming Options in Canvas Apps

by HubSite 365 about Alex Shlega [MVP]

Microsoft Power Platform Consultant/Solution Architect, Business Applications MVP

Citizen DeveloperPower AppsM365 Hot News

Master Microsoft canvas app theming for consistent UI/UX. Learn to optimize layout templates and adapt predefined themes for your custom applications.

Overview of Theming Options in Canvas Apps

With this summary, we delve into a blog post by Alex Shlega [MVP], exploring the aspects of theming in Canvas Apps, particularly two main aspects - user interface "appearance" settings like font weight and size, background color, border width, etc., and layout templates which define the application's common layout. The functionality of appearance is covered by cascading style sheets in web development, whereas layout templates may vary depending on different frameworks.

In Canvas Apps, approaching these aspects is somewhat more complex. Let's first discuss "appearance". When adding an element like a button onto an empty screen, there's no direct way to apply a set of default properties for your application's elements. The strategies, unfortunately, only help in applying different themes using “theme” variables initialized at the start of the app.

Canvas Apps come with predefined themes that, once applied, affect defaults settings of all elements except any customized by the app maker. These in-built themes might be sufficient for most applications, and further tweaking can be done by applying a variable approach.

More Theming Methods

Interestingly, there are other advanced theming approaches such as the Creator Kit and the CoE Starter Kit. Creator Kit utilizes variables where you define a theme object at the application start, which then gets applied to individual components that come with the kit.

However, the downside of the Creator Kit approach is that theme properties do not effortlessly apply to out of the box components, demanding components to be created in a way that retrieves default values from the theme object.

CoE Starter Kit provides powerful, but quite different, theme customization options. Unlike the Creator Kit versions, these themes apply to the out of the box Canvas App components. This is done by defining palette values, setting default properties for each control and initiating those variables at the start of the application.

CoE differentiates itself further by storing theme settings in Dataverse tables, making theme application and updating smooth within the environment. However, the caveat with this is that these settings do not automatically deploy to other environments as part of the solution but need to be deployed as “data”.

Conclusion

Summing up, we find three theme application methods in Canvas Apps: built-in themes, Creator Kit themes, and CoE themes. While having a standard way of applying themes would be beneficial, right now we exist in a space where each approach serves distinct needs of the application. Essentially there is room for a template app that combines all three approaches, addressing the varied needs of all developers.

Read the full article Canvas Apps theming options

Power Apps - Comprehensive Guide to Theming Options in Canvas Apps

Learn about Canvas Apps theming options

Today, our focus is on Canvas Apps, specifically its theming capabilities, featuring appearance settings and layout templates. Thematic settings hold immense significance as they give that unique touch to our data, making it visually appealing and user-friendly. Talking about its various aspects, you should know that it has two main parts- User Interface (UI) appearance settings and layout templates.

When you think about to start with the UI Appearance settings, it provides functionality such as font weight, size, background color, border width etc. On the other hand, layout templates are about application layout, layout elements, and their behavior. In the web development world, we use cascading style sheets (CSS) for the 'appearance part'. However, Canvas Apps UI theming can be a bit tricky.

We can’t directly set default values for UI elements in a Canvas App. The most efficient way I found is to initialize control properties using variables and prepare different sets of code for different themes.

Variables can be used when initializing control properties.
Initialize all the 'theme' variables at the start of the application.
Prepare different sets of initialization codes for supporting different themes.

There are predefined themes in Canvas Apps that change default settings of all elements on all screens. This is often adequate for many applications. If you want to tweak specific settings here and there, you can apply a 'variable approach'.

There are various theming options like theming components in the Creator Kit and a theming solution in the CoE (Center of Excellence) Starter Kit. The Creator Kit relies on variables to define the theme object in the OnStart of the apps. This theme then gets applied to individual components. To apply the same settings to regular components, you can access theme properties through the theme object.

However, there is a limiting factor. The theme properties don’t automatically apply to the out-of-the-box components. Your components have to be created in a way that they can retrieve default values from the theme object.

On the other hand, the CoE Starter Kit also provides theme customization options. The unique thing about CoE Starter is that it applies themes to the out-of-the-box Canvas App components as well.

When you unpack a saved Canvas App file using the 'pac' tool, you'll find a Themes.json file. If you unpack CoE template apps, you will get this kind of themes.json file:

Picture placeholder – Note for graphic designer: Please insert a screenshot of the themes.json file from the CoE Starter Kit.

After unpacking a Canvas App file, you'll see how default properties are set for each control. For example, this is done for the button control.

There are three ways to apply theming in Canvas Apps- through out-of-the-box themes, Creator Kit themes, and CoE themes. Each theme has its own merits and demerits. Out-of-box themes are a good start but they are not customizable. Creator Kit themes are excellent but they don’t auto apply to out-of-the-box components. CoE themes work great for out-of-the-box components but they are not recognized by the Creator Kit.

In conclusion: Would it be nice to have one way of doing it? Absolutely! Therefore, things need to get settle/merge eventually. And to deepen your understanding of this topic, consider doing online courses on Microsoft's Power Platform and CoE Toolkit.

Keywords

Canvas Apps Theming, App Design Customization, Mobile App Themes, Canvas App Design, Theming Options in Apps, Customizable Canvas Apps, Canvas Apps Layouts, Canvas Apps Aesthetics, Personalizing Canvas Apps, Application Visual Customization