Visually improving a record page with icons

Adding icons to a page layout can help improve the overall visual appearance of a record. This post will show you two ways to insert icons onto a page. First I recommend installing the Force.com Labs Graphics Pack found on the appexchange. This will install hundreds of images into your Documents.

Inserting Icons on a Page Layout Section – This option has now been disabled (See Spring 13 notes)

If you have installed the graphics pack, first find the image you want to use on your page layout section and remember the name of it. Go into your Documents and find that image. Make note of the 15 digit id found in the url:

Now go to your page layout and onto the edit layout view. Click on the spanner next to the section you want to add the icon to. In the Section Name field,  insert the code below after the name of the section, replacing my 15 digit id with the id of your image.

<img src=”/servlet/servlet.FileDownload?file=015300000028GHD”/>

When happy, click on OK then save the layout. You will find the icon will appear similar to the screenshot below:

Inserting Icons using an IF Formula

This example displays 2 different icons depending on the Stage of the opportunity.

Create a new formula field called “Closed” and choosing the formula field type as Text. The formula below displays a thumbs up if the opportunity stage equals Closed Won, a thumbs down if it equals Closed Lost and stays blank if it equals any other stage. If you wish to use this formula just replace the ids and names of the icons.

IF( ( ISPICKVAL(StageName, “Closed Won”)), IMAGE(“/servlet/servlet.FileDownload?file=015A0000001j1rb”,”thumbup”,16,16), ” “)

+

IF( ( ISPICKVAL(StageName, “Closed Lost”)), IMAGE(“/servlet/servlet.FileDownload?file=015A0000001j1rb”,”thumbdown”,16,16), ” “)

Once you save the formula, go to a record to see the results:

Closed Won:

Closed Lost:

These icons will also appear in a list view if you choose to display the field in the view.

About these ads

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 )

Connecting to %s