Answered

HTML Progress Bar

(0) Share

Report

Posted on by Community Power Pla... Microsoft Employee

Hello Guys, I was looking on powerapps apps models, and I found this one very intersting the Progress Bar, so I decided to implement it on my app I have with actions...The Idea is the same as the model, but I found an Bug on progress bar, or is something I made wrong, I dont know...

When is not 50% or 100%, the Status Bar (green) does not show properly....I dont know why this happens, im not an expert on HTML but some cases I can identify the error, but this one is a mistery for me...

The code for the bar is this:

___"__ "<div style=""height:13px;position:relative;border-radius:6.5px;border:1px solid #edf0f5;margin:23px 20px 3px 20px;overflow:visible;box-sizing:border-box;"">
<div style=""position:absolute;top:-3px;left:" & If(And(TarefasCompletasUsuario>TarefasTotais;TarefasTotais > 0);100;Round(If(TarefasTotais>0;TarefasCompletasUsuario * 100,0 / TarefasTotais;0);0)) & "%;"">
<div style=""position:relative;width:34px;height:14px;background-color:#005e79;border-radius:3px;margin:-18px 0 0 -17px;text-align:center;color:white;font-size: 11px;padding-top: 1px;box-sizing: border-box;border-bottom:1px solid #005e79;"">" & If(And(TarefasCompletasUsuario>TarefasTotais;TarefasTotais > 0);100;Round(If(TarefasTotais>0;TarefasCompletasUsuario * 100,0 / TarefasTotais;0);0)) & "%
<div style=""position:absolute;width:0;height:0;top:14px;left:1.5px;border-left:15.5px solid transparent;border-right:15.5px solid transparent;border-top:4px solid #005e79;""></div></div>
</div>
<div style=""height:13px;position:absolute;border-radius:6.5px;background-color:#41e17f;top:-1px;left:-1px;width:" & If(TarefasTotais>0;TarefasCompletasUsuario * 100,0 / TarefasTotais;0) & "%;""></div></div>" __" ___

Variables: TarefasCompletasUsuario is the count of Completed Tasks of the user
TarefasTotais is count of total tasks of the user.

Someone knows why this happens? Or Have another progress bar code??

Categories:

Building Power Apps

I have the same question (0)

All responses (6)

Answers (1)

Sort by

Verified answer

Community Power Pla... Microsoft Employee on at

Like (3)

Report
Copy link

Link copied!
Here's an example I pulled off one of the HTML Examples sites a while back:

<!DOCTYPE html>
<html>
<body>

<p>Display a gauge:</p>
<meter value='2' min='0' max='10'>2 out of 10</meter><br>
<meter value='0.6'>60%</meter><P>
Downloading progress:
<progress value='22' max='100'>
</progress>
</body>
</html>

This provides THREE examples, two meter (one with values between 2 and 10, other with a percentage), and a progress bar from 0 to 100.

Here's a specific example of using the HTML <progress> and <meter> tags with PowerApps:

Create an HTML text control, I'll call it HtmlText1
For HtmlText1.HtmlText set this to:

"<progress value='" & Slider1.Value & "' max='100'></progress>"
Create another HTML text control, let's call it HtmlText2
For HtmlText2.HtmlText set this to:

"<meter value='" & Slider1.Value & "' max='100'></meter>"
Create a slider control, here called Slider1
So now whenever you move the slider, you'll see the progress bar change. of course you can replace "Slider1.Value" with whatever else you want to measure (change "max" as appropriate for the maximum value).

Here's a small screenshot:

Some references:

HTML meter element

Styling progress and meter elements

By the way - Note that the reason yours may not have worked (I did not try) may be related to PowerApps not really supporting CSS in the HTML Text control. Best to look for pure HTML examples (which are harder to find in some cases now that some HTML tags are being deprecated in favor of CSS approaches).

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

Like (0)

Report
Copy link

Link copied!

Thank you so much Brian, very easy to do a Progress Bar thought.

Let me ask you a question, how Can I change the WIdht and Height?

I tried to put the codes on the HTML but I am messing up in something I Guess :c

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

Like (1)

Report
Copy link

Link copied!
So I just looked and it appears that the progress control doesn't directly support width so you would have to do it via STYLE, using CSS, etc. But PowerApps doesn't support CSS (to my knowledge), and strips out a bunch of style tags etc (there is a prior posting that addresses this at least a little).

