Sharepoint list formatting: "hideSelection" does nothing

Question

Very very simple formatting is not working: I just want to remove the "selection" box for every entry in a Sharepoint list:

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideSelection": true
}

Why is this not working?

Answer 1

Hi @Wassini ,

Thanks for your instant response and valuable prompt to this thread!

Please take a reference to below JSON code.

{  
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",  
  "hideColumnHeader": true,  
  "hideSelection": true,  
  "rowFormatter": {  
    "elmType": "div",  
    "style": {  
      "display": "flex",  
      "flex-direction": "column",  
      "align-items": "flex-start"  
    },  
    "children": [  
      {  
        "elmType": "div",  
        "attributes": {  
          "class": "ms-fontColor-black"  
        },  
        "style": {  
          "display": "=if(@rowIndex == 0, 'flex', 'none')",  
          "font-weight": "bold",  
          "font-size": "18px",  
          "width": "100%",  
          "padding": "4px"  
        },  
        "children": [  
          {  
            "elmType": "div",  
            "txtContent": "Title",  
            "style": {  
              "width": "80px"  
            }  
          },  
          {  
            "elmType": "div",  
            "txtContent": "Departure",  
            "style": {  
              "width": "100px"  
            }  
          },  
		  {  
            "elmType": "div",  
            "txtContent": "Arrival",  
            "style": {  
              "width": "100px"  
            }  
          }  
        ]  
      },  
      {  
        "elmType": "div",  
        "attributes": {  
          "class": "sp-row-listpadding"  
        },  
    "children": [  
      {  
        "elmType": "div",  
        "style": {  
          "text-align": "left"  
        },  
        "children": [  
          {  
            "elmType": "div",  
            "style": {  
              "float": "left",  
              "width": "80px",  
              "font-size": "1.2em",  
              "margin-left": "2px"  
            },  
            "attributes": {  
              "class": "sp-row-title"  
            },  
            "txtContent": "[$Title]"  
          },  
          {  
            "elmType": "div",  
            "style": {  
              "float": "left",  
              "width": "100px",  
              "font-size": "1.2em",  
              "margin-left": "2px"  
            },  
            "attributes": {  
              "class": "sp-row-listPadding"  
            },  
            "txtContent": "[$Departure]"  
          },  
          {  
            "elmType": "div",  
            "style": {  
              "width": "100px",  
              "float": "left",  
              "font-size": "1.2em",  
              "margin-left": "2px"  
            },  
            "attributes": {  
              "class": "sp-row-listPadding"  
            },  
            "txtContent": "[$Arrival]"  
          }  
         ]  
        }  
       ]        
      }  
    ]  
  }  
}  

Test result screenshoot:

You can modify my code based on your other needs and columns in your list.

----------

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.

Answer 2

Seems that I have to add another section:

"hideSelection": true,
"rowFormatter": {
...
}

...but then the fields are no longer shown in columns :-(

Answer 3

Hi @Wassini ,

For list & compact list layout, hideSelection only takes effect when there's a rowFormatter element specified. If no rowFormatter is specified, then hideSelection is ignored. You can use rowFormatter to define a totally custom layout of field values inside a row using the same syntax used in Column Formatting.

Here is a sample JSON code to create a bounding <div /> box for every list row using rowFormatter. Inside this bounding box, the $Title and $Test fields are displayed on separate lines. And the users cannot select the items in the view via setting hideSelection to true,

{  
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",  
  "hideSelection": true,  
  "hideColumnHeader": true,  
  "rowFormatter": {  
    "elmType": "div",  
    "attributes": {  
      "class": "sp-row-card"  
    },  
    "children": [  
      {  
        "elmType": "div",  
        "style": {  
          "text-align": "left"  
        },  
        "children": [  
          {  
            "elmType": "div",  
            "attributes": {  
              "class": "sp-row-title"  
            },  
            "txtContent": "[$Title]"  
          },  
          {  
            "elmType": "div",  
            "attributes": {  
              "class": "sp-row-listPadding"  
            },  
            "txtContent": "[$Test]"  
          }     
        ]  
      }  
    ]  
  }  
}  

By the way, to your requirement, I think the easiest way is to edit the OOB Tabular View setting. Go to Edit View page -> Scroll down to Tabular View section -> uncheck "Allow individual item checkboxes" -> Click "OK" to save.

---

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.

Answer 4

What I really want is to show a list that is very very compact. Using the standard list gives me this (with a scroll bar)

And what I need is this: