Get SPELL Cascading Selects 1.1 from my Office 365 site

Cascading Selects EditorAfter the SPELL Tabs two weeks ago, I am now adding a Cascading Selects package to my Office 365 site.

I already mentioned the Cascading Selects back in November. It was initially created for demo purposes, to showcase the capabilities of SPELL Form, a module designed to enhance SharePoint out of the box forms.

In light of recent events (and in particular this update from the Microsoft Office team), I have repackaged it, and I am making a gratis version available to teams and small businesses. If you are interested, fill out the contact form with your company information, and you’ll receive both gratis versions – Tabs and Cascading Selects.

These packages are end user solutions, and come with an “editor view” (cf. screenshot). The full versions are more sophisticated, with tools for power users and front end developers. SPELL works in SharePoint 2007, 2010, 2013, and Office 365 (version 16).

If you are one of the 100 users who already registered their company to get the Tabs, the link to the Cascading Selects should already be in your mailbox!

Quick update: more pocketSOAP testing

RetrieveWebPartsThe other day, someone on twitter made fun of the name I chose for my demo library, pocketSOAP. That’s ok, and I am actually glad that the name matches the intent. As I have already said, pocketSOAP is just a toy to experiment with SharePoint Web Services.

Something else that sounds funny: people sometimes ask me which services are supported by pocketSOAP (see for example the twitter link above), and my answer is… I don’t know. At the end of the first pocketSOAP article, I listed a number of existing libraries that abstract SOAP services. All those libraries follow the same technique and hardcode the service call. pocketSOAP and its parent library SPELL are radically different: instead of having the information hardcoded, they go and fetch it on SharePoint. That explains why the libraries are so lightweight. By the way SPELL is the smartest of the two, and when it learns a new service it memorizes it for next time.

In the past few weeks, I had the opportunity to do more testing based on users’ requests. I confirmed that my libraries worked fine for the following calls:

  • Lists.asmx:
    • GetListItems: retrieves items from SharePoint lists
  • WebPartPages.asmx:
    • GetWebPartProperties2: collects the list of Web Parts present on the page and their properties
    • SaveWebPart2: saves changes made to the properties of a Web Part (e.g. its title)
  • Workflow.asmx:
    • GetTemplatesForItem: collects the list of workflows for a given list
    • StartWorkflow: allows to trigger a workflow

The code for WebPartPages and Workflow is more intricate than what I posted in my previous pocketSOAP articles, so I am not sharing it here. If you have registered to the SPELL interest list, you’ll receive two entry level demos with the August newsletter:

  • a Web Part Page Quick Editor (features the WebPartPages service)
  • a button that triggers workflows (features the Workflow service)

So far so good, all the services I have tested have responded just fine. Now waiting for the next challenge!

More pocketSOAP examples: Pie and Bubble Charts

A couple weeks ago, I introduced pocketSOAP, an experimental JavaScript library that facilitates interactions with SharePoint SOAP services.

Today let me share two more examples built on SOAP and the templating engine, combined with Google Visualization Charts, to render charts from SharePoint lists.

If you have subscribed to the SPELL newsletter, you’ll find pocketSOAP in your mailbox this week. Keep in mind that it is an experimental library, only the full SPELL library is meant for production environments (cf. disclaimer in the previous post).

I am not expecting you to be impressed by the screenshots below. After all, I’ve been publishing client side charting demos in this blog since 2008, and since then many others have followed. The real kicker here is how compact and versatile the code is. Even if you are not interested in client side scripting for a production environment, a tool like SPELL/pocketSOAP could prove really useful in a prototyping phase, and save you many hours of hardcore (re)programming!

Example 1: Pie Chart
PieChart
For this first example, I used the same SharePoint list as in the previous post, with two columns:

  • the default “Title” for the item name
  • “Priority” as a choice field with 3 options (high/medium/low)

The code:

<div id="results"></div>
<script type="text/javascript" src="pocketSOAP.min.js"></script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>

<script type="text/javascript">
// Load the Google charting library
google.load("visualization", "1", {packages:["corechart"]});
// Get items from the Projects list
var promisedItems = pS.soap({
 // Service info
 site:"https://usermanaged.sharepoint.com/TestZone",
 service:"Lists",
 operation:"GetListItems",
 // Service parameters
 listName:"Projects",
 viewFields:"<ViewFields><FieldRef Name='Title' /><FieldRef Name='Priority' /></ViewFields>"
});
pS.when(promisedItems)
.then(function(request){
 // When ready, run the charting function
 google.setOnLoadCallback(function(){drawChart(request);});
});
 function drawChart(request) {
 // The templating engine formats the data string according to Google format
 var dataString=pS.applyTemplate({
 template:'[["Project","Priority"][<|,["|Title|","|Priority|"]|>]]',
 prefix:"ows_",
 data:pS.byTagNS(request.responseXML,"row","z")
 });
 var dataTable = google.visualization.arrayToDataTable(JSON.parse(dataString));

// Group by priority. Priority is the second column (index = 1)
 var data = google.visualization.data.group(dataTable, [1], [{'column': 1, 'type': 'number', 'aggregation': google.visualization.data.count}]);
 var chartOptions = {'title':'Priority','width':400,'height':300,colors:['red','#FFC200','green']}; // #FFC200 is the color code for amber
 var chart = new google.visualization.PieChart(document.getElementById('results'));
 chart.draw(data, chartOptions);
}
</script>

