Integrating SharePoint 2007 and jQuery [Part Two]

Monday, November 24, 2008

The first part of this article showed you how you can enable jQuery in SharePoint 2007 sites and pages, so in this article let's assume jQuery is up and running in your SharePoint environment. The second part of this article will show you a couple of things that you can accomplish by making use of jQuery in SharePoint 2007. It's not my goal to write about how jQuery is working, the syntax etc, for those things I kindly refer to the tutorials that are already available.

Time to get started with a first sample! Let’s assume you've got a nice SharePoint List or Document Library with a bunch of columns and some data in it. SharePoint can display that data in a nice table of course, but let's try to make that table even nicer by highlighting the entire row when the user hovers over the table. The JavaScript code, using jQuery to accomplish this goes as follows:

$(document).ready(function()
    {
        $("table[class='ms-listviewtable'] tr").hover
        (
            function() {
                $(this).addClass("myRowHighlight");
            },
            function() {
                $(this).removeClass("myRowHighlight");
            }
        );
    }
);

The first line creates a function that will be called when the document is completely loaded, this function is defined inline. In this function first all tr elements of all the tables that are having the class attribute set to ms-listviewtable, are selected (this class attribute value is used by SharePoint for every table that contains list data). For every tr element, the hover jQuery function is called. This hover function takes two parameters, once again two functions: one will be executed when the mouse pointer enters the hover area (in this case the tr element), the second one will be executed when the mouse leaves the hover area. When the hover area is entered, the addClass method will add the myRowHighlight CSS class to the tr element and that CSS class is removed when the hover area is left. Of course the myRowHighlight CSS needs to be declared as well:

The next thing that we need to think about is how we can tell a SharePoint page (which is showing a table containing List data), to execute that script and declare the CSS class. Probably the easiest thing to do is to make use of the Content Editor Web Part. Navigate to for example a Task list (e.g. http://yoursite/Lists/Tasks/AllItems.aspx). Next click Site Actions, Edit Page to switch the page into edit mode. Then click on the Add a Web Part button of the web part zone of that page and add an instance of the Content Editor Web Part. Click on the link open the tool pane and click on the button Source Editor.

Finally copy and paste the script and CSS class discussed above (note that script tags have been added around the JavaScript code!):

Now you can click Exit Edit Mode in the top right of the screen to switch back to the normal view. When you hover over one of the rows of the table, the entire row will be highlighted.

Although adding the script and style in a Content Editor Web Part is very easy, you probably don’t want to do this in every list view for ever single List or Document Library if you want to activate the row highlighting everywhere. A better approach is to wrap the adding of the script and style in a Feature. And once again this can be accomplished by making use of the Delegate control (for more information about this approach, check out the previous part of this series).

The feature.xml simply points to a manifest which will define the delegate. The only special thing in the feature.xml is the ActivationDepenencies element: there’s an activation dependency defined that points to the feature ID of the SmartTools.jQuery feature. So the TableRowHighlight feature can only be activated if the jQuery library is loaded.

The manifest.xml is even easier, the only thing to pay attention to is the fact that this delegate control (which loads the SmartTools.TableRowHighlight.ascx user control), has a sequence that’s higher than the sequence of the SmartTools.jQuery delegate (which adds the jQuery library). So first the jQuery library is loaded, then the custom script is added.

The SmartTools.TableRowHighlight.ascx user control, will simply define SmartToolsRowHighlight style, and load a Javascript file (tablerowhighlight.js). This ASCX file should be deployed to the CONTROLTEMPLATES folder in the 12\TEMPLATE folder.

<%@ Control Language="VB" ClassName="SmarToolsTableRowHighLight" %>
<style type="text/css">
.SmartToolsRowHighlight {color:red; background-color:#FFCC66}
</style>

And finally the tablerowhighlight.js javascript file will execute the function to accomplish the hover effect. This javascript file should be deployed to the LAYOUTS folder of the 12 hive.

$(document).ready(function()
    {
        $("table[class='ms-listviewtable'] tr").hover
        (
            function() {
                $(this).addClass("SmartToolsRowHighlight");
            },
            function() {
                $(this).removeClass("SmartToolsRowHighlight");
            }
        );
    }
);

What’s the result? Well, when the feature is activated on a site, the delegate is adding the ASCX to the HEAD element of the page’s HTML. This ASCX will take care of defining the style and loading the script. All the grids showing data coming from SharePoint Lists or Document Libraries, will now have the fancy hover effect. To illustrate all of this, I’ve packaged the row highlighting functionality in a nice SharePoint solution (including a nice installation wizard) which can be download from the SmartTools project on CodePlex (direct link to the releases).

Technorati Tags: sharepoint wss moss ajax jquery

No Comments