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

Background

 

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.

 

Step 2

 

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.

{
    "elmType": "div",
    "style": {
        "background-color": "=if(@currentField == 'Green', '#2ECC71', if(@currentField == 'Yellow','#F1C40F', '#E74C3C'))",
        "color": "#fff",
        "white-space": "nowrap"
    },
    "children": [{
        "elmType": "span",
        "style": {
            "font-size": "2em",
            "display": "inline-block",
            "padding": "0 8px"
        },
        "attributes": {
            "iconName": "=if(@currentField == 'Green', 'Emoji2', if(@currentField == 'Yellow','EmojiNeutral', 'EmojiDisappointed'))"
        }
    }, {
        "elmType": "span",
        "txtContent": "@currentField"
    }]
}

Step 6 

 

Click save and go back to list view, we should see below output,

 

Let us understand some points here.

• We are using @currentField  token to get value of current column instance.
• Similarly we can use [$OtherColumnName] to use value in json for any conditional formatting. For e.g. we could use [$Status] or [$Comments] in json.
• We are using UI fabric Iconography for displaying emojis, as these are by default loaded in modern experience we don't need to specifically add link/reference to load.
• There are many UI fabric icons available, you can refer  to this link for more icons.

Let us now take another example to display only emojis in Color column  but based on values of Status column. Just replace the json of column color with below. 

{
  "elmType": "div",
  "style": {
    "background-color": "=if([$Status] == 'Completed', '#2ECC71', if([$Status] == 'Inprogress','#F1C40F', '#E74C3C'))",
    "color": "#fff",
    "white-space": "nowrap"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "font-size": "2em",
        "display": "inline-block",
        "padding": "0 8px"
      },
      "attributes": {
        "iconName": "=if([$Status] == 'Completed', 'Emoji2', if([$Status] == 'Inprogress','EmojiNeutral', 'EmojiDisappointed'))"
      }
    }
  ]
}

Below is output of same, it will display smileys based on $Status column value. 

 

That's it for this article, hope you enjoyed reading...!! 

 

Happy formatting list view :)