Siebel Open UI Enhancement : Fixing Text Area using jQuery

Hello All,

In this post i will provide some alternate solution to text area type fields which in Open UI have elastic control property.
In HI mode there used to be an icon on Text Area fields and on click of the icon a new popup opened and we could write and read the text easily which has been replaced by elastic control in open UI.

here, we are calling a jQuery plugin to dispaly the content of text area in a popup.

also, the issue can also be fixed without using 3rd party jquery plugin but that solution is restrictive, you can refer the link http://www.siebelfoundations.com/2015/09/fixing-text-area-issue-in-siebel-using.html

Features 

• Content of Text Area field displayed in Separate window popup
• UI is Blocked till we explicitly close the popup
• We can call the popup in multiple events like mouse hover, Click , Double click
• We are using lobibox plugin from https://lobianijs.com/site/lobibox

Working demo is as shown below

Sample Code

$('[aria-label="SR Description"]').click(function(){

Description = pm.ExecuteMethod( "GetFieldValue", cntrl );

Lobibox.window({title: 'Description of Field',

content: Description});

});

here, Lobibox.window({title: 'Description of Field', content: Description}); is calling the popup with title and value of text are as content

Sample Video 

you can email me for the exact PR file. Your comments are suggestion are most welcome.

Fixing Text Area Issue in Siebel using custom PR file

Hi all,

In Open UI there is a change in behaviour of fields of type Text Area, in HI there used to be a icon in text area field on on click on that a popup opened and the data was displayed separately in popup.
But in Open UI the functionality has been replaced with dragable Field option, wherea icon apper in the botton right of field and the field can be enlarged.

We had a requirement recently to fix the Text Area field issue, we used the below appraoch.

1. Increase the dimension of TextArea field onFocus.

2. Set the values of dimensions to initial onBlur.

This does not replicates the HI behaviour but serves the purpose.
PR file looks Like

if (typeof(SiebelAppFacade.LOYHideFieldPR) === "undefined")  {  SiebelJS.Namespace("SiebelAppFacade.LOYFixTextAreaPR");  define("siebel/custom/LOYFixTextAreaPR", ["siebel/phyrenderer"],  function () {  SiebelAppFacade.LOYFixTextAreaPR = (function ()  {  function LOYFixTextAreaPR( pm )  {  /* Be a good citizen. Let Superclass constructor function gets executed first */  SiebelAppFacade.LOYFixTextAreaPR.superclass.constructor.call( this, pm );  /* Static List of Control Identifier which will be displayed in Carousel; */  }  SiebelJS.Extend( LOYFixTextAreaPR, SiebelAppFacade.PhysicalRenderer );  LOYFixTextAreaPR.prototype.ShowUI = function()  SiebelAppFacade.LOYFixTextAreaPR.superclass.ShowUI.call( this );  var pm = this.GetPM();  //Enlarge Comments field on Focus Rahul Verma  $('[aria-labelledby = "Description_Label"]').focus(function() {  $(this).css( {  'height': '147px',  'width': '488px',  'position': 'inherit',  'margin': '2px 0px',  })  });  $('[aria-labelledby = "Description_Label"]').blur(function() { $(this).css( {  'height' : '48px',  'width' : '104px' ,  'position' : 'inherit'  })  });  };  return LOYFixTextAreaPR ;  } ());  return "SiebelAppFacade.LOYFixTextAreaPR";  }); }

Hope this was helpful..

#Note : please see post http://www.siebelfoundations.com/2017/08/siebel-open-ui-enhancement-fixing-text.html for a jQuery based solution to this issue.