How to Create a Dynamic Progress Bar in PowerApps
Progress bars are a great way to visually display your progress towards a goal or project. As you will see by following the steps below on how to create a dynamic progress bar in PowerApps. Implementing them into your app can be done with minimum effort and with some imagination you can add these techniques to your tool box to be an Office Power User!
To create the demo above insert the following controls and change properties as prescribed below.
- Input control (Used to set the goal the progress bar’s max value)
- Name: txtGoal
- Input control (Used to fill the progress bar measuring the actual vs the goal)
- Name: txtActuaDefault
- Default: SliderActual.Value
- Slider control (Used to move the actual value up or down)
- Name: SliderActual
- Min: 0
- Max: txtGoal.Text
Now for the fun part. You will add two rectangles identical in size and you will lay the rectangle for the actual values directly on top of the goal. That’s how the magic happens. You may want to set the properties for each with them laid out side to side and for the last stop set the X and Y.
- Rectangle (The green bar layered behind the white status bar)
- Name: rectGoal
- Fill: RGBA(54, 176, 75, 1)
- Rectangle (This white bar changes size depending on progress)
- Name: rectActual
- Width: rectGoal.Width
- Height: (1-(txtActual/txtGoal))*RectGoal.Height
- X: rectGoal.X
- Y: rectGoal.Y
- Fill: RGBA(255, 255, 255, 1)
Now you know how to create a dynamic progress bar in PowerApps. To enhance this further you should replace the input controls with variables that are assigned from a database. Then you replace the “rectActual” height formula references with the variables. For more advanced techniques check out my post on how-to-build-a-menu-component-in-powerapps/
Please leave your feedback. I hope this article has been helpful for you and bookmark this blog and check back often as new articles will be posted regular.
