How to reference Javascript (.js) file in CommandAction of Custom Ribbon button – Sharepoint 2010

You can very well reference a JavaScript file in your CommandAction instead of writing the whole ecmascript in your elements file itself.

Lets take an example Create custom modal dialog using Visual studio 2010 in SharePoint 2010, which displays an application page as modal dialog when a ribbon button is clicked.

So the elements file will be as follows -

<Elements xmlns=”http://schemas.microsoft.com/sharepoint/” >
<CustomAction
Id=”AboutFilesButton”
Location=”CommandUI.Ribbon”
RegistrationId=”101″
RegistrationType=”List”
Title=”About”>
<CommandUIExtension>
< CommandUIDefinitions>
< CommandUIDefinition
Location=”Ribbon.Library.ViewFormat.Controls._children”>
<Button Id=”Ribbon.Library.ViewFormat.About”
Command=”AboutButtonCommand”
LabelText=”About”
Image32by32=”/_layouts/1033/IMAGES/AboutIcon.jpg”
TemplateAlias=”o1″ />
< /CommandUIDefinition>
< /CommandUIDefinitions>
< CommandUIHandlers>
< CommandUIHandler
Command=”AboutButtonCommand”
CommandAction=”javascript:Aboutscript();“/> –> Refer Your Function here
< /CommandUIHandlers>
< /CommandUIExtension>
< /CustomAction>

//Referencing the Script
<CustomAction
Id=”AboutFilesButton.Script”
Location=”ScriptLink”
ScriptSrc =”/_layouts/RibbonScripts/AboutButtonscript.js”/>
</Elements>