The SOAP call is almost the same as in the previous post. The only difference is that I have explicitly told SharePoint which fields I want to retrieve, via the viewFields option. This is not mandatory but it will reduce the size of the dataset and improve performance.

The use of the templating pattern (pS.applyTemplate) to convert data formats is unusual – as a matter of fact I have never seen this used elsewhere. I am not advertising it as a best practice, and more traditional object manipulation could be used here to the same effect. But I really like how templating makes the code easier to maintain.

Templating is a very popular pattern in modern JavaScript, and can be found in many libraries, like jQuery, mustache, handlebars and others. The SPELL/pocketSOAP flavor might not be as powerful as those big names, but in just 1 kb of code it still has a lot to offer, and – as you would expect – it is well adapted to work with SharePoint Web Services, for both XML and JSON output (to use it with JSON instead of XML, simply replace the [< >] notation with [{ }]).

Example 2: Bubble Chart

BubbleChart

For this second example, I created a SharePoint list with 5 columns:

  • the default “Title” for the product name
  • “Risk” as a choice field with 3 options (low/medium/high)
  • “Cost” and “Revenue” are numbers
  • “Profit” is a calculated column:
    [Profit]=[Revenue]-{Cost]

The code:

<div id="results"></div>
<script type="text/javascript" src="pocketSOAP.min.js"></script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>

<script type="text/javascript">
// Load the Google charting library
google.load("visualization", "1", {packages:["corechart"]});

// Get items from the PMO list
var promisedItems = pS.soap({
 // Service info
 site:"https://usermanaged.sharepoint.com/TestSite",
 service:"Lists",
 operation:"GetListItems",
 // Service parameters
 listName:"PMO"
});

pS.when(promisedItems)
.then(function(request){
 // When ready, run the charting function
 google.setOnLoadCallback(function(){drawChart(request);});
});

