Format View: Create Tabs Using JSON list Format View
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" } } ] } ] } ] } ] } } }
You get Tabs and you get Tabs! Everybody get Tabs!!
While I appreciate that "Users can move Vertical Tabs to the right side of the screen" is planned in recent post here Re: Top Feedback Summary for December - Microsoft Tech Community I think that Edge Team can go a step further and allow for tabs to be available on all four sides of the window. This is very useful for power user, or even one who want to separate some tabs into individual zone/segment. Eg. right tabs for social media and emails, left tabs for work related, top tabs for casual/once-off page browsing, maybe bottom for banks, financials, etc. I think this makes sense nowadays in the era of ultrawide and big screen monitor. Bringing the idea further or sideways, since multi-monitor setup is very common now, maybe the ability to have multi-window browser with each saved tabs would be good too. So say, having one window with many tabs relating to work on left side of an ultrawide monitor, and another group of tabs on another window on the right side of the ultrawide, then another window on second monitor with another group of tabs and these states and tabs are saved persistently so that restart or closing the browser would not be a problem and still start the next day with the same setup, now that would be a banger. Hopefully these two ideas are considered and implemented.
