15th PowerApps and Power 27.4.

22
Automate User Group Meetup

Customize and manage

default colors
Apply CI on your PowerApp
 What is this talk about?
• How to change the default color to a
color which matches your
organisation

• I will show you 3 ways how to change

that color

• I will talk about Canvas Apps only

Table of content
1. Changing the color „by hand“
(notpad only method)

2. Use a customized template

(iammancat’s method)

3. Use the Theme Manager

Where is the color stored?
Where is the color stored?

Expand-Archive
.msapp file

- Can be edited in PowerApps

studio
- Can be exported
- Is not readable with Compress-Archive
notepad
- Is basically a zip file

YourMsApp.msapp/References/Themes.json
How to use the „notepad only method“:
Preparation:
(none)

Set Template:
• Create a new PowerApp
• Save As -> On this computer (you‘ll get yout .msapp file)
• Rename file to „.zip“
• Unzip with Powershell
• Edit References/Themes.json -> Save
• Zip with Powershell
• Rename to „.msapp“

Use Template:
• Import .msapp file in Powerapps Studio
«notepad only method»

• It takes a lot of time

• There are hundrets of parameters, that you have to edit
• Upgrading your consisting apps is maybe possible by editing the json files (not tested yet, should work)
• You can also define a variable as color, which makes later changes easier
• Testing your progress is very laborious. In Json you cannot see the result directly
Optimization:
• Change all default colors to variables!
• Build some kind of easy-to-use framework around it
Optimization:
• Change all default colors to variables!
• Build some kind of easy-to-use framework around it

https://www.iammancat.dev/2022/01/power-apps-branding-
template-v3/
Develop and test your theme, let you inspire by the predefined themes
Steps to use iammancat:
Preparation:
• Download the template
• Import the template to your environment

Set Template:
• Create your own template editing the „OnStart“ code
• Hardcode your template as default („ThisTheme“ variable)
• Delete the screens you dont use
• Save the app on your computer

Use Template:
• Import .msapp file in Powerapps Studio
„ iammancat’s method»
• Easy to install and to use
• Has a good editor and a framework which helps to change the colors and develop your style

• Colors are stored in the app

• If colors change, you have to edit/publish all your apps
• Colors must be set by RGBA function, which has up- and downsides
What, if we would refer to a environment-wide Dataverse table, which
stores our templates?
What, if we would refer to a environment-wide Dataverse table, which
stores our colors?

• The Theme Editor is part of the CoE Starter Kit

• Can be used „stand alone“
• Is the suggested method by Microsoft
 Steps to use Theme Editor
Preparation:
• Activate „component framework“ by folowing this steps
• Includes downloading and installing the themes editor
(download – unzip – Import solution)

Set Template (Tutorial by Microsoft):

1. Define your Themes Name (ex. ‚mesoneer‘ would be a very cool
name)
2. Open ‚AppTemplateTablet‘ and ‚AppTemplatePhone‘ in Studio and
Set the ‚ThemeName‘ variable with the name from step 1. Download
both .msapp files.
3. Define your Theme in ‚CoE Theme Editor‘, use the name from step 1
4. When publishing, upload your .msapp files from step 2

Use Template:
1. Open the app ‘CoE Theme Gallery’
2. Download the template you like, phone or tablet
3. Open the downloaded file from step 2 in the Powerapps Studio
„ Theme Editor method»
• Hard to install and to understand
• Many steps for everything
• You still need to download the msapp files to your computer

• Colors can be managed from «outside the app»

• Provides an editor, a style-repo