function drawChart(request) {
 // The templating engine formats the data string according to Google format
 var dataString=pS.applyTemplate({
 template:'[["Product","Cost","Revenue","Risk","Profit"][<|,["|Title|",|Cost|,|Revenue|,"|Risk|",|Profit|]|>]]',
 prefix:"ows_",
 data:pS.byTagNS(request.responseXML,"row","z"),
 sanitize:function(string){return string.replace(/float;#/,"");}
 });

var dataTable = google.visualization.arrayToDataTable(JSON.parse(dataString));

var chartOptions = {
 title: 'PMO',
 width:500,
 height:400,
 colors:['green','#FFC200','red'], // #FFC200 is the color code for amber
 legend:{position:'top'},
 hAxis:{title: 'Cost',maxValue:100},
 vAxis:{title: 'Revenue',maxValue:100}
 };

var chart = new google.visualization.BubbleChart(document.getElementById('results'));
 chart.draw(dataTable, chartOptions);
}
</script>

Note in the template the difference between text fields (for example “|Title|”) and number fields (for example |Cost|). Also, this time I had to include a sanitize function to remove the weird “float;#” string that SharePoint prepends to calculated columns.

The above code samples could easily be tweaked to work with other client side charting libraries, like Dojo, HighCharts, or [name-your-own]. If you are interested in a demo, leave a comment with the name of your favorite charting tool!

Teaser: pocketSOAP, an ultra lightweight library to interact with SharePoint SOAP services

[6/13/2013] Update: I have changed the terminology, from Future back to Promise, to conform to the living standard.

Disclaimer: the solution presented in this article is part of SPELL, a coaching program offered by User Managed Solutions LLC. Access to the full set of SPELL solutions requires a paid registration. However, the program also includes free evaluation samples like pocketSOAP, all you need to do to get them is show your interest by registering to the SPELL newsletter.

The SPELL newsletter currently has ~180 subscriber companies. The issue featuring pocketSOAP is scheduled for the first half of June.

For years, the SharePoint SOAP services have been a favorite among power users and front end developers. Their popularity is due to an accumulation of factors:

  • They are supported across all SharePoint versions
  • They offer a wide range of features, from simply accessing list items to building sites or managing permissions
  • They work in client side environment, and don’t require server side access.
  • They are well documented, thanks in particular to the work of SharePoint bloggers (cf. references at the end of this post)

Since the SP 2010 release, Microsoft has been embracing more and more the client side, and has pushed additional tools like CSOM, REST (listdata.svc, _api), and client side rendering for list views (JSLink). At the same time SOAP services have been deprecated (but are still supported in SP 2013). Developers are faced with a difficult choice: they’d like to adopt new technologies, but at the same time these technologies don’t offer (yet) the same coverage as the legacy SOAP services. And of course they don’t work in older versions.

The purpose of pocketSOAP is to showcase how I dealt with this dilemma in SPELL. When you want to interact with half a dozen interfaces, as SPELL does, you can’t afford a 100 kb footprint just for one! So here we go, 5 kb of fully functional code, no dependency! The list of pocketSOAP ingredients:

  • SOAP: ~ 1 kb
  • Ajax: ~ 0.4 kb
  • Promises: ~ 1 kb
  • Templating: ~ 1 kb
  • Various helper functions: ~ 1.6 kb

A simple example

Note: pocketSOAP targets developers and assumes that you are comfortable with JavaScript patterns such as ajax, promises and templating. If you are an end user, you might be more interested in user friendly samples like the SPELL Tabs or the SPELL Charts (and of course the SharePoint User Toolkit).

ProjectColorFor my simple example,  I have just created a custom list called “Projects”, with 2 columns:

  •  Title is a text field for the item name (Project 1, Project 2,…)
  •  Status is a choice field for the item status: green, yellow or red.

Expected result (cf. screenshot): color coded indicators that displays the health of each project.

The code (pS is the shorthand for pocketSOAP):

var promisedItems = pS.soap({
 // Service info
 site:"https://usermanaged.sharepoint.com/TestSite",
 service:"Lists",
 operation:"GetListItems",
 // Service parameters
 listName:"Projects"
});

pS.when(promisedItems).then(function(request){
 // Apply template
 document.getElementById("results").innerHTML=pS.applyHTMLTemplate({
 template:"<table>[<|<tr><td><div style='width:12px;height:12px;background-color:|Status|;'>&nbsp;</div></td><td>|Title|</td></tr>|>]</table>",
 prefix:"ows_",
 data:pS.byTagNS(request.responseXML,"row","z")
 });
});

How the code works:

  • pS.soap() handles the SOAP request (ajax). It needs two sets of options: information about the service itself (in our case Lists/GetListItems) and parameters specific to the call (in the case of GetListItems: the list name, and maybe specific filtering options and a shortlist of the fields to retrieve).
  • pS.when().then() is a promises pattern. It ensures that the SOAP request is completed before we move to the next step.
  • pS.applyHTMLTemplate() runs the templating engine, in this specific example to output a html string. In the template expression, [< >] means that we are dealing with a collection of nodes. If we were using the new REST interface and retrieving JSON, we would simply use  [{ }] instead of [< >].
  • the prefix ows_ is just here to address an oddity with SharePoint Web services, where “ows_” is prepended to each field name. So for example to get the Title field, you need to retrieve the attribute called ows_Title.
  • the data is the result of ajax xmlHttpRequest. If you are familiar with the SOAP service GetListItems, you know that each item is returned as a namespaced “z:row” node.

How many SOAP services does pocketSOAP support?

I don’t know. So far I have only tested it for half a dozen services representative of my scenarios (90% of real life use cases are about getting or updating list items). I plan to document this as I and the SPELL followers continue testing more services.

Can I use SPELL/pocketSOAP to aggregate values from multiple lists?

Yes. Thanks to the promises pattern, the script can collect data from multiple lists in parallel, then trigger the rendering when all the items have been collected. The pocketSOAP documentation will include such an example.

Note however that for a large number of lists, client side code might not be the best approach and you’ll want to consider other techniques.

How do I make a synchronous call?

You can’t, this option has been removed from SPELL last year. The choice is to embrace a modern JavaScript approach where remote calls are asynchronous (the first “a” in ajax), and dependencies are managed via promises: when(this is completed).then(do that).

In SPELL, not only ajax calls, but also script loading, iframe loading, document ready, and some other operations are treated as promises.

Did I go too far with pocketSOAP?

The answer is… yes! If you play with pocketSOAP, keep in mind that it is a laboratory rat. The SPELL library – the production version – offers much better balance between the load effort  and efficiency at runtime.

How is SPELL different from pocketSOAP?

1/ SPELL is for production, while pocketSOAP is an experiment. For example error handling has been reduced to a minimum in pocketSOAP.

2/ SPELL supports half a dozen interfaces, SOAP just being one of them. Apart from SOAP ($P.soap), it also relies on the RPC method ($P.rpc), the REST services ($P.listdata and $P._api), etc.

3/ SPELL offers not only core features aimed at developers, but also end user solutions like the SPELL Tabs and mini-BI.

How come SOAP has never been mentioned before on Path to SharePoint?

Until recently, I have always considered that SOAP was a heavy solution and should only be used in large scale implementations, or when everything else fails. For  the samples showcased in this blog and in the SharePoint User Toolkit, my preference went to the RPC method, a more straightforward and end user friendly approach.

However when I started building SPELL two years ago, SOAP was an essential building block in a projet of that size. The decision to include SOAP was even easier after I reduced the code size to just a couple kb!

References

The official Microsoft reference for SharePoint 2013 Web services can be found here.

The first to publish a JavaScript library to wrap SOAP services was Darren Johnstone in 2008. His original site doesn’t seem to exist anymore, to get the files try an internet search for “SPAPI”.

SharePoint superstar Jan Tielens published in 2009 a series of posts to showcase the use of SOAP services in conjunction with jQuery.

That same year, Marc Anderson released SPServices. This remains to date the most useful and comprehensive resource on the subject. When people look for documentation on the SOAP services, I usually point them to Marc’s Codeplex site rather than the official Microsoft documentation.

SOAP services are also a favorite of Alexander Bautz, and he uses them in some of his published work.

Alexander’s blog drove me to another library called SharePointPlus, developed by DELL employee Aymeric Kodono and released under a GPL v2 license.

There are certainly others I am not aware of. For example I haven’t tested this framework that seems to deal with the SOAP services (and btw is not maintained anymore). If you have more information feel free to post it in the comments!

Two new projects: SPrest and SPELL

I have developed a sudden interest for Codeplex, Microsoft’s open source project hosting web site.

It started last week with a post on Marc Anderson’ blog, about JSON, REST, and his infamous SPServices. In a follow up conversation, Marc pointed me to the related discussion on Codeplex. In less than 48 hours, I registered to Codeplex, posted a dozen comments, began following two existing projects, and started two projects myself.

The discussion on SPServices and JSON led me to take a closer look at the jQuery documentation, and discover several features that came with version 1.5. We’ll see how it goes, but the use of “converters” looks promising and should make Marc’s library even more powerful.

As for the two new projects, I’ll post more information as I progress, for now here is a short description.

SPrest

The purpose of SPrest is to abstract the SharePoint 2010 REST services, the same way Marc abstracted Web Services. I had long been thinking about adapting Marc’s library to REST, so this Codeplex discussion was an opportunity to get started. After a long conversation with Marc, our conclusion was that including REST into the existing SPServices didn’t bring much value, so I chose to branch out and create a dedicated project called SPrest.

To be honest, it is not clear whether such a project has real value. REST is more straightforward than Web Services, as demonstrated for example in this article by Jan Tielens. Well, we’ll see…

SPELL

SPELL stands for SharePoint Progressive Enhancement Lightweight Library (just keep in mind I did all of this in less than 48 hours…). Its purpose it to put together some utility functions I often reuse in my customizations, for example identifying the Web Parts present in a page. I’ll explain what I mean by “progressive enhancement” in a future article (it was the main theme of my presentation at the San Diego SharePoint User Group meeting in March).

Here is what I have so far for the SPrest library (questions and feedback welcome, as usual):

<script type="text/javascript">
(function($){

$.extend({

SPrest:{

listData:function(options){

var CRUDtype={"Create":"POST","Read":"GET","Update":"POST","Delete":"DELETE"};
var CRUDheader={"Create":"PUT","Update":"MERGE","Delete":"DELETE"};

// Note: Default settings can be set globally by using the $.ajaxSetup() function.
// Note: simple handling of options for this first draft

$.ajax({
         type: CRUDtype[options.type],
         headers:(options.action=="Read")?{}:{'X-HTTP-Method-Override':CRUDheader[options.action]}, // Header for POST operations (Create, Update, Delete)
         url: options.site+"/_vti_bin/listdata.svc/"+options.listName+"?"+options.query,  // Note: escaping is currently missing in the url
         cache:false,
         dataType:"json",
         error:options.error,
         success:options.success
       });

}  // End ListData

}  // End SPrest

}) // End extend

})(jQuery);
</script>

An example, return the content of the Site Assets library in the Lab site:

<script type="text/javascript">
 $.SPrest.listData ({
site:"/Lab",
listName:"SiteAssets",
success: function(data, textStatus, jqXHR){ alert(jqXHR.responseText);},
error: function(){ alert("error");}
});
</script>