Fixing Textarea in Siebel Open UI

In Siebel HI application all the description fields or the fields that were suppose to hold large amount of data (controls with HTML Type as “TextArea”) you would see an icon on the side of the field.Clicking on that icon opens up a popup allows you to view and edit the text in the field.

image                   image


This is a pretty important piece of functionality that you loose when you move to Siebel Open UI. In Siebel Open UI you just see plain Text area control.Although latest browsers gives you the ability to expand the textarea field manually by clicking and dragging the icon located in the bottom right of the text area (shown below). But it is pretty annoying to do that every time you want see what is in the field.

image                    image

This post explains a simple (although not perfect) solution to this problem using a jQuery plugin (again) with name AutoSize. We create a View Level PR for the solution so that we can address all textareas in a view in one go.  The code that we have to write is pretty minimal. Here are the steps that you need to follow

  1. Download the View PR template (if you already don’t have it) from here
  2. Include the Plugin file using instruction in this post.
  3. In SetRenderer function write following code
$('textarea').focus( function() {
    $(this).autosize(); //resize when user focus on the textarea
});

$('textarea').blur( function() {
    $(this).trigger('autosize.destroy'); //revert back to original size when user leaves focus
});

Curious to know what it does?

Autosize plugin automatically resizes the textarea to display complete text that is being entered. So, basically what our View PR code is doing is that :

As soon as Textarea gets focus (user clicks on it) autosize will resize the text area to show complete text. Once user has completed editing/viewing of the text and field looses focus, revert the text area back to original size.

image          image

This is not an ideal solution because of following reasons

  1. The layout of the applets gets distorted when the textbox is expanding.
  2. Flickering that happens when the textbox is resized suddenly can cause confusion to the user and loss of focus.

So, I am looking for better solution but till that time something is better than nothing.

This Post has been viewed : 12,993 Times


13 Responses to Fixing Textarea in Siebel Open UI

  1. Neel, ViewTemplatePR isnt working as is, its erroring out while trying to execute GetPM function after removing those two lines it worked perfectly fine. Secondly, I was trying to find some reference for Setup function but failed, could you point me to any documentation?

  2. For enterprises who are still stuck with internet explorer you can try using :

    $(‘textarea’).resizable();

    It mimics chrome like flexible text areas in internet explorer and avoids heavy plugins.

  3. Hi Jim, Can you please elaborate the work around that you have mentioned here…actually we have been migrated to IP2014 8.1.1.14 and we facing this issue with IE 11…Can you please suggest how we can implement this workaround?? Appreciate your help..

      • Hi Honey, Pavani, I think I know why this is not working for you, but as I don’t have access to IP2014 I cant confirm. Could you please check if there is any error in console for image not found after running resizable js? As I can see that Blue cue is an image from IP2013 and image is sourced from
        \23030\scripts\3rdParty\jquery-ui\current\themes\redmond\images\

        please verify your image.

        you can also try including following in your css, this should make cue come out.

        .ui-icon, .ui-widget-content .ui-icon {
        border-right: 4px solid red;
        border-bottom: 4px solid red;
        }

  4. Hi Neel,

    Thank you for this solution!

    For our current version it only works after the following modifications:

    TextareaAutosizePR.prototype.ShowUI = function () {
    SiebelAppFacade.TextareaAutosizePR.superclass.ShowUI.call(this, arguments);
    $(‘textarea’).on(‘focus’, function() {
    autosize(this); //resize when user focus on the textarea
    });

    $(‘textarea’).on(‘blur’, function() {
    autosize.destroy(this); //revert back to original size when user leaves focus
    });
    }

    Regards,
    Ronny

Leave a Reply

Contribute