Build a people directory using alphabetical verticals and SharePoint Search data source

This tutorial gives you basic steps to achieve a people directoy using alphabetical letters and the SharePoint search data source:

Questions, issues with this tutorial?

If you encouter issues or have questions about this tutorial don't hesitate to reach us using our official GitHub repository.

Video tutorial

Step-by-step tutorial

1. Add the 'Data Verticals' Web Part on the page.

   

2. For each alphabetical letter, add and configure a new vertical. As the value use <Letter> + *. Example A* for letter 'A'. You can also add an 'All' tab by specifying * as value.

   

3. Add a new 'Data Visualizer' Web Part on the page.

   

4. Select the 'SharePoint Search' data source.

   

5. In the 'Connections' property pane configuration page, connect the 'Data Verticals' Web Part previously added. Select all the available tabs (i.e. letters). Basically it tells the Data Visualizer Web Part to be or remain visible when user clicks on any of these letters.

   

6. In 'Layouts' property pane configuration page, select the 'People' layout.

   

   Optionally, in the layout options, you can check 'Show persona card on hover' option. To get it work, an administrator needs to approve required API permissions.

   

7. In the 'Data source' property pane configuration page, select the 'LocalPeopleResults' Result Source and update the Query Template property with the {searchTerms} FirstName:{verticals.value} expression.

   

   This expression is given as an example. You can use the {verticals.value} token anywhere in the query according to your requirements. The value will be simply replaced dynamically.

8. Save your page. You can now filter people based on alphabetical letters using their first name.

   

   You can then add a 'Search Box' or 'Data Filters' Web Parts to complete the experience.