Image Formulas

A while back I wrote about Actions Examples 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.

• Part 1 - SVG and Visualforce

• Part 2 - Leveraging Parameters

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 Actions Examples 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.

Note: Logos as formulas don’t work inline due to the 20px bottom margin

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.

<apex:pagecontentType="image/svg+xml">
<svg xmlns="http://www.w3.org/2000/svg">
  <image href="/apexpages/slds/latest/assets/icons/utility/connected_apps_120.png" x="0" y="0" height="50px" width="50px"/>
</svg>
</apex:page>

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

http://design-system-v-0-12-2.herokuapp.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.

• Utility Icons

• Doctype Icons

You could use this github repo https://github.com/CodeScience/SLDS-icon-font/tree/master/dist/assets/icons/utility 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.

https://yourdomain.lightning.force.com/apexpages/slds/latest/assets/icons/utility/announcement_60.png

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

IMAGE("/apexpages/slds/latest/assets/icons/utility/open_folder_120.png", "Folder", 50, 50)

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”).

Shun has done that for you and is hosting them on a Heroku repo, So you could do something like

<apex:pagecontentType="image/svg+xml">
<svg xmlns="http://www.w3.org/2000/svg">
  <image href="http://lds-png-icons.herokuapp.com/icons/custom/custom97.png" x="0" y="0" height="50px" width="50px"/>
</svg>
</apex:page>

or even just

IMAGE("http://lds-png-icons.herokuapp.com/icons/custom/custom97.png", "Thermometer", 50, 50)

But remember with any external site there is no guarantee that it will be there in future.

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 Actions Examples page.

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.

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

Formula

IMAGE('/apex/svgicon?w=50&text=88&col=%23008000', Numbers')

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 Flow Triggers (Before-Save and After-Save) ) 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

<apex:page>
<style>
.filter-green{
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }
</style>
  <apex:image url="https://raw.githubusercontent.com/CodeScience/SLDS-icon-font/dfbb7856802da2c8fb9115a423cc54cedcd21805/dist/assets/icons/utility/open_folder.svg" styleClass="filter-green" height="120px" width="120px"/>
</apex:page>

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