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 = window.location.search.substring(1);
  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)
setTimeout('setValues();',800);

</script>

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.

8 comments:

  1. Hi, thanks for your workaround to sharepoint's textfilter webpart. It works great so far. But one is able to search for name-field in libraries. Just define @FieldLeafRef instead of @Title in xsl:param name="AllRows"

    I'm about to enhance it, so we are able to search on folders in a library as well, and to reset query without changing back to predefined aspx site.
    I'll post my changes then.

    Cheers Alex

    ReplyDelete
  2. thanks!but i have a problem with paging after i did this

    ReplyDelete
  3. How i overcome problem with paging?

    ReplyDelete
  4. Please, Can you describe what kind of problem have you with paging?

    For the date field, you can work on XSLT filter, with formatting properties.

    Like this, where $A, $Da are paramteres passed to list in yyyyMMdd format in querystring.

    [probably there's some parenthesis wrong]

    < xsl:param name="AllRows" select="/dsQueryResponse/Rows/Row[((ddwrt:FormatDateTime(string(@Created) ,1033 ,'yyyyMMdd') != $A and $A = '') or (ddwrt:FormatDateTime(string(@Created) ,1033 ,'yyyyMMdd') <= $A and $A != '')) and ((ddwrt:FormatDateTime(string(@Created) ,1033 ,'yyyyMMdd') != $Da and $Da = '') or (ddwrt:FormatDateTime(string(@Created) ,1033 ,'yyyyMMdd') >= $Da and $Da != '')) and ($EntityName = '' or (position() >= $FirstRow and position() <= $LastRow))]"/ >

    ReplyDelete
  5. Thanks Giorgio for you great script!
    I added some lines to use mor than one search word at field title.
    Also we do not need the hardcode the URL to the script.
    Stefan

    PS change scriptXX to script and inputXX ti input.


    /*
    03.12.2012 Stefan PMO
    Script shows a search box for field Title.
    The search box is filled with the content of the URL parameter FilterMultiValue.
    More than one searchstring can be used to search field Title, e.g. *find this*;*or find this*;*or maybe this one*
    No changes to the list or its webpart are nessecary. Just place the script to a content editor webpart and be happy :-)

    More info:
    Original Script by Giorgio Guerrieri: http://webdevshareetc.blogspot.de/2012/02/sharepoint-2010-filter-listlibrary-web.html
    http://sharepoint2010blog.wordpress.com/2012/03/22/search-filter-or-sort-lists-from-a-query-string-in-sharepoint-2007-2010-and-office-365/
    */

    //this script get query string from URL
    function querySt(ji){
    hu = window.location.search.substring(1);
    gy = hu.split("&");
    for (i=0;i add *
    words[i] = "*" + words[i] + "*";
    }
    // concat to searchstring
    newSearch += words[i] + ";";
    }
    // Neuen Suchstring zuweisen
    value_query_title = newSearch;
    // ###################################################################

    // Open actual page with new querystring parameters
    window.location.href = location.pathname + "?FilterName=Title&FilterMultiValue=" + value_query_title
    }

    //this set values from query string after page is loaded (you can use your preferred method to do the same)
    setTimeout('setValues();',800);

    Search for Title:


    ReplyDelete
  6. Sorry but the blog does not show the by lines after "Title:".
    Just use the lines from the original post after "Title:"

    Stefan

    ReplyDelete
    Replies
    1. hi stefan i would love to try your enhancements but am having trouble figuring out what part of the original script to keep and which to replace with what you provided. also there seem to be some curly braces ("}") missing from your script. thank you, giorgio! martin

      Delete