Add conditional images in a column (SharePoint Online list)

Question

Hi all,

I have a SharePoint Online list containing some columns formatted as Single Line Text, Person, Date/Time, Choice list, Yes/No etc.

I have a specific column that is formatted as "Yes/No".
I want to add another column which will present an image (like a signal) depending on the choice of the previous column (Yes/No). Basically, it will be conditioned as "if previous column value is Yes, display Red signal" and "if previous column value is No, display Green signal".

I can't find any option how to insert that kind of column that will be conditioned depending on the selection of previous (Yes/No) column.

Kind regards and thanks a lot for all the assistance!
Marko

Answer 1

Hi @Marko Todorovic ,

I achieved a conditional picture using JSON formatting, take a reference to the below code.

{  
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",  
  "elmType": "img",  
  "style": {  
    "width": "100px"  
  },  
  "attributes": {  
    "src": "=if([$Selection] == true, 'https://xxx.sharepoint.com/sites/TeamTest/SiteAssets/False.png', 'https://xxx.sharepoint.com/sites/TeamTest/SiteAssets/True.png')"  
  }  
}  

Notes:

• You have to upload your images to Site Assets library(or somewhere else on your site) and replace the image URL with your own.
• "test" is a Hyperlink or Picture column on my end. Not a image column.
• Replace [$Selection] with your own Yes/No column internal name in the code.

Please let me know if you have any doubt.

---

If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hi Allen,

Sorry for the late response, I was busy with some prioritized work.

I've tried the steps that you mentioned and I can see the images but, how do I condition them depending on the selection of the main column?

Example, the main column has both Yes and No selected and in the Test column, I only get one of the images.

Column name is (or I hope it is) - Ongoing Escalation ([$Ongoingescalation])

Here is the JSON format I've put in the new column called "Test"

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "img",
"style": {
"width": "50px"
},
"attributes": {
"src": "=if([$Ongoingescalation] == true, 'https://XXX.sharepoint.com/sites/XXX/SiteAssets/GreenIconSmall.png', 'https://XXX.sharepoint.com/sites/XXX/SiteAssets/RedIconSmall.png')"
}
}

As a result, no matter if the column "Ongoing escalation" is displaying Yes or No, I have all the red lights (RedIconSmall.png) in the "Test" column.

Here is how it looks in the picture.

Answer 3