cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Hnasir1231
Helper III
Helper III

Progress Bar (Dropdowns)

Hi All,

 

Please can someone help me with adding a Progress Bar.

 

I want it to be linked with the Dropdown. So when the User selects a Dropdown, the progress bar should then be able to show that there is Progression being made as and when the dropdown has been selected.

 

Thank you.

2 ACCEPTED SOLUTIONS

Accepted Solutions
AJ_Z
Super User
Super User

Yes this would be a two part solution we would need to use part of what has been suggested above and labels and you just need to add it all together.:

Step one: Do as suggested have two rectangles reorder the green so infront of blue and lets call the blue one the same as others suggested for now that is Rectangle1.

Step two: Go to the with property of the green rectangle and insert:

If(IsBlank(Dropdown_BM.Selected.Value),0,(Rectangle1.Width)*(100/15)) + If(IsBlank(Dropdown_Bsize.Selected.Value),0,(Rectangle1.Width)*(100/15))If(IsBlank(Dropdown_LN.Selected.Value),0,(Rectangle1.Width)*(100/15)) + If(IsBlank(Dropdown_Hand.Selected.Value),0,(Rectangle1.Width)*(100/15))If(IsBlank(Dropdown_Bur.Selected.Value),0,(Rectangle1.Width)*(100/15)) + If(IsBlank(Dropdown_GB.Selected.Value),0,(Rectangle1.Width)*(100/15))If(IsBlank(Dropdown_Base.Selected.Value),0,(Rectangle1.Width)*(100/15)) + If(IsBlank(Dropdown_Pltfrm.Selected.Value),0,(Rectangle1.Width)*(100/15))If(IsBlank(Dropdown_LC.Selected.Value),0,(Rectangle1.Width)*(100/15)) + If(IsBlank(Dropdown_Econ.Selected.Value),0,(Rectangle1.Width)*(100/15))If(IsBlank(Dropdown_FP.Selected.Value),0,(Rectangle1.Width)*(100/15)) + If(IsBlank(Dropdown_TD.Selected.Value),0,(Rectangle1.Width)*(100/15))If(IsBlank(Dropdown_Bdown.Selected.Value),0,(Rectangle1.Width)*(100/15)) + If(IsBlank(Dropdown_RA.Selected.Value),0,(Rectangle1.Width)*(100/15))If(IsBlank(Dropdown_Comp.Selected.Value),0,(Rectangle1.Width)*(100/15))

 

If() compares a condition and provides a true or false value depending on whether that condition has been met
IsBlank() provides a true or false value to confirm whether a value is Blank
Rectangle1.Width is the width of the Green Rectangle.

Next for your Percentage one quick way to do this is to put a label over the rectangle and do:
(Rectangle2.Width/Rectangle1.Width)*100 &"%" if you need to Round we can use the round function let me know

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

View solution in original post

AJ_Z
Super User
Super User

hey @Hnasir1231,
take a look at the above and the images i attach below also

try use buttons instead so you get a nice curved edge and ensure you disable the button. Use two buttons one on the other add the percentage formula i suggested to the text of the button being filled in.

you can wrap it in rounddown(,0) to remove decimals

the changes i suggest are in these images and so is the end result:

AJ_Z_1-1640108628119.pngAJ_Z_2-1640108636366.png

 



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

View solution in original post

9 REPLIES 9
Jose_Freitas
Resolver III
Resolver III

I wasn't able to make a progress bar with a dropdown but with a combobox with SelectMultiple property set to false.
I created the Rectangle 1 (blue rectangle) as the background color for the progress bar.
The progress bar itself is the Green Rectangle.

For example, if we have two ComboBoxes, the progress bar should divided by 50%, because if you select an item in one combobox, 50% of the progress is done.

In the Green Rectangle (progress bar) you should go to the Width property and set it like this:

If(IsBlank(ComboBox1.Selected);0;(Rectangle1.Width)*0,5) + If(IsBlank(ComboBox2.Selected);0;(Rectangle1.Width)*0,5)   // Rectangle1 is the blue rectangle on the image.

 

Jose_Freitas_0-1640082369251.png

Each time you add another combobox, you have to adjust the values on the width of the green rectangle in order for the sum of all the if conditions to be 1.

If my solution helped solving your problem click Accept Solution.


@Jose_Freitas  Thank you for the response. 

 

