Json Gallery conditional formatting not working

Question

I have a list with layout set to Gallery. The list has Title, URL and recently added a Display field. Currently clickable tiles are displayed and I now want these tiles to turn grey (disabled) when the list item column 'Display' is set to 1. (Prefer to use a boolean, but this didnt work either) The tiles part work and so does hovering over. However I cannot manage to disable. Here is the code before I tried adding the disable condition:

  {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "hideSelection": true,
  "width": "120",
  "height": "100",
  "formatter": {
    "elmType": "a",
    "attributes": {
      "href": "[$URL]",
      "target": "=if([$NewTab] == true, '_blank', '')"
    },
    "style": {
      "text-decoration": "none"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover ms-fontColor-gray150"
        },
        "style": {
          "display": "flex",
          "flex-wrap": "wrap",
          "min-width": "120px",
          "min-height": "100px",
          "margin-right": "10px",
          "margin-top": "10px",
          "box-shadow": "2px 2px 4px darkgrey"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "text-align": "center",
              "margin": "auto"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-row-title "
                },
                "style": {
                  "font-size": "12px"
                },
                "txtContent": "[$Title]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "iconName": "[$Icon]",
                  "class": "ms-fontSize-su"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

I tried changing the class attibutes to :

"attributes": {
  "class": "=if([$Display] == '1', 'ms-bgColor-themeLighterAlt', '')"
},

But the styling disapears and conditional statement dooes not work. Any thoughts on the issue please?

Answer 1

I'm not sure where you were setting the class, but if it was the a element then it was being covered by the children. Specifically, the first child div was setting it's own background color.

Changing your format to put your conditional in that first child div:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "hideSelection": true,
  "width": "120",
  "height": "100",
  "formatter": {
    "elmType": "a",
    "attributes": {
      "href": "=if([$Display],[$URL],'')",
      "target": "=if([$NewTab] == true, '_blank', '')"
    },
    "style": {
      "text-decoration": "none",
      "cursor": "=if([$Display],'pointer','default')"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "=if([$Display],'ms-bgColor-themePrimary--hover ms-fontColor-white--hover ms-fontColor-gray150', 'ms-fontColor-neutralTertiary') + ' ms-bgColor-themeLighterAlt'"
        },
        "style": {
          "display": "flex",
          "flex-wrap": "wrap",
          "min-width": "120px",
          "min-height": "100px",
          "margin-right": "10px",
          "margin-top": "10px",
          "box-shadow": "2px 2px 4px darkgrey"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "text-align": "center",
              "margin": "auto"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-row-title "
                },
                "style": {
                  "font-size": "12px"
                },
                "txtContent": "[$Title]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "iconName": "[$Icon]",
                  "class": "ms-fontSize-su"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

The key portion being the expression used in the class property:

        "attributes": {
          "class": "=if([$Display],'ms-bgColor-themePrimary--hover ms-fontColor-white--hover ms-fontColor-gray150', 'ms-fontColor-neutralTertiary') + ' ms-bgColor-themeLighterAlt'"
        },

In the above, we are checking a Yes/No field with an internal name of Display. When it is true, we are setting the hover styles. When Display is false, we set it to use a different font color.

But, the link isn't actually disabled. So to keep it as close to your original format as possible we can add an expression to the href attribute:

      "href": "=if([$Display],[$URL],'')",

Unfortunately, hovering over disabled tiles will show a destination of javascript:void(0); which isn't a problem but it will still cause the item to have a pointer and seem clickable. So we need to set a conditional cursor style as well:

      "cursor": "=if([$Display],'pointer','default')"

This format looks something like this:

---

Typically, when I start seeing I'm having to use the same condition over and over again in multiple properties I like to refactor my formats so that I can have optional elements. In this case, I would make the a element optional. To do that you would need to make it a child of the div and use absolute positioning to cover the primary element with the a element. Then you can configure the a element without any conditions except for the style:display where you can set that to none when you'd like to remove it. This is absolutely not necessary in this case but it would likely make it easier to maintain.