Survey Progress Tracker Bar

[echodapogi]

Hello Team, 

I have this unique UI idea that maybe somebody in this forum can point me on the right path. I am creating a Survey app with 40 questions. my client wanted me to create a progress bar or tracker on top of the UI (Phone factor) design. The progress bar or tracker allows the user to see the progress (if the user is has long way to go to finish the questions or near the end of the questions). I am using a canvass scrollable screen.

See the image below (not the app that i made, just an example). 

I would like to have a rectangle bar or slider, etc.. that change color or fill if the questions are almost done.. Let say out of 40 question user already in the question 20.. so the color bar fill below should be in the middle part. and when the user completed all the questions all the bar color is green. Is anybody here have some idea on how to do that?

it can be something like this.

or this...  i am not sure which one is easier or if anybody already done something like this

 

 

[AJ_Z]

I have done this before on a few occasions. It really depends on the experience. If they are filling out the form in one go then I would do this with a variable I set at the beginning and add one to for each question answered and then I would use the value of the variable to show progress. If they are coming back to the form and are filling and adding to it across many visits I would store this value in a column in the table. I am guessing for your scenario you are going with the first one. 

The way I would design the bar is with rectangles or disabled buttons or another image. put one behind at a slightly different colour and then one on top. I set the width for the one behind. then for the one on top I make the Width Property equal to (the Width of the one behind / the total number of questions) * the ones answered

I can show you how to do this on a call if needed or with some images 🙂

[echodapogi]

Hello AJ. Thank you for your reply. I definitely wanted to see some images on how you put it together. I really appreciate that. Please let me know how you can share that images. 

Thank you

[AJ_Z · Accepted solution]

See the below images for one of the quickest styles I use to do this can get on a call still if needed:

First I boot up power apps:

then for this style I want to make a variable. So I am going to the onstart property of the app and adding the variable:

Set(varProgressValue,0)

if it is your first time using on start make sure to run onstart after adding the variable by clicking the three dots net to app and clicking run on start:

Now that I have my variable set lets design the bar. For this I want to use buttons as they have a snazzy border radius so i can have a nice pill shape (I think pill shapes are cool some people prefer rectangles either work. )

as I am using buttons instead of rectangles as i like to make things pretty i need to do some things.

First change the Text property from "Button" to ""

then change the DisplayMode Property from DisplayMode.Edit to DisplayMode.Disabled

then change the Border radius Property from 10 to 500

then change the BorderThickness Property from 2 to 0

Now we need to add some color remember this is a disabled button so we use the disabled color section towards the bottom of the properties.
I like the color scheme you got in idea3, the blue just seems right.

So the DisabledFill Property is RGBA(192, 211, 239, 1)

now we have done the background part

now lets do the button that goes on top of it. 

Copy paste the same button so most of it is done:

Now change the disabled fill property of this new button 

So the DisabledFill Property is RGBA(46, 111, 237, 1)

Now make the X, Y, Width and Height of both buttons the same i.e. position it to where looks right.

Now the Width of the top button needs to change but the bottom one stays the same. You will need to know the total number of sections/questions for my test lets pretend I got 14 in total.

You need to do Width/NumberofQs*varProgressValue

So in my case it would be:

643/14*varProgressValue

top one now disappears and all i see is the bottom one.

Now make a new navigation button, or icon or anything that moves your from one question to the next. I am just adding a new button. Make it's onselect property = Set(varProgressValue,varProgressValue+1)

everytime you push this it thinks a question is done and changes. 

if i was you and you are navigating to different screens where you have this on each screen and each asks a different question I would group it and copy paste the progress bar onto each screen. and next question button has this logic and the navigate function on it. you can even add a previous button using -1 instead of +1.

you can even add progress percentage which i usually add but in this case i thought it was not needed.

[echodapogi]

AJ, Thank you so much for putting this all together. You are amazing. Very helpful. I will try this today.