PowerApps Custom Progress Bar Error?

(0) Share

Report

Posted on by farhandsome

175

Hi all,

I have created a progress bar within a gallery via a variation of the method listed here. However, instead of a slider, I utilize my underlying data in order to get the rectangle values. There are two rectangles: denoted "goal" and "dynamic". Attached below are their parameters.

Goal:

X : 61

Y: 60

Width: 256
Height: 38

Fill:
If(

(ThisItem.TotalPlanMin / (435 * OperatorRec.Selected.Value)) >= 0 && (ThisItem.TotalPlanMin / (435 * OperatorRec.Selected.Value)) <= 0.50, RGBA(48, 234, 20, 1),

(ThisItem.TotalPlanMin / (435 * OperatorRec.Selected.Value)) > 0.50 && (ThisItem.TotalPlanMin / (435 * OperatorRec.Selected.Value)) <= 0.75, RGBA(242, 246, 13, 1),

(ThisItem.TotalPlanMin / (435 * OperatorRec.Selected.Value)) > 0.75 && (ThisItem.TotalPlanMin / (435 * OperatorRec.Selected.Value)) <= 1.0, RGBA(172, 16, 16, 1),(ThisItem.TotalPlanMin / (435 * OperatorRec.Selected.Value)) > 1.0, ColorFade(RGBA(172, 16, 16, 1), -0.25),

Black

)

Dynamic:

X : 'OrderProgress Goal'.X + 256 - 'OrderProgress Dynamic'.Width

Y: 60

Width:

If(

ThisItem.TotalPlanMin <= (435 * OperatorRec.Selected.Value),

(1 - (ThisItem.TotalPlanMin / (435 * OperatorRec.Selected.Value))) * 'OrderProgress Goal'.Width,

Height: 38

Fill: RGBA(255, 255, 255, 1)

The progress bars fill as a result of that item's "total planned build minutes" divided by the total capacity of the number of operators at that specific item (workstation). However, when I add new data into the source and refresh the set, I get this weird glitch in my progress bars:

PowerApps Progress Bar Error.PNG

As you can see, some of the bars are elongated (S030, for example) and some of the fill values are not corrected added to the bar (S120, for example).

When I change the operator value, it updates and fixes itself like nothing was wrong, but upon adding data or upon app start, a few of them are usually messed up. I have tried to drop and recreate these bars, but to no avail. Anybody know what the issue may be or if there is something similar I can use in this scenario that won't have this bug?

Thanks,

Farhan

Categories:

Building Power Apps

I have the same question (0)

All responses (7)

Answers (1)

Sort by

Community Power Pla... Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

Is this using custom components? If so, there is a known issue with PowerApps components going on. Microsoft is looking into it. You can keep track of the status of this error here
https://portal.office.com/adminportal/home#/servicehealth

Was this reply helpful? Yes No
farhandsome 175 on at

Like (1)

Report
Copy link

Link copied!

@Anonymous ,

No, these are the standard rectangle shapes built within PowerApps.

Was this reply helpful? Yes No
Community Power Pla... Microsoft Employee on at

Like (1)

Report
Copy link

Link copied!

Okay, just wanted to make sure before I looked through your code. Nothing is immediately jumping out at me. I'll keep looking though.

Was this reply helpful? Yes No
farhandsome 175 on at

Like (1)

Report
Copy link

Link copied!

@Anonymous ,

Thank you! If it helps, here is the underlying table:

This is what "ThisItem.TotalPlanMin" is coming from in the rectangle parameters. The "OperatorRec" syntax is coming from the dropdown in the gallery.

Also accidentally accepted your reply as a solution, lol.

Was this reply helpful? Yes No
Verified answer

Community Power Pla... Microsoft Employee on at

Like (2)

Report
Copy link

Link copied!
I think I've got this working as you expect. Here's what I did
Rectangle 1 is just a white rectangle (this is the background rectangle).
Rectangle 2 has the same X and Y as rectangle 1 (in front of rectangle 1)
Rectangle 2 Width property equals
//Min function ensures the width will stop at 100% Min((Value(actual_tbox.Text) / Value(goal_tbox.Text)) * goalRectangle.Width, goalRectangle.Width)
Where goal_tbox.Text and actual_tbox.Text would be your goal or actual fields
Rectangle 2's Fill property is set to
If( (Value(actual_tbox.Text) / Value(goal_tbox.Text)) >= 0.00 && (Value(actual_tbox.Text) / Value(goal_tbox.Text)) <= 0.50, Red, If((Value(actual_tbox.Text) / Value(goal_tbox.Text)) > 0.50 && (Value(actual_tbox.Text) / Value(goal_tbox.Text)) <= 0.75, Yellow, If((Value(actual_tbox.Text) / Value(goal_tbox.Text)) > 0.75, Green )))
I've also got a label set to
Text((Value(actual_tbox.Text) / Value(goal_tbox.Text)) * 100, "[$-en-US]#,###.0%")

Was this reply helpful? Yes No
farhandsome 175 on at

Like (1)

Report
Copy link

Link copied!

@Anonymous,

I plugged in my own values and criteria into your formula and it seemed to work! It looks like I was using the inverse of your formula, manipulating the second rectangle shift over which added some unnecessary complexity and is probably the reason yours works and mine doesn't. Thanks for taking the time to look at this.

Cheers,
Farhan

Was this reply helpful? Yes No
Community Power Pla... Microsoft Employee on at

Like (2)

Report
Copy link

Link copied!
Just in case this is something you'd be interested in, here's how to do a gradient for the progress bar color
//Replace Slider.Value with your percentage If(Slider.Value < 50, RGBA(255,2 * Slider.Value / 100 * 255,0,1), RGBA(2 * (100 - Slider.Value) / 100 * 255,255,0,1) )

Was this reply helpful? Yes No