Image Formulas

TLDR: Emojis are probably still your best bet for images in formulas that display in fields and list views, and reports.

A while back I wrote about https://tddprojects.atlassian.net/wiki/spaces/SF/pages/239534121 where, you can build formulas to display image-based indicators on your page.

Then a few months back Matt Lacey wrote an excellent blog series on how to build indicators with Visualforce and SVG. Yes, there is still good reasons to use Visualforce even in these times of LWCs.

As Matt’s post says at the end, “let your imagination run wild”.

So I did, and I’ve done cool things with that formula.

Here’s my current code

<apex:page contentType="image/svg+xml; charset=UTF-8">
  <svg version="1.1" baseProfile="full" width="{!$CurrentPage.Parameters.w}" height="{!$CurrentPage.Parameters.h}" xmlns="http://www.w3.org/2000/svg">
    <style>
      .indicator
      {
        font-size: {!VALUE($CurrentPage.Parameters.h) / 2}px;
        font-family: 'Salesforce Sans', Arial, sans-serif;
        font-face: bold;
        fill: white;
      }
    </style>
    <rect width="{!$CurrentPage.Parameters.w}" height="{!$CurrentPage.Parameters.h}" fill="{!$CurrentPage.Parameters.col}" rx="{!VALUE($CurrentPage.Parameters.w) / 10}"/>
    <text x="{!VALUE($CurrentPage.Parameters.w) / 2}" y="{!VALUE($CurrentPage.Parameters.h) / 2}" class="indicator" dominant-baseline="central" text-anchor="middle">
        <apex:outputText value="{!$CurrentPage.Parameters.text}"/>
    </text>
  </svg>
</apex:page>

And my formula

IF(CurrentSubscriber__c = true,
IMAGE('/apex/indicator?w=50&text=SUB&col=%23008000', 'Current Subscriber'),
IF(PrevSubscriber__c = true,
IMAGE('/apex/indicator?w=50&text=SUB&col=%23d3d3d3', 'Previous Subscriber'),
IMAGE('/apex/indicator?w=50&text=SUB&col=%23ff0000', 'Not a Subscriber')
))& " "&
IF(NumCases__c> 0,
IMAGE('/apex/indicator?w=50&text=LCL&col=%23f2cf5b', 'Has Cases'),"")&" "&
IF(NumDonations__c > 0,
IMAGE('/apex/indicator?w=50&text=PUB&col=%23fcb95b', 'Has Donations'),"")

Now, that’s OK, but it’s a bit boring and my colour choice isn’t great

So, what about those lovely Salesforce Icon’s surely I could use those. You know the ones that are visible at https://login.salesforce.com/logos

Yep, you can, as shown in https://tddprojects.atlassian.net/wiki/spaces/SF/pages/239534121 you can do a simple Image formula.

IMAGE("/logos/Standard/goals/logo.svg", "Goal!", 60, 60)

Use the Logo link rather than the Icon link.

But what about all the OTHER cool Salesforce Icons? https://www.lightningdesignsystem.com/icons/, well they are a bit harder - they are all SVGs themselves and for some strange reason they don’t display from the Visualforce page when it is saved as an SVG - probably because it’s recursive - it has an SVG and HTML inside an SVG).

There are other MIME types you can save Visualforce pages as, but nothing has worked.

So I asked the developer brains trust and Matt Bingham came back to me with something that works, and a hint. The fabulous Shun Kosaka shed some more light on it (btw, have you checked out Shun’s latest Process Builder goodness!!).

So there is partly a way to use the Visualforce as SVG to use Salesforce Icons with this code.

So that is an Image file of one of the utility icons that is accessed directly from your Salesforce. So where does the file name come from? And are all the other icons there too?

Well that took a bit of sleuthing.

You can download all the icons from this Lightning Design System page

https://www.lightningdesignsystem.com/resources/downloads/

And that tells you what the file names are, but not all of them work.

Utility icons seem to work. And Doctype icons seem to work. Apparently that is all that is available within your org. Each Utility and Doctype icon seems to have been saved in a way that is accessible to your org, as transparent pngs in 60px and 120px sizes.

Alas, I can’t get the Trailhead icon or the Astro icon to work!

You could use this site to find what the names would most likely be, but just test it out. Take your base domain, add /apexpages/slds/latest/ then grab the “/assets/icons/utility/announcement_60.png” from the URL from that repo and see if it displays something.

However, you can still just use those images directly in an image formula

Now, unfortunately the Utility Icons are grey and boring as PNGs and the doctype icons are very limited, so you are back to sourcing these icons from outside of Salesforce if you don’t want to download them yourself, convert them to the coloured PNGs and upload them to the Assets File Library and mark them as shareable and then get the very long URL. Nope, all to hard (yes, you can do Document Library and / or Static Resource, but I’m just trying to demonstrate the “Lightning Way”).

So there is not a fabulous answer to having all those SLDS icons in your Salesforce formulas easily, but you have a few options if you just want the utility or doctype icons. Otherwise there is a heap of icon resources over on the page.

NOTE, I am not mentioning anything about load times of pages or load times of various options. That’s up to you to determine if doing anything with images is worth it for your scenarios.

Inline Images

Note: Logos or Icons as formulas or SVGs don’t work inline due to the 20px bottom margin. And the SVGs don’t render that small.

So just use Emojis for those.

Alternative - SVG Text

Displaying bold coloured text in a formula. This is a little different to the above code and I could make it work for both.

Formula

It’s a bit naff, but I think it is a much nicer way to do it than this work-around using Process Builder (or ) https://ericsplayground.wordpress.com/2019/11/02/how-to-make-a-field-pop-on-the-page/

Side-note - colouring svg images

Just because I found this interesting, you can colour svg images using CSS, but you can’t then save it as an svg.

which came from this extensive Stack Overflow post https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element

Something more to try?

There may be something in this, but I’m not sure https://salesforce.stackexchange.com/questions/5892/how-to-render-blob-on-visualforce-page