The jQuery library is one of many available JavaScript libraries. IBM® WebSphere Portal has standardized around the dojo JavaScript library, but customers are free to use a different library if it better fits their business needs.

The jQuery library is one of many available JavaScript libraries. IBM WebSphere Portal has standardized around the dojo JavaScript library but customers are free to use a different library if it better fits their business needs. Customers considering using jQuery or any JavaScript library must understand that several Portal portlets and components rely on the dojo framework. In particular the iWidget container, Tagging and Rating component, the Web Content Authoring portlet, the inline editing component in the Web Content Viewer portlet, and page editing capabilities from the Page Builder theme all rely on dojo.

Here is an example of how to use the theme modularization framework to create a jQuery module and use that module to manipulate the portal page. The example here is not meant to show a full replacement of the dojo framework with jQuery but rather to show the basics of how to use jQuery with WebSphere Portal. As a foil for the example, jQuery is used to create a collapsible section from the header and footer of a portal page that is using the default layout for the Portal 7.0.0.2 theme.

Description of the Sample

Including jQuery is a simple, three-step process. First the jQuery module is defined, it is included in the theme profile, and finally the profile is applied to a page. To define the module start by creating a plugin.xml for the module. The example defines a head extension point that includes the jquery.min.js file. The example assumes the jquery.min.js was placed in the main Theme Modules directory for the WebSphere Portal 7.0.0.2 theme.

The jquery.min.js can be placed elsewhere. In addition to the main jQuery extension point, two more extension points are defined. These extensions define the css and JavaScript needed to create the collapsible sections. For more information about the plugin.xml format, see Registering theme modules and profiles.

Now that the module is defined a profile is needed to add this module to the theme. Start by copying the profile_lightweight.json found in the WebDAV directory fs-type1/themes/Portal7.0.0.2/profiles to a new file named profile_jQuery.json. To this profile add "jQuery” and "jSquishy". To use this profile set it on a Portal page using page metadata resourceaggregation.profile. For more information about this task, see Defining module used to render a page.

Finally, restart the WebSphere Portal server to enable the new modules. The pages using this new profile now includes jQuery and has the collapsible header and footer sections.