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):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<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.