Oracle Siebel Open UI Developer's Handbook

Oracle Siebel Open UI Developer’s Handbook | Creating a Custom Utility Library

Every seasoned programmer can relate to the need to keep a library of often-used functions. Using such utility libraries is established and highly recommended practice and we should revert to this technique in Siebel Open UI development as well.

In the following case study, we will use a public Open UI library that has been created for educational purposes to convey the steps to create a custom utility library. This library is called siebelhub.js and has been published by the Siebel Hub team. You can find the source code and links to documentation on

The following list outlines the steps needed to create a custom utility library in Siebel Open UI.

  • Create a dedicated JavaScript file
  • Register the file in the Manifest
  • Call library functions

In the following sections, we will describe each step in detail, using siebelhub.js as an example.

Creating a Dedicated JavaScript File

We would typically start with an empty file and save it to the siebel/custom folder as usual, using a meaningful name such as utilities.js. As a task, this is simple enough. If you want to explore the siebelhub.js library, you can download the full archive from and extract the siebelhub.js file from the archive into the siebel/custom folder.

In addition, extract the siebelhub.css file and copy its content to a custom style sheet of your choice.

If you want to explore the full functionality of siebelhub.js, refer to the documentation links which include installation notes and which explain how to add the server side business service for the data retrieval example into your repository.

Registering the File with the Manifest

As with any custom JavaScript file that needs to be available at all times, we must register it in the Open UI Manifest.

After adding the file reference in the Manifest Files view, we proceed to the Manifest Administration view and register the file with a custom copy of the platform independent entry.

As usual, we have to log off and on again to complete the Manifest registration. The following screenshot shows the Siebel Call Center application with the siebelhub.js library loaded.

Siebel Open UI Call Center

Once the siebelhub.js library is loaded, a square icon is displayed in the lower right corner of the application. Clicking that icon opens the dialog visible in the screenshot.

Calling Library Functions

Once the custom library is loaded, any function therein can be used from any other JavaScript code, including custom postload event listeners, presentation models, physical renderers or plug-in wrappers.

In continuation of our quick introduction of the siebelhub.js library, we can inspect the sample postload event listener that comes with it to see how library functions are invoked.

The following code snippet shows the beginning of the siebelhub.js postload event listener.

SiebelApp.EventManager.addListner(“postload”, SiebelHubPL);

function SiebelHubPL(){


    //let’s call a few cool siebelhub methods:




The example code invokes several functions implemented in the siebelhub.js file, such as AlignViewToTop or MakeAppletCollapsible.

Again, feel encouraged to download the siebelhub.js documentation and spend some time with this educational library. Please heed the notes of the authors not to use any of the code in production systems.


This case study is taken from

Oracle Siebel Open UI Developer's Handbook

Oracle Siebel Open UI Developer’s Handbook [2016 Edition]