Hello All,
I'm new to JSON format view and attempting to create tabs inside of a Document Library. I started with tabs located here: https://github.com/pnp/List-Formatting/tree/master/view-samples/tabs. However, this approach creates tabs for each item, I need the tabs for the entire library which lists my categories (choice 1-3). I'm not entirely sure of the limitation of JSON formatting but it looks like it can be done. I'm just stuck. Here's the look I'm going for (jquery tabs) but with items below it. Tabs are the library categories:
Limitations: I cannot use SPFx packages, and I need to save Power Apps as my last resort.
Below is a screenshot of what I currently have for my document library. I've grouped my choice in the view. I also have my JSON code below. Any help or guidance would be greatly appreciated.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"height": 277,
"width": 254,
"hideSelection": false,
"groupProps": {
"headerFormatter": {
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"flex-wrap": "wrap",
"display": "flex",
"box-sizing": "border-box",
"padding": "4px 8px 5px 8px",
"border-radius": "6px",
"align-items": "center",
"white-space": "nowrap",
"margin": "1px 4px 4px 1px"
},
"attributes": {
"class": "sp-css-backgroundColor-blueBackground37"
},
"children": [
{
"elmType": "img",
"attributes": {},
"style": {
"max-width": "24px",
"max-height": "24px",
"margin-top": "2px",
"border-radius": "2px"
}
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"padding": "5px 5px 5px 5px",
"font-weight": "500"
},
"txtContent": {
"operator": "+",
"operands": [
"",
"@group.fieldData.displayValue"
]
}
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"justify-content": "center"
},
"children": [
{
"elmType": "div",
"txtContent": "='has ' + @group.count + if(@group.count > '1', ' Documents', ' Document')",
"style": {
"font-weight": "500"
}
}
]
}
]
}
]
}
]
}
}
}