EXERCISE TOPIC▼
POWER BI EXERCISES▼
POWER APPS EXERCISES▼
Power Apps | Working with colours exercise | Add form slider controls to allow a user to pick an RGB colour
This exercise is provided to allow potential course delegates to choose the correct Wise Owl Microsoft training course, and may not be reproduced in whole or in part in any format without the prior written consent of Wise Owl.
You can learn how to do this exercise if you attend the course listed below!
| Software ==> | Power Apps (13 exercises) |
| Version ==> | Latest update |
| Topic ==> | Working with colours (2 exercises) |
| Level ==> | Average difficulty |
| Course ==> | Power Apps |
You need a minimum screen resolution of about 700 pixels width to see our exercises. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.
Create a new canvas app using phone layout, and save it as Colour Picker.
Add labels, sliders and a button to the default screen to create this:
See below for what properties you could set for your sliders
Here are some suggestions for properties you could set for (for example) the red slider:
| Property | Value | Notes |
|---|---|---|
| ValueFill | Red | The colour of the slider |
| Min | 0 | Colours go from 0 (in this case 100% red) ... |
| Max | 255 | ... to 255 (in this case no red at all) |
| Default | 50 | The initial value for the colour |
Create a second screen (the Show Colour button should navigate to this):
The fill colour of this second screen should reflect the choices made on the first one.
Set the Fill colour of the screen to this expression:
This assumes that you've called your sliders sldRed, sldGreen and sldBlue. The final argument is the transparency of the colour, which we will leave at 1 (opaque).
If you get this working, add the following additional controls to the second screen:
Add another slider so that you can vary how faded the colour chosen is (set a minimum value of -100, and a maximum value of 100). Clicking on the button should take your user back to the first screen again.
You'll need to adjust the fill colour of your page to this expression:
You can hold down the SHIFT key and press ENTER to add new lines like this, to make your formula easier to read.
When everything is working, save the changes to your app and close it down.