Unanswered

Processing Bar or Slides (Modern)

(0) Share

Report

Posted on by dylandavis09

438

I’m trying to design something similar to a Processing Bar or Slides, aiming for a curved bar. Here’s a screenshot to illustrate the desired appearance I’m working towards. Let me know, and thank you!

If you know how to make a curved bar, really appreciate it. 🙂

Categories:

Building Power Apps

I have the same question (0)

All responses (20)

Answers (1)

Verified answer

Pstork1 68,707 Most Valuable Professional on at

Like (1)

Report
I've done something similar to that using SVG. Here's a screenshot.

in my case it mimics the progress of the slider, but you could change the code to use specific numbers. Heres the code for the SVG image.

"data&colon;image/svg+xml," & EncodeUrl( "<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px'>" & "<path fill='none' style='stroke-width:18;stroke:rgb(230,230,230);stroke-linecap:round;' d='" & "M " & Text(50 - 40*Sin(Pi() / 4)) & " " & Text(50 + 40 * Cos(Pi() / 4)) & " A " & "40 40 0 1 1 " & Text(50 - 40*Sin(2 * Pi() - Pi()/4)) & " " & Text(50 + 40 * Cos(2 * Pi() - Pi()/4)) & "'>" & "</path>" & "<path fill='none' style='stroke-width:18;stroke:rgb(69,204,206);stroke-linecap:round;' d='" & "M " & Text(50 - 40*Sin(Pi() / 4)) & " " & Text(50 + 40 * Cos(Pi() / 4)) & " A " & "40 40 0 " & If( Slider1.Value / Slider1.Max > Pi() / (2 * (Pi() - Pi()/4)), "1", "0" ) & " 1 " & Text(50 - 40*Sin(Pi() / 4 + 2 * (Pi() - Pi()/4) * Slider1.Value / Slider1.Max)) & " " & Text(50 + 40 * Cos(Pi() / 4 + 2 * (Pi() - Pi()/4) * Slider1.Value / Slider1.Max)) & "'>" & "</path>" & "</svg>" )

Was this reply helpful? Yes No
dylandavis09 438 on at

Like (0)

Report

@Pstork1,Thank you for guiding me through this process; I really appreciate it! While I was copy-pasting, I noticed an error with the slider. I am considering avoiding the use of sliders, but let me show you what it looks like with an example use SharePoint data.

Was this reply helpful? Yes No
dylandavis09 438 on at

Like (0)

Report

@Pstork1, hello, I just wanted to follow up with you since I haven't heard from you. 🙂

Was this reply helpful? Yes No
Pstork1 68,707 Most Valuable Professional on at

Like (0)

Report

Sorry for not responding. Did you have a further question? It looked like you got it working the way you wanted it. What issue were you still having?

Was this reply helpful? Yes No
dylandavis09 438 on at

Like (0)

Report

@Pstork1, that's fine. There it's worked, not there no show. Let me screenshot for you. 🙂

Was this reply helpful? Yes No
Pstork1 68,707 Most Valuable Professional on at

Like (0)

Report

Sorry, I'm still not following. Are you saying the code isn't working in your application? I'll try to help if you can tell me what the issue is that you are having. Its not clear from the screenshot what the problem is.

Was this reply helpful? Yes No
dylandavis09 438 on at

Like (0)

Report

Okay, when I copy and paste the code from you, I put it in an Image with code. After that, I add Slider1 to match the code you provided. There's no red error message showing up, but it's still blank; there's no curved bar showing in the data.

Was this reply helpful? Yes No
Pstork1 68,707 Most Valuable Professional on at

Like (0)

Report

Its been a while since I looked at that. Let me take a look and see what else needs to be in place for it to work.

Was this reply helpful? Yes No
dylandavis09 438 on at

Like (0)

Report

Thank you!

Was this reply helpful? Yes No
Pstork1 68,707 Most Valuable Professional on at

Like (0)

Report
I tried pasting in the code I posted and had the same problem you are having. But I don't see any difference between that and the code I have in my original. I tried copying and pasting the code after removing the formatting and that worked. So try this version of the code and see if it shows up.

"data&colon;image/svg+xml,"&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px'>"&"<path fill='none' style='stroke-width:18;stroke:rgb(230,230,230);stroke-linecap:round;' d='"&"M "&Text(50-40*Sin(Pi()/4))&" "&Text(50+40*Cos(Pi()/4))&" A "&"40 40 0 1 1 "&Text(50-40*Sin(2*Pi()-Pi()/4))&" "&Text(50+40*Cos(2*Pi()-Pi()/4))&"'>"&"</path>"&"<path fill='none' style='stroke-width:18;stroke:rgb(255,0,0);stroke-linecap:round;' d='"&"M "&Text(50-40*Sin(Pi()/4))&" "&Text(50+40*Cos(Pi()/4))&" A "&"40 40 0 "&If(Slider1.Value/Slider1.Max>Pi()/(2*(Pi()-Pi()/4)),"1","0")&" 1 "&Text(50-40*Sin(Pi()/4+2*(Pi()-Pi()/4)*Slider1.Value/Slider1.Max))&" "&Text(50+40*Cos(Pi()/4+2*(Pi()-Pi()/4)*Slider1.Value/Slider1.Max))&"'>"&"</path>"&"</svg>")

Was this reply helpful? Yes No