Add conditional images in a column (SharePoint Online list)

asked 2021-04-29T13:56:14.787+00:00
Marko Todorovic 61 Reputation points

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

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
5,971 questions
No comments
{count} votes

Accepted answer
  1. answered 2021-04-30T06:18:40.167+00:00
    Allen Xu_MSFT 13,506 Reputation points

    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')"  
      }  
    }  
    

    92862-image.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.


2 additional answers

Sort by: Most helpful
  1. answered 2021-05-11T09:57:15.203+00:00
    Marko Todorovic 61 Reputation points

    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.


  2. answered 2021-05-11T09:57:57.557+00:00
    Marko Todorovic 61 Reputation points

    95601-testsemafor3.png