Although PowerApps comes with the general controls you might need to build most of the applications for your orgranization, I was faced recently with this particular scenario, where I needed to have some kind of progress bar in my App.

The context

I had to create a quiz app in PowerApps, which allows user to pick a subject, and take a quiz for that particular subject.

The list of questions and subjects are basically two custom lists in SharePoint, with the question list referencing the subjects’ one using a lookup column.

So my Screen in PowerApps had to start with the first question of the selected subject, and whenever you Click next, that would load the next question, until it is the last one, in which case, you get the complete button.

I will not cover all the aspects of my app here today. But I will exclusively cover the Progress Bar that I had to display, at the top right corner of my Screen in PowerApps.

The solution

The way I approached this is as follow:

1. I needed a static outer rectangle, with solid border (1px width) –> Let’s call it Prg_Outer
2. I also added a second rectangle which was displayed on top of the outer rectangle Prg_Inner. The height of Prg_Inner is equal to whatever you have as the height of Prg_Outer – 2 (as the border is 1px).
3. A label (optionnaly, to display the text value inside the progress bar.
   

   

I am also maintaining two variables in my app to track the current Question and Total number of questions (this will be equivalent to Current and Max Values of the progress bar).

Width of the outer rectangle

I decided to set the width of my outer rectangle to a static value equal to 300px.

Value of the text

Concatenate("Question ", Text(CurrentQuestion),"/", Text(TotalQuestions))

The magic

On my next button, I have a custom code which checks, if I reached the last question, if not, it adjusts the size of the inner rectangle.

The idea is that the width of the inner rectangle Prg_Inner, should be equal to (CurrentQuestion/TotalQuestion)*300

Et voila, you got a nice dynamic Progress Bar !