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:

Colour sliders

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):

Second screen

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:

The fill colour

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:

Fading colour

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:

Revised fill colour

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.

You can unzip this file to see the answers to this exercise, although please remember this is for your personal use only.
This page has 0 threads Add post