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.

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”.