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 a 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 “Insert” from the ribbon à under “Input” à select “Slider”.

Step 2. Now select “Insert” from the ribbon à under “Icons” à select “Rectangle”. Repeat this step again as we need 2 rectangles for the progress bar.

Step 3. Rename the Slide as “progressSlider”, rename the first rectangle as “rectFinal” and the second rectangle as “rectCurrent”. You can rename them as per your liking, but remember to name them correctly.

Step 4. Change the “Max” property of Slider to a value that you consider as the max value for your requirement. For my example database limit is set to never exceed 800GB.

Step 5. Now change the “Height” and “Width” properties 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.

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)

Step 7. Test the app using preview, as we move the slider the progress bar would display the current status.

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 a horizontal progress bar getting inputs from a drop-down.