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 https://github.com/siebelhub/siebelhub.js.
The following list outlines the steps needed to create a custom utility library in Siebel Open UI.
- 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.
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 https://github.com/siebelhub/siebelhub.js 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
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.
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
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.
//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