cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
echodapogi
Helper V
Helper V

Survey Progress Tracker Bar

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?

 

idea.PNG

 

it can be something like this.

idea2.PNG

 

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

 

idea3.PNG

1 ACCEPTED SOLUTION

Accepted Solutions
AJ_Z
Super User
Super User

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:

AJ_Z_0-1653256531349.png

 

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)

AJ_Z_1-1653256722019.png

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:

AJ_Z_2-1653256805063.png

 

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. )

 

AJ_Z_3-1653256964140.png

 

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 ""

AJ_Z_4-1653257310751.png

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

AJ_Z_5-1653257330704.png

then change the Border radius Property from 10 to 500

AJ_Z_6-1653257390369.png

then change the BorderThickness Property from 2 to 0

AJ_Z_10-1653258456596.png

 


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)

AJ_Z_7-1653257726794.png

 

now we have done the background part

AJ_Z_8-1653257799712.png


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

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

AJ_Z_9-1653257874747.png

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.

 

AJ_Z_11-1653258573547.png

 

 

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

 

AJ_Z_12-1653258615029.png

 

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)

AJ_Z_13-1653258752518.png


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

AJ_Z_14-1653258824481.png

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.

 

 

 

If you appreciated my comments/responses please be sure to Like/Kudo them it really does make me smile 🙂 !

View solution in original post

4 REPLIES 4
AJ_Z
Super User
Super User

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 🙂

If you appreciated my comments/responses please be sure to Like/Kudo them it really does make me smile 🙂 !

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
Super User
Super User

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:

AJ_Z_0-1653256531349.png

 

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)

AJ_Z_1-1653256722019.png

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:

AJ_Z_2-1653256805063.png

 

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. )

 

AJ_Z_3-1653256964140.png

 

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 ""

AJ_Z_4-1653257310751.png

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

AJ_Z_5-1653257330704.png

then change the Border radius Property from 10 to 500

AJ_Z_6-1653257390369.png

then change the BorderThickness Property from 2 to 0

AJ_Z_10-1653258456596.png

 


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)

AJ_Z_7-1653257726794.png

 

now we have done the background part

AJ_Z_8-1653257799712.png


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

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

AJ_Z_9-1653257874747.png

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.

 

AJ_Z_11-1653258573547.png

 

 

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

 

AJ_Z_12-1653258615029.png

 

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)

AJ_Z_13-1653258752518.png


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

AJ_Z_14-1653258824481.png

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.

 

 

 

If you appreciated my comments/responses please be sure to Like/Kudo them it really does make me smile 🙂 !

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

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

Power Platform Call June 2022 768x460.png

Power Platform Community Call

Join us for the next call on June 15, 2022 at 8am PDT.

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Top Solution Authors
Top Kudoed Authors
Users online (1,563)