Thursday, February 2, 2012

Sharepoint 2010 - Filter List/Library Web Part with XSLT and Content Editor WP

I created a simple Filter Web Part with a Content Editor WP and simple XLST to filter List/Library with the LIKE feature.
It works for lists and libraries (in libraries not for Name field).

Create a page with Library Web Part to filter. Then add a Content Editor Web Part end edit HTML Source.
In HMTL, add an input textbox and two buttons, for reset filter and for submit filter.
Add some script as shown below:

<script type="text/javascript">

//this script get query string from URL
function querySt(ji){
  hu =;
  gy = hu.split("&");
  for (i=0;i<gy.length;i++){
    ft = gy[i].split("=");
    if (ft[0] == ji){
      return ft[1];

//this script set value read from query string in input field
function setValues(){
   if(querySt('qtitle') != null && querySt('qtitle') != "")
     document.getElementById('query_title').value = querySt('qtitle');

//this script reload page without filter in query string
function resetFilters(){
   document.location = "/SitePages/Search Documents.aspx";

//this script set query string and load page with filters
function getValues(){
   var el_query_title = document.getElementById('query_title');
   var value_query_title = el_query_title.value;
   window.location.href = "/SitePages/Search Documents.aspx?qtitle=" + value_query_title;

//this set values from query string after page is loaded (you can use your preferred method to do the same)


Title: <input name="query_title" id="query_title" type="text"/>
<input id="btn_reset" onclick="javascript:resetFilters();" type="button" value="Reset"/>
<input id="btn_filter" onclick="javascript:getValues();" type="button" value="Search"/>

Now, open Sharepoint Designer 2010 and edit page with filter.
Note: Edit page in Advanced Mode!

Click on List Web Part and in Ribbon Customizations, click on Customize XSLT (entire view).

In Ribbon Options, take care that column you want to filter is in view.
Now, Click on Parameter and add this parameters:

"qTitle", type Query String, with query string name qtitle (same as in the javascript above).
"lower", "upper" type None with value = "abcdefghijklmnopqrstuvwxyz" and "ABCDEFGHIJKLMNOPQRSTUVWXYZ"

Last two parameters are for tranform to Lower or to Upper text to filter: if I search for "None", I found in text contains "None", "NONE", "none".
We see how to later.

Now, in the code of library web part, search for tag :

<xsl:param name="AllRows" select="/dsQueryResponse/Rows/Row[($EntityName = '' or (position() &gt;= $FirstRow and position() &lt;= $LastRow))]"/>

and substitute with this:

<xsl:param name="AllRows" select="/dsQueryResponse/Rows/Row[((@Title != $qTitle and $qTitle = '*') or (contains(translate(@Title,$lower,$upper),translate($qTitle,$lower,$upper)) and $qTitle != '*')) and ($EntityName = '' or (position() &gt;= $FirstRow and position() &lt;= $LastRow))]"/>

Note the change we made.
The select take all rows with Title different from qTitle, if qTitle is wild card, or rows which Title contains qTitle, if qTitle is a word. This do the LIKE filter for text.
We add the translate function, to check only upper text of Title and upper text of qTitle.

Save your page (if asked for update display, say No: some time this overwrites your changes)

Now, go to browser on your search page, and try to filter web part.
Note for address, with query string and the result in web part.

You can add other filter with other column: columns must be displayed in view.

For the date, you have to convert them for correct XSL query.