Using jQuery to extend SharePoint

Need more than SharePoint's out-of-the-box Web parts have to offer? Here are ways you can extend the SharePoint UI with only a browser and jQuery.

While SharePoint offers a number of ways to change content structure for subsites, lists, libraries, views, columns,

content types and the out-of-the-box Web parts, sometimes it's just not enough.

More SharePoint Resources

Implementation
This section covers SharePoint implementation concerns, such as upgrading and implementing MOSS 2007, support, workflow management, enterprise search, SharePoint customization, and the dos and don'ts of SharePoint deployments.

Management and Administration
From creating a multidimensional monitoring strategy to setting guidelines for site provisioning, this topic page has the tips, tools and resources you need to effectively manage and administer SharePoint.

Governance
This topic page has the Microsoft SharePoint governance resources admins need to control a Microsoft SharePoint environment and shape their deployment to meet their business needs.

There are times when users or designers and developers need to make changes to the functionality and appearance of a SharePoint site in a way that is not allowed by their IT department. Since SharePoint Designer is restricted in most organizations, it is not usually an option. Another more accessible possibility is jQuery.

JQuery is a JavaScript library that lets you manipulate the user interface of SharePoint in a way that does not impact a site beyond the page. It can do this because the code is only executed in the browser and on the Web page. It has no impact on what the server serves up, which gives users a great deal of freedom beyond the out-of-the-box functionality and UI.

Adding some jQuery code to your site is simple because SharePoint already provides the means to do it -- the humble Content Editor Web Part (CEWP). While this Web part is usually used to display formatted text on a SharePoint page, it can also be used to run jQuery scripts. All you have to do is add a CEWP to your page, paste in the script, press OK or apply it. No need to compile code on the server, no complex change control procedure to get through with IT, and if it goes wrong, the worst situation is that you will have to remove the Web part from the page. The only thing you should test are browser versions, just to be sure they are compatible.

JQuery uses a library of functions hosted by Google to manipulate the data or structure (such as cascading style sheets) on your page. For that reason, most examples of jQuery you will find on the Web contain a line like this at the top:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"> </script>

This lets the script see the functions it needs to do its job. It is possible to copy the jQuery libraries to your own server, but why not let Google host, manage and maintain them for you for free? Use jQuery for three main categories of action on your SharePoint site: change functionality, change appearance and access data.

Here are some examples of all three from the Web:

Changing functionality
In this example, it allows you to scroll through a list while keeping the column headings static. The normal functionality in SharePoint is when you load a large list and scroll down, the column headers are hidden. This script places a scrollbar in the list so the column heading stays put.

Changing appearance
This example shows how you can use jQuery to change the appearance of the Quick Launch menu. It does this by making changes to the CSS classes that SharePoint uses for the quick launch and adds extra code to them.

Accessing data
This final example is the most complex. It accesses the MOSS 2007 Search Web Service to find individual results and display them in the page. It also adds some clever code that begins the search as soon as the user starts typing the query.

With the advent of SharePoint Online, access to the back end of your SharePoint system will become even more limited. Power users and developers will have to devise more sophisticated ways to manipulate the data and interface for SharePoint. JQuery has some amazing potential as well as a large and healthy online community behind it to help it grow.

Stephen Cummins, founder of www.spsfaq.com, is a SharePoint consultant and has been a SharePoint MVP (Most Valuable Professional) for the past seven years. He lives in Kildare, Ireland, with his wife, daughter, two dogs and an ever-changing number of goldfish.

This was first published in September 2009

Dig deeper on Microsoft SharePoint Management and Administration

Pro+

Features

Enjoy the benefits of Pro+ membership, learn more and join.

1 comment

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

SearchServerVirtualization

SearchCloudComputing

SearchExchange

SearchSQLServer

SearchWinIT

SearchEnterpriseDesktop

SearchVirtualDesktop

Close