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:
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: 
STEP 2: Upload an Icon as a Static Resource
Go to Setup -> Type in search ‘Static’ -> Click ‘Static Resources‘.
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.
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.
Here comes the fun part. For our custom formula field, we need to have two main things.
- It should display the contact name and if clicked on it – it should take you to a record itself. (HYPERLINK)
- 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.
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.
If you did everything right, here what you are supposed to see:
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!
