Build taxonomy tag filters bar using Data Visualizer Web Part item selection capability¶
This tutorial shows you how to build a tag filters bar based on SharePoint taxonomy to quickly filter your content dynamically without the need of the Data Filters Web Part. As an example and to showcase the item selection feature, we will build a news carousel filterable by managed metadata tags on an intranet home page.
Note
The connection between Data Visualizer Web Parts is only available from the 1.4.0 version.
Setup SharePoint site¶
-
On a SharePoint site, create some news pages and classify them with a managed metadata column (ex: "Department"):
Note
Don't forget to publish your news to get them indexed by the SharePoint search engine.
-
At site collection level, create a search managed property based on this managed metadata column (ex: "RefinableString05"):
Note
Use the
ows_taxId_<column_name>
format for the mapped search crawled property.
Configure Web Parts¶
-
On a SharePoint page, add a new Data Visualizer Web Part to lookup the site news with the following configuration:
- Data source: SharePoint Search with query template
Path:{site.absoluteUrl}/SitePages/news IsDocument:1
. This will get only the site news of the current site.
- Enable the Enable localization option on the first Web Part configuration page.
- In the slots configuration, for the 'Tags' slot, use the
Auto
prefix + your search managed property name or alias created earlier (ex:AutoRefinableString05
). Press 'Enter' to validate the value.
Using the default 'Cards' layout, you should see something like this:
- Data source: SharePoint Search with query template
-
On the same page, add a second Data Visualizer Web Part above the first one with the following configuration:
- Data source: OData (Microsoft Graph) with the following URL
https://graph.microsoft.com/beta/termStore/sets/<your_term_set_id>/children?$top=5
.
You must replace
<your_term_set_id>
with the id of the taxonomy term set used to classify the news:Note
To get it work, the
TermStore.Read.All
Microsoft Graph permission should be approved at tenant level.- In the slots configuration, for the 'Title' use the following value
labels[0:]{.languageTag === "en-US"}.name
. Press 'Enter' to validate. This will get only label for the English language as item title.
-
Layouts: use the 'Custom' layout option with the following filter template .html content (open the webpage source code in your browser to access the content).
-
In the 'Common' section of the layout page configuration, allow the item selection:
You should see your taxonomy terms like this:
- Data source: OData (Microsoft Graph) with the following URL
-
Go back to the first Data Visualizer Web Part displaying the news and go to the third configuration page regarding connections. Configure the connection with the other Data Visualizer like this:
-
Save the page. You can now filter news dynamically based on taxonomy tags dynamically!
Note
If you allowed multi items selection, you must use
CTRL
+Left click
to select multiple elements. You can also select a range of elements usingSHIFT
+Left click
.