Siebel IP14 – Popup editing Text Area controls (the sequel)

A while back I blogged about a solution to enable pop-up editing of Text Areas in Siebel IP14, using the Control Plugin wrapper framework. Well, it had some rough edges.

At that time I only tested the code exclusive on Form applets. One of my customers asked (because it apparently did not work on List applets) to enable it for List applets too. Why it did not work flawlessly on List applets, is that specifically text area controls behave different. Back in December I found already that on Form applets, Siebel injects a <span> once you click on a Text Area control, which did not work very well with the Popbox library.

While discussing this yesterday wit Duncan Ford, it resulted in a refactored solution. Factually a simpler, more elegant one which can be styled appropriately. And which works for both Form as well as List Applets. It behaves as a modal dialog. Selected event is the double-click on the Text Area control. This way if you want to can still use the Text Area control as-is.

.
Further, what got added is a little transient tool-tip (well, not a real one) to tell the user he might want to double-click on the control. Probable this will start to get annoying soon, but it might help as matter of change management support. The tool tip will only show once within a given view. That means, if you navigate to a view and hoover over a text area control it will display the (yet hardcoded) string. Once you have hoovered accross, the PW injects an attribute, such that the next time the “mousenter” events fires, it will not show the transient tool-tip again.

popfade

This piece of the code is responsible for managing the transient tool-tip. Important piece is the conditional statement to check wether this.GetEl() returns an object. It appears that the PW also fires for the header row of a list applet, in which case though GetEl() is an empty object.

popupareacode1

The code responsible for showing the actual JQuery dialog. The JQuery dialog is passed its own class so it can be styled accordingly. Important of course the type of the dialog is shown as a Modal one, so one cannot navigate around.

popupareacode2

You can grab the complete code here:

Advertisements

14 thoughts on “Siebel IP14 – Popup editing Text Area controls (the sequel)

  1. Hi, I new to PW and am facing issue with implementation of this PW as it gives “Undefined is not a function” Error and is unable to execute the commans of the plugin in PW. Please Help. Also could you tell how to register the external plugins for this

  2. Hi Jeroen,

    This is good! But it allows the popup to be opened on read-only textarea controls as well – though is doesn’t save the Notes on exit (which is good). How do we prevent the dialog to be opened on readonly controls?

    • Shiv, I believe that would be terrible UX. Why not letting the applet to open? Are users not allowed to see it anymore 🙂 Sure, it can be done easy. Just evaluate in the double click event handler whether the control has the ‘editable’ attribute set to false. Something like if ($(this).attr(“editable”) === “true”) {… dialog logic … }.

      • Can it be done different?
        I mean, when control is read only, than You can open popup, but it is grayed and You can’t edit text ares, just like in normal Siebel 🙂

  3. Hi Jeroen,
    Will this option work in IP13, added the TextArea2DialogPW to manifest and uploaded the js file into custom folder. Getting an error during application load as below in IP13. Can you please suggest.

    Cannot read property ‘AttachPW’ of undefined

    Thanks,

  4. Hi Jeroen,
    Will this option work in IP13, added the TextArea2DialogPW to manifest and uploaded the js file into custom folder. Getting an error during application load as below in IP13. Can you please suggest.

    Cannot read property ‘AttachPW’ of undefined

    Thanks,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s