Alphabet filtering on list or library

Again a blog about list formatting in SharePoint Online. This time I am trying to create an alphabet filter for a list with client names. This solution is also using dynamic filtering feature.

Alphabet

One of the requirements I got in a recent project was to create an Alphabet filter for a list. I was curious if this was possible with list formatting. So, I gave it a try.

Assume we have the following requirements:
– A horizontal alphabet filter is required. One or more letters should be selectable.
– A clients list should be shown below the alphabet on the same page
– The clients list should be filtered based one what is selected in the alphabet filter
– The clients list should also have its own formatting

Creation of Alphabet List

First of all you would need to create the two SharePoint Online lists and the columns. To give you a head-start I have created PnP PowerShell scripts for both lists. Feel free to reuse it (at your own risk ;)).

The first list is the Alphabet list with just one column, Title.

1. Run the PnP PowerShell script below to create the Alphabet list in the SharePoint Online collection of your choice. This script also creates the list items for every letter of the alphabet.

2. Navigate to the newly created view in the new Alphabet list. In my example I called it Alphabet Filter View. Select Format current view.

3. Select the Gallery layout and paste the json below and save the view.

Creation of Clients List

The second list is the Clients list with several columns. The most important is the ABCFilter column which is a lookup to the Alphabet Title column. This is also the column which is used for filtering.

1. Run a similar PnP PowerShell script to create the Clients list in the same site collection like the Alphabet list. This script can also create some dummy list items, use the IncludeDummyData switch for that.

2. Navigate to the newly created view in the new Clients list. In my example I called it Client Card View. Select Format current view.

3. Select the Gallery layout and paste the json below and save the view.

Dynamic filtering

For the last part we need a SharePoint page. You can for example use the home page of your site collection or just create a new page.

1. Add the Alphabet list as a web part on the page. Make sure you select the correct view. I have also hidden the command bar and see all button in the settings of that web part.

2. Add the Clients list as a web part on a page. Make sure you select the correct view. I have also hidden the command bar and see all button in the settings of that web part.

3. Enable Dynamic filtering. Select the ABCFilter as the column you want to filter on. Use the Alphabet list as the list containing the filter and use the Title column as the filter.

That should be it for the whole setup of this Alphabet filter.

Happy testing!