0

I have found a way to implement a substitute for a tab control in SharePoint Online. In SharePoint On Premise I used Hillbilly Tabs, but I am not allowed to use SPFx at our tenant so I had to look for other solutions.

I use two lists, one list contains the items that used to be visible on the tabs and then I use that list to perform dynamic filtering of the other list. In the view settings for the first list I unchecked "Allow individual item checkboxes", because in a tab control you only want to select one tab at a time.

This setup works pretty well, but the user experience is of course a bit odd. So I was happy to find the "Gallery" list view. I now have the chance to line up the "tabs" horizontally. But when I switched to Gallery view, the item checkboxes showed up again (even though "Allow individual item checkboxes" was still unchecked in the view settings).

And when I click an item in the list, to filter the other list, no filtering is taking place. Instead I am redirected to another place.

This is how the auto-generated code for the gallery list looks like. Is there anything I can change in the JSON to keep the good behavior (with filtering functioning and no checkboxes) of the basic list I had?

{
  "height": 45,
  "width": 254,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "button",
        "attributes": {
          "class": "sp-card-defaultClickButton"
        },
        "customRowAction": {
          "action": "defaultClick"
        }
      },
      {
        "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"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          }
        ]
      }
    ]
  }
}
1

Try changing hideSelection to true like:

"hideSelection": true,

Note:

Specifies whether the ability to select rows in the view is disabled or not. false is the default behavior inside a list view (meaning selection is visible and enabled). true means that users will not be able to select list items.

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. For 'Tile' layout, hideSelection will only take effect if defined inside tileProps properties.

Microsoft documentation: Use view formatting to customize SharePoint - hideSelection

8
  • Changing hideSelection to true takes care of the selection problem, thanks! Do you know what to change to get back the filtering function? When I click the item it navigates inside itself, instead of filtering the other list. When I removed the "defaultClick action", nothing happens with the other list when I click an item.
    – Gunilla
    Jan 11 at 10:40
  • Did you use connected list web parts (I guess so)? I am not sure how you implemented filtering on other list. Jan 11 at 10:50
  • I set up the other list to use "dynamic filtering" by items in first list. The dynamic filtering is working if I do not format the first list. I believe it is the "defaultClick action" I got when adding the formatting that is causing the problem, but I not know how to change it to get the filtering function back.
    – Gunilla
    Jan 11 at 13:54
  • If you want dynamic filtering on another list and want to use gallery view on the "filter list", you need to keep ``` "hideSelection": false,``` in the JSON, but you need to remove "customRowAction": { "action": "defaultClick" } from the JSON.
    – Gunilla
    Nov 26 at 11:16
  • But it would be really great if the defaultClick could mean the same thing as a selection does...
    – Gunilla
    Nov 26 at 11:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.