jQuery and SharePoint Part I - The Easy Way to Load the jQuery Library

jQuery and SharePoint Part I - The Easy Way to Load the jQuery Library In this article, we are going to show how to load the jQuery library as a feature in SharePoint 2010. This way will also work for SharePoint 2007. Just for good measure, we are going to also include the excellent SPServices library and some custom CSS files in our feature. I want to include/acknowledge the folks and tools that made this article possible. Please click through and learn more about these great resources.

Components

Our solution is going to incorporate the following components:

  • JavaScript and CSS Injection Feature - This is a SharePoint feature, scoped at the Site Collection level, that will be installed on the SharePoint farm and activated for individual site collections.
  • Control Template - This is where the main "work" will take place. Our control is going to inject the jQuery library, the SPServices library, and a custom CSS file into every page for a SharePoint Site Collection.
  • Custom Layouts Folder - In order to ensure that our information is protected from any future SharePoint updates, we are going to create a folder in the SharePoint LAYOUTS directory. It will therefore be accessible to all SharePoint sites on the farm.
  • JavaScript Libraries and Custom CSS File - These will be maintained in our custom layouts folder. In order to allow for further segmentation for ease of use, we are going to include a couple of additional folder for the JavaScript libraries and our custom styles. Our folder structure will look something like this:

    Our folder structure
    Figure 1

Setting Everything Up

Now that we are familiar with the structure of our solution, let's start setting things up. Follow the steps below and you will be ready to install your feature in no time.

  1. Create the folder that will house your feature's XML files. In the example above, it is called "ClientABC_JS_Injection"
  2. Create a blank text file named "Feature.xml" in the folder you created in Step 1
  3. Insert the following code into "Feature.xml" 

    <?xml version="1.0" encoding="utf-8" ?>
  <Feature xmlns="http://schemas.microsoft.com/sharepoint/"
           Id="{45B66929-08B5-4715-8511-F9FB94F614EE}"
           Title="ClientABC JavaScript and CSS Injection"
           Description="This feature loads, or injects, the 
           jQuery JavaScript library (version 1.4.4), as well as 
           other jQuery add-ons, and custom CSS, in every web 
           page of this site."
           Scope="Site"
           >
  
    <ElementManifests>
      <ElementManifest Location="Manifest.xml"/>
    </ElementManifests>
    
  </Feature>

  4. Create a blank text file named "Manifest.xml" in the folder you created in Step 1
  5. Insert the following code into "Manifest.xml" 

      <?xml version="1.0" encoding="utf-8" ?>
  <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <Control
      Id="AdditionalPageHead"
      ControlSrc="~/_controltemplates/JavaScript_CSS.Injection.ascx" 
      Sequence="10"/>
  </Elements>

  6. Create the appropriate folder(s) underneath the LAYOUTS folder
  7. Add the jQuery library, the SPService library, any custom JavaScript file(s) and any custom CSS files in the appropriate folder under LAYOUTS

    1. NOTE 1: It is a very good idea to work with the minified jQuery and SPServices files
    2. Note 2: The custom JavaScript file is sometimes a good location for your $(document).ready function. If you don't know what this is, and you are new to JS/jQuery, don't worry…you will learn.

  8. Create your custom control file under the CONTROLTEMPLATES folder
  9. Using your favorite editor, insert the following code into the custom control 

    <%@ Control Language="C#" ClassName="ClientABCjQuery" %>

    • NOTE: It is also a good idea to inject the SP.UI namespace code to allow for easy use of modal dialog windows in SharePoint. You can learn more about the SP.UI namespace here: http://msdn.microsoft.com/en-us/library/ee552096.aspx. Some sample code for injecting this modal dialog functionality, in its simplest form, might look like this:

      <script type="text/javascript">
//Handle the DialogCallback
function DialogCallback(dialogRequest, returnValue)
{
}
//Open the Dialog
function OpenModalDialog(dlgUrl, dlgTitle)
{
var options = {
url: dlgUrl,
title: dlgTitle,
autosize: true,
dialogReturnValueCallback: DialogCallback
};
SP.UI.ModalDialog.showModalDialog(options);
}
</script>

    Place that directly under the earlier code for the custom control

  10. You are done. You have created all of the artifacts you need for your feature.

Installing the Feature

In order to install the feature, run the following PowerShell command.

Install-SPFeature ClientABC_JS_Injection - (This is simple the name of your folder under the FEATURES directory.)

Now, all you have to do is activate the feature for your site collection. You can do this through the SharePoint UI (Site Actions, Site Settings, Site Collection Features), or you can also accomplish this through PowerShell, by using:

  Enable-SPFeature ClientABC_JS_Injection -Url <<URL to Site Collection>>

That's it. You should now have all of the files listed in your custom control automatically injected into the <HEAD> tag of every page on your Site Collection.

Making Changes

Here is the best part of this approach - once you have installed and activated your feature, adding additional JS libraries or CSS files is as simple as dropping them into the appropriate folder under the LAYOUTS directory, and adding a line to your custom control.

Please stay tuned to this space. In our next installment, we are going to show some tricks for using jQuery for rich user experiences in SharePoint.

0 Comments  (click to add your comment)
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Networking Solutions

Most Popular SharePoint Stories

Partners

More Networking