SPO List view where users cannot click the list item but only select it

Question

Is there a conditional formating / magic way to create a Tiles view of list items that can only be selected? The user shouldn't be able to click the title of the item on the tile list view. By default, each tile can be clicked and the user is entering details of the item from the list. Here is my context. I have created an index list with alphabet letters. I added the document library to the page and filtered the view with the letter which is selected on the index list. But would like to avoid a situation where the user clicks on the letter and will be moved out of the page. Users should be able only to select the letter. See the screenshot. ![189777-q1.png][1] [1]: /api/attachments/189777-q1.png?platform=QnA

Answer 1

Hi anonymous user ,
Great to know that it works now and thanks for sharing the update here.

By the way, since the Microsoft Q&A community has a policy that "The question author cannot accept their own answer. They can only accept answers by others.". and according to the scenario introduced here: Answering your own questions on Microsoft Q&A, I would make a brief summary of this thread:

[SPO List view where users cannot click the list item but only select it?]

Issue Symptom:
SPO List view where users cannot click the list item but only select it

Current status:
1.Switch the view of the gallery. Extend the menu at the list name in the upper right corner, where you can switch the view.

2.In the same menu, select "Format current view"

3.If you do not see JSON formatting, click "Advanced mode"

4.In the JSON paste the following code (the key element is to replace "action": "defaultClick" to "action": "none")

{  
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",  
"height": 42,  
"width": 70,  
"hideSelection": false,  
"fillHorizontally": true,  
"formatter": {  
"elmType": "div",  
"attributes": {  
"class": "sp-card-container"  
},  
"children": [  
{  
"elmType": "div",  
"attributes": {  
"class": "sp-card-defaultClickButton",  
"role": "presentation"  
},  
"customRowAction": {  
"action": "none"  
}  
},  
{  
"elmType": "div",  
"attributes": {  
"class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"  
},  
"children": [  
{  
"elmType": "div",  
"attributes": {  
"class": "sp-card-lastTextColumnContainer"  
},  
"children": [  
{  
"elmType": "p",  
"attributes": {  
"title": "[$Title]",  
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",  
"role": "heading",  
"aria-level": "3"  
},  
"txtContent": "=if ([$Title] == '', '–', [$Title])"  
}  
]  
}  
]  
}  
]  
}  
}  

You could click the "Accept Answer" button for this summary to close this thread, and this can make it easier for other community member's to see the useful information when reading this thread. Thanks for your understanding!

Answer 2

Hi anonymous user ,
You can try to set pointer-events: none for the div[disabled] in CSS.

div[disabled]  
{  
  pointer-events: none;  
  opacity: 0.7;  
}  

The above code makes the contents of the div disabled, You can make the div disabled by adding the disabled attribute.

<div disabled={this.state.disabled}>  
  /* Contents */  
</div>  

Upon clicking the button you can change the state variable disabled as 'true'.

handleClick = () =>{  
    this.setState({  
      disabled: true,  
    });  
  }  

You can also use Script Editor in sharepoint modern page by following web part.
https://github.com/pnp/sp-dev-fx-webparts/tree/b139ba199cb57363a88f070dd9814e5af4fc3cbd/samples/react-script-editor

---

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 3

Thank you @RaytheonXie_MSFT for the tip.
I was able to turn off the opening item action using the following steps:

1. Switch the view of the gallery. Extend the menu at the list name in the upper right corner, where you can switch the view.
2. In the same menu, select "Format current view"
3. If you do not see JSON formatting, click "Advanced mode"
4. In the JSON paste the following code (the key element is to replace "action": "defaultClick" to "action": "none")

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"height": 42,
"width": 70,
"hideSelection": false,
"fillHorizontally": true,
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-container"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-defaultClickButton",
"role": "presentation"
},
"customRowAction": {
"action": "none"
}
},
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-lastTextColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"title": "[$Title]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
"role": "heading",
"aria-level": "3"
},
"txtContent": "=if ([$Title] == '', '–', [$Title])"
}
]
}
]
}
]
}
}

Answer 4

not sure is there standard way to do that but you may try to debug javascript code on the list view, identify event which opens item details page and try to override it with custom method (assign your own method with empty body to identified method name). In this case it won't open details page when item is selected - but it is quite hard work in modern Sharepoint. May be it will be simpler to create custom SPFx web part and implemented this logic with Typescript/REST API by yourself?