Progress Bar with Text

[iwonder]

Thank you for taking the time to read my question.

I'm wondering if anyone has a way to create a progress bar with Text over top where the text color changes based on the width of the progress bar? Is that even possible in PowerApps?

Thanks

[Giraldoj]

Hi @iwonder 

Yes, is indeed posible, you can use the progress bar component

https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/modern-controls/modern-contr...

And using the BasePaletteColor property you can set up which palette of colors you will like.

if that bar is to small for you, please try with 2 rectangles like is mentioned in the following post

https://powerusers.microsoft.com/t5/Building-Power-Apps/add-a-progress-bar/m-p/940259#M298641

then for you text is just about define some code to change the color based on the current value of the variable that is going to control your progress

it should look something like this

If(completionPercentage = 100, Color.Green, ColorFade(Color.Red, completionPercentage/100))

[rzuber]

Create a container..

In that container, add a rectangle. (This will be the 'filler')

Add a label to fill the container. (on top of the rectangle)

Set the width of your rectangle to the percentage of the width of the container that matches the progress value.

Set the text of the label to whatever value you need it to be.

This will work as long as it has time to update the width between operations.. You may need a timer control to effect this visualization of the progress.

[iwonder]

Thanks to both of you for your replies.

Here is a bit more explanation of what I have already, I should have included this to start. Sorry.

I am able to make my progress bar work, I just can't invert the text color depending on how wide the progress bar is.

Currently also trying an HTML Text control...

Thanks!

[Giraldoj]

Hi @iwonder 

As i said you can just put this code in the color property of your text field

If(completionPercentage > 50, Color.White, Color.Black)

try to find some colors that are opposite to your progress bar, you can also add RGBA instead of Color.White or Color.Black.

[iwonder]

The part I don't understand is if my rectangle width is 50% of the text label, how do I get half of my text to be white and half of my text to be black (for example)

Like this:CSS progress bar with inverted colors (codepen.io)

I'm trying to make this work in an HTML Text control

[rzuber]

@iwonder like this?

To accomplish this:

Create one Container1

Insert two containers into that container. (Container2/3)

Container2 X = 0

Container3 X = Container2.Width

Container3 Width = Container1.Width - Container2.Width

Container2 Width = Percentage of progress

Insert a label into container2

Label1 X = 0

Label1 Width = Container1.Width

Set label font and color and stuff.

Add label to container 3 (Label2)

Label2 X = 0 - Container2.Width

Label2 Width = Label1.Width

Label2 Text = Label1.Text

Set font and color and stuff.

Adjust width of Container2 to match the progress width you are trying to show.

I just threw this together real quick... Obviously you would want to pretty up the corners and such.

[EDIT] Originally had you put the label (incorrectly) in container 1. It should go in container 2.

[iwonder]

Thanks! I'll give it a shot! 

Is it possible to next containers in Galleries yet?

[rzuber]

@iwonder Not sure what you mean by that statement. Can you please elaborate?

Also... I missed your other statement about using the HTMLText control. Don't bother.. It doesn't give you enough style access to accomplish this. You only have in-line style access.. No cascading styles unfortunately..

@Giraldoj has done a good job of correcting me on this one. Thanks for the enlightening sharing!

[iwonder]

I need a progress bar for each record which I'm displaying in a Gallery.

If I use the proposed solution above using Containers, I will need to nest Containers within a Gallery "record". I think you can only put one Container inside a Gallery, not a Container inside a Container inside a Gallery... but I could be wrong.