JSON Tile view selection

Copper Contributor

Good Morning all, I have a JSON problem that is bugging me. I have a simple list with Title, Description and ImagePath. I have the Tile formatted the way I want, Image at the top, followed by Title and Description. In the Tile, I have "hideSelection": false, because I would like the users to be able to click anywhere (Image, Title or description) to simply select the item. but when I set "hideSelection" : false, a radio button is made available in the upper right of the tile. The entire tile is clickable and opens the list item properties. Only if the user checks that tiny radio button is the item selected. Again, I would like the users to be able to click anywhere (Image, Title or description) to simply select the item.

 

The purpose for having a tile view where the whole title is selected, is so that I can add two connected list web parts to a page, and the first one (the one I want to be selectable) will then pass the title to the second as a filter.

1 Reply

@idea01 

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 53,
  "width": 254,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-Tile-check",
          "data-selection-toggle": "true"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-Check ms-bgColor-themeLight sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "style": {
                  "text-align": "center"
                },
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          }
        ]
      }
    ]
  }
}