Building a Custom Filter Web Part for a List View Web Part, the Easy Way

Posted by & filed under , , , , .

This might not meet everyone’s needs, if you have a truly difficult filter (or even multiple Lists on the same page that you don’t want to filter together), this might not work, but the most common configuration I’ve run into is a standalone page with a List View for a specific list. This is usually done to give end users a “prettier” view of the list, rather than the default “system” page for managing lists.

In these cases, users often want a convenient way of filtering this list, and often the built-in column headers are not considered “obvious” enough. In this case, you could go crazy and build an entirely custom web part to output different views as filters are selected, you could choose a 3rd party solution to do it for you, or you can simply use the power of the Query String!

Here’s the breakdown, say we’re viewing our page at:

http://servername/sitename/pages/PrettyListView.aspx

If we append the Query String on the end using the format:

http://servername/sitename/pages/PrettyListView.aspx?FilterName=<ColumnName>&FilterMultiValue=<ColumnValue>

  • <ColumnName>
    • The internal name of the column you want to filter by
    • Case sensitive
    • Must exist as a field in the view being used by the List View Web Part on the page
  • <ColumnValue>
    • The value you’re searching for
      • HR will find all items with the value “HR” in the column
    • As the name FilterMultiValue suggests you can use this to match multiple values, separated by a semicolon:
      • HR;IT will match items with either “HR” or “IT” in the selected column
        • Careful of spaces! HR; IT will not match items with “IT”, because it will be looking for ” IT” due to the extra space after the semicolon
    • You can also use wildcards in this value
      • *Development* will match “Product Development”, “Software Development”, “Development Products”, etc.
    • Not case sensitive, “Development” returns the same entries as “development”

We can now filter by changing the Query String. This means that we can easily generate some HTML in a Content Editor web part to provide the desired “obvious” filtering for the client, if we need it to be reusable we can make a simple web part to hold this markup for us. You could even create something that uses a nice text box along with the wildcard option, and generate a nifty dynamic string based filter.

This solution is *especially* useful for SharePoint Online installations, allowing an easy method of adding the filter customization without having to worry about deploying new web parts.

This functionality is an OOB feature of the List View Web Part, this *does* mean that if you have multiple List View Web Parts on the same page, they will all try to use this filter, and if that column isn’t in the current view for one of the List View Web Parts, an error will get thrown.

More than one filter

If you need more than one filter, you can add in the FilterFieldX, FilterValueX queries, where X increments as you need more filters.

http://servername/sitename/pages/PrettyListView.aspx?FilterField1=<ColumnName>&FilterValue1=<ColumnValue>&FilterField2=<ColumnName>&FilterValue2=<ColumnValue>

Note that this differs from the above FilterName/FilterMultiValue in some key ways, for example, it doesn’t support filtering by multiple values in the same column, nor does it support wildcards. For this reason, I strongly suggest using the FilterName/FilterMultiValue version above, and simply adding additional FilterFieldX/FilterValueX fields if you need them (while being aware of the limitations of their implementation)

http://servername/sitename/pages/PrettyListView.aspx?FilterName=<ColumnName>&FilterMultiValue=<ColumnValue>&FilterField1=<ColumnName>&FilterValue1=<ColumnValue>

Sorting

You can also add sorting to the query string:

http://servername/sitename/pages/PrettyListView.aspx?FilterName=<ColumnName>&FilterMultiValue=<ColumnValue>&FilterField1=<ColumnName>&FilterValue1=<ColumnValue>&SortField=<SortColumnName>&SortDir=<SortColumnDirection>

  • <SortColumnName>
    • Internal name of column to sort on
    • Case sensitive
  • <SortColumnDirection>
    • asc or desc
    • Not case sensitive

Thanks to Mike Smith for providing some good references on some of the limitations of this feature.