Table of contents:
The topic: Why you should use different colors in the Test and Production environment
In the ever-evolving world of the Power Platform, the user experience is paramount. One overlooked Power Platform tip that can significantly boost the Power App user experience relates to a simple but powerful visual cue: color. Today, we'll delve into why distinguishing between Power Apps environments using color can be a game-changer for developers and users alike.
Power Apps Environments: TEST vs. PROD
Before we jump into the benefits, let's understand the two primary Power Apps environments:
1. TEST Environment: This is where the magic happens. Developers and testers tweak, modify, and refine applications before they go live.
2. PROD (Production) Environment: This is the real deal. The apps here are in their final form, ready for the end-users.
Mixing up these environments can be costly. Here's where our Power Platform tip comes into play.
Why Color-Differentiate Power Apps Environments?
1. Visual Confirmation:
A distinct color immediately tells you where you are. No more double-checking or second-guessing.
2. Minimize Mistakes:
Working across multiple tabs? Different colors for TEST and PROD drastically reduce the chances of actions performed in the wrong environment.
3. Power App User Experience Boost:
For newcomers, distinct environments help in understanding the platform better. Color-coded environments add an extra layer of clarity.
4. Simplified Conversations:
Discussing issues becomes a breeze when you can refer to the environment by its color.
Power Platform Tip: Implementing Color Differentiation
Ready to enhance the Power App user experience with this technique? Here’s how:
- Maintain Consistency: Stick to specific colors for TEST and PROD. Over time, this consistency becomes intuitive for users.
- Training is Key: Inform users about the color significance, ensuring everyone's on the same page.
- Pick Distinct Shades: The colors should be easily distinguishable. Avoid shades that might seem similar, especially in various lighting or on different screens. For individuals with color blindness, especially those with red-green deficiencies, the combination of yellow and blue can offer distinct and easily distinguishable contrasts, making it an accessible choice for design.
Implementation step 1: Add an environment variable to your Power Platform Solution
In the test environment add a new Environment Variable to your solution.
When adding the new environment variable make sure to use the Data Type "Text" and enter the hex code of the desired color for the current value. The variable value for the productive enviroment can be set during deployment of the solution.
Implementation step 2: Link the environment variable to your Power App and make the color scheme dynamic.
Add the Dataverse table "Environment Variable Values" to your Canvas App.
Store the value of the environment variable in a global variable within the Power App. This is best done at the OnStart property (as shown below) or using Named Formulas.
You can use the following formula:
Set(VarColor1,
ColorValue(
LookUp('Environment Variable Values','Environment Variable Definition'.'Display Name' = "EnvironmentColor1").Value
));Now you can insert the global variable into the Fill or Color property of the desired controls.
And that's it. As already described above, when importing the solution in the productive environment, the environment variable can be set to any color hex code, in the format "#365B7D".
Do you like this article?
Please write a comment or leave a like below and follow me on LinkedIn.
If you have any questions, I'm happy to help.
Marc Sigrist (Powerfully GmbH, Switzerland)
