How to Create Custom Filter Tabs for a SharePoint Online List
Question details
The user wants to create custom tabs (such as 'Reject' and 'Pending') to filter a SharePoint Online list by status, replicating the interface used in classic or on-premises SharePoint.
- Product
- SharePoint Online
- Device & OS
- not provided
- Scenario
- Displaying modern SharePoint Online list items using clickable horizontal custom tabs for different statuses.
- Observed behavior
- Modern SharePoint Online list web parts do not natively support classic custom tab bindings out of the box, requiring alternative workarounds.
Ensure you have the necessary site edit permissions to modify modern SharePoint pages and access to Microsoft Power Apps within your Microsoft 365 tenant.
Use Power Apps to Create a Tabbed Interface
Create a custom Power App canvas that connects to your SharePoint list, using buttons as tabs to dynamically filter the data gallery directly on the SharePoint page.
Since modern SharePoint lists use dropdowns for views rather than horizontal tabs, Power Apps offers the most seamless low-code way to build a custom tabbed UI without deploying custom code.
Open Power Apps, create a new Canvas App, click on 'Data' in the left sidebar, select 'Add data', and connect your SharePoint Online list.
Go to the 'Insert' menu, select 'Vertical Gallery', and set its data source to the connected SharePoint list.
Use the 'Insert' menu to add 'Button' controls at the top of your screen. Label them according to your statuses (e.g., 'Pending', 'Rejected').
Set the 'OnSelect' property of each button to update a variable, such as `UpdateContext({varSelectedTab: "Pending"})`. Then, update the 'Items' property of the gallery to `Filter(SharePointList, Status = varSelectedTab)`.
Save and publish your Power App. Navigate to your modern SharePoint page, click 'Edit', insert a 'Power Apps' web part, and paste the web link or App ID to display the custom tabbed view.
Develop a Custom SPFx Web Part
Build a custom SharePoint Framework (SPFx) web part to query the list data and render it using a custom tabbed interface.
Boost Your Productivity with WPS Office
While configuring advanced SharePoint views requires navigating complex Microsoft 365 integrations, handling your daily documents doesn't have to be. WPS Office provides a free, lightweight, and highly compatible suite for all your word processing, spreadsheet, and presentation needs.
Frequently Asked Questions
Can I use out-of-the-box modern SharePoint views as horizontal tabs?
No. Modern SharePoint uses a dropdown menu for list views by default. To display these views as clickable horizontal tabs directly on the page without custom code, you must use integrations like Power Apps or third-party web parts.
Is it possible to revert to classic SharePoint to get the tab view back?
Yes, you can switch a specific list to the classic experience via the Advanced Settings of the list. However, this is generally not recommended as Microsoft heavily focuses on the modern experience and performance updates.
Are there open-source SPFx solutions available for tabbed list views?
Occasionally, community-driven projects in the PnP (Patterns and Practices) GitHub repository provide custom web parts that mimic tabbed views. You can search the 'sp-dev-fx-webparts' repository for existing generic tab solutions.
