Forum Discussion

johncrouse62's avatar
johncrouse62
Copper Contributor
Aug 02, 2024
Solved

SharePoint List - Select from a Choice Field and Display an Image

I am attempting to set a column in a Project Tracker List to allow three choices, Red, Amber and Green. Depending on which status the user selects, I am trying to display an image, either a red circl...
microsoft lists
SharePoint Online
  • Rob_Elliott's avatar
    Rob_Elliott
    Aug 02, 2024

    johncrouse62 In your choice column have the options as Red, Amber and Green. Upload your rag status icons to a library on your site and get the links to each one. Then format the column in advanced mode with the following JSON:

     

    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "img",
      "style": {
        "position": "relative",
        "top ": "50%",
        "left": "50%",
        "width": "24px",
        "height": "24px",
        "margin-left": "-50%",
        "margin-top": "0%"
      },
      "attributes": {
        "src": "=if(@currentField == 'Red', 'https://wsponlinegbr.sharepoint.com/:i:/r/Sites/GB-PowerPlatform/SiteAssets/RAG/ragRED.png?csf=1&web=1&e=euCxh6', if(@currentField  == 'Amber', 'https://wsponlinegbr.sharepoint.com/:i:/r/Sites/GB-PowerPlatform/SiteAssets/RAG/ragAMBER.png?csf=1&web=1&e=aTYynP','https://wsponlinegbr.sharepoint.com/:i:/r/Sites/GB-PowerPlatform/SiteAssets/RAG/ragGREEN.png?csf=1&web=1&e=9bM27G')"
      }
    }
  ]
}

     

    This is the result:

     

     

    Rob
    Los Gallardos
    Microsoft Power Automate Community Super User.
    Principal Consultant, SharePoint and Power Platform WSP Global (and classic 1967 Morris Traveller driver)

CJS81000's avatar
CJS81000
Copper Contributor
Feb 10, 2025

Thanks for the reply, Rob_Elliott. Here's my code:

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "img",
      "style": {
        "position": "relative",
        "top ": "50%",
        "left": "50%",
        "width": "24px",
        "height": "24px",
        "margin-left": "-50%",
        "margin-top": "0%"
      },
      "attributes": {
        "src": "=if(@currentField == 'Consistently Positive', 'https://MYCOMPANYNAME.sharepoint.com/:i:/r/sites/MYDEPARTMENTNAME/Shared%20Documents/_Resources/Trend%20Arrows/consistently%20positive%20trend%20(up%20arrow).png?csf=1&web=1&e=PalSfh', if(@currentField == 'Recently Positive', 'https://MYCOMPANYNAME.sharepoint.com/:i:/r/sites/MYDEPARTMENTNAME/Shared%20Documents/_Resources/Trend%20Arrows/recent%20positive%20trend%20(up-right%20arrow).png?csf=1&web=1&e=faw6kP', if(@currentField == 'Neutral','https://MYCOMPANYNAME.sharepoint.com/:i:/r/sites/MYDEPARTMENTNAME/Shared%20Documents/_Resources/Trend%20Arrows/neutral%20trend%20(right%20arrow).png?csf=1&web=1&e=YbDLiG', if(@currentField == 'Recently Negative','https://MYCOMPANYNAME.sharepoint.com/:i:/r/sites/MYDEPARTMENTNAME/Shared%20Documents/_Resources/Trend%20Arrows/recent%20negative%20trend%20(down-right%20arrow).png?csf=1&web=1&e=hk1MAM', if(@currentField == 'Consistently Negative','https://MYCOMPANYNAME.sharepoint.com/:i:/r/sites/MYDEPARTMENTNAME/Shared%20Documents/_Resources/Trend%20Arrows/consistently%20negative%20trend%20(down%20arrow).png?csf=1&web=1&e=CzakF5')))))"
      }
    }
  ]
}

 

CJS81000's avatar
CJS81000
Copper Contributor
Feb 20, 2025

Rob_Elliott, any insights you can provide would be greatly appreciated. Thanks!

Resources