Answered

Processing Bar or Slides (Modern)

(0) Share

Report

Posted on by dylandavis09

442

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)

Sort by

Verified answer

Pstork1 69,383 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!
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 442 on at

Like (0)

Report
Copy link

Link copied!

@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 442 on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
Pstork1 69,383 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

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 442 on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
Pstork1 69,383 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

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 442 on at

Like (0)

Report
Copy link

Link copied!

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 69,383 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

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 442 on at

Like (0)

Report
Copy link

Link copied!

Thank you!

Was this reply helpful? Yes No
Pstork1 69,383 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!
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