Add jQuery to a theme

The jQuery library is a JavaScript library. HCL WebSphere Portal includes a jQuery module for the jQuery core so use jQuery in a theme. This jQuery module is not turned on by default. jQuery is an open framework and is not supported by IBM.

1. To turn on jQuery, copy the following module definition file...
   PortalServer/theme/wp.theme.jquery/installedApps/wp.theme.jquery.ear/wp.theme.jquery.war/v1.10/jquery1.10.2.json

   ...into the theme's contributions folder in WebDAV fs-type1.

2. To enable plug-ins with the jQuery core, download the jQuery plug-in from the jQuery website.

   In this example, use the PowerTip plug-in (jquery.powertip-1.2.0.zip).

   1. Extract the contents of the plug-in file to any location.

   2. Create a subfolder in the theme's modules folder for the plug-in, such as jquery_powertip in this example.

   3. The PowerTip plug-in has two files that must be head contributions of the module, so create a head subfolder in the jquery_powertip folder.

   4. Copy the needed resource files from the extracted plug-in location into the head folder. The needed resource files in this case are:

      jquery.powertip.min.js
      jquery.powertip.js
      jquery.powertip.min.css
      jquery.powertip.css

   5. Copy both the min and non-min versions of the files.

      The min version is used automatically by default for performance and the non-min version is used automatically when debug mode is on.

   6. This example uses the default color scheme for the tips. But, PowerTip comes with multiple color schemes as defined in separate css files in its CSS folder. We can change to one of the other color schemes or create one of our own by placing the different css files into the head folder. For example, to get the light color scheme, we can instead copy the css files into the head folder.

      jquery.powertip-light.min.css
      jquery.powertip-light.css

   7. Your jquery_powertip module prereqs the jQuery module, so create a file named prereqs.properties in your modules\jquery_powertip folder with the following content:
      jquery

   8. If we have more plug-ins, similar module definition folders can be defined for them in the theme's modules folder. For each module definition, give the module a folder name that starts with jquery_, such as jquery_powertip in this example. Prereq the jquery module.

3. Add the module jquery to the module listings in one of the theme's profiles. Rather than modify one of the existing profile files, it is best to copy one of them and modify the copy. Copy the base profile file to be similar to, such as profile_deferred.json, rename it to something such as profile_jquery_deferred.json and add the module jquery. When creating a profile file, adjust the titles and descriptions so the profile has a unique and recognizable title and description. For example, change the titles and descriptions to

   "titles": [
         {
            "value": "jQuery Deferred",      "lang": "en"
         }
      ],    "descriptions": [
         {
            "value": "This profile has jQuery plus the full set of modules for the theme, but defers loading most of these modules unless actually needed.  This profile balances function and performance.",      "lang": "en"
         }
      ]

4. Optional: Add the plug-in modules to the module listings in the profile, such as add the module jquery_powertip in this example.

5. Invalidate the cache so the profile and module changes are picked up by the Portal server.
   Administration | Portal Analysis | Theme Analyzer | Utilities | Control Center | Invalidate Cache

6. Apply the profile to a page. In Edit Page Properties > Advanced, select the Profile: jQuery Deferred.

7. To verify that jQuery is loaded on a page and what version it is, we can run $().jquery in the console of your browser's developer tools. It echoes the jQuery version number.

Results

Now the jQuery core and the plug-ins are ready and available for use. To learn the basics about jQuery core usage, see jQuery basics in the related links. We can learn the usage of your plug-ins at the same site where we downloaded the plug-in. See PowerTip download.

• Define tooltips with PowerTip
  Once the PowerTip module is active, we can add one or more tooltips to the pages through a dynamic content spot, or a config markup type subcontribution in a module.

Parent Customize the theme

Related concepts:
Specify profiles with metadata
Define theme modules
jQuery plug-in download
jQuery PowerTip plug-in download
jQuery basics
PowerTip download