Components - Part 1 - Build a Theme Component

[KC]

Part 1 of 2!

Styling Options!

Out of the box PowerApps provides several options for styling your application with pre-built themes

There are several ways to apply styles. Apply a style directly to each individual component using the property panel.

Or by using the Advanced tab of the Property Panel

Create a settings Screen ( Master Screen) , this screen is never shown to the users of your app, it is only available in the Designer.

Set the properties of the controls in the main app to the properties of the Master screen's controls.

Now any changes made to the Master control automatically updates the app controls.

You can import an Excel SpreadSheet with color values and set the properties of the controls based on the values in the Spreadsheet.

Connect with a SharePoint list that contains the color values, use values stored in a Collection etc...

Dynamic Styles

These options are great when you are in Design Mode, but what about when the app is published?

What if the user wants to change your color scheme?

What if the user would like to set their own colors to match their branding?

PowerApps does not provide this out of the box, you the designer, must provide this functionality. Ideally you would like to build something that can be included in any app in a simple but consistent way.

First Attempt At Creating A Reusable Control

About 9 months ago I created a test app I called "Theme Configurator".

This app imports a Spreadsheet of color values I copied from the Google Material Design Colors,

The Theme Configurator was developed before components were made available. Therefore to use in other PowerApps, you have to copy and paste the controls and formulas into the new app, import the SpreadSheet, fix any issues that may surface. Anytime you make a change to the Spreadsheet you would need import it once again and possibly troubleshoot once again. There has to be a better way.

The Better Way is Components!

Components are an Experimental feature recently made available by the PowerApps team.

You have to enable this experimental feature by navigating to your apps settings panel,

File->App settings->Advanced Settings then scroll all the way to the bottom under Experimental Features and click the toggle button for Components.

More information about Components can be found on the PowerApps Blog: https://powerapps.microsoft.com/en-us/blog/components-available-in-preview/

In this post I created a single app to serve as a Component Library, then I save it to a location easy to find and then import the Component Library instead of copying and pasting the individual controls to my PowerApps.

Theme Component Requirements

• Designer / User should be able to input a color by name or by Hex value
• Color swatch should show the selected color and another swatch should show the color hue
• Slider control adjusts the color hue
• Toggle button turns the color on or off (If off, the app will use the default colors)
• User settings should be saved to the device if in Offline mode or a SharePoint list if in Online mode.
• Should provide reference links to sites containing color values.

Second Attempt At Creating A Reusable Control

Version 1:

1. Header Component - Input Property: HeaderBackGroundColor = ThemeTool.HeaderBackground

2. ThemeTool Component - OutPut Properties: HeaderBackground, FooterBackground, ButtonColor, ButtonTextColor, CanvasColor, GalleryBackgroundColor

3. Footer Component - Input Property: FooterBackGroundColor = ThemeTool.FooterBackground

4. Button Color = ThemeTool.ButtonColor

5. Gallery Background = ThemeTool.GalleryBackgroundColor

6. Canvas Color = ThemeTool.CanvasColor

Image1: Test Screen

ThemeTool Component version #2!

Original Color:

The first swatch, the circle icon, Fill is set to:

ColorValue(txtHdrColorHex.Text)

Color Hue:

The second swatch, the square icon, Fill is set to:

If(
    toggleHeaderColor.Value = true,
    ColorFade(
        txtHdrColorSwatch.Fill,
        Value(sliderHdrColorTransparency.Value) / 100
    ),
    Color.AntiqueWhite
)

• The toggle button controls whether to show or hide the chosen color, if the toggle button is set to False then the default color of the Hue Swatch Fill is set, in this case, to AntiqueWhite.

Using the ColorFade function we set the Fill value of the swatch by dividing the result of the Value function by 100, 100 could be repaced with any number you wish.

Repeat for each Hue Swatch and slider pair.

Save the Settings!

Save to the Device!

Saving to the device is a good option where you want all instances of the app to be consistent or if you, the designer, allow it, the user can make all the changes they wish to their app instance without affecting other user instances, or for offline scenarios.

Let's create a Collection to hold the users preferences and then save the Collection to the device using the SaveData function:

// This is the collection that is saved to the Device, add the settings accordingly
ClearCollect(
    SavedTheme,
    {
        HeaderBackground: HdrColorSwatchNew.Fill,
        FooterBackground: FtrColorSwatchNew.Fill,
        ButtonColor: BtnColorSwatchNew.Fill,
        ButtonTextColor: BtnTxtColorSwatchNew.Fill,
        CanvasColor: CanvasColorSwatchNew.Fill,
        GalleryBackgroundColor: GalleryColorSwatchNew.Fill,
        txtHeaderHexValue: txtHdrColorHex.Text,
        txtFooterHexValue: txtFtrColorHex.Text,
        txtBtnHexValue: txtBtnColorHex.Text,
        txtBtnTextHexValue: txtBtnTextColorHex.Text,
        CanvasHexValue: txtCanvasColorHex.Text,
        GalleryBackgroundHexValue: txtGalleryBkgrndColorHex.Text
    }
);
// Can only use SaveData on an actual device, does not work in a web browser.
SaveData(
    SavedTheme,
    "SavedTheme"
);

We save the Fill value of the Hue Swatch and associate the value with a key i.e. key= HeaderBackground , value = HdrColorSwatchNew.Fill

This collection keys will be used by the Parent app to dynamically set values of other controls in our app.

We don't need to save the values of the HUE sliders here, instead we just use the Fill values of the HUE Swatches.

Use the Saved Theme in The Main App

In the App OnStart property:

// Load User Theme
LoadData(
    SavedTheme,
    "SavedTheme",
    true
)

Version 2:

1. Header Component - Input Property: HeaderBackGroundColor = First(SavedTheme).HeaderBackground

2. ThemeTool Component - OutPut Properties: HeaderBackground, FooterBackground, ButtonColor, ButtonTextColor, CanvasColor, GalleryBackgroundColor

3. Footer Component - Input Property: FooterBackGroundColor = First(SavedTheme).FooterBackground

4. Button Color = First(SavedTheme).ButtonTextColor

5. Button Fill = First(SavedTheme).ButtonColor

6. Gallery Fill = First(SavedTheme).GalleryBackgroundColor

7. Canvas Fill = First(SavedTheme).CanvasColor

I kind of skipped this when we created the SavedTheme Collection, we need to not only save the color values, but we also need to save the Hex# or Color name the user put into the respective text box.

NOTE: When you save a color or fill in PowerApps, it is saved as an RGBA value (RGBA(32, 54, 71, 1), in this case the RGBA is saved to the Collection, this is not the same as a text value. Currently there is no way to convert an RGBA value to text that I know of yet. You cannot put an RGBA value into the Text property of a Text control.

But we can overcome this, the last 6 key pairs in the SavedTheme Collection are the text values, these values could be the Hex or Color name value.

txtHeaderHexValue: txtHdrColorHex.Text,
txtFooterHexValue: txtFtrColorHex.Text,
txtBtnHexValue: txtBtnColorHex.Text,
txtBtnTextHexValue: txtBtnTextColorHex.Text,
CanvasHexValue: txtCanvasColorHex.Text,
GalleryBackgroundHexValue: txtGalleryBkgrndColorHex.Text

Now we just set the Default property of each Text Control accordingly.

Header = First(SavedTheme).txtHeaderHexValue,

Footer = First(SavedTheme).txtFooterHexValue 

and so on.

Continue to Part 2 where we connect with a SharePoint list and add security using an Azure Active Directory Security Group. https://powerusers.microsoft.com/t5/Community-Blog-Staging-Private/Components-Part-2-Theme-Component...

[ADefWebserver]

This is very helpful Thanks!

[shawnaby]

Is there a way to download your version of the theme component? I am grateful for providing the steps and video, but I unfortunately don't have that luxury and time to build it myself.