Assembly-Free jQuery in SharePoint Sites Using the SmartTools jQueryLoader

Summary: The SmartTools jQueryLoader enables the jQuery Javascript library in your SharePoint sites using an effortless and Assembly-Free deployment technique. Additionally the jQueryLoader will dynamically load custom Javascript files, deployed to a Document Library. Seeing is believing: watch this short screencast that shows the deployment and some sample scripts!

If you read my blog you probably know that using the jQuery Javascript library in SharePoint 2007 sites can enhance and extend the out-of-the-box user interface significantly. But up to now it was time consuming and a tedious job to enable jQuery in SharePoint sites, for example: adding a Content Editor Web Part to the page, open the properties, copy/paste a script using the Source dialog etc. Even worse: these steps needed to be done on every page where the desired jQuery functionality should become active.

These issues can be solved by using the new SmartTools jQueryLoader that I’m releasing today! The SmartTools jQueryloader basically is a Javascript file that dynamically loads additional custom Javascript files stored in a predefined Document Library. This Document Library has extra columns to specify when and in what order those Javascript files should be loaded. So making available a new js file (containing your next amazing extension) in your SharePoint sites will be as easy as uploading that file to the Document Library. The jQueryLoader will take care of loading your script accordingly.

 

The jQueryLoader script itself, and the jQuery library as well, need to be loaded of course in every page in your SharePoint sites. This is accomplished by making a small change to the Master Page that’s in use in your SharePoint sites. All these configuration steps, including the creation of the Document Library, changing the Master Page, adding the jQueryLoader etc, are executed with an automated installation page. The really cool thing about this installation page is that it’s a basic SharePoint Site Page that doesn’t contain any server side code; everything is accomplished using Javascript. That means that to make use of the jQueryLoader (and its installer), there is nothing that needs to be changed, configured or deployed on your servers! That’s what is called Assembly-Free by the way.

 

Here is an overview of the installation steps:

  1. Navigate to any Document Library in a SharePoint site.
  2. Upload the SmartToosls.jQueryLoader.Install.aspx file to that Document Library (this file can be deleted after the installation).
  3. Open the uploaded page by just clicking on it.
  4. Select the desired installation options by checking their checkboxes in the list. For a first-time installation you typically check at least the first four checkboxes (see below).
  5. Click the Start Installation button and keep an eye on the Installation Log at the bottom of the page.
  6. That’s it!
The different installation options which can be selected are:
  • Create js Document Library: will create a hidden Document Library called js. This Document Library will have four custom columns:
    • Autoload (true/false): to specify if the jQueryLoader should dynamically load the file
    • Sequence (number): to specify the order in which the files are loaded
    • ApplyTo (text): a regular expression to specify on which pages the file should be loaded
    • Group (text): an optional value to group different files together
  • Create or update jquery.js: will upload the jQuery library to the js Document Library. 
  • Create or update smarttools.jqueryloader.js: will upload the jQueryLoader script to the js Document Library.
  • Update the default.master: will make a change to the default.master Master Page (or the one you select by changing the value in the textbox). This change adds three script tags in the head element of the HTML page.
  • Update the default.master of a child site: (optional) will make a change to the Master Page of a child site (see previous option). Notice that this child site will make use of js Document Library of the current site.
  • Add test Web Part (optional): will add a test Web Part to the default.aspx (Home) page of the site to verify if jQuery is active.
  • Enhanced Tasks View, Task Notifications and AJAX Lists (all optional): will add various sample scripts to show of the power of jQuery in SharePoint see the demo screencast for more information.

The optional sample scripts are just there to give you an idea what can be accomplished using jQuery in SharePoint sites, and to show you how easy it is to deploy them. The real added value is of course your creativity to build custom scripts making SharePoint even better. Feel free to contact me when you’ve got a cool sample as well!

 

1 Comment

Comments have been disabled for this content.