So while there may be a way to set the width with that, I wasnt able to figure it out myself in the 10 minutes or so I tried (I'm not an HTML expert either). I did Google a few things and css was usually they way they did it.

HOWEVER - thinking about it for a few minutes more, there is an EASY way to do this without HTML, directly in PowerApps.

Here's the steps I used:

Go to App settings->Advanced settings and make sure "Try the enhanced Group control" is turned ON. Its not NEEDED for this, though the steps below would be different with either a normal group control or without using either.

I think you'll need to SAVE your app, close, and reload for this to take affect. NOTE: while this shouldn't convert anything else you previously used for groups to the "new" group control, any new groups you create from that point will be using the "new" one - so beware (behavior is a LOT different, which has some major advantages.

Now, go to Insert->Controls and choose "Group (experimental)" (this is the new group control, and yes you can create a group without anything in it (with the new group control, not the old). Rename this new group control on the control list to the left to something like "MyProgress Control" (I'll use this name going forward)

Select the new group, and resize it to how big you want your overall control to be. While you are at it, set its Fill property the color you want for the background of it, I used gray, (ie: the "empty" portion of your control - similar to the gray section on the Progress control)., and also set BorderThickness to 1 (or something > 0) so you can fully see the control.

Make sure the group control is selected (important) and go to Insert->Icons, and choose the "Rectangle" near the bottom. This should paste a blue rectangle somewhere inside the group (if not, delete it and try again, or you can cut it (Control-C), click on the group, and paste it (Control-V) there.

Click on the rectangle and in the left rename it to something like "Progress Value" (that is the name I'll use for this example). If you want, you can now change the color of the rectange to something else (Fill also), I changed mine to red.

Now to make this appear as a "gauge" in the group - Select the rectangle (ie: "Progress Value") and change the following properties to these values:

X = 0 // The X position of the rectangle in the group Y = 0 // The Y position of the rectangle in the group Height = Parent.Height // Height of the "parent", ie: the group Width = Parent.Width * ( Slider1.Value / 100 )
The above assumes you have a "Slider" control called "Slider1" that you want to use to control the size of your "progress" bar and that its Min is set to 0, and Max set to 100 (hence the / 100, ie: (Max - Min) = 100).

Note: the X and Y above are RELATIVE X and Ys based on the group (ie: 0,0 is the top left corner of the group), UNLIKE the old group control where they are absolute to the screen (on of the annoyances of the old one). This makes things MUCH easier which is why I recommend using enhanced groups.

So now when you move the slider, it will automatically change the size (width) of the rectangle in the group.

I use these "composite controls" all the time (with the enhanced group functionality). Prior to the new group functionality it was a pain to do things like these (especially more complex things like dialogs). You can have groups now inside of groups.

BTW - you can move or resize the WHOLE control (click on the group, not the rectangle) and you'll see that it behaves just like you want, the progress bar will appropriately resize and move as well. NOTE: do NOT resize the rectangle itself, or else you will LOOSE the formulas - one issue with the enhanced group control is that there is no way to "lock" properties of items within it that have formulas, so it is easy to loose your hard work setting this up if you're not careful (undo, aka Control-Z is your friend here).

Hope this helps!

Bonus - Instead of a rectangle you could use other controls - like a button, or even a "Label". This would allow you to set the Text property to say the value of the slider (Slider1.Value) so it will show this as it resizes (when it gets too small of course it wouldn't look good). If you use a "Label" control, do the same thing as Rectangle, by setting its Fill property it has the same affect (in this case) with the bonus of the text label.

Here's a picture of mine that I put together in a few minutes showing the slider above (as well as a label with its value):

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

Like (0)

Report
Copy link

Link copied!

Awesome @Anonymous!

this is a very cleaver workaround for sure hahaha

I will try this later and come back here to post what I thought about.

Thank you so much for the help!

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

Like (0)

Report
Copy link

Link copied!

it is very easy to do @Anonymous!
Terrific!

Now I want to to a more difficult job with this, I have a button that users press to send e-mail, patch, refresh, collect, and navigate, maybe if I could get together with this progress bar when the user press it, the loading bar appears and starts loading to a 100%? Think how awesome it could be ;o
If you have any idea how to do this, I will try it.

*Edit:

I am trying to set an variable to the slider value, If I put this on a button
(UpdateContext({ varProgressBar: varProgressBar+20})) and press it several times it works perfectly.

But I am trying to do this in a button with this commands:
"Office365.SendEmail("alexandre.wojciechowski@rumolog.com";
"Teste de barra de progresso" ; "teste barra de progresso no powerapps")
;;
UpdateContext({ varProgressBar: 25})
;;
SubmitForm(Form_Feed)
;;
UpdateContext({ varProgressBar: varProgressBar+25})
;;
NewForm(Form_Feed)
;;
UpdateContext({ varProgressBar: varProgressBar+25})
;;
Reset(Resp_Sugest_Feed)
;;
UpdateContext({ varProgressBar: varProgressBar+25})
;;
UpdateContext({Showpopup: true})"

When pressed the progress bar goes to 20 and suddendly to 100% hahaha
I dont know if it is so fast that Cant even see what is going on or is something wrong ^.-

But i think im on the way xD

Was this reply helpful? Yes No
lovecmd Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

How do you change the sizing and colors without CSS?

Was this reply helpful? Yes No