cancel
Showing results for
Did you mean:
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
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

Signature:

If you appreciated my comments/responses please be sure to Like/Kudo them it really does make me smile 🙂 !
Link to the Power Platform Professionals United Kingdom User Group:

https://powerusers.microsoft.com/t5/Power-Platform-Professionals/gh-p/PowerPlatformProfessionalsUnit...

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:

Signature:

If you appreciated my comments/responses please be sure to Like/Kudo them it really does make me smile 🙂 !
Link to the Power Platform Professionals United Kingdom User Group:

https://powerusers.microsoft.com/t5/Power-Platform-Professionals/gh-p/PowerPlatformProfessionalsUnit...

9 REPLIES 9
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.

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.

Helper III

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

Community Champion

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

Helper III

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.

Community Champion

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.

Helper III

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.

Helper III

Hi @zmorek

Is there a way to add a percentage of Progression?

Thank you.

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

Signature:

If you appreciated my comments/responses please be sure to Like/Kudo them it really does make me smile 🙂 !
Link to the Power Platform Professionals United Kingdom User Group:

https://powerusers.microsoft.com/t5/Power-Platform-Professionals/gh-p/PowerPlatformProfessionalsUnit...

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:

Signature:

If you appreciated my comments/responses please be sure to Like/Kudo them it really does make me smile 🙂 !
Link to the Power Platform Professionals United Kingdom User Group:

https://powerusers.microsoft.com/t5/Power-Platform-Professionals/gh-p/PowerPlatformProfessionalsUnit...

Announcements