4

I am working with Column Formatting in Modern SharePoint Online List where I need to render different images based on the choice selected but by default need to show the text of default choice.

I have implemented the rendering of images based on choice value but I did not find any way to render span instead of Image for the default choice.

Is it possible to achieve?

Below is my JSON for the same. I want to just display the text if the @currentField == BAU

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "background-color": "=if(@currentField == 'Design','#CACFD2', if(@currentField == 'Active-Minimal','#CAF0CC',if(@currentField == 'Active-Moderate','#CAF0CC',if(@currentField == 'Active-Significant','#CAF0CC',if(@currentField == 'Sustain-Minimal','#F4D03F',if(@currentField == 'Sustain-Moderate','#F4D03F',if(@currentField == 'Sustain-Significant', '#F4D03F',if(@currentField == 'Handoff-Minimal','#797D7F',if(@currentField == 'Handoff-Moderate','#797D7F',if(@currentField == 'Handoff-Significant','#797D7F',if(@currentField == 'BAU','Transparent','#F2F3F4')))))))))))",
    "text-align": "center"
  },
  "children": [
    {
      "elmType": "img",
      "style": {
        "width": "16px",
        "height": "16px",
        "overflow": "hidden",
        "border-radius": "50%",
        "margin": "0 auto"
      },
      "attributes": {
        "src": "=if(@currentField == 'Design','https://contoso.sharepoint.com/Shared%20Documents/WhiteStatus.png', if(@currentField == 'Active-Minimal','https://contoso.sharepoint.com/Shared%20Documents/GreenStatus.png',if(@currentField == 'Active-Moderate','https://contoso.sharepoint.com/Shared%20Documents/YellowStatus.png',if(@currentField == 'Active-Significant','https://contoso.sharepoint.com/Shared%20Documents/RedStatus.png',if(@currentField == 'Sustain-Minimal','https://contoso.sharepoint.com/Shared%20Documents/GreenStatus.png',if(@currentField == 'Sustain-Moderate','https://contoso.sharepoint.com/Shared%20Documents/YellowStatus.png',if(@currentField == 'Sustain-Significant', 'https://contoso.sharepoint.com/Shared%20Documents/RedStatus.png',if(@currentField == 'Handoff-Minimal','https://contoso.sharepoint.com/Shared%20Documents/GreenStatus.png',if(@currentField == 'Handoff-Moderate','https://contoso.sharepoint.com/Shared%20Documents/YellowStatus.png',if(@currentField == 'Handoff-Significant','https://contoso.sharepoint.com/Shared%20Documents/RedStatus.png','https://contoso.sharepoint.com/Shared%20Documents/WhiteStatus.png'))))))))))",
        "alt": "@currentField"
      }
    }
  ]
}

1 Answer 1

4

Try using below JSON:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "background-color": "=if(@currentField == 'Design','#CACFD2', if(@currentField == 'Active-Minimal','#CAF0CC',if(@currentField == 'Active-Moderate','#CAF0CC',if(@currentField == 'Active-Significant','#CAF0CC',if(@currentField == 'Sustain-Minimal','#F4D03F',if(@currentField == 'Sustain-Moderate','#F4D03F',if(@currentField == 'Sustain-Significant', '#F4D03F',if(@currentField == 'Handoff-Minimal','#797D7F',if(@currentField == 'Handoff-Moderate','#797D7F',if(@currentField == 'Handoff-Significant','#797D7F',if(@currentField == 'BAU','Transparent','#F2F3F4')))))))))))",
    "text-align": "center"
  },
  "children": [
    {
      "elmType": "img",
      "style": {
        "width": "16px",
        "height": "16px",
        "overflow": "hidden",
        "border-radius": "50%",
        "margin": "0 auto",
        "display": "=if(@currentField == 'BAU', 'none', 'block')"
      },
      "attributes": {
        "src": "=if(@currentField == 'Design','https://contoso.sharepoint.com/Shared%20Documents/WhiteStatus.png', if(@currentField == 'Active-Minimal','https://contoso.sharepoint.com/Shared%20Documents/GreenStatus.png',if(@currentField == 'Active-Moderate','https://contoso.sharepoint.com/Shared%20Documents/YellowStatus.png',if(@currentField == 'Active-Significant','https://contoso.sharepoint.com/Shared%20Documents/RedStatus.png',if(@currentField == 'Sustain-Minimal','https://contoso.sharepoint.com/Shared%20Documents/GreenStatus.png',if(@currentField == 'Sustain-Moderate','https://contoso.sharepoint.com/Shared%20Documents/YellowStatus.png',if(@currentField == 'Sustain-Significant', 'https://contoso.sharepoint.com/Shared%20Documents/RedStatus.png',if(@currentField == 'Handoff-Minimal','https://contoso.sharepoint.com/Shared%20Documents/GreenStatus.png',if(@currentField == 'Handoff-Moderate','https://contoso.sharepoint.com/Shared%20Documents/YellowStatus.png',if(@currentField == 'Handoff-Significant','https://contoso.sharepoint.com/Shared%20Documents/RedStatus.png','https://contoso.sharepoint.com/Shared%20Documents/WhiteStatus.png'))))))))))",
        "alt": "@currentField"
      }
    },
    {
      "elmType": "span",
      "style": {
        "color": "black",
        "display": "=if(@currentField == 'BAU', 'block', 'none')"
      },
      "txtContent": "@currentField"
    }
  ]
}

Here, I have created two separate elements to show image (img) & text (span) & showing/hiding it based on the required condition (@currentField == 'BAU') using display attribute.

Documentation: Use column formatting to customize SharePoint

2
  • 1
    I love this thread! So cool to see quick Q&A on a simple JSON change that can make a big impact on the experience.
    – Tom Resing
    Aug 26, 2021 at 14:58
  • 1
    Thank you Tom for the kind words! Aug 26, 2021 at 17:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.