If you want to add powerful Ajax style features to your SharePoint site without resorting to Flash or heavy development. You can’t go wrong with jQuery. People are going mad for jQuery at the moment, Microsoft are even talking about packaging it with ASP.Net Ajax framework.

jQuery gives you some massive bonuses when developing SharePoint 2007 sites:

• Easy to add to your SharePoint site.
• Doesn’t require you to access the server itself (Handy if you’re developing stuff with only SharePoint designer)
• Uploading a 55kb javascript file and referencing it makes your page jQuery ready!
• You can simply download plugins and wrap SharePoint content around them.

In this example, I’ll upload jQuery to a vanilla site using SharePoint designer and install a nice newsticker plugin, by Bryan Gullan, inside a webpart. Even better, I’ve shown how to consume SharePoint list data into the news ticker without any bespoke web parts or Flash!

1.

Download jquery itself.
jQuery is essentially a bunch of tightly coded javascript functions. The “Minified” file has all the debugging/whitespace/comments removed so you only have to upload a small (54.5kb) file to your web server. That’s a pretty minimal cost.

2.

The first thing to do is power up your SharePoint page with the jQuery file. You’ll need to upload it somewhere. For this example, I’m creating a “js” (javascript) folder on the site itself – using SharePoint designer. You can upload it anywhere so long as its visible to your pages (to a document library, page galery etc).

Start SharePoint designer and open your site
Create a folder (right click) called “js”

Now ‘import’ the jQuery file (eg jquery-1.2.6.min.js): File->import->file->add file->browse to jQuery file.
This should upload it to the SharePoint site, don’t forget to check it in if using source control.

3.

Including jQuery on a page.

You need to get the include function at the top of the page somewhere, you could do this on a Master page or template if you wanted. In this example I’m simply editing a landing page.

Go back to the site root and open the page you want the plugin to appear on into SharePoint designer (if necessary detach it from the layout page).

Tip: on a live site always copy the page first! Make sure you have the file checked out!

In the code view you need to add a javascript reference to the jQuery file at the top

<script type=”text/javascript” src=”js/jquery-1.2.6.min.js”></script>

I’ve put it between the asp:content tags , fine for this demo but it would probably be better practice to add it to the top of a master/template page.

Save the page and check it in.

Load it up in the web browser to check everything is still ok, congratulations your page is jQuery ready!

4.

Let’s add a plug in!

So let’s add a News Ticker jQuery plug-in which reads from SharePoint lists

See it in action here: http://www.makemineatriple.com/jquery/?newsTicker

To add it to your site, download the plugin .js file from here http://plugins.jquery.com/project/BBCnewsTicker
(You may need to rename it to jquery.newsTicker.js)
Upload (import) it to your js directory alongside the jQuery file using SharePoint designer

Check out & Open the page again.

Under the jQuery reference, add a reference to the newsticker js file eg:

<script type=”text/javascript” src=”js/jquery.newsTicker.js”></script>

Now, if you study the home page for the news ticker plug in, it shows you how to add some parameters to the page before you can add the news-ticker itself. You can play with these settings later, but for now just add the following javascript right underneath your script references.

<script type=”text/javascript”>
$(document).ready(function() {
var options = {
newsList: “#news”,
startDelay: 10,
placeHolder1: ” |”
}
$().newsTicker(options);
});
</script>

It’s not the most beautifully placed java-script in the world, but your page is ready to have a news ticker added.

Note: If you load the page into your browser now you may see a javascript error at the bottom of the page, don’t worry: This is just the news ticker expecting some values that aren’t on the page yet.

Add a new SharePoint list

In your SharePoint site, add a new custom list (call it ‘news items’ or something). You’ll need to customise it (List Settings) to include two columns one for the text to appear in the news ticker, and a second for the URL that will load into the browser when you click on it.

Now, back in SharePoint designer open the page again for editing.

In the visual view click on a web-part zone

Add a Data-View to the page (Insert->SharePoint controls->Data View)

At the right of the page, you should be able to browse to the “Data source library” to connect to the Data View. In this case we want the “News Items” list we just created, but you can play around later to see what else you could present with the ticker.

Click on News Items and “Show Data”

Now click on the row that contains the text which you want to appear in the ticker (In this case ‘Title’)

Click “Insert Selected Filed as..” and select ‘multiple item view’

You should see the data appear in the Data View on the page.

To make life easier, lets change the Data View style to be list items similar to the expected format for the news ticker.

Right Click on the Data view on the page and click on “Show common control tasks”

From the list select “Data view properties”

Select “Layout

Scroll down the ‘HTML’ view types until you find the bulleted style:

Select it, click OK and YES. The view will change to show bulleted items.

Now, the final more tricky step (If you are finding SharePoint designer a bit slow, you can do this next bit in your web browser by editing the Web Parts shared properties).

Edit the web part properties (Click on it, and select “Web Part Properties”)

Open the XSL editor

If you study the news ticker home page again, you’ll notice that the ticker is expecting the following code:

<ul id=”news”>
<li><a href=”http://aurl.com”>The first item</a></li>
<li><a href=”http://anotherurl.com”>The second item..</a></li>
</ul>

We need to edit the XSL so that the list data matches this output.

Look for the <ul tag and add “id=news”

Look for the <li> tag (Looks like this <li class=”ms-vb”>)

Change it so it reads:

<li class=”ms-vb”>
<a href=”{@URL}”>
<xsl:value-of select=”@Title” />
</a>

This will turn the list item into a link exactly as the plug-in expects. We are also consuming the URL and TITLE items from the list! Cool!

Apply the change, if all has gone well when you reload the page your news ticker should be ticking away.

Edit the web-part itself and set the Chrome setting to ‘none’ to remove the title and frame.

You can apply this technique (modifying a data-view) to any jQuery plugin that works with lists of data, I’ve managed to get fading image effects working with very little trouble. You’ll obviously need to fiddle about to get styles to fit in – but you should be well on your way to an impressive jQuery SharePoint site!

Looking for a decent book on jQuery? There is at least one available