Power Community

Power Community

Custom SVG Icons using Formulas

If the default icon selection is not sufficient for your apps needs you can always use any image you choose and display it in [image] control, this can be all you need for the app.

However, this option has its limits, e.g. if you use uploaded image you can only use it in colour it came, there is not many options in terms of customization, and you will have to upload new edited image each time.

The same goes for the size, if you use .jpg or .png or other raster images you will have to make sure to upload good size image to maintain quality and that may end up being quite a large file.

There is a solution to expanding your icon selection, while keeping small file size, excellent scalability, and easy colour customization options thanks to one experimental feature of PowerApps!

Enter Formulas and UDFs.

To accomplish all I’ve mentioned we will need an icon of your choice but instead of uploading a raster file we will use an SVG code instead.

As an example, we will use this person icon:

elseb_0-1707431577302.png

The SVG code for this icon looks like this:

http://www.w3.org/2000/svg” width=”1em” height=”1em” viewBox=”0 0 24 24″>

To use it in powerapps we need to convert all the [“] into [‘] paste the code into notepad press CTRL+H and replace one symbol to the other.

Final step to make the code usable is to add the below code snippet:

“data:image/svg+xml;utf8, “&EncodeUrl(“ HERE_GOES_SVG_CODE “)

The final code should look like this:

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

As you can see, I’ve marked a section of the code in both examples, those parts of the code are describing the colour, you will have to do some hunting on your own and locate which sections correspond to which colour of the SVG. Keep an eye on the next code snippet as it will show how to replace that hardcoded colour code with a parameter we will be able to change from within the app.

To make full use of PowerApps UDF functionality we will define those colours as parameters,

Syntax looks like this:

FunctionName(Parameter1:DataType1, Parameter2:DataType2):OutputDataType = Formula

  • FunctionName – used to invoke the function
  • Parameter – the name of the input. One or more inputs are allowed
  • DataType – argument passed into the function must match this data type
  • OutputDataType – output of the function will be in this data type
  • Formula – the result of this formula is the output of the function

Following this instruction, we will define out icon:

ICNperson(colour:Text):Text = “data:image/svg+xml;utf8, “&EncodeUrl(““);

I have replaced the colour originally set in SVG code with our preset parameter [colour] and wrapped it in [“& &”] to let PowerApps know this is part of our powerFx code and not the SVG.

Our icon is now ready to use, the only thing remaining is to call the code from the image control in our app to do this we will follow those steps:

  • Place image control in your app.
  • In the Image property of the image control, we will put: ICNperson(“green”)
  • Which should result in the icon below:
    elseb_1-1707431577302.png

Now to change to colour of the icon we can put a hex code or the name of the colour between the quotation marks.

That is all!

And for more complicated example here’s a multicolour ice cream icon 😊

FORMULA:

ICNicecream(topcolour:Text,midcolour:Text,bottomcolour:Text):Text = ("data:image/svg+xml;utf8, "&EncodeUrl(" "));

IMAGE PROPERTY:

ICNicecream("indianred","skyblue","orange")

RESULT:

elseb_2-1707431577303.png

Hope you will have fun making your app pretty with all the colourful icons! 🙂

Seb

*Syntax description is a snippet from the following blog:
Power Apps User Defined Functions: Write Code Once And Reuse (matthewdevaney.com)

This post was originally published on this site

- Advertisement -spot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisement - Advertisement

Latest News

Capture and visualize ideas without spatial constraints using Infinite Canvas in Visio for the web

Following our announcement earlier this year about mind maps in Visio for the web, we’re excited to announce a...

More Articles Like This

- Advertisement -spot_img