Article
3 comments

Hide toolbar / hero button in list view web part using JSLink

To hide the tool part of a web part is pretty easy. You just need to edit the settings and set them to “No Toolbar” and you are done.
Today I needed to do this programmatically. After I debugged the list view web part an haven’t found a setting for this I took a look into the “clienttemplates.js”, which is mostly responsible to render the views correctly and voila I found a solution how to hide the toolbar.

 ## Toolbar vs. Hero Buttons
SharePoint 2013 still supports the classical list view toolbars but whenever you see the “New Document or Edit” then you will see the hero button. So why is this important? If you like to change the behaviour of a list view the hero button needs to be enabled.

Hero Button in Office 365 containing New, upload, sync, edit, share

Hero Button in Office 365 containing New, upload, sync, edit, share

Hero button in on premise containing "New Document or drag files her"

Hero button in on premise containing “New Document or drag files her”

Just as most of the new things this cannot be done with server side code. This needs to be done during the client rendering and after a while try to manipulate the toolbars I gave up and focused on the file called “clienttemplates.js”. This is the main file that handles how the views will be rendered.

Override for enabling / disabling the hero buttons

The JSLink that allows to manipulate the display of the hero button is pretty simple. All that needs to be done is to manipulate the render context object. The following script contains all that is needed.

// Smuggle in the DisableHeroButton
//      true  - disables the button
//    false - enable the button
function hideToolbar(renderCtx) {
    renderCtx.DisableHeroButton = true;
}

(function () {
    var overrideContext = {};
    overrideContext.Templates = {};
    // called the view get rendered
    overrideContext.OnPreRender = hideToolbar;
    // Bind it to document library
    overrideContext.ListTemplateType = 101;
    
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);

})();

Save to code to a new javascript file and you are ready to go. In my case I called this JavaScript file “HideHeroButton.js”. The I uploaded it to the style library or wherever you like to store your JSLink files and add it to a list view web part.

Add JSLink to list view web part

Add JSLink to list view web part

The result of this should look like this.

Document library with hidden hero button

Document library with hidden hero button

Final thought

The strange thing about the hero button is that this cannot be set via the web part settings, while the view setting and the search box can be configured directly. Another thing that is strange that those configuration option not show up when the view previously was set to “Server Render”.

3 Comments

    • You can set the toolbar manually on the web part – yes. The old code how to set the toolbar with the dirty Invoke method doesn’t work anymore in SharePoint 2013. I tried it in multiple ways but haven’t found out what actually sets this property other than use a JSLink override. This method I provided here is specially suitable if you add the web part programmatically.
      I also checked the web part properties of two manually configured web parts and beside the toolbar values there is no difference on the configuration. It seems that SharePoint does some magic in the background to render the context correctly. Microsoft might have tested this using the manual approach. A public method to set the hero button property is missing.
      It might be the case that I’ve overlooked something to you have a better method to do this ? 😉

      Reply

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.