Sharepoint list formatting: "hideSelection" does nothing

Lars Bo Wassini 156 Reputation points
2021-05-07T07:18:13.023+00:00

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?

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
9,144 questions
0 comments No comments
{count} votes

Accepted answer
  1. Allen Xu_MSFT 13,756 Reputation points
    2021-05-12T07:11:53.47+00:00

    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:
    95878-image.png
    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.


3 additional answers

Sort by: Most helpful
  1. Lars Bo Wassini 156 Reputation points
    2021-05-07T11:03:13.777+00:00

    Seems that I have to add another section:

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

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

    0 comments No comments

  2. Allen Xu_MSFT 13,756 Reputation points
    2021-05-10T06:26:34.873+00:00

    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,
    95016-image.png

    {  
      "$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.
    95172-image.png


    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.

    0 comments No comments

  3. Lars Bo Wassini 156 Reputation points
    2021-05-11T12:19:37.963+00:00

    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)
    95612-2021-05-11-14-11-48.png

    And what I need is this:

    95602-2021-05-11-14-13-37.png

    0 comments No comments