Answered

Insert process bar

(0) Share

Report

Posted on by Adinator

212

Hello Community I have created an attendance list with Gallery Radio, I want if you select nothing 0% shows that are a total of 11 departments so that means 100%/11= 9.1%. This as in the photo process bar I should fill at each department wad one has selected and if one has done everything then it shows 100%. How can I create such a bar?

Categories:

Building Power Apps

I have the same question (0)

All responses (18)

Answers (1)

Sort by

the_dude 361 Super User 2024 Season 1 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi Adinator,

It is possible assuming your radio button elements start without a default selection, but will be a bit of work to do it for 11 buttons.

My Example:

I've simply used 2 radio button elements and 50% progress per element.
What I've done:
2 Rectangle's over each other, 1 gray, 1 blue.
Set Width of gray to 1000
Set Width of blue to If(RadioButton1Selected, 500, 0) + If(RadioButton2Selected, 500, 0)
In your case change the numbers to what seems accurate with 11 questions. (total width / 11)

then I made the 'OnSelect' property of each radio button element:
Set(RadioButton1Selected, true)
Naturally this one is for the first one, this has to be RadioButton2Selected for the 2nd, RadioButton3Selected for the 3rd etc.

Lastly you have to make sure that you set these variables back to False upon leaving or resetting the page etc.

If this solves your question please mark as solved, if not let me know how i could help.

Kind Regards

Was this reply helpful? Yes No
Adinator 212 on at

Like
a
(0)

Report
Copy link

Link copied!

How can then display the % number

Was this reply helpful? Yes No
Adinator 212 on at

Like
a
(0)

Report
Copy link

Link copied!

i would like to have the figures 4/11 36%.
How to make the bar more beautiful?

Was this reply helpful? Yes No
the_dude 361 Super User 2024 Season 1 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi Adinator,

For the % you could try adding a label to the center of the progress bar - with it's text value containing a formula to calculate the percentage.

To make it more beautiful, you can ofcourse select colors and sizes to your liking, perhaps round off the edges. You could also make graphics in adobe illustrator or something and use those. but I am not at all an expert there.

I'll update this thread again once I've tried the % myself

Was this reply helpful? Yes No
Adinator 212 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi The_dude
Thank you, I need a solution absolutely today.

Also I have an icon and when I click on it I want the screen to automatically turn full screen, can you create me a code

Was this reply helpful? Yes No
the_dude 361 Super User 2024 Season 1 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi Adinator,

For the % i did this:
in my example i was using 2 radio elements, each responsible for 50 percent, the full width in my case was 1000 pixels. so the code in the label i used is:

(Rectangle5_1.Width)/10 & "%"

Rectangle5_1 is the blue one in my example.
The math obviously has to be a bit different for you.

I wrote that you could perhaps round off the edges - but it seems you can't round off the edges of a rectangle.

I'll update this thread again when I figured out to make it a bit better looking

Was this reply helpful? Yes No
the_dude 361 Super User 2024 Season 1 on at

Like
a
(0)

Report
Copy link

Link copied!

@Adinator wrote:
Hi The_dude
Thank you, I need a solution absolutely today.
I am also just a user like you, trying to do my best helping you in my own time.

@Adinator wrote:
Also I have an icon and when I click on it I want the screen to automatically turn full screen, can you create me a code
What do you mean turn full screen? as if you press F12 ?

Was this reply helpful? Yes No
Adinator 212 on at

Like
a
(0)

Report
Copy link

Link copied!

yes

Was this reply helpful? Yes No
the_dude 361 Super User 2024 Season 1 on at

Like
a
(0)

Report
Copy link

Link copied!

I know no way to do that, other than opening the app in full screen to begin with (by using the link under the details)

Was this reply helpful? Yes No
the_dude 361 Super User 2024 Season 1 on at

Like
a
(0)

Report
Copy link

Link copied!

with a bit of work I made it like this:

I created the progress bar using a program like paint or photoshop.
The important part here is that the inside of the progress bar is transparant - and the corners around the outside are the exact same color as the background of the app.
What i've done now is put this image i created OVER the rectangle that grows depending on the users progress, the color on the inside of the progress bar will show because it's transparant, and the outsides do not

Here is a photo where i dragged the progress bar a bit away from the colored rectangle to display what i mean:

Hope this helps you in creating your own better looking progress bar.
Attached you will also find my progress bar image i created

Was this reply helpful? Yes No