SPScriptlets is a new category in my blog. Within the age of cloud computing it’s more and more important to consider using standardized APIs and frameworks. For any SharePoint developer this means using proven SharePoint APIs like

When I was thinking about this series, I remembered a phone call with Jan Welker, where he told us, that he had most visitors on dotnet-forum.de on a page describing how to read the text from a textbox. If I’m right, the site was leading form many months. So it seems to be important for many readers or visitors to get started with all these new technologies, APIs and frameworks. This experience let me reschedule the series. I’ll start with easy samples and go on to more advanced samples later in the series. So it’s a good plan to revisit this blog continuously no matter if you’re already familiar with all the client APIs for SharePoint or not. That’s the story, let’s move on to SPScriptlet 1  

SPScriptlet 1

This SPScriptlet is targeting SharePoint CSOM in the JavaScript flavor. And I’ll show the real basics.Consider the following HMTL structure

<div class="allListsFromCurrentSite">
    <p id="message">Working on it ...</p>

I’ll go through reading all lists from the current SharePoint web and writing it directly into the corresponding div container. When you’re doing SharePoint App development SP.JS (ClientSideObjectModel  for JavaScript) will be loaded automatically, to ensure that your code runs at the right time on the client, the CSOM offers some ScriptsOnDemand functionality, which is wrapped into SP.SOD, Christian did a great post on SP.SOD a few yrs ago (http://www.ilovesharepoint.com/2010/08/sharepoint-scripts-on-demand-spsod.html). So with this background knowledge, we’re nesting our code within the onSharePointReady function, which will be called by SharePoints JS engine when the JavaScript CSOM has been loaded successfully.

    SP.SOD.executeFunc('sp.js', 'SP.ClientContext',
      function() { onSharePointReady(); });

      var onSharePointReady = function(){
          var ctx = SP.ClientContext.get_current();
          var lists = ctx.get_web().get_lists();
          ctx.load(lists, "Include(Title)");
          ctx.executeQueryAsync(function (){
            var domTarget = $(".allListsFromCurrentSite");
            var listsEnumerator = lists.getEnumerator();
            while (listsEnumerator.moveNext()) {
              var list = listsEnumerator.get_current();
              $("<div>"+list.get_title() + "</div>").appendTo(domTarget);
          }. onRequestFailed);

      var onRequestFailed = function(sender, args) {
        var errorMessage = "SP request failed with " + args.get_message();
        console? console.log(errorMessage): alert(errorMessage);

There are two main concepts used within this SPScriptlet, first Query batching and second Request trimming

Query batching occurs when you’re interacting with client-side objects from SharePoint. it’s not possible to access any property from a SharePoint object on the client until you’ve explicitly asked SharePoint for it. Objects you’re interested in, need to be staged by calling ClientContext.load() and pass them as argument. After calling ClientContext.executeQueryAsync, you may only access the SharePoint objects you’ve asked for. In our example we’ve asked for the ListCollection, so we’re able to work with this instance, on the other side it Web (where all lists within the ListCollection belong to, isn’t loaded and may not be used). If you’re also interested in information about the Web, you need to add

var web = ctx.get_web();

Before calling executeQueryAsync. Then you may also use the web instance within the callback. Request trimming occurs in our example when the ListCollection is passed to the load method. In order to reduce the amount of data and to take care of the server load, you should only ask for those properties you’re really interested in. Right here we’re simply putting all list names on the screen, so we only care about the Title property from each list.