question

JeffPatrick avatar image
0 Votes"
JeffPatrick asked JeffPatrick answered

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


office-sharepoint-online
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @idea01,

Could you please share the json code you use?

0 Votes 0 ·

Added JSON to the original post. thank you for looking!

0 Votes 0 ·

Hi @idea01,

Is there anything update on this issue? If my reply helps you, you could mark it as accepted answer.

0 Votes 0 ·
JeffPatrick avatar image
0 Votes"
JeffPatrick answered

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.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

MichaelHan-MSFT avatar image
0 Votes"
MichaelHan-MSFT answered MichaelHan-MSFT edited

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.


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.