SharePoint - Display Smiley Faces On List View Based On Field Value

We used to do list view formatting using js link to customze how columns values are rendered in out of the box view. The process was a little lengthy and complex to understand. Now with SharePoint online, we have column formatting capability on list view using json schema. We can customize how fields in list and libraries are displayed. An important thing to note here it that with this, data in the list does not change, it only changes how the field is displayed. User with permission who can create and modify views of list can apply column formatting.

For this article, we will target to see how we can display smiley faces in list column view based on value of column. Let us see step by step how to apply formatting. For our example consider the below scenario. I had also contributed same sample in Offical SharePoint git hub repo at this link.

You have a choice of column Color which has 3 possible values, Green, Yellow and Red. We need to customize list view and this column such that,

• if color value is green, show happy face smiley and background as green color -
• if color value is yellow, show neutral face smiley - (not exactly this)
• if color value is red, show unhappy smiley -

Step 1

Create a list and create a new column, with choice of field values as Green, Yellow and Red.

Add some dummy data to list with Color column value as green, yellow and red for some random entries.

Below is how data would look

Step 3

Go to list settings, edit the target column which is color in our case.

Step 4

Find column formatting json option in edit column screen (like below)

Note
Alternatively, you can also use list view column header arrow button to select column formatting.

This will open below window on the right side.

Step 5

Add below json in box.