jQuery: Cool Filters for SharePoint List


Overview

Sorry for not posting anything for almost a year. So many good ideas died inside my brain and thought now I should again start posting something (good or bad). This time I came up with enhance filter to achieve multi-level filtering of a SharePoint List View web part. Although the default list view comes up with a search box that is very handy the only limitation being that you can do filtering only at one level. The default search box can look at multiple columns but only one search at a time.

Our Custom jQuery filter – some screen shot.

This is what I have come up with, although it needs more work to make it more dynamic…the current version does the basic job of multilevel filtering.

Below is the screen capture of the filter user interface. Much of the credit goes to jQuery-Chosen plugin to make it look so awesome. Thanks a lot Patrick Filler and Team for coming up with this wonderful plugin.

Alright enough of show-off for now, let me dig onto the code and other details.

Solution Files

This solution consists for 5-files. 4 of them related with jQuery:Choosen plugin and 1 for my poor script J

  1. css/choosen.css
  2. css/prism.css
  3. js/prism.js
  4. js/choosen.jquery.min.js
  5. filter-UI.html : Contains the filtering logic and reference to all the above file.

All the source files could be downloaded from GitHub – SudhirKe à splist-filter repository.

Definitely we will need to have reference for jQuery library, I think by this time all browsers should decide to load jQuery for every page I am so much in love with this.

Script References:

First step is to upload the source file onto Site Assets (or any other library) and add the references to CSS and JS files.

HTML Code

HTML Code for filter is very easy, you just add drop down with filter options and another button for clearing the filters.

TODO: A much nicer version would be to pull all the available values based on the list columns, however that will require some more configuration on to the drop downs J

jQuery Script – The Magic

Filter Function

With SharePoint 2013 list views, every data row has a class called .ms-itemhover, this makes our job very easy since we can just look for the selected value in every row and hide everything else.

Here is how my generic filter function looks like, notice that I am passing the value to my hide and show functions, this will hide the rows really slow and makes it look fancy.

Drop down Modification and filtering the records

In this code I am converting my simple drop downs onto more fancy choosen drop down and handling the change event for them. Notice that I am just calling the filter function to do the magic. Same code exists for my other filter drop down.

Reset the filters

Last part of this code is to clear all the filters. This will also clear the previous values from the drop down and show all rows (.ms-itemhover).

Source Code:

Here is all the source code together for reference, same could be downloaded from the link given in solution files.

Putting the code on your SharePoint:

This is the easiest part of all the scripting, below are the steps for you (kind of checklist).

  1. Download all the codes from GitHub – SudhirKe à splist-filter repository.
  2. Upload all the files to Site Assets (or any other library) in your SharePoint site.
  3. Add a list view web part onto your page (or use a page where it is already added).
  4. Edit the page and add a content editor web part.
  5. Update content editor web part and change the source link to point to filter-ui.html (e.g. http://yoursp/sites/yoursite/SiteAssets/filter-ui.html

If everything is done correctly here is how your filter page should look like ( I have added the generic Task list for this example).

Selecting Priority “High” should filter the rows for me.

Further selecting Status “In Progress” will hide the other rows and display only one row.

Clicking on “Reset Filters” button will make all the rows visible again.

Hope this helps someone in need. Feel free to leave comments on this blog. Once again many thanks to jQuery Chosen plugin mastermind Patrick Filler and team.

jQuery How To: Hide rows in SharePoint 2007 List View Grouped web part


I had been looking for a script to hide all the rows in a SharePoint 2007 Grouped list view web part, today I had the opportunity to come up with my own and thought of sharing it with you all. A Grouped list view makes it bit tricky to hide all rows since the resulting HTML contains group header and the structure is very difficult to read.

As always the first step is to read the HTML script, thank fully we have Developer Tools and I simply love it.

To keep this blog short and simple I will not get onto details of pre-requisites and add my script but here is a rough idea

  • Make sure to have everything required for jQuery (Content Editor etc.)
  • Create a SharePoint List (or use existing), create a view that is grouping the rows based on one column.
  • Add a list view web part on the home page (or web part page)
  • Make sure to use a grouped view to display in the list view web part.

Here is how the HTML is organized in case of grouped list view, I just took the screen capture from my developers tool:-

<Div> element represents the area where list view web part is loaded, under that you will find that the Group Header row and data row is organized using <tbody> element. Also note that list view header row is also rendered using the <tbody> element, we would like to keep the header rows intact while hiding everything else beneath it.

You will notice that except for the header row every <tbody> contains and ID that is bit dynamic (the number changes depending on the number of groups) .

Below is the jQuery script that could result in hiding every details row (including group header) and keep the list view header row.

Sorry for keeping this as image but here is the code for you to copy J ( I am not sure if formatting will be right but the code is correct J).

Note: Please ensure to change the web part ID in the below code to run, look for the div element and replace the id.

<script
type=”text/javascript”>

$(‘document’).ready(function(){

    //Loop through all the <tbody id=””> element that contains an ID attribute

    /*Note: The header tbody does not have ID attribute*/

    $(“div#WebPartWPQ11”).find(“tbody[id]”).each(function(){

    

        //Loop through all the TR element under the tbody

        $(this).children(‘tr’).each(function(){    

        

                    //Hide this table row

                    $(this).hide();

                });        

    });

});

</script>

 

Once again, sorry for keeping a running blog rather than the detailed one, but I just wanted to share this quickly with you all, hope this will help someone in need, feel free to comment or reach out to me.

Sudhir Kesharwani