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.
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.
The result of this should look like this.
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”.
you could change this as well in the view you have a option to change the hero bar in the old bar… so you would not even need JS. 🙂
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 ? 😉
Thanks ! Your post was very useful