RSS

Displaying Images in Visual Flow

23 Jun
Displaying Images in Visual Flow

Within Salesforce images can be stored in three locations, and depending on where the images are stored (and what attributes have been assigned to the images) they will be accessed differently in a flow.

The three image storage resources explored here are:

  1. Images stored in Documents
  2. Images stored in Static Resources
  3. Free icons stored on Salesforce servers

Images in Documents

One of the easiest places to store an image is in Documents. The main thing to keep in mind when storing images in Documents for your Flows to access is that they should be in a public folder. This means that they are accessible by other users, so be sure to protect them from being altered or deleted by other users by marking the folder as Read Only.

Images stored in Documents can be tagged for Internal Use Only, or as an Externally Available Image. Either of these is okay for use in a Flow, you’ll just need to adjust your code depending how the image is setup.

To navigate to Documents, locate the Documents tab or type “015/o” (without the quotation marks) after the URL for your instance of Salesforce (for example: https://na15.Salesforce.com/015/o).

Images in Static Resources

Another place to store an image is in Static Resources. To get to Static Resource go to the Setup page then open the Develop section where you’ll see “Static Resources” as one of the choices (or type “static resources” in the search all setup box).

If you’re going to be saving several images the best practice is to bundle them in a zip folder and upload the zip folder to your Static Resources. For instance, let’s say I have several cat, dog, owl and monster icons. I can have the icons in separate folders within a single Icons folder. I would then zip the folder (for Windows right click on the folder then select Send to Compressed (zipped) folder) and upload the zipped folder.

Example File Structure

Static Resources File Structure Example

Free Salesforce Icons

Salesforce even provides a few free icons on their servers that anyone can access. Here is a link to a page that shows them: Sf Icon Site. To find out what each icon is named either open the image in a new tab and look at the image URL (for example, the URL for the large helicopter is http://free-121d5f44d20-121d603d1c5-121ee2b8103.force.com /img/icon/custom51_100/helicopter32.png so the image name is “helicopter32.png”), or right click on the image and choose “Inspect element”). Here is another site listing these icons: Another Sf Icon site.


HOW TO USE IMAGES IN VISUAL FLOW

My first instinct to get an image to show up in a Flow was to use a formula the same way as with a formula field on any object. But alas, this doesn’t work and the Flow compiler will be quick to tell you that.

Image Formula Error

Image Formula Error

The trick, as it turns out, is to use HTML.

Luckily, anywhere you can enter text you can also enter HTML to insert your images. That means you can insert HTML into a constant, a variable, a text template, or a screen display field–it’s your choice.

Where image formulas can be entered

  • Text Template
  • Variable
  • Screen Display Field
  • Constant

To use a constant or variable, enter the HTML code in the Value field for that resource. To use a text template or screen display field, enter the code in the text area. Personally I like using a text template over a constant or variable as the entire HTML code can be more easily viewed (very handy for debugging!), and over a screen display field as then I can use the same image in multiple locations if I need or want to.

Image HTML in Constant

Image HTML in Constant

Image HTML in Text Template

Image HTML in Text Template

Image HTML In Display Field

Image HTML In Display Field


HOW TO WRITE THE HTML CODE

Here is where the rubber hits the road…how do you structure the HTML code to display images? Although it’s fairly straight forward in general, there are subtle differences depending on where the image is stored, and it’s knowing these differences that will keep you from pulling your hair out in aggravation trying to get a stubborn image to appear!

The general syntax of the html is: <img src=’the name of the source’, alt=’a title for the image’, title=’Your Title‘ width=’64’, height=’64’ />

You can also write this without the commas: <img src=’the name of the source’ alt=’a title for the image’ width=’64’ height=’64’ />

The alt, title, width and height attributes are all optional, so in it’s simplest form the code would look like: <img src=’the name of the source’ />. (Oh! and you can use either single or double quotes around the attributes.)

Now, down to brass tacks.  Here is how to write the code for the different resources. I’ve written the code in its simplest form without the optional parameters so keep in mind you can add the alt, title, height and width parameters as well.

  1. For Images Stored in Documents: There are two methods you can use to retrieve the image: FileDownload and ImageServer
    1. FileDownload: Use this when your image may not be tagged as an externally available image.
    2. <img src=”/servlet/servlet.FileDownload?file=015F0000003UNBY”/>Owl09
      1. To get the file ID, navigate to Documents and locate your image. You’ll get the ID for the image from the URL (in this example the ID is 015F0000003UNBY):

        Document image ID in URL

        Document image ID in URL

    3. ImageServer: The ImageServer method will require that your image be marked as externally available.
      1. <img src=”/servlet/servlet.ImageServer?id=015F0000003UNBY&oid=00DF000000066BC”/>
      2. The main difference here is that the Organization ID (OID) must also be provided.  To find your OID, from the Setup menu open the Company Profile section and select Company Information. The OID will be listed in the field list that comes up.
  2. For Images Stored in Static Resources: There are two ways images can be saved in static resource: as a stand-alone images or as part of a bundled resource
    1. Stand-alone image
      1. Basic syntax: <img src=’/resource/ResourceName’ />
      2. Example: <img src=’/resource/CatImge’ />
        Cats03
      3. In this example “CatImage” is the resource name. To get the resource ID and resource name, navigate to the resource. The ID will be in the URL and the name will be whatever name you gave the resource.
      4. One thing that can be a little confusing is the resource name. This is the name you gave the resource when you uploaded your image, not the image name itself. For example, if I’m uploading an image named “Cat03.jpg” and I name the resource “CatImage” I’ll use “CatImage” in the code.
    2. Bundled resource
      1. General syntax: <img src=’/resource/ResourceName/FilePath/ImageName’ />
      2. Example: <img src=’/resource/MyImages/GC_Images_Dogs/Dog03.jpg’ />
        Dogs01
      3. So to use a bundled resource you’ll be appending the resource file tree path to the resource name then adding the name of the file name at the end. (Huh?!)
        1. In this example MyImages is the name I gave the resource when I uploaded my zip file.
        2. The file path is the sequence of folders you have to traverse through to get to your image. In my example that would be “/GC_Images/Dogs”.
        3. One thing that can trip you up (trust me on this!) is if you name the static resource the same as your zip folder. While it’s perfectly fine to do, you have to be sure you don’t miss one of these names in your final path. For example, if my resource was named “GC_Images” my final html statement would be <img src=’/resource/GC_Images/GC_Images/Dogs/Dog01.jpg’  /> (GC_Images is written out twice because I’ve used this name for the resource and it is also the name of the zipped folder that has been uploaded to the resource.)
  3. For Free Salesforce Icons
    1. <img src=”/img/icon/custom51_100/helicopter32.png”/>
      helicopter32
    2. (At last…and easy one!)

So you can see that the trick is to know how to represent the source for the image.

A few notes on the image attributes:

  • alt: alt is the “alternative” to the image. In instances where the image cannot be shown the words you use as the alt tag will be shown instead
  • title: the title will display when you hover your mouse over the image for a moment
  • height and width: you can stretch an image to larger than it’s original size, the you’ll lose quality so if you need a large image, start with a large image.
  • attributees can be separated by a space or a comma
  • it is not necessary to name the attribute, but certainly helpful and advised plus you have to know the order in which to write the attributes (for example “width=’64px’ could simply be ’64’)

Additional Notes on Image HTML Formulas

Slashes

Note that the slashes used in the formulas are a forward slashes (/) and not a backslash (\). You can actually write the formulas using a backslash instead of a forward slash…makes no difference…but to stick to convention, use forward slash (/).

Document Folder Access

If you’re storing your images in Documents and the folder that they live in has restricted access, the users will not see all your beautiful images and lovely work. Be sure to open up access to the folder and mark it as Read-Only to protect the files from being tampered with by another user.

To access the folder, go to Documents and locate the folder in the drop down box, then click “Edit”. Setup your desired access to the folder and Save.

Document Folder Selection

Document Folder Selection

Document Folder Access Setup

Document Folder Access Setup

.

Including a Domain in URL

The source (src) attribute can contain additional domain information for the site where the image is stored. For example, if your platform site is “https://na6.salesforce.com&#8221; this information can be included just prior to indicating where the image is stored:

For images stored in your platform this information can be omitted. Because it is not necessary I recommend leaving it out of the formula. The main reason is if subsequent to writing your formulas you implement My Domain where you give your Salesforce instance a custom name, you will need to re-write the formulas. For instance, if your My Domain is “tigerlily” then you’ll need to change the above formulas to:

Who needs the extra work?!

Static Resource File Names

When referencing a bundled static resource, it is important to include the extension on the file name. For instance, if you have a file named Cats03.jpg, you must include “.jpg” at the end of the file name.

Static Resource Time Stamps

Static resources have what is called a “time stamp” that can be included in the src attribute. I won’t go into the details about time stamps here, mostly because I don’t understand them too well yet, but suffice it to say you’ll most likely not need these, so no need to include them.

  • Example without time stamp:
    • <img src=’/resource/CatImage’ />
  • Example with time stamp:
    • <img src=’/resource/1429053899000/CatImage’ />

But just in case you’re wondering how to get the time stamp for your image, go to Setup > Develop > Static Resources. Click on the name of the resource to open its detail view then click “View file“.

Static Resource Detail View

Static Resource Detail View

.

You’ll see your image on the screen, and the time stamp will be the string of numbers you can see in the URL sandwiched between “/resource/” and the resource name.

Static Resource Time Stamp

Static Resource Time Stamp

 

Advertisements
 
Leave a comment

Posted by on June 23, 2015 in Images, Visual Flow

 

Tags: , , ,

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

 
%d bloggers like this: