How to build a Power Apps progress bar component
Components are reusable building blocks in Power Apps which increase maker productivity and design consistency. If you are new to them, you should definitely start to learn how to build them - This post will make it easier for you! This progress bar component showcases also custom properties to give you an idea on how you can make a component customizable to different needs.
Progress Bar component: the result
Let’s dive in head first and have a look how the completed components will look like. As I designed them to be adjustable to different designs, here is some inspiration:
As you can see, the progress bars can have different widths and heights and can be horizontal or vertical. We will first tackle the horizontal one.
Build the component - horizontal
For this component, that I will name
cmp_ProgressBar_hor, we only need two text labels, which you need to insert
lbl_BarCurrent, which shows the progress
lbl_barTotal, which shows the total
Create the custom properties
We will need a bunch of custom properties so the component is more flexible
- barMaxValue (Number), set default to
100- its the maximum value of the progress bar
- barCurrentValue (Number), set the default
gbl_barValue- this is the variable that controls how much progress is being made
- barMaxFill (Color), I set the default to
ColorValue("#1e6091")- it’s the fill color of the maximum value
- barCurrentFill (Color), I set the default to
ColorValue("#168aad")- it’s the fill color of the current value
- barWidth (Number), I set the default to
200, it’s the width of the progress bar
- barHeight (Number), I set the default to
42, its the height of the progress bar
- labelColor (Color), I set the default to
White, it’s the color of the label that shows the percentage of progress
Set properties for the labels
RoundUp(100*(cmp_ProgressBar_hor.barCurrentValue/cmp_ProgressBar_hor.barMaxValue),0) & "%"
- Height :
Now set the Width of the component to
cmp_ProgressBar_hor.barWidth+10 and the Height to
If you want to try out the component in your app, you will need to have something that will set the value of our variable
gbl_barValue. You can do this with a slider control. Set the OnChange property to
Set(gbl_barValue, Self.Value), move the slider and voila, your bar is making progress! You can now insert another component instance and play around with the custom properties and change height and width, the label color as well as the fill colors.
Build the component - vertical
If you now want to create the same component but vertical, you can duplicate the component and then we only need to adjust a few things. Name your vertical component
RoundUp(100*(cmp_ProgressBar_vert.barCurrentValue/cmp_ProgressBar_vert.barMaxValue),0) & "%"
How can we use this component in apps?
People like to know the answer to the question Are we there, yet?. Indicating their progress in long forms is a nice way to improve user experience and satisfaction, as people then know what to expect.
Want to reverse-engineer? You can download the component library 🚀✨
Feedback and What’s next?
I would love to learn about your use cases. Where do you use progress bars or which other scenarios do you see for these bars? Let’s talk on twitter :-) If you found this blog post useful, please also subscribe to my newsletter - news coming about every 2 months, I promise to not spam you!
You May Also Like
tl;dr You know that feeling when right after hitting that send button …
tl;dr Want to improve your app design and your galleries? Learn how to …
tl;dr Did you know that two buttons and a slider make a sweet …