Adding Popup Textarea in Siebel OpenUI

One of the most pressing issues that users have encountered so far in Siebel OpenUI is the inability to edit text area controls properly in both list and form applets. In this post I am demonstrating a simple text area customisation solution that applies to the entire Siebel application. There is no need for developing custom JavaScript files for rendering specific applets. To demonstrate it I have chosen the most recent version of OpenUI - IP2014. However, this can also work in IP2013.

I will start by explaining the issue in list applets: If more than one line of text is entered in a text area control of a selected record then the entire row automatically expands in height. This not only represents an undesired user experience when navigating through multiple records but also makes the reading of individual record values hard to follow.

A different issue is observed with text area controls displayed on form applets. HTML5 usually allows text areas to be manually expanded when trying to read a larger amount of text. However, this cannot be achieved in IE10/IE11. Needless to say this makes reading of large texts impossible on form applets where text area fields only display one line of text containing 1-2 words.

Fortunately, Siebel allows developers to modify the out-of-the-box Physical Renderer files of both form and list applets. The customisation solution presented below modifies the Phyisical Renderers to addresses both issues.

First, let's see how this custom feature works in form applets.

Click on the text area icon to open the popup editor:

If the text area control on the form applet is read-only then you will not be able to modify the text displayed in the popup editor. However, if it is editable then the popup editor will allow you to type text up to the point where the maximum character length of the underlying text area control is reached.

When the popup editor is closed all the text is passed back to the text area control:

Similar to form applets, the second set of screenshots demonstrate how the popup text editor works on list applets.

Click on the text area icon to open the popup editor:

Edit or read the text in the popup and when you are done press the close button to pass the text back to the list text area control:

Below I will explain how this all works. Basically 3 areas of customisation are required.

1. Install JQuery Plugin - Colorbox

This custom popup feature is based on "Colorbox"- a lightweight JQuery plugin (free download from http://www.jacklmoore.com/colorbox/ ). Siebel Open UI must first be configured to use this plugin.

2. Customise Physical Renderer files based on phyrenderer.js and jqgridrenderer.js 

For IP2014 the original physical renderer files for both list and form applets are placed under SWEApp\Public\ENU\23044\Siebel folder.

Oracle does not recommend changing the code in these files directly so simply make a copy of them which you can modify and then configure the Siebel application to use the custom Physical Renderers instead.

Form Applets are rendered using phyrenderer.js and the following changes are applied:

Find the code for ShowUI function "ac.prototype.ShowUI=function()"

Add the following code before the close bracket "}" to make sure all existing code is already executed:

Next, add the code below before "return SiebelAppFacade.PhysicalRenderer"

List applets are rendered by jqgridrenderer.js This file is easier to read and modify. Simply find the code for rendering text area elements starting with " case textArea:" and replace with:

3. ( Optional) Apply custom css styling for colorbox classes in the main css file e.g. theme-aurora.css

To summarise, this customisation tackles a general limitation of text areas in OpenUI. The approach is similar to the way this usability was achieved in High Interactivity. The plugin and custom JavaScript code that I have chosen to configure/develop are solely for demonstration  purposes and I am sure that there are other ways of achieving a similar result.

I hope you found this useful. I welcome any comments you might have and please do let me know if you think it needs any improvements.