Show active list filter above list view

I got this request:

Hi Alexander:
Another “is it possible?” question…

Is it possible to have a specific column’s filter choice appear in a CEWP that I would place above a list view?

Example: Filter the page by [Customer]
CWEP: would contain text + [Customer]

Thanks-

Charlie Epes

To pull the list filter from the URL and display it above the web part, put this code in a CEWP below the webpart (change the reference to jQuery if necessary):

<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
/* This code must be placed below the webpart it shall reflect */
// Get all querystring parameters
var queryString = getQueryParameters();

// Get all DisplayNames for the columnFilter
objFinDisp = {};
$(".ms-viewheadertr th").each(function(){
	objFinDisp[$(this).find('table:first').attr('name')] = $(this).find('table:first').attr('displayname');
});

// Loop trough and extract all querystring parameters that has "Filter" in it
myFilterStr = '';
$.each(queryString,function(param,val){
	if(param.indexOf('FilterField')==0 || param.indexOf('FilterValue')==0){
		// Switch the FieldInternalName for the DisplayName
		if(objFinDisp[val]!=undefined)val=objFinDisp[val];
		// Write the filter
		if(param.indexOf('FilterField')==0){
			myFilterStr += decodeURI(val)+" = ";
		}else{
			myFilterStr += decodeURI(val)+"<br>";
		}
	}
});

// Put filter string in the top of the page
$(".ms-bodyareaframe").prepend("<div>"+myFilterStr+"</div>");

// Function to separate each url search string parameters
function getQueryParameters(){
qObj = {};
var urlSearch = window.location.search;
	if(urlSearch.length>0){
		var qpart = urlSearch.substring(1).split('&');
		$.each(qpart,function(i,item){
			var splitAgain = item.split('=');
			qObj[splitAgain[0]] = splitAgain[1];
		});
	}
return qObj;
}
</script>

Alexander

15 Comments on “Show active list filter above list view”

  2. Hi Alexander:
    Can this be amended to allow me to customize the words that are put in the filter heading?

    “FilterField1:”
    “FilterValue1:”

    For example, if I wanted to say: “Business Name = ABC Co., Inc.”

    where “Business Name” is the column/field and “ABC Co., Inc.” is the filter of choice.

    Thanks-

    Charlie Epes
    Buffalo, NY

  4. One more question Alexander:
    The code will not permit some punctuation or characters such as in:

    1.) Customer = ABC+Manufacturing%2c+Inc. (the plus + sign after “ABC” is a mystery; %2c+ appears to replace a comma)

    2.) Contractor, Vendor, Tenant = Contractor %23203 (%23 appears to have replaced a # sign)

    Thanks-

  6. I was able to create a calculted field in my source list, that used the same data populated in my target list, when clicking on the link it opened the target list already filtered. I found that for each filtered column there are 2 values
    FilterField1= fieldname
    FilterValue1= fieldvalue to filter

    for each additional filter they increment by 1. knowing this cant we create a dropdown that populate distinct values from 1 or many columns and apply the query string values to it.
    when using multiple dropdowns maybe it only fires with a button.

    going to the next step, maybe the view is hidden until the filter is applied

    1. the more I sit and think about this I am not really sure it is worth the effort. It will take the same effort no matter where you start your filter. I guess this is more of a desirement, something nice to have but not really needed

  7. I swapped the decodeURIComponent for the decodeURI. this helped with most. I have 2 fields, calculated, date. Data is returned in this format
    2010-03 – (MAR)
    I have checked my formula and ther are no spaces or special characters, when i use this field to filter with this script it adds this in from of the date : “8%5F” which results in a display like this:
    Start = 8_2010-03 – (MAR)

    any ideas why this might happen?

    1. not sure if this was the correct way to handle it. I added a string replace like this

      myFilterStr += decodeURIComponent(val).replace('8_','')+" = ";

      it appears to work. if you have the time let me know if there is a better way.

  8. Hello,

    i placed the code from above under my list, but nothing happened. Did i do anything wrong or did i forget something?

    Hope you’ll read my post and can help me.

  9. HI Guys, how have you deployed this? I put the code into a JS file referencing the JQUERY library in that JS file and then placed a reference into the CEWP below the list, and it gives Invalid Character error at this line of code:

    objFinDisp = {};
    $(“.ms-viewheadertr th”).each(function(){
    objFinDisp[$(this).find(‘table:first’).attr(‘name’)] = $(this).find(‘table:first’).attr(‘displayname’);
    });

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.