However, my app is dependant on Dropdowns and would prefer the solution to be linked with dropdowns instead of ComboBoxes.

 

zmorek
Super User
Super User

@Jose_Freitas 's suggestion will work for dropdowns as well, simply swap out the ComboBox1.Selected with Dropdown1.Selected.Value (or whatever is in your dropdown's Items property); but without knowing the dropdown's Items property or more about your app, it's sort of hard to help beyond that.

Hi @zmorek 

 

I currently have 15 Dropboxes.

 

Names are as follows

Dropdown_BM

Dropdown_Bsize

Dropdown_LN

Dropdown_Hand

Dropdown_Bur

Dropdown_GB

Dropdown_Base

Dropdown_Pltfrm

Dropdown_LC

DRopdown_Econ

Dropdown_FP

Dropdown_TD

Dropdown_Bdown

Dropdown_RA

Dropdown_Comp

 

Thank you.

 

zmorek
Super User
Super User

What's their Items properties? Are they able to select a blank value? Simply modifying @Jose_Freitas formula will produce the results you need..

If(IsBlank(Dropdown_BM.Selected.Value),0,(Rectangle1.Width)*(100/15)) + If(IsBlank(Dropdown_Bsize.Selected.Value),0,(Rectangle1.Width)*(100/15)) etc etc.

Hi @zmorek 

 

I am quite new to this sort of stuff. What do you mean by blank value? I have added the above formula to test my App and it just makes the width larger.

 

 

Hi @zmorek 

 

Is there a way to add a percentage of Progression?

 

Thank you.

AJ_Z
Super User
Super User

Yes this would be a two part solution we would need to use part of what has been suggested above and labels and you just need to add it all together.:

Step one: Do as suggested have two rectangles reorder the green so infront of blue and lets call the blue one the same as others suggested for now that is Rectangle1.

Step two: Go to the with property of the green rectangle and insert:

If(IsBlank(Dropdown_BM.Selected.Value),0,(Rectangle1.Width)*(100/15)) + If(IsBlank(Dropdown_Bsize.Selected.Value),0,(Rectangle1.Width)*(100/15))If(IsBlank(Dropdown_LN.Selected.Value),0,(Rectangle1.Width)*(100/15)) + If(IsBlank(Dropdown_Hand.Selected.Value),0,(Rectangle1.Width)*(100/15))If(IsBlank(Dropdown_Bur.Selected.Value),0,(Rectangle1.Width)*(100/15)) + If(IsBlank(Dropdown_GB.Selected.Value),0,(Rectangle1.Width)*(100/15))If(IsBlank(Dropdown_Base.Selected.Value),0,(Rectangle1.Width)*(100/15)) + If(IsBlank(Dropdown_Pltfrm.Selected.Value),0,(Rectangle1.Width)*(100/15))If(IsBlank(Dropdown_LC.Selected.Value),0,(Rectangle1.Width)*(100/15)) + If(IsBlank(Dropdown_Econ.Selected.Value),0,(Rectangle1.Width)*(100/15))If(IsBlank(Dropdown_FP.Selected.Value),0,(Rectangle1.Width)*(100/15)) + If(IsBlank(Dropdown_TD.Selected.Value),0,(Rectangle1.Width)*(100/15))If(IsBlank(Dropdown_Bdown.Selected.Value),0,(Rectangle1.Width)*(100/15)) + If(IsBlank(Dropdown_RA.Selected.Value),0,(Rectangle1.Width)*(100/15))If(IsBlank(Dropdown_Comp.Selected.Value),0,(Rectangle1.Width)*(100/15))

 

If() compares a condition and provides a true or false value depending on whether that condition has been met
IsBlank() provides a true or false value to confirm whether a value is Blank
Rectangle1.Width is the width of the Green Rectangle.

Next for your Percentage one quick way to do this is to put a label over the rectangle and do:
(Rectangle2.Width/Rectangle1.Width)*100 &"%" if you need to Round we can use the round function let me know

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

AJ_Z
Super User
Super User

hey @Hnasir1231,
take a look at the above and the images i attach below also

try use buttons instead so you get a nice curved edge and ensure you disable the button. Use two buttons one on the other add the percentage formula i suggested to the text of the button being filled in.

you can wrap it in rounddown(,0) to remove decimals

the changes i suggest are in these images and so is the end result:

AJ_Z_1-1640108628119.pngAJ_Z_2-1640108636366.png

 



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

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.

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 (2,933)