Can we render element based on the current field value in Column Formatting?

Question

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"
      }
    }
  ]
}

Answer 1

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