SPWidgets v2.1 – What’s New – New Widget, Revamped Demo

SPWidgets version 2.1 is now available and brings with it a variety of enhancements, a new widget and a revamped showcase demo page. I continue to take re-usable pieces of functionality and converting them to robust widgets that can be configured to accommodate different needs. The project is hosted on Github – purtuga.github.io/SPWidgets

New Widget – Filter Panel

In the projects I have been involved with I often have the need to collect data from the user that is in turn used for retrieving and displaying data from a List. The most recent need for this combined the user’s input for filtering with the Board widget to display the results. I have created different approaches for collecting user information across multiple projects and figured it is about time I package it up as a reusable widget.


The Filter Panel (SPFilterPanel) provides a configurable way to display a set of list columns for the user to input criteria. The widget supports several SharePoint columns types, including PEOPLE, CHOICE and LOOKUP – some of which are presented using the people picker and lookup field widgets. The user is able to input multiple keywords per column as well as defining the type of match to use (i.e. Contains, Equal. Not Equal, etc).

User Filter Criteria

Retrieval of the filtering criteria is done one two ways:

  1. Defining a callback – which is called when the filtering button is clicked
  2. Through the widget API by calling the getFilter method.

The widget captures the user input in a javascript Object which includes each column that the user defined along with the set of keywords entered. The Object also includes a representation of each column’s filter values as both CAML and URL encoded strings.

The generated CAML strings provided use the following rules:

  1. Each column criteria is wrapped in an OR conditional aggregate.
  2. All columns are wrapped in an AND conditional aggregate.

Example of a Filter object from user input:



Usage of this widget is simple. You call SPFilterPanel on the HTML element where the panel should be displayed and define, at a minimum, the List from where the filter should be built:

    list: "Tasks",
    columns: [
        'Title', 'Status', 'AssignedTo', 'Predecessors'
    onFilterClick: function(filters){

        alert("Number of filters entered by the user: " + filters.count);


The result will be a panel similar to the in the image above. Documentation on this new widget can be found here. It is also available in the Demo Showcase.

Demo Showcase as a Single Page Application (SPA)

The demo webpart has also been revamped and completely refactored. It is now provided as a SPA with no external dependencies. Simply copy/upload the .aspx page to a SharePoint Document Library and you are all set to go. Each widget will prompt the user for a List to use during the demonstration.

NOTE: The Upload and Board widgets will make change to the selected List/Document Library (upload document, update of list item column used for board).


Instructions on its usage can be found here: https://github.com/purtuga/SPWidgets/blob/v2.1/demo/demo.about.md .

Enhancements and Other Changes

The following enhancements have also been done to existing widgets:

People Picker Widget

  • New input options to intercept when user picks a person or removes a person
  • New events are triggered up DOM for when the user adds or removes a person
  • New method for removing people from the selection list
  • New Method for add people to the selection list

More information about these enhancements can be found in the documentation page, here.

Board Widget

  • New Column picker – Ability to select how many column are visible at one time
  • New event triggered when column displayed change
  • New input option to pre-specifing which columns should be initially visible
  • Bug fixes and performance improvements

More information about these changes can be found in the documentation page, here.


SPWidgets v2.1: https://github.com/purtuga/SPWidgets/tree/v2.1/plugin

Demo: https://github.com/purtuga/SPWidgets/tree/master/demo

So what’s next?

I still have a few items I want to turn into widgets with the ultimate goal being able to create custom UI’s that fully support CRUD on any list item and any type of SharePoint column. I’ve also been meaning to create a package builder, so that one does not have to download the entire library of widgets if only interested in one or a few.



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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s