JSON Tile view selection

Question

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 added to the Format View section is below:

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "tileProps": {
    "hideSelection": false,
    "hideListHeader": true,
    "width": "379",
    "height": "273",
    "formatter": {
      "elmType": "div",
      "style": {
        "float": "left",
        "display": "flex",
        "flex-wrap": "wrap",
        "flex-direction": "column",
        "align-items": "center",
        "justify-content": "space-around",
        "min-width": "379px",
        "min-height": "273px",
        "border-radius": "8px",
        "margin-right": "10px",
        "margin-bottom": "10px"
      },
      "attributes": {
        "class": "ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover"
      },
      "children": [
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "img",
              "style": {
                "display": "block",
                "height": "auto",
                "max-height": "273px",
                "max-width": "379px"
              },
              "attributes": {
                "src": "[$imagePath]"
              }
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "text-align": "center"
          },
          "children": [
            {
              "elmType": "span",
              "attributes": {
                "class": "ms-fontSize-xl ms-fontColor-themePrimary"
              },
              "style": {
                "border": "0",
                "padding": "0",
                "margin-bottom": "0.5em",
                "background-color": "transparent",
                "cursor": "pointer",
                "line-height": "1.5em",
                "overflow": "hidden",
                "text-align": "left"
              },
              "txtContent": "[$LearningType]"
            },
            {
              "elmType": "span",
              "txtContent": "\n"
            },
            {
              "elmType": "div",
              "attributes": {
                "class": "ms-fontSize-m"
              },
              "style": {
                "max-width": "379px"
              },
              "txtContent": "[$Description]"
            }
          ]
        }
      ]
    }
  }
}

Answer 1

On this issue, I was not able to use JSON to achieve my desired results, where a click anywhere on the tile would select the tile. I had to think outside of the SharePoint box, and ended up using two Power Apps to create the solution needed on my SharePoint site.

The first Power App read from the list that contained the Title, Description and ImagePath (the same list I was attempting to modify above with JSON.) The gallery view in the Power App displayed the tiles and the whole tile was selectable and passed a query string parameter in the URL.

The second Power App on each of these pages displayed a gallery view connected to a different SharePoint list. This gallery view was filtered based on the parameter in the query string.

Answer 2

Hi @idea01,

I did a test on my end and got the same result as yours. Looks like it's by design that the entire tile would open the list item properties panel when set "hideSelection" : false,.

Per my research, the ability to select items is only controlled by the element hideSelection. And the possible value is only true or false. So I don't think this can be achieved through json code.

As a workaround, I would suggest you right-click the tile to slectet the item instead of left-click.

---

If an Answer is helpful, please click "Accept Answer" and upvote it.
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.