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!

Animation of a dynamic progress bar in PowerApps

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.

Share the knowledge!

Paul Rodrigues

Business Analyst with 20 years of IT experience creating practical solutions. I love to automate business processes through the use of technology while making the end users work easier. My current favorite tools are Power Apps, Power BI and Power Automate. #PowerAddict

You may also like...

4 Responses

  1. Jacob says:

    This article was exactly what I was looking for. It worked exactly as you wrote. Thanks!

  2. Marcel says:

    I like it and put this into practice in my project today. Look forward to seeing more post like this.

  1. September 22, 2019

    […] I will stick to the logic in collecting the checklist values. You can learn more here about how to create a dynamic progress bar in PowerApps as shown […]

Leave a Reply

Your email address will not be published. Required fields are marked *