4

I want to attach a custom javascript function to the out of the box "Download a copy" ribbon button. This is to provide analytics for file downloads done through the ribbon button.

I tried this code, but it doesn't seem to work:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<script>
_spBodyOnLoadFunctionNames.push("Trackdownloads");

function Trackdownloads(){

    debugger;
    $("a[id='Ribbon.Documents.Copies.Download-Large']").live( "click", 
              function() {
                  alert('hello');
              }
        );

}

</script>

Any idea how to get this to work?

Improve this question

2 Answers 2

Reset to default
10

Jquery approach can be implemented, but I'm afraid it will be exceedingly complicated, because ribbon buttons can change their size if you resize the browser window (so the id of the button will be changed respectively, for example from ..-Large to ..-Medium, etc.), and also they're created after page load, dynamically with js - so you will need some additional actions to run your script after the ribbon is created.

I recommend you to use a more native, SharePoint-way: custom actions. With custom action, you should replace OOTB button with your own button definition, run your script, and then, run the original command to keep the download functionality.

That can be done either through SharePoint Designer (but in this case you could not provide a correct tooltip), or using Visual Studio and Elements.xml.

Sample Elements.xml for Visual Studio (it should be added to a feature):

<CustomAction Id="TrackDownloadsAction" RegistrationType="List" RegistrationId="101" Location="CommandUI.Ribbon">
  <CommandUIExtension>
    <CommandUIDefinitions>
      <CommandUIDefinition Location="Ribbon.Documents.Copies.Download">
        <Button
          Id="Ribbon.Documents.Copies.Download"
          Sequence="10"
          Command="TrackDownloads"
          Image16by16="/_layouts/$Resources:core,Language;/images/formatmap16x16.png" Image16by16Top="-176" Image16by16Left="-144"
          Image32by32="/_layouts/$Resources:core,Language;/images/formatmap32x32.png" Image32by32Top="0" Image32by32Left="-320"
          ToolTipTitle="$Resources:core,cui_ButDownloadCopy;"
          ToolTipDescription="$Resources:core,cui_STT_ButDownloadCopy;"
          LabelText="$Resources:core,cui_ButDownloadCopy;"
          TemplateAlias="o1"
            />
      </CommandUIDefinition>
    </CommandUIDefinitions>
    <CommandUIHandlers>
      <CommandUIHandler
        Command="TrackDownloads"
        CommandAction="javascript:alert('Hello World!'); SP.Ribbon.PageManager.get_instance().executeRootCommand('DownloadCopy', window.g_CUIcommandProperties, {CommandId: 'DownloadCopy'}, null);" />
    </CommandUIHandlers>
  </CommandUIExtension>
</CustomAction>

I've tested this and it works.

Btw, I've snooped the original button XML from C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\GLOBAL\XML\CMDUI.XML file.

Improve this answer
3
  • I figured out the exact same answer and had come here to post it :) Thank you for answering nonetheless :)
    – ashwnacharya
    Oct 3, 2011 at 18:08
  • 2
    You're welcome! :) And, can't resist to mention, that if you need this for download counter functionality (that is the most obvious option, based on your question), the MSDN article will be only a part of the solution, because you need also to recall the original DownloadCopy ribbon command after you're done with your counter work. Hence, I hope, my explanation saved you a couple of hours of investigations and struggling with executeRootCommand function :)
    – Andrey Markeev
    Oct 3, 2011 at 18:25
  • I never knew about the executeRootCommand method!!! I implemented the download functionality by calling the the download.aspx URL with the document url as a parameter. But your solution is much more correct and elegant!
    – ashwnacharya
    Oct 9, 2011 at 8:54
1

Confirming Omlin's answer:

Attaching a javascript function to the button is not the right way to implement this. The correct implementation is to replace the OOTB button with a custom button, and call a custom javascript function to carry out the desired action.

http://msdn.microsoft.com/en-us/library/ff407619.aspx

Improve this answer

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.