Forum Discussion

johncrouse62's avatar
johncrouse62
Copper Contributor
Aug 02, 2024

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 circle (image1.jpg), an amber circle (image2.jpg) or a green circle (image3.jpg). I am not certain how to have a Choice column return an image.

 

Thanks,

John

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)

  • Rob_Elliott's avatar
    Rob_Elliott
    Bronze Contributor
    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)

Resources