Using jQuery UI and JEFS in SharePoint 2010

Shameem Ahmed 2 December 2011 1




What is jQuery UI?

jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. The official jQuery UI site has a range of great demos.

What is JEFS?

Javascript Editor for SharePoint (JEFS) is a lightweight, in-browser editor that lets you quickly prototype and test custom javascript code in SharePoint. The aim of JEFS is to provide a simple, alternative approach to commonly used CEWP or SPD when applying javascript code against SharePoint pages.

Using Datepicker jQuery UI in Sharepoint 2010 using JEFS

In this article we’ll look at how to use jQuery UI widget Datepicker. Other jQuery UI widgets can be used in a similar manner.

Deploying JEFS in Sharepoint 2010

Follow the instructions from the official site to install JEFS in Sharepoint 2010.

Using JEFS in Sharepoint 2010

Once JEFS is installed in Sharepoint, you will start see an icon in the ribbon called Javascript Editor.

jQuery JEFS SharePoint 2010 image00

Create a page in Sharepoint 2010, go to Site Actions \ New Page

HTML INPUT elements are needed for use with jQuery UI. Sharepoint does not provide a way to add INPUT elements directly into the page, so we need to open the page in Sharepoint Designer and add INPUT elements.

Select Page\Edit\Edit in Sharepoint Designer

jQuery JEFS SharePoint 2010 image01

The page opens in Sharepoint Designer, select Insert\HTML\Input (Text)

jQuery JEFS SharePoint 2010 image02

Change the Id attribute of the Input field to txtDate

jQuery JEFS SharePoint 2010 image03

Exit Sharepoint designer and open the page in Sharepoint 2010.

Select Javascript Editor from Page tab

Type some javascript into the editor, for example:

alert(‘JEFS is cool…’);

jQuery JEFS SharePoint 2010 image04

Click Save and reload the page to see javascript in action.

jQuery JEFS SharePoint 2010 image05

Using jQuery in JEFS

To use the jQuery javascript library or any other .js file, JEFS provides a simple command to include these files in the editor, simply use the following command inside JEFS editor to include any .js file:

// include: [path to the .js file]

So for including the jQuery library in JEFS editor type:

// include: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js

Note: We’re using the jQuery library from the Microsoft CDN location, change the URL if you are hosting the library from your local server or another CDN.

To make sure that jQuery works, insert the following script in the editor:

// include: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js
$(function() {
$(‘#txtDate’).val(‘JEFS rocks!’);
});

Save and reload the page, if everything is well you will see the following in the page:

jQuery JEFS SharePoint 2010 image06

Using jQuery UI in JEFS

To use jQuery UI we need to include jquery-ui library in the editor as we did for jQuery, like this:

// include: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js
// include: http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.js

Using Datepicker widget in JEFS

Add the following javascript in JEFS editor:

// include: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js
// include: http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.js

$(function() {
$(#txtDate’).datepicker();
});

jQuery JEFS SharePoint 2010 image07

And the result:

jQuery JEFS SharePoint 2010 image08

Implementing jQuery UI themes in Sharepoint 2010

Implementing jQuery UI themes in Sharepoint 2010 is tricky, currently there is no way to include .css file in JEFS in the same fashion as for .js files.

A workaround is to create a SharePoint custom solution in Visual Studio 2010 and install the theme files (.css, images etc.) using Sharepoint Feature.

Once themes are installed in Sharepoint 2010, you can see the themes in action in SharePoint pages.

jQuery JEFS SharePoint 2010 image09

Summary

It’s easy to use jQuery and jQuery UI widgets using JEFS in SharePoint 2010. Other jQuery animation and effect libraries can also be used in a similar manner.

Implementing themes is tricky because there is no support for including .css files in JEFS as there is for .js files. We hope that the JEFS team will support this feature in a future version.

 

).push({});

Shameem Ahmed (370 Posts)

One Comment »