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.

MCPD – SharePoint 2010 Application Development


Added MCPD – SharePoint 2010 Application development to my pool of certifications…

jQuery : SharePoint Contact Card Web Part


Overview

I am back with another jQuery MagicJ. Whenever I was browsing through any social networking site I used to love those beautiful Contact List or Friends list. It was somewhere in the back of my mind to build something like this for our friend SharePoint. Today I got the opportunity to build some fancy (or not so fancy) contact card based on jQuery and SharePoint web services.

The best part of SharePoint is that gives you all the basic infrastructure for your day to day data requirements like Contact List, Task List, Calendar list and so on and once we have place to store such data jQuery gives you the power to read it and present it in the desired format.

Here also I tried something like that and came up with this solution for display contact list data in the card format.

Download the Code

Please download the source code and required files from : SudhirKe.jqContactCard.Source.zip in case the google docs link does not work you can download the code from my GitHub repository.

 

Prerequisites…

Default contact list from SharePoint. This solution also requires following files:-

– jQuery 1.4.3 [Note: jQuery1.5 is not compatible with SPServices yet.]

– jQuery UI 1.5.9

– jQuery SPServices

– jQuery UI Theme (I have used ui-lightness)

Apart from this I have developed following files:-

– jContactCard.css

– jContactCard.js

If you want to display the person image you can add a image field and get it link to your contact pictures. Other way is to read it from MySite, I have implemented a very basic solution and displayed the default image from SharePoint “/_layouts/images/no_pic.gif” with each contact.

See it in Action…

Here is the screen shot of the web part. Moving the mouse over a contact card highlights the contact card (thanks to jQuery UI J)

The Solution

I am really sorry for pasting the code as images, but it was getting formatted really badly by WordPress. Anyways I have given the link to download the code.

CSS File

CSS code is pretty simple, it just tells to format the contact card details and images etc.

jQuery Code

It’s very simple like my previous posts. I am using the SPServices solution from CodePlex to read data from SharePoint contact list. Very thanks to Marc D Anderson. Marc you have made huge differences to the life of jQuery and SharePoint and jQuery SharePoint lovers like us.

So the jQuery code is very oblivious, I am calling SharePoint lists web services using SPServices. I have called “processResult” method in the end to parse and format the return values. Below is the code to call the web service:-

Note: The below code can be found in the jContactCard.js file in the code.

My processResult method looks something like below:-

HTML Code

The required HTML script is really simple, the magical part is already taken care by jQuery all your html needs is a div element with “result” as id. Of course you need to add reference to the required JavaScript and CSS files.

Below is the HTML code.

Note: Please make sure to update the references of the JavaScript and CSS files when you upload it onto SharePoint document library.

Deployment

– Upload all the JS and CSS file along with the HTML file onto SharePoint document library.

– Add a content editor web part and add link of the myjQuery.html file in the Content Link property.

– Below is the folder structure.

– JS folder contains required all the JavaScript files.

– CSS folder structure looks something similar to image below.

Hope this helps someone in need. Comments/Suggestions welcomed J

Sorting table using jQuery


Recently I worked for a requirement with my collegue Ankur Chourasia on consolidating the information from the sub sites and displaying it on the main site using Content Query Web Part.  I consider that as the first part of this post.  Please make sure to go through “A Little More about Content Query Web Part“. The consolidation and additional column displaying part is done by Ankur Chourasia and he did it fantastically. I will surely encourage him to add that onto his blog site.
There was another interesting requirement where in the user wanted the table data to be sorted. Just like we do in any other SharePoint lists, again my love jQuery came onto picture and we could achieve the sorting table functionality.

I found it worth putting down on paper and sharing. Comments welcome J

JQuery Library

The basic requirement to jQuerify any solution is the jQuery library. All we need to do is add a script tag that points to jQuery JavaScript file. For our solution we have downloaded the script file from jQuery Download page. We have uploaded the solution onto a document library the alternative way to enable jQuery is refer the file directly from Google Code CDN. The second way is definitely bit slowly since it has to load jQuery file from remote location.

Table Sorter Plug-in

The beauty of jQuery is the extensibility. We get plug-in written for almost every business problem, I was lucky here too many thanks to the simplest table sorter plug in by Christian Bach. I downloaded the JavaScript file and uploaded it onto the shared document. I also downloaded the StyleSheet to format my table from http://tablesorter.com/themes/blue/blue.zip.

Here is the final structure of my files.

Shared Documents

è CSS

o Style.css

o Other gif files

è JS

o jquery.min.js

o jquery.tablesorter.min.js

è tablesort.html (this contains the jquery code)

JQuery Code

The jQuery code is pretty easy for this. Add the reference to jQuery library and Table Sorter javascript file along with stylesheet (style.css). in the jQuery code call tablesorter() method for all the “table” tags. This is it. Following is the code snippet. I have kept this code in tablesort.html file.

HTML Code

The table sorter plug in looks out for all the <table> tag which contains the “class=tablesorter” attribute. Other requirement is that the table columns should be inside the <thead> element and table body should be inside the <tbody> element. For e.g.

ItemStyle.xsl template modification

Here is the modified template in the ItemStyle.xsl file to achieve the required html output. Notice the class attribute of <table> element the <thead> and <tbody> elements.

Enabling sorting on the CQWP tables

– Upload the modified ItemStyle.xsl file onto Style Library.

– Make sure that required JavaScript files and html file are uploaded on the SharePoint document library.

– Navigate to the page where you have added the Content Query Web Part.

– Add a Content Editor Web Part. Edit the web part and set the Content Link property to URL of “TableSort.html” file in the Shared Documents library (e.g yoursitedocumentstableSort.html).

Tip: You can keep this content editor web part as hidden, the jquery code to enable sorting will still work.

– This will make the column heading clickable. Clicking on the column heading will sort the rows of the table.

End Note

I hope this helps some one in need. I sincerely like to thank Ankur Chourasia and Christian Bach

Adding “Recent Blog Post” web part programatically


This is a very basic post.  I really couldn’t find any post that could tell me how to add “Recent Blog Posts” web part using object modal.

The “Recent Blog Posts” web part is added by default on the SharePoint 2010 My Sites.  I was just wondering if we can add that using the SharePoint Object Modal.

I found out that adding a recent blog posts web part is really simple:-

// Get the web part collection
SPLimitedWebPartManager wpManager = web.GetLimitedWebPartManager(“default.aspx”, PersonalizationScope.Shared);

Microsoft.SharePoint.Portal.WebControls.BlogView wpBlogView = new BlogView();
/*This Is very important.  Make sure To Link To the xsl file*/
wpBlogView.XslLink = “blog.xsl”;
wpBlogView.Title = “Recent Blog Posts”;

wpManager.AddWebPart(wpBlogView, “WebPartZone”, 0);

Hope this helps some one in need 🙂 

Regards,

Sudhir