Developing an IBM Content Navigator Plug-in using non-Dojo Javascript Widget library such as jQuery UI

Body

Chad Lou, Brett Morris

Introduction

This is Part II of our research into using non-Dojo toolkit assets in IBM Content Navigator and IBM Case Manager.

In Part I, we described how to use the IBM Content Navigator JavaScript API from a standalone web page created using the jQuery toolkit. This standalone web page was added to a sub-directory of the IBM Content Navigator web application. The Dojo Toolkit is shipped with IBM Content Navigator. The jQuery toolkit was copied separately onto the Navigator web application. The standalone web page loads jQuery from the same web application on the same application server host. It uses a combination of Dojo and jQuery to execute IBM Content Navigator JavaScript APIs.

While the standalone web page shows that we can mix jQuery API calls, such as AJAX calls, with Dojo-based APIs there are more features that come with jQuery. One major aspect of jQuery is jQuery UI. The jQuery UI is a set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

What we did in Part I:

• Loaded jQuery from Dojo
• Mixed Dojo and jQuery
• Made IBM Content Navigator API calls from Dojo and jQuery

Limitations in Part I:

• It is a standalone web page, and not integrated with IBM Content Navigator
• It only utilized the jQuery library, not the jQuery UI widgets

The standalone web page provides a good playground and a good starting point for enabling jQuery in IBM Content Navigator. However, the only supported mechanism for extending IBM Content Navigator is via an IBM Content Navigator plug-in. In this article, we will describe how to leverage jQuery UI assets within an IBM Content Navigator plug-in.

(The article covers the additional sections below, which can be found in the pdf file at the end of this post.)

Creating an IBM Content Navigator Plug-in

Packaging of jQuery and jQuery UI

Loading jQuery and jQuery UI

Loading the jQuery CSS resource

Showing the jQuery UI widget

Using jQuery for IBM Content Navigator/IBM Case Manager Mobile

Object-oriented Refactoring

Calling jQuery API from Dojo

Calling Dojo API from jQuery

Creating an IBM Content Navigator Feature plug-in

Feature Pane – JQueryFeaturePane.js

The associated template file for the Feature Pane

The corresponding css style definition for the Feature Pane

Enabling the new feature

Conclusion

The jQuery plug-in loads both jQuery and jQuery UI, as well as jQuery UI CSS. Through a combination of Dojo and jQuery calls, it retrieves the available actions in IBM Content Navigator, and displays the top 5 actions, using the menu widget from jQuery UI.

IBM Content Navigator or IBM Case Manager plug-ins can be developed using either Dojo, or jQuery, or another Javascript library, or a mixture of Dojo and jQuery.

What we did in Part II:

• Packaged the functionality in an IBM Content Navigator feature plug-in

• Separated Dojo and jQuery modules

• Utilized a jQuery UI widget in IBM Content Navigator

• Packaged jQuery inside the IBM Content Navigator plug-in, so that no separate setup is needed

• Made it easier to upgrade to latest jQuery and jQuery UI

• Load jQuery library during the initialization stage of the jQuery plug-in

• Execute the jQuery UI feature when the feature icon is activated

The plug-in demonstrates that jQuery can be safely mixed with Dojo. jQuery can co-exist with Dojo, and jQuery UI widgets can be used in or to extend IBM Content Navigator or IBM Case Manager widget. The plug-in is attached. jQuery library and jQuery UI library do not need to be downloaded separately , they have already been included in the JQueryPlugin.jar. No separate setup is needed on IBM Content Navigator server. The plug-in works on the Navigator mobile app in the ICM feature as well.

The full details of the article can be downloaded as a PDF file. The plugin jar file is available as a ZIP file.