Hide toolbar of XsltListViewWebPart in Sharepoint Online using client side rendering

When you add OTB XsltListView web part on the page by default it shos toolbar over the list content:

Of course you may remove this toolbar manually by going to web part properties and setting Toolbar Type to “No toolbar”. But what to do if we need to set it automatically during provisioning without manual work?

If you worked with XslListViewWebPart in Sharepoint 2010 then you probably know that even with server object model it is possible to remove toolbar only using reflection, e.g. like shown here:

   1: try

   2: {

   3:   MethodInfo ensureViewMethod = lvwp.GetType().GetMethod("EnsureView",

   4:         BindingFlags.Instance | BindingFlags.NonPublic);

   5:   object[] ensureViewParams = { };

   6:   ensureViewMethod.Invoke(lvwp, ensureViewParams);

   7:   FieldInfo viewFieldInfo = lvwp.GetType().GetField("view",

   8:     BindingFlags.NonPublic | BindingFlags.Instance);

   9:   SPView view = viewFieldInfo.GetValue(lvwp) as SPView;

  10:   Type[] toolbarMethodParamTypes = { Type.GetType("System.String") };

  11:   MethodInfo setToolbarTypeMethod = view.GetType().GetMethod("SetToolbarType",

  12:     BindingFlags.Instance | BindingFlags.NonPublic, null, toolbarMethodParamTypes, null);

  13:   object[] setToolbarParam = { "None" }; //set the type here

  14:   setToolbarTypeMethod.Invoke(view, setToolbarParam);

  15:   view.Update();

  16: }

  17: catch { }

But how to do the same in Sharepoint Online where we don’t even have server object model (not even mention reflection)? People on the forums tried to do it via client side object model (CSOM), but without luck, because setting View.Toolbar property to <Toolbar Type='None'/> is ignored: see Hiding the toolbar of a Listview webpart through CSOM.

Fortunately in Sharepoint 2013 there is another powerful mechanism which can be used for hiding toolbar of XsltListViewWebPart: client side rendering. Of course it can be used for other purposes as well, but in this article we will use it for hiding toolbar.

First of all we need to define template override in separate js file and upload this file to the Sharepoint doclib:

   1: (function () {

   2:     var overrideCtx = {};

   3:     overrideCtx.Templates = {};

   4:  

   5:     overrideCtx.BaseViewID = 1;

   6:     overrideCtx.ListTemplateType = 100;

   7:     overrideCtx.OnPostRender = postRenderHandler;

   8:  

   9:     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

  10: })();

  11:  

  12: function postRenderHandler(ctx) {

  13:     jQuery("td.ms-list-addnew").hide();

  14: }

After that we need to set JSLink property of web part pointing to this file. E.g if our file is uploaded to Site assets link will be the following;

   1: <property name='JSLink' type='string'>~site/Site assets/crs-list-view.js</property>

In example above we defined override template with custom post render handler. In the handler we hide DOM element which contains toolbar. After that XsltListViewWebPart will look like this:

Hope that this information will help you.