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])"
}
]
}
]
}
]
}
}