JQuery and the Content Editor Web Part

Posted on February 17, 2009 by Joel Oleson

My name is Peter Serzo and I work as a consultant for Trillium Teamologies in Michigan. Two weeks ago I did a session on the Content Editor Web Part (CEWP) and JQuery at the SharePoint Best Practices Conference in San Diego. I have become a big fan of JQuery after seeing the potential of this technology. There are two ways to approach the technology: Information Worker or Developer. I chose IW for the BP Conference because I wanted to introduce the topic and show folks what they can do with JQuery out of the box. As you will see from this post you can write very little code and get robust functionality.

Two items to know about JQuery right from the start: It is open source JavaScript and it is the JavaScript library that Microsoft supports now and going into the future. What this means to us is that there is a vibrant community working on solutions that you can use in SharePoint today and if there is any issue with this code, even though it is open source and therefore written by someone else, Microsoft will support it. That is a powerful combination and adds another critical resource to your SharePoint solutions.

Be Proactive – Top 5 reasons to use JQuery

5. Community – JQuery has a large community that is growing – blog.jquery.com. JQuery is three years old and just between December 2008 and Jan 2009 (when version 1.3 was released) there has been a 30% uptick in daily visitors to the site and nearly one million downloads of this release (Google).

4. Documentation – Excellent and extensive documentation – docs.jquery.com. Some of the references you can find are: JQuery introduction, API Reference, how to author plugins, and how to get support from the JQuery team.

3. Lightweight JavaScript – the production library for JQuery is approximately 18kb. Currently it is at version 1.3.1 and is tended to by a team of world class programmers headed by the creator John Resig. The lightweight size makes it very efficient.

2. Plugin Support – plugins.jquery.com. This is where I am very excited about the potential that JQuery brings to the SharePoint table. Imagine web parts built by third party vendors (stay with me) and Microsoft supports all their code. I know, it sounds impossible but this is very close to what plugins give to your installations. Plugins encompass everything from image rotators to menus, to forms, the list goes on and on.

1. Microsoft Support – Refer to Scott Gunthrie’s blog 9/28/2008. I never said support was free and how far will Microsoft go to support plugins is a question without an answer right now. However, Visual Studio 2010 will have JQuery support integrated into the product. If you wish to do this with VS 2008, Scott has a blog on how to do this. The important part of movement is that Microsoft is further embracing open source and not going off and creating their own JavaScript library. Perusing John Resig’s blog, I noticed that he is beefing up JQuery to support IE 8.

Now that we know why to use it, let’s see how to use it.

First things First

In order to utilize JQuery you are going to have to download the latest version of the library off the JQuery site (http://docs.jquery.com/Downloading_jQuery). You can also get it off Google.

We now have to load it somewhere for our CEWP to reference. We could debate the merits of putting a reference in the 12 hive or a document library. I am a proponent of the document library approach for a few reasons. The biggest two reasons are ‘store’ and maintainability. By using a document library with versioning on I know that I can have multiple versions of the JQuery library. The JQuery team is constantly updating their library. Of course when I load a new version of this library I have to regression test. Rolling back is simple and painless if there are any issues. The library approach also lends itself to maintainability. I can have multiple versions of the code in one place, be assured that it is saved in my database, and take comfort in the knowledge that when I perform an update from Microsoft, my libraries will not be overwritten.

I set up one library with two folders at the site collection level. The library is called Javascript and the two folders are jquery and utilities. The jquery folder contains the download of the compressed JQuery library. The utilities folder contains any plugins that are used on the site or utilities that you write.

One other item, rename the downloaded jquery library from jquery-1.3.1.min.js (or whatever your version says) to jquery.js. Save the versioning information in metadata, but now your references are much easier to write and understand.

Now that we have the plumbing in place let’s see how SharePoint and JQuery work together with a plugin.

Synergize

1. For the purposes of this posting I am choosing the lightBox plugin found here (http://leandrovieira.com/projects/jquery/lightbox/). LightBox is cool web 2.0 looking technology that many have been exposed to so it provides credence to our jquery example.

Extract the zip file and put the contents into the utilities folder as shown below:

Being really efficient, you can create a metadata tag called Plugin and designate this as lightBox. Also, notice that there are two JavaScript files – one is compressed, the other is not. Keeping the non-compressed file makes debugging (if you have to do it) much easier.

2. Have several pictures you can reference in a picture gallery on your site.

3. Insert the CEWP onto your page.

4. Click on Source Editor and create the HTML (view source from where this was downloaded). Be sure to reference the following correctly for your installation:

http://portal.moss.local/javascript/jquery/jquery.js

http://portal.moss.local/javascript/utilities/jquery.lightbox-0.5.js

5. The last item I want to point out in the HTML is the secret sauce:

$(function() {$(‘#gallery a’).lightBox({fixedNavigation:true});});

One line of jquery code to get the example working!

Hovering over the picture, choose one and the following picture takes focus:

If you take a look at the rest of the HTML, it can also be streamlined. For example, there is still CSS and explicit references to the pictures. This can be extracted to make our CEWP even leaner. With SharePoint and page downloads, it is all about efficiency.

You now have a working example of JQuery.

Win-Win

I want to leave you with a few things to think about as you finish reading this. Begin with Plugins. As you have seen it is quick and somewhat painless to get up and running.

JQuery and SharePoint are a doable sell to your clients or boss. I don’t want to use the term easy because when approaching open source and browsers management gets understandably queasy. However, when you explain the benefits using some of the items I have pointed out, most clients will see the return. I have even framed this post with Stephen Covey references. Use them!

JQuery is NOT contained to the CEWP. This is where I started. You can use it all over your site. To see more examples of JQuery, please check out my site (which contains my blog) at www.sharepointusermagic.com. On the home page I have a JQuery image rotator. How many times has your boss or client asked for that! I implemented it with a plugin and less than 5 lines of JQuery code.

In the coming weeks, I will be doing more blog posts on this subject in three areas: IW and plugins, show you JQuery how’s and why’s on aspx pages and then I will go deeper into the developer side of the equation.

Finally, a big thank you to Joel for coming to my session in sunny SD and affording me the opportunity to guest on his blog (by the way he gives a great Keynote).