Using Hyperlinks in List view JSON to Apply Filters

Creating hyperlinks in JSON to apply filters on a SharePoint list column can enhance the interactivity and user experience of your SharePoint lists. This guide will walk you through the process of constructing URLs with query parameters to filter your SharePoint list view dynamically.

Benefits of Using Hyperlinks for Filtering

• Enhanced User Experience: Users can quickly filter and find relevant items without navigating through multiple steps.
• Dynamic Filtering: URLs can be customized to apply various filters dynamically based on user needs.
• Improved Navigation: Opening links in new tabs allows users to keep their current view while exploring filtered results.

Understand the SharePoint URL Structure for Filtering:

SharePoint URLs can include query parameters to filter the view. For example, to filter a list by the “Status” column to show only items with the value “Completed”, you can use the following URL structure:

/Lists/YourListName/AllItems.aspx?FilterField1=Status&FilterValue1=Completed

Constructing the Hyperlink in JSON

To create a hyperlink that applies a filter on a list column, you need to construct a URL in your JSON formatting. Below is a JSON snippet that demonstrates how to create such a hyperlink.

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"elmType": "a",
"attributes": {
"href": "=concat(@currentWeb, '/Lists/YourListName/AllItems.aspx?FilterField1=Status&FilterValue1=[$Status])",
"target": "_blank"
},
"style": {
"color": "#0078d7",
"text-decoration": "none",
"font-weight": "bold"
},
"txtContent": "Show Completed Items"
}

elmType: Set to “a” to create an anchor element.

attributes.href: Constructs the URL to your SharePoint list view. Replace YourListName with the actual name of your list. The query parameters FilterField1 and FilterValue1 apply the filter. Adjust these parameters according to your column name and filter value.

attributes.target: Set to “_blank” to open the link in a new tab.

style: Applies CSS styling to the link.

txtContent: The text displayed for the hyperlink.