List View Web Part Filtering

Dynamically Filtering SharePoint List Views using Javascript


The List View Web Part has great capability for filtering displayed data using the web parts header controls..

List View Web Part Filtering

If you’re building out a UI which incorporates a list view web part, you can also perform the filtering using Javascript in response to your UI events, hooking into the LVWP filtering code.

As an example, what I want to build is a UI which allows me to filter a LVWP using Year and Month controls shown below..

flvwp-01

So when I click on a Year, the LVWP is filtered by that year..

flvwp-02

And likewise for the Month..you get the picture

flvwp-03

In the screenshots above, the columns I’m filtering by are present in the view, but they don’t have to be I’ve only shown them there for demonstration purposes.

This can be done in both 2010 and 2013, though the code is different; in 2013 we call the RefreshPaging function and in 2010 we call the page postback function __doPostBack using the control id of the LVWP with correctly formed event arguments – if you’ve ever done any work with the SPGridView control this will sound familiar.

INPLVIEW.JS

Both versions make use of the javascript ContextInfo ‘objects’ which SharePoint whips up for list view web parts and in particular relies on the InitAllClvps function found in this file.

In my implementation I’m using Knockout to manage the filter UI and subscriptions to the Knockout Year/Month observables to perform the actual filtering.

HTML (2013)

JAVASCRIPT (2013)

Looking into the implementation the code in pd.FilterLibraryViewModel is just the knockout viewmodel, the code in pd.FilterLibraryApp is whats sets things up and performs the filtering.

The locateListView function ensures that the inplview.js file is loaded (via SOD) and calls InitAllClvps(). It then looks through the list of ContextInfo objects looking for the one for our list view web part. It then performs some object mangling to get things right for the filtering to work – you’ll have to delve deep into inplview.js to see why, but this is just what SharePoint requires.

Having got everything setup, when clicking on a Year or Month the onFilterChange function is called in response to a change in the viewmodel observables, this works out the filter url required based on the viewmodel observable state and calls the RefreshPaging (inplview.js) function – the list view web part then gets filtered in place without requiring a post back.

Views with Person/Group Columns

For some reason I’ve yet to fathom, when you include an Person/Group column in the view, in-place filtering does not work and a full page postback occurs.

Although not the subject of this post, the sample code included here also includes a text box which filters the table rows of the list view web part, but only the rows currently displayed.

How to Use.

Simply drop a list view web part on to a page and configure the view as you’d like it, then drop a content editor web part onto the page and configure it to point to the HTML file – which includes the script and CSS files.

Links to Resources

CSS (2013)

HTML (2010)

JAVASCRIPT (2010)

CSS (2010)

 

Published by

Phil Harding

SharePoint Consultant, Developer, Father, Husband and Climber.

21 thoughts on “Dynamically Filtering SharePoint List Views using Javascript

  1. Thanks for blogging about this solution! It works well to filter an OOTB List View Web Part in O365, but I could not get Ribbon integration on Item Selection working as-is. With the original solution, the Edit/View/Delete Ribbon Actions were always disabled when selecting filtered items. To address that issue, I changed the following line of code ” wpEvent = { clvp: clvp, event: { currentCtx: { clvp: clvp } } };” to ” wpEvent = { clvp: clvp, event: { currentCtx: clvp.ctx } };” and always call HandleFilter(wpEvent.event, filterUrl).

  2. I figured out how to do it and it was a chore of talking to the terms tore and hidden taxonomy list but it works great! Cool post by the way!

  3. Thanks for the article. I’ve been waiting to integrate knockout with sharepoint. links to resources and or files do not seem to work though. i’m a litle confused at where the code to implement this is…

  4. @Phil: I found out. It is possible, but thanks anyway… Just do multiple postbacks in a row. Sharepoint saves the former filters and automatically combines them (with an AND-relationship)…

    But now I need a way to sort via postback…

  5. Does this work on library web parts? I saved all the files and adapted the html file for my environment URLs but after pointing the content editor at the html file it hangs at the progress loading .gif

  6. Hi and thanks for sharing. I made it work for SP2010 but I had to check the box “Show the actualize button” on the List View Webpart. Otherwise the controlid was always empty in the console.

  7. I would like to reuse the filter – but unfortunately under resource it is not possible to get the reference files.
    –> “HTML file – which includes the script and CSS files.”
    I would be very happy if i could test the filter by myself

  8. Great post. It would have been really helpful if someone could decouple this component from knockout (I am not familiar with knockout 😦 ). Do you have a plain JavaScript version of this? Thanks

  9. he had before a regular plain javascript, for example:
    …(alll options)

    //Attach change event handler to filter dropdown
    $(document.body).on(‘change’, ‘#filter’, function () {
    CSWPFilterByField(‘owstaxIdSourceMMD’, $(‘#filter’).val(), ‘contain’));
    });

    function CSWPFilterByField(_fldName, _fldVal, _fldOperator)
    {
    // Loop through Query Groups
    var groups = Srch.ScriptApplicationManager.get_current().queryGroups;

    $.each(groups, function () {
    // Look for query groups associated with a CSWP
    if (this.displays != null && this.displays.length > 0) {
    if (this.displays[0] instanceof Srch.ContentBySearch) {
    // Update and execute query – change length according to specific ToolPart query!!
    if (_fldVal == “All”) {
    var newQuery = this.dataProvider.get_queryTemplate().substring(0, 42);
    }
    else {
    var operator = (_fldOperator == ‘equal’) ? ‘=’ : ‘:’;
    var newQuery = this.dataProvider.get_queryTemplate().substring(0, 42) + _fldName + operator + _fldVal;
    }
    this.dataProvider.set_queryTemplate(newQuery);
    this.dataProvider.issueQuery();
    //Saving value globally for next filtering
    window.option = $(‘#filter’).find(‘option:selected’).val();
    }
    }
    });
    }

    good luck!
    a programmer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s