0

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:

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

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 – Eric Alexander May 20 '16 at 15:30
  • And the workaround for that? – Sabien Ambrose May 20 '16 at 15:31
  • The fast way would be wrapping it in a recursive set time out function, the right way is probably using executeordelayuntilscriptloaded – Eric Alexander May 20 '16 at 15:35
  • Is there any particular reason you are using this approach or you are open to alternate solutions too? – SPArchaeologist May 20 '16 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 – Sabien Ambrose May 20 '16 at 16:15
3

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

<script>
_spBodyOnLoadFunctionNames.push("ButtonFunc");

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

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');
console.log(elems.length);
  • give me a bit to try and test this:) – Sabien Ambrose May 20 '16 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? – Sabien Ambrose May 20 '16 at 16:18
  • Hell yeah man it works!!!! – Sabien Ambrose May 20 '16 at 16:41
  • Heads up, the dev tools kept saying "unexpected token <" so i deleted the script tags and it worked – Sabien Ambrose May 20 '16 at 16:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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