Saturday, December 8, 2012

Call jQuery to SharePoint page using Custom Action





In this article we will discuss about how to call jQuery to SharePoint using custom action.

In my previous articles I have discussed about how to deploy jQuery to layouts folder and how to deploy jQuery to site assets library.

Also I have explained how to call jQuery into SharePoint page using content editor web part.

To call jQuery to SharePoint through custom action follow the below steps:

Step-1:
Open Visual Studio 2010, and choose File -> New Project. Select SharePoint -> 2010 -> Empty SharePoint Project. Name the project jQueryCustomAction, and click OK. Also remember to select .Net framework as 3.5. check out the figure below:

Step-2:
In the next dialog box give me local deployment URL as shown in the figure below. Remember to select Deploy as a sandboxed solution.

Step-3:
Right-click the project in the Solution Explorer and choose Add -> New Item. Select Empty Element, and call it jQueryCustomActionElement as shown in the figure below:

Step-4:
Now open the Elements.xml file and add  the custom action attribute like below:

<CustomAction ScriptSrc="~SiteCollection/SiteAssets/jQuery/jquery-1.6.2.min.js" Location="ScriptLink"
   Sequence="100">
  </CustomAction>

Now the full Elements.xml file will be like below:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction ScriptSrc="~SiteCollection/SiteAssets/jQuery/jquery-1.6.2.min.js" Location="ScriptLink"
   Sequence="100">
  </CustomAction>
</Elements>

Here ScriptSrc is the attribute that contains the jQuery file path where the jQuery is deployed.

Now deploy the solution and the jQuery will be available to the page.



1 comment:

  1. Why would you do a custom action to include jquery when you can easily do it via the masterpage?

    ReplyDelete