Conditional 'display' property failing in Grid layout

Question

I am applying a JSON column formatter to a "Status" field to conditionally hide a "Follow-up" button based on a Date column. The logic works perfectly in the List view, but as soon as the user switches to Gallery (Grid) view, the display property is ignored

My json:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Follow-up",
  "style": {"visibility": "=if([$DueDate] < @now, 'visible', 'hidden')",  "border": "none",  "background-color": "#0078d4",  "color": "white",  "cursor": "pointer"
  }
}

Answer 1

Hi Mote Jeffery

Thank you for reaching out to Microsoft Q&A forum

As states in Gallery layout customizations, gallery (card/grid) layout is rendered by the view formatter (tile-formatting), not by the per-column cell renderer, so a column-formatting rule like style.visibility (or style.display) can be ignored once the same field is being drawn inside a Gallery card.

Given this, to resolve this behavior, you have 2 options below:

Option 1: Move the hide/show logic into Gallery view formatting (tile-formatting)

1. Switch to your Gallery view.
2. Select View options → Format current view → Advanced mode.
3. Use tile-formatting JSON and conditionally set display to none when you want it hidden

For example:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 110,
  "width": 220,
  "hideSelection": true,
  "formatter": {
    "elmType": "div",
    "style": { "padding": "8px" },
    "children": [
      {
        "elmType": "button",
        "txtContent": "Follow-up",
        "style": {
          "display": "=if([$DueDate] < @now, 'inline-block', 'none')",
          "border": "none",
          "background-color": "#0078d4",
          "color": "white",
          "cursor": "pointer",
          "padding": "6px 10px",
          "border-radius": "2px"
        }
      }
    ]
  }
}

Option 2: Reuse your existing column-formatted button inside Gallery using columnFormatterReference

If you want to keep your current column formatting (so List view keeps working), then in Gallery view formatting you can “embed” that formatted column by referencing it with columnFormatterReference.

1. The wrapper div decides whether the element is shown.
2. columnFormatterReference injects whatever your Status column formatter renders (your button).

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 110,
  "width": 220,
  "formatter": {
    "elmType": "div",
    "style": { "padding": "8px" },
    "children": [
      {
        "elmType": "div",
        "style": { "display": "=if([$DueDate] < @now, '', 'none')" },
        "children": [
          { "columnFormatterReference": "[$Status]" }
        ]
      }
    ]
  }
}

Hope my answer will help you.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".   

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

The issue you are experiencing with the conditional display property in the Gallery (Grid) view is likely due to the differences in how column formatting is applied across different views in SharePoint. In the List view, your JSON formatting is correctly interpreting the visibility condition based on the DueDate. However, in the Gallery view, the rendering engine may not support the same conditional logic for button visibility as it does in the List view.

To troubleshoot this, consider the following:

1. Check Compatibility: Ensure that the JSON formatting you are using is compatible with the Gallery view. Some properties may not behave the same way in different views.
2. Use Alternative Properties: Instead of using visibility, you might want to explore using other properties or methods to control the display of the button, such as changing the display property instead, if supported.
3. Testing: Test the button in different scenarios within the Gallery view to see if any other conditions or properties might be affecting its visibility.

Unfortunately, if the Gallery view does not support the conditional logic you are trying to implement, you may need to adjust your approach or accept that certain functionalities may be limited in that view.