web
You’re offline. This is a read only version of the page.
close
Skip to main content
Community site session details

Community site session details

Session Id : UWj70MgBkjzSp9azLoAfDM
Power Apps - Building Power Apps
Answered

PowerApps Custom Progress Bar Error?

Like (0) ShareShare
ReportReport
Posted on 19 Feb 2020 15:57:27 by 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,

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

 

Categories:
  • Community Power Platform Member Profile Picture
    on 19 Feb 2020 at 21:46:31
    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

  • farhandsome Profile Picture
    175 on 19 Feb 2020 at 20:53:42
    Re: PowerApps Custom Progress Bar Error?

    @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

  • Verified answer
    Community Power Platform Member Profile Picture
    on 19 Feb 2020 at 20:30:52
    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%")

     

  • farhandsome Profile Picture
    175 on 19 Feb 2020 at 16:47:45
    Re: PowerApps Custom Progress Bar Error?

    @Anonymous ,

     

    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. 

     

  • Community Power Platform Member Profile Picture
    on 19 Feb 2020 at 16:44:30
    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.

  • farhandsome Profile Picture
    175 on 19 Feb 2020 at 16:34:29
    Re: PowerApps Custom Progress Bar Error?

    @Anonymous ,

     

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

  • Community Power Platform Member Profile Picture
    on 19 Feb 2020 at 16:00:22
    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

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Announcing our 2025 Season 2 Super Users!

A new season of Super Users has arrived, and we are so grateful for…

Paul Stork – Community Spotlight

We are honored to recognize Paul Stork as our July 2025 Community…

Congratulations to the June Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 791 Most Valuable Professional

#2
MS.Ragavendar Profile Picture

MS.Ragavendar 410 Super User 2025 Season 2

#3
mmbr1606 Profile Picture

mmbr1606 275 Super User 2025 Season 2

Loading complete