So I want to add a button to a document library next to the other buttons (new, upload, sync, more) that acts as a link to take you to a page related to the document library. I have already put a decent amount of time into this project and will explain what I've done thus far. To make the button I was going to add a scriptlink to a javascript script that appends the button to the list of buttons. Using dev tools (F12) I found that the buttons are list items of .ms-qcb-leftzone where each list item has a class ms-qcb-item. Thus, the jQuery should look like this:

$('.ms-qcb-leftzone').append('<li class="ms-qcb-item"><a href="http://www.google.com">ButtonName</a></li>');

I saved this as button.js and put it in SiteAssets/Scripts, thus the scriptlink that I put on the masterpage should look like the following:

<SharePoint:ScriptLink language="javascript" name="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js" runat="server" Localizable="false" /> 
<SharePoint:ScriptLink language="javascript" name="~sitecollection/SiteAssets/Scripts/button.js" runat="server" Localizable="false" />

I then visited my page and no button. I went to check if the script was being run by putting a breakpoint in at the line of the JS code above. The script was being run because it paused at the breakpoint. This is where I'm lost, the code is running and I had an MS Techie helping make sure it was correct.

  • 1
    The script is probably firing before the document library is loaded client side May 20, 2016 at 15:30
  • And the workaround for that? May 20, 2016 at 15:31
  • The fast way would be wrapping it in a recursive set time out function, the right way is probably using executeordelayuntilscriptloaded May 20, 2016 at 15:35
  • Is there any particular reason you are using this approach or you are open to alternate solutions too?
    – SPArcheon
    May 20, 2016 at 16:06
  • Well.. Long story. But, the gist of it is that the doclib will show only the most 10 recent docs on the home page(set up with a view)... Our PMs aren't technically adept so we wanted to add a button to take them to the full document libary... I was also doing this to further improve my understanding of how to manipulate the master page and web parts May 20, 2016 at 16:15

1 Answer 1


Rather than using $(document).ready() try this:


function ButtonFunc() {
   $('.ms-qcb-leftzone').append('<li class="ms-qcb-item"><a href="http://www.google.com">ButtonName</a></li>');

If this doesn't work check that the selector $('.ms-qcb-leftzone') is actually finding something by doing something like:

var elems = $('.ms-qcb-leftzone');
  • give me a bit to try and test this:) May 20, 2016 at 15:56
  • Just to confirm... Add a scriptlink for the jquery CDN and one for the jQuery code stored in my siteassets.. then change to the composed look with the edited master page. Any steps im missing to make this work? May 20, 2016 at 16:18
  • Hell yeah man it works!!!! May 20, 2016 at 16:41
  • Heads up, the dev tools kept saying "unexpected token <" so i deleted the script tags and it worked May 20, 2016 at 16:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.