Hide 'Export To Excel' Button From List Ribbon Using JavaScript In SharePoint 2013

Introduction

Sometimes you create a List/Document Library using Visual Studio and you need to hide ‘Export to Excel’ button from Ribbon. You do not want to do it using SharePoint Designer because you have to do it manually in all the environments. Using this JavaScript approach hide this button from Ribbon.

Implementation

We are going to customize the List View using JavaScript.

1. Add a JavaScript file in your solution.
2. Modify schema.xml of the List and add the reference of JavaScript file to the <JSLink> tag.

Get Started:

• Create a SharePoint –hosted ‘Apps for SharePoint 2013’ project using Visual Studio 2012/2013.
  
  
• Add a List ‘TestList’ to your solution.
  
  
• Add a JavaScript file ‘HideExportToExcel.js’ to the Scripts folder.
  
  
  
  
• Add the following code to the JavaScript file.
  
  1. var nIntervId;
  3. // DOM is ready
  4. (function () {
  5. var e = ExecuteOrDelayUntilScriptLoaded(
  6. CallHide,
  7. "sp.js");
  8. })();
  10. //Call this function on click of 'LIST' until Export to Excel link is hidden
  11. function CallHide() {
  12. document.addEventListener('click', function (evt) {
  13. if (evt.target.textContent == "List") {
  14. nIntervId = setInterval(HideExportLink, 50);
  15. }
  16. });
  17. }
  19. //Hide 'Export to Excel' Span if it is rendered in the Ribbon Menu
  20. function HideExportLink() {
  21. //Get Span which contains the Export Link
  22. var exportSpan = document.getElementById('Ribbon.List.Actions-LargeMedium-0-0');
  23. if (exportSpan != null) {
  24. // set the display to none
  25. exportSpan.style.display = 'none';
  26. //Since link is hidden, Stop CallHide()
  27. StopCallHide();
  28. }
  29. }
  31. //Clear Interval
  32. function StopCallHide() {
  33. clearInterval(nIntervId);
  34. }

  Explanation

  • Associate click event on Document elements.
    
    
  • Check if clicked element’s text is ‘Lists’, then call the function to hide ‘Export to Excel’. ‘Lists’ tab already has an onclick event, so when this tab is clicked, its default as well as our custom added click event will be triggered. We cannot modify its default click behaviour and we cannot say when it will be completed, so we call hide function at some interval till the button is hidden. Once the button is hidden, stop calling the hide function.
    
    
• Open schema.xml of ‘TestList’ and go to the AllItems View tag <View BaseViewID="1"……………>. Update the <JSLink>tag to reference this JavaScript.
  
  
  
  1. <!-- Hide Export to Excel-->
  2. <JSLink>~site/Scripts/HideExportToExcel.js</JSLink>
• Build and deploy the solution. Open the ‘TestList’ and click on ‘Lists’ tab. ‘Export to Excel’ button will be hidden.
  
  

Additional Note

You can use developer tool to get the Id of the span which contains ‘Export to Excel’ button. It is different in Document Library AllItems view.



Conclusion

This method can be used to hide any button or Document element on All items View page. If you have more than one view on the List/Library, you can use the same JavaScript file hide any element. Achieve additional customization in List View using custom JavaScript.