How to create progress bars in canvas apps using modified slider controls

Introduction

Well designed apps should provide users with feedback during processes to reduce uncertainty. I believe this is fundamental to a positive user experience and therefore wanted to create a mechanism within Power Apps (canvas app) to achieve this.

The progress indicator I created for this article requires no prerequisites and is a standard canvas app feature with a few modifications.

Let's start by creating a background for our screen. Insert a rectangular shape from the icon menu and position it in the middle of the screen. Then adjust the shape properties to give a grey Fill and darker grey BorderColor with a BorderThickness of 4 pixels.

The slider control

The slider control is an extremely useful input tool in canvas apps. The user can drag the handle left and right (or up and down) to select a numerical value within a defined range. However, in this post the default slider value will be defined by other controls on the screen and the slider will be used as a display tool.

Insert the slider control from the Input dropdown within the Insert tab.

Our aim is to transform the default slider into a progress bar using a few basic steps...

Rename the slider control and set the RailThickness to 30 pixels. We want the HandleSize to match, but instead of entering 30, it is better practice to link the two values using the 'self' reference. In this case, 'Self.RailThickness' means the HandleSize will be set to the value of the RailThickness for this control.

Next, turn ShowValue to false as we will create our own label later, and turn the DisplayMode to 'View' so that the user cannot adjust the slider value by clicking on it. The HandleFill colour needs to match the ValueFill colour so we'll use 'Self.ValueFill' to link the values. This makes the handle disappear and gives our progress bar a nice curved leading edge.

Check boxes

In this example, I used check boxes to control the progress bar. Insert five check boxes and position them in the centre of the screen. Rename them to Checkbox1, Checkbox2, Checkbox3, Checkbox4 and Checkbox 5.

We want to create a numeric variable and add 1 to the value of this variable when the boxes are ticked, and then inversely we want to subtract 1 from the value of the variable when unticked. You can select all five checkboxes and update the OnCheck and OnUncheck properties all at once.

We can then update the Default value of our progress bar to display the variable we created in the previous step. The Max value of the slider should be the number of check boxes, in this case 5. You can now test the progress bar by ticking and unticking your check boxes in preview mode.

Formatting sliders

Now that the progress bar updates based on the number of boxes ticked, we can updating the formatting. The RailFill colour can be set to light grey.

The ValueFill colour could be set to a static value, however I wanted the colour to show as green at 100%. The slider handle also shows when on 0%, therefore we need to set the ValueFill property to a switch command in order to address this.

Here is the code snippet for the switch command that I used:

Switch(sldProgressBar.Value, 
    0, sldProgressBar.RailFill,
    sldProgressBar.Max, ColorValue("#6FCF87"),
    RGBA(236, 190, 42, 1))

Next, add a label to display the slider value divided by the number of boxes, as a percentage. Here is the code snippet I used for the label:

(sldProgressBar.Value /5)*100 &"%"

Adding a reset button

Add a button from the insert tab and update the Text property to 'Reset'. You can set the Colour, Fill, BorderRadius and any other properties as desired.

The OnSelect property of the button needs to revert our variable value back to zero, and also reset the check boxes back to their default state. Here is the code snippet I used:

Set(
    gloVarTickCount,
    0
);
Reset(Checkbox1);
Reset(Checkbox2);
Reset(Checkbox3);
Reset(Checkbox4);
Reset(Checkbox5)

Test your check boxes and reset button to make sure everything is working as desired. This is the basic approach to creating progress bars from slider controls, but read on if you would like to add some additional styling.

Advanced styling

Currently, we are fairly limited with the advanced styling options available to us with slider controls in Power Apps. However, we can get creative to achieve some good results with only a few low code steps.

The two features I wanted to add to enhance the look of my progress bar were rounded ends and depth shading on the rail. The solution I used was simple, and did not require any code alterations or custom code components.

I achieved the rounded ends by simply masking the slider with two shapes matching the background colour.

For the shading, I created an SVG shape with a graded transparent alpha channel which I overlaid on top of the slider. You can see the alpha mask and resultant image below:

Here is the code snippet for the rounded SVG image:

"data:image/svg+xml;utf8, " & EncodeUrl(

"
<svg width='707' height='210' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' overflow='hidden'><defs><clipPath id='clip0'><rect x='818' y='659' width='707' height='210'/></clipPath></defs><g clip-path='url(#clip0)' transform='translate(-818 -659)'><path d='M935.833 659 1525 659C1459.92 659 1407.17 706.01 1407.17 764 1407.17 821.99 1459.92 869 1525 869L935.833 869C870.756 869 818 821.99 818 764 818 706.01 870.756 659 935.833 659Z' fill='#FFFFFF' fill-rule='evenodd'/></g></svg>

" )

The FlipHorizontal (advanced setting) can be set to true for the other end.

Here is the code snippet for the alpha channel mask to be added to an image control:

"data:image/svg+xml;utf8, " & EncodeUrl(

"
<svg width='2391' height='167' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' overflow='hidden'><defs><clipPath id='clip0'><rect x='1001' y='1160' width='2391' height='167'/></clipPath><linearGradient x1='2196.5' y1='1160' x2='2196.5' y2='1327' gradientUnits='userSpaceOnUse' spreadMethod='reflect' id='fill1'><stop offset='0' stop-color='#FFFFFF' stop-opacity='0.368627'/><stop offset='0.5' stop-color='#FFFFFF' stop-opacity='0'/><stop offset='1' stop-color='#FFFFFF' stop-opacity='0'/></linearGradient></defs><g clip-path='url(#clip0)' transform='translate(-1001 -1160)'><rect x='1001' y='1160' width='2391' height='167' fill='url(#fill1)'/></g></svg>

" )

Have a play around and see what results you can achieve!

Summary

We have seen how the slider control can be used in canvas apps to display values in a defined linear scale. Adjusting the slider properties gives us a powerful visual tool which helps enhance user interaction with our apps. The techniques discussed can be extended and expanded to a number of different use cases. The advanced styling tips take things a step further by enhancing the look and feel, giving users a positive experience.

I hope you have enjoyed reading this post and feel free to reach out if you have any questions.