SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Tabs

This sample creates tabs with associated content. Users can then navigate between tabs. This sample is intended to display content within a SharePoint page (using the lists webpart) to provide a more interactive and user friendly approach.

Get this format View on GitHub

Shared by André Lage
Updated Feb 17, 2022

Tabs formatting preview
Sample preview · View original animation

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06)",
      "width": "610px",
      "margin-bottom": "20px"
    },
    "children": [
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "flex"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "padding": "10px 20px",
                  "border": "=if([$Position] == 1, '','1px solid #eee')",
                  "background-color": "=if([$Position] == 1, '','#f5f7fa')",
                  "cursor": "pointer"
                },
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "Position": "1"
                  }
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "font-size": "80px",
                      "height": "=if(indexOf([$Tab1Icon],'http') > -1,'','80px')"
                    },
                    "attributes": {
                      "iconName": "[$Tab1Icon]"
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "10px"
                    },
                    "attributes": {
                      "class": "ms-fontSize-18 ms-fontWeight-bold"
                    },
                    "txtContent": "[$TabHead1]"
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "padding": "10px 20px",
                  "border": "=if([$Position] == 2, '','1px solid #eee')",
                  "background-color": "=if([$Position] == 2, '','#f5f7fa')",
                  "cursor": "pointer"
                },
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "Position": "2"
                  }
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "font-size": "80px",
                      "height": "=if(indexOf([$Tab2Icon],'http') > -1,'','80px')"
                    },
                    "attributes": {
                      "iconName": "=if(indexOf([$Tab2Icon],'http') > -1,'',[$Tab2Icon])"
                    }
                  },
                  {
                    "elmType": "img",
                    "style": {
                      "width": "80px"
                    },
                    "attributes": {
                      "src": "=if(indexOf([$Tab2Icon],'http') > -1,[$Tab2Icon],'')"
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "10px"
                    },
                    "attributes": {
                      "class": "ms-fontSize-18 ms-fontWeight-bold"
                    },
                    "txtContent": "[$TabHead2]"
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "padding": "10px 20px",
                  "border": "=if([$Position] == 3, '','1px solid #eee')",
                  "background-color": "=if([$Position] == 3, '','#f5f7fa')",
                  "cursor": "pointer"
                },
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "Position": "3"
                  }
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "font-size": "80px",
                      "height": "=if(indexOf([$Tab3Icon],'http') > -1,'','80px')"
                    },
                    "attributes": {
                      "iconName": "=if(indexOf([$Tab3Icon],'http') > -1,'',[$Tab3Icon])"
                    }
                  },
                  {
                    "elmType": "img",
                    "style": {
                      "width": "80px"
                    },
                    "attributes": {
                      "src": "=if(indexOf([$Tab3Icon],'http') > -1,[$Tab3Icon],'')"
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "10px"
                    },
                    "attributes": {
                      "class": "ms-fontSize-18 ms-fontWeight-bold"
                    },
                    "txtContent": "[$TabHead3]"
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "padding": "10px 20px",
                  "border": "=if([$Position] == 4, '','1px solid #eee')",
                  "background-color": "=if([$Position] == 4, '','#f5f7fa')",
                  "cursor": "pointer"
                },
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "Position": "4"
                  }
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "font-size": "80px",
                      "height": "=if(indexOf([$Tab4Icon],'http') > -1,'','80px')"
                    },
                    "attributes": {
                      "iconName": "=if(indexOf([$Tab4Icon],'http') > -1,'',[$Tab4Icon])"
                    }
                  },
                  {
                    "elmType": "img",
                    "style": {
                      "width": "80px"
                    },
                    "attributes": {
                      "src": "=if(indexOf([$Tab4Icon],'http') > -1,[$Tab4Icon],'')"
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "10px"
                    },
                    "attributes": {
                      "class": "ms-fontSize-18 ms-fontWeight-bold"
                    },
                    "txtContent": "[$TabHead4]"
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "padding": "10px 20px",
                  "border": "=if([$Position] == 5, '','1px solid #eee')",
                  "background-color": "=if([$Position] == 5, '','#f5f7fa')",
                  "cursor": "pointer"
                },
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "Position": "5"
                  }
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "font-size": "80px",
                      "height": "=if(indexOf([$Tab5Icon],'http') > -1,'','80px')"
                    },
                    "attributes": {
                      "iconName": "=if(indexOf([$Tab5Icon],'http') > -1,'',[$Tab5Icon])"
                    }
                  },
                  {
                    "elmType": "img",
                    "style": {
                      "width": "80px"
                    },
                    "attributes": {
                      "src": "=if(indexOf([$Tab5Icon],'http') > -1,[$Tab5Icon],'')"
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "10px"
                    },
                    "attributes": {
                      "class": "ms-fontSize-18 ms-fontWeight-bold"
                    },
                    "txtContent": "[$TabHead5]"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "padding": "20px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "font-size": "140px"
                },
                "attributes": {
                  "iconName": "=if([$Position] == 1, [$Tab1Icon],if([$Position] == 2, [$Tab2Icon], if([$Position] == 3, [$Tab3Icon],if([$Position] == 4, [$Tab4Icon],[$Tab5Icon] ) )) )"
                }
              },
              {
                "elmType": "img",
                "style": {
                  "width": "140px"
                },
                "attributes": {
                  "src": "=if([$Position] == 1, if(indexOf([$Tab1Icon],'http') > -1,[$Tab1Icon],''),if([$Position] == 2, if(indexOf([$Tab2Icon],'http') > -1,[$Tab2Icon],''), if([$Position] == 3, if(indexOf([$Tab3Icon],'http') > -1,[$Tab3Icon],''),if([$Position] == 4, if(indexOf([$Tab4Icon],'http') > -1,[$Tab4Icon],''),if(indexOf([$Tab5Icon],'http') > -1,[$Tab5Icon],'') ) )) )"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "display": "inline-block",
                  "padding": "0px 30px",
                  "max-width": "370px",
                  "vertical-align": "top"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "padding-bottom": "10px"
                    },
                    "attributes": {
                      "class": "ms-fontSize-24 ms-fontWeight-bold"
                    },
                    "txtContent": "=if([$Position] == 1, [$TabHead1],if([$Position] == 2, [$TabHead2], if([$Position] == 3, [$TabHead3],if([$Position] == 4, [$TabHead4],[$TabHead5] ) )) )"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding-bottom": "20px"
                    },
                    "attributes": {
                      "class": "ms-fontSize-18"
                    },
                    "txtContent": "=if([$Position] == 1, [$Tab1Desc],if([$Position] == 2, [$Tab2Desc], if([$Position] == 3, [$Tab3Desc],if([$Position] == 4, [$Tab4Desc],[$Tab5Desc] ) )) )"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "background-color": "gray",
                      "border-radius": "30px",
                      "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06)",
                      "position": "relative",
                      "width": "90px",
                      "height": "30px"
                    },
                    "children": [
                      {
                        "elmType": "a",
                        "style": {
                          "margin": "5px 10px",
                          "text-decoration": "none",
                          "position": "absolute",
                          "color": "white"
                        },
                        "attributes": {
                          "target": "_blank",
                          "href": "=if([$Position] == 1, [$TabUrl1],if([$Position] == 2, [$TabUrl2], if([$Position] == 3, [$TabUrl3],if([$Position] == 4, [$TabUrl4],[$TabUrl5] ) )) )",
                          "class": "ms-fontWeight-bold"
                        },
                        "txtContent": "MORE INFO"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitiontabs.json

From the contributor

How to use this sample

Summary

This sample creates tabs with associated content. Users can then navigate between tabs. This sample is intended to display content within a SharePoint page (using the lists webpart) to provide a more interactive and user friendly approach.

You can include the tab header, icon (or URL to an image), content, and link redirection for more information. By using views, you can filter to only display specific list items to allow the list to power multiple tabs on different pages.

screenshot of the sample

Note - the active tab is stored with the list item meaning that changes on the active tab position will affect ALL users.

View requirements

  • The format expect the following fields:
Field Type
Title Single line of text
TabHead1 Single line of text - Tab name
Tab1Desc Multiple lines of text - Description of Tab content
Tab1Icon Single line of text - Icon name or url to image
TabUrl1 Single line of text - url to "more info" button
TabHead2 Single line of text
Tab2Desc Multiple lines of text
Tab2Icon Single line of text
TabUrl2 Single line of text
TabHead3 Single line of text
Tab3Desc Multiple lines of text
Tab3Icon Single line of text
TabUrl3 Single line of text
TabHead4 Single line of text
Tab4Desc Multiple lines of text
Tab4Icon Single line of text
TabUrl4 Single line of text
TabHead5 Single line of text
Tab5Desc Multiple lines of text
Tab5Icon Single line of text
TabUrl5 Single line of text
Position Number - Tab position selected

Filter Tab to display content

Since is possible to create multiple tabs, using the view capabilties can filter each view to only display associated tab and then include in associated SharePoint page.

Access to View edit option and access to "Filter" area, check "Show items only when the following is true:" and select column and content to be filter to only display associated tabs.

Sample

Solution Author(s)
tabs.json André Lage

Version history

Version Date Comments
1.0 February 17, 2022 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Keep exploring

More formats like this

Key Dates Timeline Checklist

A modern horizontal timeline view that displays key dates or milestones as monthly columns.

Explore format

Sports Card

This SharePoint JSON view formatting sample transforms list items into vertical sports trading cards with header bar, country badge, player silhouette, name band, star rating and three stat bars.

Explore format

Credit / Loyalty Card

Transforms list items into realistic credit / loyalty cards with a brand name, tier pill, EMV chip, contactless symbol, embossed card number, cardholder, expiry, and network logo. The card colour is driven by the Tier value.

Explore format