Hi there! In this very quick tutorial, I’ll show you how to add custom icons to any record within the related list in Salesforce. This can be useful if you’d like to highlight certain records. Since Salesforce’s related lists are all look alike, such icons may help a user to navigate page layouts more efficiently.

Let’s say we have a task to highlight only new cases within the cases related list. So let’s get started.

This is how our related list looks now:

Initial Case List

So far, if we look at the case list, it’s hard to tell which one is new. A user has to read through the statuses to figure it out. So let’s get this simplified.

STEP 1: Get an Icon

This step should be very simple. You just need to download an icon from google or make your own one. I’m suggesting to use icons that are up to 20px in height.

For our example I’ll use this one: Salesforce Icon

STEP 2: Upload an Icon as a Static Resource

Go to Setup -> Type in search ‘Static’ -> Click ‘Static Resources‘.

Static Resource Setup

Once there, click on ‘New‘ to create a new static resource.

The Name can be anything you like. For our example, let’s use ‘Green_Flag‘. Then select your icon file to upload. Make sure to set ‘Cache Control‘ to public. That way your icon will be accessible by other users.

Static Resource Upload

Step 3: Create a Custom Text Formula Field

To do that, go to a Case object. Under Fields & Relationships create a new custom text formula field. Let’s call it ‘Contact Name‘. It will replace exact same standard field.

Contact Name Custom Field

Here comes the fun part. For our custom formula field, we need to have two main things.

  1. It should display the contact name and if clicked on it – it should take you to a record itself. (HYPERLINK)
  2. Conditionally display our icon next to the name when our case is having ‘New‘ status. (IF)+(IMAGE)

The HYPERLINK function looks this way:

HYPERLINK(url, friendly_name [, target])

In our case:

HYPERLINK(“/”+ ContactId , Contact.FirstName+’ ‘+Contact.LastName, “_self”)

The IMAGE function looks this way:

IMAGE(image_url, alternate_text [, height, width])

In our case:

IMAGE(“/resource/Green_Flag”, “Green_Flag”,20,20)

Lastly, if we want to conditionally display an icon next to a contact record name, we need to use IF function:

IF(logical_test, value_if_true, value_if_false)

Here is a great article that I’ve written about Salesforce IF formulas. Please take a look if you have a minute.

So our IF formula will look like this:

if( ISPICKVAL(Status, “New” ), ‘ ‘ + IMAGE(“/resource/Green_Flag”, “Green_Flag”,20,20), ”)

Let’s put everything together as one formula:

HYPERLINK(“/”+ ContactId , Contact.FirstName+’ ‘+Contact.LastName, “_self”) + if( ISPICKVAL(Status, “New” ), ‘ ‘ + IMAGE(“/resource/Green_Flag”, “Green_Flag”,20,20), ”)

Once done, go ahead and save. Attaching a screenshot for your reference.

Contact Name Field Formula

Step 4: Add the Field to a Page Layout

Go ahead into object settings, Page Layouts, and add our new field to a Case related list. Make sure to remove the existing field as well.

Add Field to a page layout salesforce

If you did everything right, here what you are supposed to see:

Final Case List

To me, it’s much more visually appealing when highlighted by icons. Obviously you can have your own conditions set for icons to show.  You can also set different icon colors if necessary. This was just to get you the idea that it is possible to customize related lists with custom icons. Oh yeah, it can potentially save you column space as related lists are limited to 10 columns max.

Please let me know if you have any questions. Comments are also welcome! See ya’ll next time!

0 0 vote
Article Rating