Adding icons next to fields - jcmings/sn GitHub Wiki

I just saw a Community post for a functionality that I haven't seen before and wanted to capture this in my knowledge base (aka, this wiki). So shout out to Robert, who posted this, for showing me something new!

Adding a field decoration

Have you ever wanted to display an icon next to a field on your back-end form? Well, turns out you can do that. This could be for any use case -- showing a error icon if a certain value is inputted into a box, for example, to supplement a g_form.showFieldMsg.

For my use case, I'm simply showing a different icon depending on the State of an Incident. This is a super quick example I threw together so this won't be that long of a post. If the State is New, we'll see this red icon appear:

image

And if the State is anything else, we'll see a green check mark, and can also add hover-over text:

image

This is super easy to set up. I set it up in an onLoad client script -- I'd recommend using an onChange as well, to make changes on the fly, and only had to use the addDecoration() method. Check it out:

image

Using the syntax g_form.addDecoration(<field_name>, <icon_name>, <hover-over-text>, <color (optional)>, we can easily add our decorations. Each of these values, as you can see in the screenshot, should be inputted as a string.

Also, quick reminder that you can check out what parameters to pass through by hovering over the box on the function name. The fourth value in this is seemingly optional -- but OP (Robert from the Community post) included it, and it looks great to me.

image

⚠️ **GitHub.com Fallback** ⚠️