Getting Started with Image Fields

Tips, Techniques & Samples

For in-depth information, go to the Image Fields home page on

www.successforce.com.

Copyright 2005, salesforce.com, inc. All rights reserved. Salesforce.com is a registered trademark of
salesforce.com, inc. All other trademarks mentioned in this document are the property of their respective owners.

Getting Started with Image Fields

INTRODUCTION

With the Winter 06 release, formula fields allow the incorporation of images into standard and custom tabs,
list views, and reports. Because people recognize images more quickly than they can read words, adding
images to Salesforce can enable users to find the data theyre looking for more quickly. For example,
Photos for product catalogs or employee directories
Graphical representations of status, priority, or rating
Clickable Buttons
Online Presence Indicators

HOW DOES IT WORK?

Images are displayed using a new formula function called IMAGE. Similar to the HYPERLINK function,
IMAGE works by inserting HTML tags into text formulas. The formula syntax is,
IMAGE( image_url, alternate_text, image_height, image_width )
This results in the following HTML:
<IMG SRC=image_url ALT=alternate_text HEIGHT=image_height WIDTH=image_width BORDER=0>
Thus, the IMAGE function can display any image file on a web server or file server accessible from the
users web browser.

TIPS & TECHNIQUES

Test whether an image file is accessible from the users web browser by entering the image_url directly
in the browsers address bar. If the browser displays the image, you can use the image_url in the IMAGE
function. For example, try the following image file:
http://www.salesforce.com/us/assets/logos/sfdc_223x78.gif
You can reference images stored within your own corporate intranet, but be aware that when your users
login to salesforce.com from outside your firewall, they will not be able to see the images.
The image_height and image_width parameters allow you to specify the display size (in pixels) of the
image file. If you want to display the image file at its actual size, you can omit these two parameters:
IMAGE( "/img/samples/color_green.gif", "1x1 pixel green image")
IMAGE( "/img/samples/color_green.gif", "green image scaled to 50x50 pixels", 50, 50)
You can display images stored in the Documents tab using a special URL and the image files document
ID:
IMAGE( "servlet/servlet.FileDownload?file=015x00000000f7e", "image from Documents tab")
The document ID (e.g., 015x00000000f7e) is a unique identifier for each file stored in the Documents
tab. It is shown in the browsers address bar when you look at the files detail page in the Documents
tab.

-2-

Getting Started with Image Fields

FREQUENTLY ASKED QUESTIONS

How do I create an image field?

Create a custom field of data type Formula. On Step 2 of

the wizard, specify a return type of Text. On Step 3, add
an IMAGE function to your formula expression. See the
Sample Image Formulas section below for ideas.

Where are the images stored?

Image fields do not store images. They allow you to display

images stored on any web server or file server that is
accessible from the users web browser.

Can I display images stored in the

Documents tab?

Yes. Images stored in the Documents tab can be displayed

in image fields. See the Tips & Techniques section for the
correct syntax.

Where can I use image fields?

You can use image fields anywhere you can use custom
formula fields standard and custom tabs, list views,
reports, etc. The only exceptions are email templates and
mail merge documents (both of which we plan to support in
a future release).

Can I make the image change

dynamically?

Yes. The image_url parameter is a text expression, so you

can use IF or CASE functions to dynamically construct the
image_url based on other data on the page. See the
Sample Image Formulas section for ideas.

Can I make a clickable image?

Yes. Using a combination of HYPERLINK and IMAGE

functions, you can create a clickable image. The IMAGE
function is inserted as the second parameter of the
HYPERLINK function. See the Sample Image Formulas
section for ideas.

Why is this a formula function rather

than a field type?

The IMAGE function was a natural addition to the formula

language, to complement the HYPERLINK function. In the
future, we plan to add new custom field types that can
store multimedia data such as images and video.

Why do I get a security warning when

I display a page containing an image
field?

Depending on your browser security settings, your browser

may display a warning when there is a mixture of secure
(HTTPS) and nonsecure (HTTP) content displayed on a
page. If your image function uses an HTTP address, you
may get this warning because salesforce.com uses HTTPS.
You can get rid of the warning by changing your browser
security settings or putting your images on a web server
that supports HTTPS.

-3-

Getting Started with Image Fields

SAMPLE IMAGE FORMULAS

Yahoo Instant Messenger Online Presence

Displays a smiley face image that indicates whether a
contact or user is currently logged in to Yahoo Instant
Messenger. Clicking the button launches the Yahoo Instant
Messegner IM window. Uses a custom field to store the
contact or users Yahoo Name.

Skype Me Auto Dialer Button

Displays an image that looks like a push button. Clicking
the button auto dials the specified phone number.

Green / Yellow / Red Flags for Case Priority

