Power Apps and SVG: Make Cards for Your Apps!

I was working on a Power App this week and saw that there was external data in the app that was just listed in a gallery. The data provided performance information that was related to the item in the gallery. It was very simple, just a few data points and a derived measure.

Now, Power BI would normally be an option. However, this was in a gallery. So trying to redesign the app to make Power BI be a better option at this point would be overkill, especially since it was just a few data points and one derived measure.

I could have styled it and make it more visually appealing, but I wanted to do more. Enter SVG!

SVG To The Rescue

Power Apps has the ability to render SVGs in an image control. As long as you can code it, it will render it.

I first learned about this functionality years ago by watching this video by Microsoft MVP Shane Young:

The video goes through several ways of using SVGs, including animations. This opened my eyes to the flexibility of the image control and how you can extend it.

The Code

Here is the gist.

There are a few moving parts, so let me explain them.

SVG Setup

I used three variables: varHeartHeader, varHeartTable, varHeartFooter. To get this going, I define these in the OnVisible property for the screen. The table is the most crucial aspect of this, because you want to setup the body and later switch between red and gray colors to dynamically color the circles.

The Event

For demo purposes, I made a simple DropDownList and in the OnChange property used the WITH() function to dynamically build the body and concatenate. I think this example shows the power of WITH(). While it looks a little funky, it was much easier to write this (in my mind). I always think of it in these terms: “With this being true, do this.”

The result:

Closing Thoughts

A heart waffle is probably not something most people would use, but I wanted to do a variant waffle chart and this was fun. Also, being able to think about SVG in terms of Power Apps was helpful for my work. The interesting thing is how similar the process was to Power BI. Most of it was the same, it was just using different functions (PowerFx vs DAX).

So next time you are asked to put a viz in Power Apps, think about whether it would benefit from Power BI or whether SVG can assist. For more complicated asks, use Power BI. But for simpler charts, especially nested in a gallery, SVGs may be the way to go.