Monday, June 10, 2013

Examining the SharePoint 2013 JSLink Context Object and it's Properties

With the new JSLink property available on web parts in SharePoint 2013 you can control how the part is rendered using JavaScript.  This is a great tool but documentation as of this blog post is pretty much nil.  However, we can easily inspect the context object JSLink uses with a simple 'debugger' line in our code.

Take the following JavaScript:

(function () {
    /*
     * Initialize the variable that store the overrides objects.
     */
    var overrideCtx = {};
    overrideCtx.Templates = {};

    //This template is assigned to the CustomItem function.
   overrideCtx.Templates.Item = CustomItem;
   overrideCtx.BaseViewID = 1;
   overrideCtx.ListTemplateType = 100;

    //Register the template overrides.
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function CustomItem(ctx) {
      //Build a listitem entry for every announcement in the list.
      debugger;
      var ret = SOME CUSTOM JS HERE;     
      return ret;
}

This looks like many of the JSLink examples on the web today, but you can see in my CustomItem function I've placed a 'debugger' line.  Running this in Firefox with Firebug enabled, the debugger line will hit and let us take a look at the "ctx" context object that is being passed in.

This object is quite large as this screen capture shows (full size image to easily view all properties):


As you can see, the context object acts pretty much like an SPList object with a lot of the same properties (full size image to easily view all properties).  The CurrentItem object acts like an SPListItem object.

Enjoy!

1 comment: