question

MarkoTodorovic-7973 avatar image
0 Votes"
MarkoTodorovic-7973 asked AllenXu-MSFT commented

Add conditional images in a column (SharePoint Online list)

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

office-sharepoint-online
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

AllenXu-MSFT avatar image
1 Vote"
AllenXu-MSFT answered AllenXu-MSFT commented

Hi @MarkoTodorovic-7973,

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.


image.png (19.2 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@MarkoTodorovic-7973

Is there any update on this thread? I;m looking forward to your reply.
If an answer is helpful to you, please accept it as answer.

0 Votes 0 ·
MarkoTodorovic-7973 avatar image
0 Votes"
MarkoTodorovic-7973 answered MarkoTodorovic-7973 commented

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.

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

MarkoTodorovic-7973 avatar image
0 Votes"
MarkoTodorovic-7973 answered AllenXu-MSFT commented

95601-testsemafor3.png



testsemafor3.png (52.7 KiB)
· 6
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@MarkoTodorovic-7973 ,

Thanks for your response.

I want to confirm with you that what is the column type of "Ongoing Escalation"? Is it a Yes/No column or a choice column? I did the above test based on a Yes/No column.
If it is a Yes/No column, try to recreate a test list and test the JSON code to see if it works. I tested again on my end(also recreated a new list and use the same column name as yours) and it still worked normally.

95895-1.png


0 Votes 0 ·
1.png (65.6 KiB)

Hi @AllenXu-MSFT

Yeah, it works now finally :) Much appreciated!

I got an additional question. Is there a possibility to do the same JSON formatting on the existing column if it is a Choice type (with two Choices, Yes and No, radio buttons) instead of Yes/No type?
Also, how do I set the position of the img in JSON to be at the center of the column? Images are all placed in the upper left corner of the field and since there will be items with different row heights, it would be "prettier" for displaying it in the center of every row's cell (or field).

In any case, I will mark your answer as correct and upvote it for this topic!

Many many thanks!
Marko

0 Votes 0 ·

@MarkoTodorovic-7973

If it is a choice column:

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

Here is a detailed article on how to format column using JSON.
Use column formatting to customize SharePoint

0 Votes 0 ·
Show more comments

@MarkoTodorovic-7973

I'm afraid it is not feasible. As the containers do not have a fixed size but we have to define div as a fixed size. So we can only set the image to a fixed position in the div like using below JSON code but we cannot assure that it is still a fixed position in the container(cell).

 {
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "div",
   "children": [
     {
       "elmType": "div",
       "style": {
         "width": "32px",
         "height": "32px",
         "overflow": "hidden",
         "border-radius": "50%"
       },
       "children": [
         {
           "elmType": "img",
           "attributes": {
             "src": "=if([$ChoiceTest] == 'Yes', 'https://xxx.sharepoint.com/sites/TeamTest/SiteAssets/True.png', 'https://xxx.sharepoint.com/sites/TeamTest/SiteAssets/False.jpg')"
           },
           "style": {
             "position": "relative",
             "top": "50%",
             "left": "50%",
             "width": "100%",
             "height": "auto",
             "margin-left": "-50%",
             "margin-top": "-50%"
           }
         }
       ]
     }
   ]
 }
0 Votes 0 ·

Hey Allen, well this is perfect. Working like a charm. I've tried it and it looks as I wanted. Thanks a lot for your effort and all the help. With your help, I was able to see a bit more of JSON formatting and to actually understand it :)
Thanks a million!

Best of luck!

0 Votes 0 ·