Creating A Dynamic Progress Bar In Power Apps - Part One

In this article, I will provide information on how to create a dynamic progress bar in Power Apps. I will be creating this article in 2 parts:
  • Part 1: Vertical progress bar having a slider for the user to control the progress
  • Part 2: Horizontal progress bar getting input details from a drop down and changing the progress bars.

Introduction

 
Today we will learn how to create a progress bar in Power Apps. Many times we get a requirement where we need to show the progress made on a certain criteria. For a simple example let us assume we have many Databases in our SQL and for each database you have a certain capacity. Now in Power Apps you can display how much of that database is full/empty using a progress bar. Visual effects like progress bar give you additional points as End Users would easily understand the current status of the database. Below is the step by step way for creating a progress bar in Power Apps and how to use that bar inside the Power Apps form. You can make it as a custom component as well in case you have to use the progress bar in multiple places in the same form. You can click on this link to see how we can create a custom component in Power Apps.
 

Creating a vertical progress bar in Power Apps Form

 
Step 1
 
Open your Power Apps Form and select the “Insert” from the ribbon à under “Input” à select “Slider”
 
Creating A Dynamic Progress Bar In Power Apps 
 
Step 2
 
Now select the “Insert” from the ribbon à under “Icons” à select “Rectangle”. Repeat this step again as we need 2 rectangles for the progress bar
 
Creating A Dynamic Progress Bar In Power Apps
 
Step 3
 
Rename the Slide as “progressSlider”, rename first rectangle as “rectFinal” and second rectangle as “rectCurrent”. You can rename as per your liking, but remember to name them correctly.
 
Creating A Dynamic Progress Bar In Power Apps
 
Step 4
 
Change the “Max” property of Slider to a value which you consider as max value for your requirement. For my example database limit is set to never exceed 800GB.
 
Creating A Dynamic Progress Bar In Power Apps
 
Step 5
 
Now change the “Height” and “Width” property of “rectFinal” as per the screen size available in your Power app Form. For my example, I am setting it as Height=600 and Width=150
 
Creating A Dynamic Progress Bar In Power Apps
 
Step 6
 
Change the below properties for “rectCurrent”. Here the most important part is the formula for Height, so remember to change it as per the names of the components you have given.
 
Width= rectFinal.Width
Height= (1-(progressSlider.Value/800))*rectFinal.Height
X = rectFinal.X
Y = rectFinal.Y
Fill = RGBA(255,255,255,1)
 
Creating A Dynamic Progress Bar In Power Apps
 
Step 7
 
Test the app using preview, as we move the slider the progress bar would display the current status.
 
Creating A Dynamic Progress Bar In Power Apps
 
That is it. I hope you have learned something new from this article and will utilize this in your work. I will create part 2 of this article on how to create horizontal progress bar getting inputs from a drop down.