question

24359662 avatar image
0 Votes"
24359662 asked 24359662 commented

Sharepoint list formatting: "hideSelection" does nothing

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?

office-sharepoint-online
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.

AllenXu-MSFT avatar image
0 Votes"
AllenXu-MSFT answered 24359662 commented

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.


image.png (17.1 KiB)
· 1
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.

Thanks for this. This is great :-)

Just one question left:
I have the code showing the correct attachment, but I can't seem to figure out how to test if there actually IS an attachment:

 {
    "elmType": "a",
    "txtContent": "",
    "attributes": {
        "href": "=@currentWeb + '/Lists/MyList/Attachments/' + [$ID] + '/truck.xlsx?web=1'",
         "iconName": "Attach"
     },
     "style": {
         "visibility": "=if(@attachment==0, 'hidden', '')",
         "text-decoration": "none",
         "color": "black",
         "float": "left",
         "width": "20px",
         "margin-left": "2px"
     }
  }

I can't get @attachment to work (found it referred on another site)

0 Votes 0 ·
24359662 avatar image
0 Votes"
24359662 answered

Seems that I have to add another section:

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


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

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.

AllenXu-MSFT avatar image
0 Votes"
AllenXu-MSFT answered

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.


image.png (10.9 KiB)
image.png (8.1 KiB)
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.

24359662 avatar image
0 Votes"
24359662 answered

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



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.