Creating a Dynamic Progress Bar in Power Apps - Part Two

Introduction

 
In Part 1 of this article, we created a vertical progress bar having a slider for the user to control the progress. You can click on this link to see the details of Part 1.
 
Today, we will learn how to create a horizontal progress bar in Power Apps where the progress bar can display details based on inputs received from a drop-down. For my example, the SQL server has many databases and I will load names of these databases in a drop-down. Once a user changes a drop-down value, a progress bar shows me how much capacity is left in that database. Below is the step-by-step process to create a progress bar in Power Apps and how to use that bar inside the Power Apps form. You can make it 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 Horizontal Progress Bar in a Power Apps Form

 
Step 1
 
Open your Power Apps Form and bring the values from the SQL server database to fill the drop-down. For my example, my drop-down is loaded with the Database names from SQL server. You can read the values from a SharePoint list as well and populate the drop-down with those values.
 
 
Step 2
 
Now select the “Insert” from the ribbon under “Icons” and select “Rectangle”. Repeat this step again, since we need 2 rectangles for the progress bar:
 
 
Step 3
 
Rename the first rectangle “rectFinal” and the second rectangle “rectCurrent”. You can rename them as per your liking, but remember to name them correctly.
 
 
Step 4
 
Now change the “Fill”, “Border”, “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 Fill= White, Border=2, Height=60 and Width=1100
 
 
Step 5
 
Change the below properties for “rectCurrent”. Here, the most important part is the formula for Width, so remember to change it as per the names of the components you have given.
 
Width=(1-(ddlDatabases.Selected.AvailableCapacity/ddlDatabases.Selected.BatchCapacity))*rectFinal. Width
Height= rectFinal.Height
X = rectFinal.X
Y = rectFinal.Y
Fill = RGBA(56, 96, 178, 1)
Border = 2 
 
 
Step 6
 
Test the app using a preview. As we change the drop-down, the progress bar displays the current status.
 
 
That is it. I hope you have learned something new from this article and will utilize this in your work.