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. 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. Yes. Images stored in the Documents tab can be displayed in image fields. See the Tips & Techniques section for the correct syntax. 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). 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. 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. 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. 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.

Where are the images stored?

Can I display images stored in the Documents tab?

Where can I use image fields?

Can I make the image change dynamically?

Can I make a clickable image?

Why is this a formula function rather than a field type?

Why do I get a security warning when I display a page containing an image field?

-3-

Getting Started with Image Fields

SAMPLE IMAGE FORMULAS

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", " ")))

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.

HYPERLINK("callto://" & "+1"& {!Phone}, IMAGE("http://goodies.skype.com/graphics /skypeme_btn_small_blue.gif", "Click to Skype"))

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.

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")

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.

-4-

Getting Started with Image Fields

SAMPLE IMAGE FORMULAS (CONTINUED)

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

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

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

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.

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

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.

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-