In this article I'll show you how to create a nice SharePoint 2010 wsp Feature that you can deploy to any SharePoint site you'd like, and when activated, it will "turn on" jQuery for all of your webs in the site collection (without editing the MasterPage)! Let's get started:
Creating the Project
- In Visual Studio, create a new SharePoint 2010 "Empty SharePoint Project"
- Name it "jQueryFrameworkFeature"
- Enter your local site address and choose "Deploy as a farm solution" in the SharePoint Customization Wizard.
Prepping the Project
You should be looking at a new Empty SharePoint Project. Now, let's prep the project:
- Right click on your jQueryFrameworkFeature project node in the solution explorer, choose "Add > SharePoint Mapped Folder…"
- Expand the "TEMPLATE" node, choose "CONTROLTEMPLATES" and click OK.
- In the Solution Explorer, right click the newly added mapped folder, "CONTROLTEMPLATES" and add a new folder named "jQueryFrameworkFeature"
- Add another SharePoint Mapped Folder again, this time chose TEMPLATE\IMAGES
We now have our basic folder structure that we'll need and so the overall project should now look like this:
The next thing we want to do is have a cool icon that will be used in our feature list in SharePoint to set it apart from the other generic looking features. I've created my own that will immediately scream jQuery! when you see it in the list:
Save the image above into your IMAGES/jQueryFrameworkFeature folder.
Adding the jQuery
The next thing that we'll need to do is add a user control to our jQueryFrameworkFeature folder in our CONTROLTEMPLATES folder. Follow these steps:
- Right click on jQueryFrameworkFeature folder in our CONTROLTEMPLATES folder, and choose "Add > New Item…"
- Under SharePoint > 2010, select "User Control"
- Name it jQueryRef.ascx, click the Add button.
- Delete the jQueryRef.ascx.cs file (this will also delete the .designer file too, which is OK).
- Open the Source code view for the jQueryRef.ascx file and remove every single line of code except for the "<%@ Control …" line (should be the last line of code). You should now have something like this:
- Remove the CodeBehind="jQueryRef.ascx.cs" property completely.
- Directly after the Control declaration line, add the following line of code:
< script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js "></script> - Save, and then close this file.
Getting it on the MasterPage
So you might wonder how we're going to get jQuery onto the MasterPage without editing it. Well as you've seen already, we've got a User Control with our jQuery reference sitting in it. Because of this, we can put this user control into one of the MasterPage's content control areas, specifically the "AdditionalPageHead" area. Here's how:
- Right click on your project, choose "Add > New Item…"
- In SharePoint > 2010 choose "Module"
- Name it "jQueryFrameworkModule"
- Within the module we've just added, remove the "Sample.txt" file.
- Open the elements.xml file and edit to look like this:
Creating the Feature
In the previous section, when adding the module, you may have noticed that it created a feature for us, named "Feature1." We'll use this to complete the process:
- Rename "Feature1″ to "jQueryFrameworkFeature"
- Double click on the first node of this feature to edit its properties. You should see in the "Item in the Feature" list on the right our "jQueryFrameworkModule" module.
- Enter, for the title, "jQuery Framework"
- Enter, for the description, "Enables the user of jQuery framework across pages in the current site collection.
- Change the Scope to "Site"
- In the properties window in the lower right, find the "Image Url" property, and enter the following URL
jQueryFrameworkFeature/jQueryFrameworkFeature.gif
If you right click on your project and deploy you will now have jQuery in your SharePoint!