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 the 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 in the drop-down. For my example, my drop-down is loaded with the Database names from the 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 “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 “retinal” 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 = retinal.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.