Changeable Images in Visual Flow

29 Nov
Changeable Images in Visual Flow

If variety is the spice of life, then how about spicing up Visual Flow by adding functionality that will allow images to be changed whenever you want to…without having to edit the flow or replace a saved image with a different image?

I’ve got a couple ideas on how to do this so today I’m going to share the idea that uses Custom Settings as an “image controller.”

The General Process

The general process is to save an image, put information about that image into an intermediate resource, then setup the Flow to look to that resource for image information. The Flow and the image remain unchanged, you just change the information in the middle to cause different images to be displayed.

General Process for Changeable Images

General Process for Changeable Images

Where Can Information About Images Be Stored?

Image information can be saved in more than one place in the Salesforce platform:

  1. Custom Settings (list type)
  2. Custom Labels
  3. Object Fields

There are different reasons to use these different resources, but one general rule of thumb I use is to decide whether or not the System Administrator will be the only user with control over the images, or if other users will be allowed to update them.

If the System Administrator will be in control, then Custom Settings or Custom Labels are good candidates.

Another consideration is to decide if the image information will also be used in custom formula fields. If so, then Custom Labels will be the best choice as $CustomLabel global variables are available in formula fields where list-type Custom Settings are not.

Yet another consideration is if you want to have multiple images available in the flow. In this case the best choice is Custom Settings.

In this post I’ll cover using Custom Settings, and I’ll cover the use of Custom Labels in another post at some point in time.

How to Setup Custom Settings

Custom Settings come in two varieties: “List” and “Hierarchy”. You’ll want to use the List type as your image controller.

The Fields

Filtering Fields

In order to lookup the Custom Settings records you’ll probably want to have one or more fields that you use to filter for them. For instance, you may want to have a field to indicate if they’re active or not. You may also want to have a field that categorizes the images. The main idea is that unless you want to lookup all the records all the time you’ll want some way to filter the records to just the ones you want.

Image Information Fields

You’ll also need two fields to save the image information: one with where it is located, and the other with the details of the image itself.

Flow Image Detail for Documents Image

Flow Image Detail for Documents Image

Flow Image Detail for Static Resources Image

Flow Image Detail for Static Resources Image


In these examples four fields could be used to filter for images (Name, Category, Image Description, and Is Active). And the two fields that are used to store information about the image are Stored Location and Image Details.

How To Enter Image Information Into Custom Settings

Stored Location should always be one of two values: a value to indicate that the image is in Documents, or a value to indicate it is in Static Resources (for more information about using different resources for displaying images, see Displaying Images in Visual Flow). In the examples above I use the values:

  • “Documents”
  • “Static Resources”

Image Details will be either the ID of an image stored in Documents, or the name of a Static Resource:

  • 015F0000003UNNaIAO
  • monster3o32x32px

Note, if your Static Resource image is a bundled image (it is stored within a folder) the resource name will also include the path and full file name like this:

  • ResourceName/FolderName/FileName.ext

How to Setup The Flow

There are three general steps in setting up the flow: lookup images, create image formula, and place image formula in screen elements or text templates.

General Flow Setup

General Flow Setup

Looking up Custom Settings

Custom Settings are queried in the same way that other objects are queried, which means you’ll use a Fast Lookup or Record Lookup depending on your needs.

Flow Image Fast Lookup

Flow Image Fast Lookup

Flow Image Record Lookup

Flow Image Record Lookup

In my example I’ve used a Fast Lookup and saved the record in an sObject variable called ImgRec1, but you could very well use a Record Lookup and save the necessary information into variables.

The HTML Image Tag

Images are displayed in Visual Flow using html image (img) tags. The html image tag will differ slightly depending on where the image is stored (see Displaying Images in Visual Flow for more details). Here are the final tags for my two examples:

For image stored in Documents

  • <img src=’/servlet/servlet.FileDownload?file=015F0000003UNNaIAO‘, height=’25’/>

For image stored in Static Resources

  • <img src=’monster3o32x32px‘, height=’25’/>

I’ve broken the html image tag into three parts: a start string, the document details, and an end string, and in my final flow formula I append each of these parts together to form the full tag.

The Final Flow Formula

Let’s start with the final flow formula and work backwards into its parts:

Image Formula

Image Formula


In this formula I have an outer IF statement that checks to see if there is image information. This will vary depending on how you look up the Custom Settings records. In my example I looked up a collection of records, then looped through them and counted how many records existed (ImgCount). The idea is that the outer IF statement will evaluate to a null string If image information is not available, otherwise it go on to create the full html tag.

For the start of the tag, the inside IF statement looks at the stored location information, and, depending on the stored location, starts the html tag with the appropriate string.

Next the field where the image details is located is appended.

Finally, the end of the tag is appended.

The Start and End Strings

The start string differs depending on whether the image is stored in Documents or in Static Resources:

  • Documents
    • <img src=’/servlet/servlet.FileDownload?file=
  • Static Resources
    • <img src =’

The part of the formula that comes after the image details will always be the same:

  • ‘, height=’25’/>

Note: You’ll adjust the dimension attributes to fit your needs. You can also omit the height attribute, or add additional attributes like width, alt, and title. I recommend that since your original image sizes will most likely differ, it’s always a good idea to include either a height or width attribute to control the size of the image on the screen.

Putting it All Together

When you’re putting the parts of the formula together, be very careful with your apostrophes. Be sure your “outer” apostrophe’s match (I’ve used the double apostrophe () in my example), and the “inner” apostrophe’s match (single [] apostrophe in my example).

  • Documents
    • <img src=/servlet/servlet.FileDownload?file= & FileDetailsField & , height=25/>
  • Static Resources
    • <img src= & FileDetailsField & , height=25/>

Using Image Formulas in The Flow

You can now use your formula in Text Templates and in screen Display fields.

Using Image Formula in Text Templates

Using Image Formula in Text Templates

Using Image Formula in Screen Elements

Using Image Formula in Screen Elements

Updating Image Information

Now when you want to change the images in your flow, all you’ll need to do is go to your Custom Settings, locate the image information records that you want to change and update those records.

You’ll need to update the Stored Location field only if the new image is stored in a different place than the prior one, but you’ll always update the Image Details information with an image ID, if stored in Documents, or the resource name (and path and file name if a bundled resource) if stored in Static Resources.

Now go forth and sprinkle a little spice into your flows!


Leave a comment

Posted by on November 29, 2015 in Flow Tips & Tricks, Images, Visual Flow


Tags: , , ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: