Unanswered

Custom fill Star rating component

(0) Share

Report

Posted on by MelaninCoded

I'm building a custom star rating component but the svg star is not displaying in the image control.

What could be the cause?
Here's the code I'm using in the image property of the image control.



With(
{
StarColour: If(
ThisItem.Value <= 'Star_Rating'.Score,
"Gold",
"LightGrey"
)
},
"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path fill='" & StarColour & "'d='M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z'/></svg>")
)

Categories:

Building Power Apps

I have the same question (0)

All responses (3)

Answers (1)

Suggested answer

CodeAvenue 104 on at

Like (1)

Report

Hi @MelaninCoded,
I think the issue with your code is there need to be a spacing before the d='M12... here's a corrected code as below.

With(

{StarColor:If(

ThisItem.Value <=Star_Rating.Score,

"Gold",

"LightGrey"

)

},

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' viewBox='0 0 24 24'>

<path fill='" & StarColor & "' d='M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z'/></svg>"))

Was this reply helpful? Yes No
Verified answer

CodeAvenue 104 on at

Like (1)

Report

Hi @MelaninCoded,
Here's a modified version of this SVG star rating code. This can help you fill the SVG star image based on the value in the DataCard. It could also be the value in a variable or anything that can provide it a number value. The main modification of this SVG star rating technique is that it can help fill the Star half way.
Therefore, you can use it to display numbers like 1.5, 2.5, 3.5 etc.

I would appreciate it if you can mark my answer as the solution once you confirm it meets your needs. Best.

With(

{

StarSVG:"<path d='M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z'/>",

ClipWidth: 100 * (DataCardValue34.Value - ThisItem.Value+0.62)

},

"data:image/svg+xml;utf8, " & EncodeUrl(

"<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' viewBox='0 0 24 24'>

<defs><clipPath id='StarClip'>

<rect x='0' y='0' height='100' width='" & ClipWidth & "' />

</clipPath></defs>

<g fill='RGBA(227, 227, 227, 1)'>" & StarSVG & "</g>

<g fill='RGBA(255, 192, 0, 1)' clip-path='url(#StarClip)'>" & StarSVG & "</g>

</svg>"

)

)

Was this reply helpful? Yes No
MelaninCoded 42 on at

Like (1)

Report

Many thanks for your response @CodeAvenue
Your solution is indeed unconventional and on a genius level. Knowing the limitations of Microsoft Power Apps out of the box rating control, this solution exceeds my expectations of what was possible within Power Apps.

At best I was looking to CSS combined with JavaScript inside the Power Apps HTML control to pull this off since those languages are very adapted to working with graphics.
And I really like the fact that, shading or filling of the star SVG can be done using an external input like a DataCardValue, variable or collection. Double thumbs up!

Was this reply helpful? Yes No