Displays a green, yellow, or red flag image to indicate case
priority. Useful in Case list views for quick visual indication
of high priority items. This same approach can be used to
identify hot leads, big deals, or overdue tasks.

Green / Yellow / Red Traffic Lights for Status

Displays a green, yellow, or red traffic light image to
indicate status. Uses a custom picklist field for selecting
status. Useful in list views and reports to create a Status
Summary dashboard view.

Netflix-Style Stars for 1 to 5 Ratings

Displays a set of 1 to 5 stars to indicate a rating or score.

Consumer Reports-Style Colored Circles for Ratings

Displays a colored circle to indicate a rating on a scale of 1
to 5: solid red, half red, black outline, half black, and solid
black.

IF(LEN({!Yahoo_Name__c})=0,"",
HYPERLINK("ymsgr:sendIM?" &
{!Yahoo_Name__c},
IMAGE("http://opi.yahoo.com/online?u=" &
{!Yahoo_Name__c} & "&m=g&t=0", " ")))

HYPERLINK("callto://" & "+1"& {!Phone},

IMAGE("http://goodies.skype.com/graphics
/skypeme_btn_small_blue.gif",
"Click to Skype"))

IMAGE(
CASE( {!priority},
"Low", "/img/samples/flag_green.gif",
"Medium", "/img/samples/flag_yellow.gif",
"High", "/img/samples/flag_red.gif",
"/s.gif"),
"priority flag")
IMAGE(
CASE( {!Project_Status__c},
"Green", "/img/samples/light_green.gif",
"Yellow", "/img/samples/light_yellow.gif",
"Red", "/img/samples/light_red.gif",
"/s.gif"),
"status color")
IMAGE(
CASE( {!Rating__c},
1, "/img/samples/stars_100.gif",
2, "/img/samples/stars_200.gif",
3, "/img/samples/stars_300.gif",
4, "/img/samples/stars_400.gif",
5, "/img/samples/stars_500.gif",
"/img/samples/stars_000.gif"),
"rating")
IMAGE(
CASE( {!Rating__c},
1, "/img/samples/rating1.gif",
2, "/img/samples/rating2.gif",
3, "/img/samples/rating3.gif",
4, "/img/samples/rating4.gif",
5, "/img/samples/rating5.gif",
"/s.gif"),
"rating")

-4-

Getting Started with Image Fields

SAMPLE IMAGE FORMULAS (CONTINUED)

Horizontal Bars to Indicate Scoring

Displays a horizontal color bar (green on a white
background) of a length that is proportional to a numeric
score. In this example, the maximum length of the bar is
200 pixels.

Product Photos for Product Catalog

Displays product photo stored in the Documents tab in GIF
or JPEG format. Uses a custom field to store the document
ID (e.g., 015x00000000f7e).

Employee Photos for Phone List

Displays employee photo stored in JPEG format on
companys intranet. This sample assumes the naming
conventions of the photos are derived from Employee ID,
which is stored as a custom field on the user or contact
record.

Yahoo Stock Price Chart

Displays a stock price chart from Yahoo Financials, based on
the ticker symbol stored on the Account record. Clicking the
chart image displays a stock quote.

IMAGE("/img/samples/color_green.gif",
"green", 15, {!Industry_Score__c} * 2) &
IMAGE("/s.gif", "white", 15,
200 - ({!Industry_Score__c} * 2))

IMAGE( "/servlet/servlet.FileDownload?file="
& {!Photo_Doc_ID__c}, "photo")

IMAGE("http://intranet/photos/photo_" &
{!Employee_ID__c} & ".jpg", "photo")

HYPERLINK("http://finance.yahoo.com/q/bc
?s=" & {!TickerSymbol} & "&t=1d",
IMAGE("http://ichart.yahoo.com/t?s=" &
{!TickerSymbol} , "Ticker Image", 96,192) )

-5-

Getting Started with Image Fields

LISTING OF SAMPLE IMAGE FILES

/img/samples/color_green.gif
/img/samples/color_red.gif
/img/samples/color_yellow.gif
/img/samples/flag_green.gif
/img/samples/flag_red.gif
/img/samples/flag_yellow.gif
/img/samples/light_green.gif
/img/samples/light_red.gif
/img/samples/light_yellow.gif
/img/samples/priority_1.gif
/img/samples/priority_2.gif
/img/samples/priority_3.gif
/img/samples/priority_4.gif
/img/samples/priority_5.gif
/img/samples/rating1.gif
/img/samples/rating2.gif
/img/samples/rating3.gif
/img/samples/rating4.gif
/img/samples/rating5.gif
/img/samples/stars_000.gif
/img/samples/stars_100.gif
/img/samples/stars_200.gif
/img/samples/stars_300.gif
/img/samples/stars_400.gif
/img/samples/stars_500.gif

-6-