5. Alphabetical List View Quick Filter

Update: August 15th, 2010

This article the first of The Power of Content Editor WebPart series. Other parts:


This is an easy kind-of hack where we’ll use SharePoint’s URL. Our goal is to have a small section above the list view that will filter the list according to first letter of every item in the list as seen on the screenshot below.

End result

This comes in handy with large lists. In our example we’ll continue to work on the list of customers that we’ve already "pimped" with the quick search functionality.

Let’s take a look at filters

For this purpose we’ll take a look at our list – what happens when we use the list filter:

Applying the filter   Check the URL parameters of an applied filter

The page URL gets additional parameters: View, FilterField1 and FilterValue. For working in list view you can easily skip the View parameter and the filter will still work.

So FilterField1 determines according to which column the list should be filtered (we have to use column internal names) and FilterValue1 parameter sets the filter value. And yes, since they both have number 1 added to them, you can add multiple filters (FilterField2, FilterValue2, FilterField3, …).


Let’s do it

Great. So now we can take advantage of this. Because we don’t want to have each unique value in the filter options we need an additional column with the first name of a customer. The column must be displayed in the view in order for filter to work. For the column to be as discrete as possible, I recommend using a short column name, something like FL (first letter). Let’s go ahead and add the column.

Add a new column

The column should be of type "Calculated" and the formula is simple:


The value in square brackets is the display name of the column. When entering the formula the square brackets should also be present. All the settings for a new column are presented below:

Column settings 

And as mentioned the column should be in the view where we’ll add the filter.

The new column added

Time for CEWP and JavaScript

OK. Now let’s insert the CEWP and JavaScript. After insertion, and linking to the external content file the "Hello world" is ready:

CEWP added   Content file with Hello world test

We could do this entirely without the JavaScript. All we’d need is to enter hyperlinks like below:


B  C

And that would just work fine.

Filter with pure HTML Pure HTML solution

But going on the wild side and to raise the complexity of this article I want to make this a bit more dynamic and page-independant. In the code above the problem is that this is bound to the AllItems.aspx page. What if you’d want to re-use the code somewhere else? Plus you have to do a lot of copy-paste and corrections for minor items.

So JavaScript to the rescue. To avoid repetitive typing we’ll create a JavaScript array of all possible values for filter and build the links in a for loop. So first let’s define an array of possible filter values.

Next we create a loop for all of the values to create the filter just before the tag:

for (var i = 0; i < filterValues.length; i++) {
	document.write("" + filterValues[i] + " ");

And that would do the trick. We’d end up with a filter:


By using the document.location.pathname in the script we’ve removed strict binding to any particular page.

That’s it. If you’re satisfied with a filter like that you can stop reading right here. If you wish to "pimp" the filter a bit more, continue reading.

Expanding our example

Now let’s add a bit more configurability. We wish to be able to configure a delimiter between the filter values and we wish to be able to configure the filter column. So immediately after the first line (

And because results can be configurable, you can easily vary the look of the alphabet filter. For example a configuration like:

	var filterField = "FL";
	var filterValuesDelimiter = "-";
	var selectedValueStyle = "border: 1px black solid";
	var filterDivStyle = "margin: 5px; font-size: 15px;";

would result in

Variation in filter style

Happy scripting everyone!

Other articles from this series: