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
