Reference CSS and JS files for Ribbon In SharePoint 2010

One of the most common things that you might be doing when creating your custom ribbon controls is to define JavaScript for the handlers that will be executed upon your controls being clicked.

One of the most demonstrated examples of how you can define your own JavaScript is

 <CommandUIHandlers>

        <CommandUIHandler

         Command="Demo_HelloWorld"

         CommandAction="javascript:spSticky();"     />

  </CommandUIHandlers>

In here, the highlighted  part is my command spSticky(). The CommandUIHandler  though doesn't allow to define external file where all of our scripts will be hosted. This might be puzzling at first and you may think that you need to define all of your JavaScript right inside the elements file – which obviously makes it hard to maintain your JS code in a future.

Well, the good news is that you can reference JavaScript external file for your handlers; you will still call your handler function just like in the example from above but here is what you add in your Elements (ribbon definition) file:

<CustomAction

   Id="OwnersButton.Script"

   Location="ScriptLink"

   ScriptSrc ="~site/_layouts/Images/Scripts/js/Custom.js"/>

If your custom.js has the reference of jquery plugin, then give the reference which should be below your custom.js else it will not take the reference of jquery.

  <CustomAction

   Id="OwnersButton.Script"

   Location="ScriptLink"

   ScriptSrc ="~site/_layouts/Images/Scripts/js/jquery-1.8.2.js"/>

If you want the give the reference of the CSS in the Custom Actions, the below script has to be added in the Custom Action.

  <CustomAction

   Id="OwnersButton.Script"

    Location="ScriptLink"

    ScriptBlock="

      document.write('&lt;link  type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;~site/_layouts/Images/Scripts/css/jquery-ui-1.8.21.custom.css&quot;&gt;&lt;/' + 'link &gt;');"

     />