Wednesday, August 30, 2017

office/Future Proof Javascript



When developing rich client experiences for SharePoint many times there are strong restrictions on deploying server side code to support aggregating data for analysis.  This example shows how to use several javascript client side libraries to solve a common need to graphically visualize data stored in SharePoint lists.  For example, if you want to show a pie chart of workflow tasks by their approval status.  This code sample implements the Client Object Model, JQuery, Knockout JS, and Highcharts to accomplish that goal although Knockout is not required but simply used to illustrated the level of highly complex applications you can build inside SharePoint.  Originally this demo was done as an example of how to future proof applications in a talk given by Bob German at several SharePoint events around the country. 

Building the Sample

The included solution is a Sandbox solution built in VS2012 that deploys the client side script files to the Styles Library.  This sample relies on a IT Requests list populated with data.  Two list templates have been included in the root of the code source zip file "RequestsList_Data.stp" and "RequestsList_NoData.stp", obviously one is pre-populated with data and the other isn't.  If you decide to use the template with data you will need to spend time cleaning up the Assigned To field or the code will fail.  Basically all the blank items will need to be set to blank or set to a value. 

1. Deploy the Dashboard Demo solution to a SharePoint site.

2. Upload the list template of your choice and create a list from it, call that list Requests (so that the list URL is ~sitecollection/lists/Request) and then change the list title to "IT Requests".

3. Create a Page in the Site Pages library (or a Page in the Page library) and insert a Content Editor webpart. NOTE: the DBDemo.html file is configured to be referenced from a page in the root of the site collection.  If you're going to put it somewhere other than the root site collection you will need to modify the file.

4. Set the source of that webpart to the DBDemo.html file in the Style Library.


This solution includes several files that will be deployed to the StyleLibrary.  When the DBDemo.html file is added to a page via a Content Editor WebPart it will resolve to the dashboard shown below assuming you have correctly set up the sample as outlined above.

Source Code Files

  • DBDemo.html - HTML source file that should be references in a Content Editor WebPart.
  • DBDemoStyles.css - CSS file to style the page.
  • RefreshButton.png - Image file
  • funnel.js - An additional .js library from Highcharts to provide a funnel chart.
  • highcharts.js - The base .js library from Highcharts for displaying charts.
  • jquery-1.9.1.min.js - Minified Jquery library.
  • jquery.cookie.js - JQuery library for providing cookie support.
  • knockout-2.2.1.js -Knockout's MVVM framework library.

More Information

For more information on JQuery please see

For more information on KockoutJS please see

For more information on Highcharts please see

Other Future Proof Code Postings:

No comments:

Post a Comment