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

Share this: Twitter

Facebook

LinkedIn

Email

More

Print

Reddit





Like this: Like Loading...