TableFilter.JS - Part of a SharePoint Solution

tablefilter.jpeg

What options do you have when you’ve got several lists of data in SharePoint, and wish to present them as a merged, contiguous data set?

THE SCENARIO

Our client had developed several lists of contractor related information on licenses, technical and safety certifications, and medical/vaccination states, all with attached copies of certificates etc. Every time the HR Team needed to check someone's status or current qualifications, they needed to check each of these lists and download the files to desktop or a folder, before they could forward them to prospective clients.

THE REQUIREMENTS

Sharing Minds was approached to assist in developing a SharePoint-based solution to display a single consolidated view of the contractor details, and to allow the selection to be downloaded in a single archive of selected certificate files.

There was also the requirement for a ‘light weight’ solution with few or no libraries to be installed on the server.

OUR OPTIONS

Some of the default options such as a content query web part or search results were not suitable, as apart from 2 fields per list (e.g. ID  and Name) there wasn't a common content type or data structure.  

With no common content types, or other centralising elements that we could use it had become a custom solution, as we did not want to show tuples (i.e. repeated row caused by joining dissimilar lists). 

In a database, we could create a query using unions and joins and flatten it out.  

But we're using SharePoint.  

Using a client-side approach we were able to leverage JavaScript to create a common data structure of nested objects populated by a REST call per list, before pushing the compound list of objects into a table for display. 

Add in the further requirement to sort, search and filter by the many columns imported from the lists, and our first trial was with TableFilter.JS.

TABLEFILTER.JS 

Available from GitHub, well documented with great examples, Max Guglielmi has provided a great framework which takes our humble HTML table and puts a very handy HTML5 spin on it just by pointing it at the table ID.  

Starting out with simple text search on each field (Fig.1) it was able convert selected columns into multiple-checklist, drop down selectors.(Fig.2)

Fig. 1

Fig. 1

Fig. 2

Fig. 2

LIMITATIONS

Now there are caveats here.   

While it can do cascading filters based on selected column, multi-selector cascading filters (think Excel) are still on the feature request list (or we can recommend Chosen.JS if you want program it yourself). There is some limitation to the functionality of the library.  

However, given it is on an MIT license, it's a very generous framework and Mr Guglielmi has a set of commercial extensions available as well.  

So instead of a relatively static table or form which passes filter values back to a second, third etc. REST calls and data refresh, we have a large dataset which we can load, sort, filter and reset quickly and easily

Some of the limitations we encountered were time to load with very large data sets (20K+ items), especially when using Internet Explorer due to its rendering engine and loading dynamic content, as well as the default 5000 item list threshold on REST calls.  

If you’re having similar issues with your SharePoint environment and would like assistance, please contact our Service Delivery Team to arrange for a consultation.

Phone   1300 611 359
Email    info@sharingminds.com.au

Rob Bayly - Sharing Minds

Cheers,

Rob
Rob.Bayly(at)sharingminds.com.au