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:
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 :
and substitute with this:
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.
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"/>
//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() >= $FirstRow and position() <= $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() >= $FirstRow and position() <= $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.
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"
ReplyDeleteI'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
thanks!but i have a problem with paging after i did this
ReplyDeleteHow i overcome problem with paging?
ReplyDeleteHow i query a date field
ReplyDeletePlease, Can you describe what kind of problem have you with paging?
ReplyDeleteFor 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))]"/ >
Thanks Giorgio for you great script!
ReplyDeleteI 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:
Sorry but the blog does not show the by lines after "Title:".
ReplyDeleteJust use the lines from the original post after "Title:"
Stefan
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