cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Helper IV
Helper IV

PowerApps Custom Progress Bar Error?

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,

0)

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

 

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Super User
Super User

Re: PowerApps Custom Progress Bar Error?

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

 

View solution in original post

7 REPLIES 7
Highlighted
Super User
Super User

Re: PowerApps Custom Progress Bar Error?

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

Highlighted
Helper IV
Helper IV

Re: PowerApps Custom Progress Bar Error?

@EricLott ,

 

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

Highlighted
Super User
Super User

Re: PowerApps Custom Progress Bar Error?

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

Highlighted
Helper IV
Helper IV

Re: PowerApps Custom Progress Bar Error?

@EricLott ,

 

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

 

PowerApps Progress Bar Error 2.PNG

 

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. 

 

Highlighted
Super User
Super User

Re: PowerApps Custom Progress Bar Error?

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

 

View solution in original post

Highlighted
Helper IV
Helper IV

Re: PowerApps Custom Progress Bar Error?

@EricLott,

 

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

Highlighted
Super User
Super User

Re: PowerApps Custom Progress Bar Error?

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

slider.gif

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

Watch Now

Experience what’s next for Power Apps

See the latest Power Apps innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Tech Marathon

Maratón de Soluciones de Negocio Microsoft

Una semana de contenido con +100 sesiones educativas, consultorios, +10 workshops Premium, Hackaton, EXPO, Networking Hall y mucho más!

Top Solution Authors
Top Kudoed Authors
Users online (6,776)