Forum Discussion

idea01's avatar
idea01
Copper Contributor
Sep 08, 2020

JSON Tile view selection

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.

JSON formatting

1 Reply

  • mduCantoo's avatar
    mduCantoo
    Brass Contributor
    Apr 06, 2022

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