Thursday, November 14, 2013

jQuery UI Widgets in Siebel Open UI - Part 3: Slider

Recently, we have been exploring the jQuery UI dialog widget. In this third instalment of our mini-series on how to benefit from jQuery UI widgets in Siebel Open UI we will learn how to use the slider widget to implement - well - a slider.

For my example, I chose the well known Opportunity Form Applet - Child applet, which exposes the Primary Revenue Win Probability field (or simply "Probability").

Instead of the dreary list of values our imaginative - and imaginary - end users would like to use a slider to display and control the value of the opportunity's win probability. Let's add some spice and say they also want a color coded display (red for zero and green for 100%). Something similar to this:

So we have the requirement, now let's design our solution:

Because the final goal is to manipulate the display of data, we take the decision to use browser side scripting using the Siebel Open UI API and jQuery UI.

Let's keep things simple for starters and limit the functionality to the aforementioned form applet. So we must write at least a physical renderer extension class.

Because we also need to "write back" the changes to the underlying business component, we also must implement a presentation model extension class.

Finally, we assume that some CSS work will be necessary as well.

1. Create a slider

In the physical renderer (PR) we have to "replace" the original text input with a slider widget. I first went for a direct replacement, hoping that some higher spirits would also take care of updating the BC field but my hopes were shattered. So my next best approach was to hide the control and convert its parent element into a slider widget.

Here is the first piece of code which does exactly that. As you can see, I placed the code into the PR's ShowUI() function which is invoked every time the applet is "shown".

Click to enlarge.
Most of the lines will look familiar to those who had some recent exposure to Siebel Open UI and I will not go to deeper on them. Basically, all we do is try to get the current value of the probability control.

The slider widget has specific options which are described in detail here. Here is the code which is run when the widget is instantiated (the "start" function):

Click to enlarge.
With these lines we take care of the tooltip (see below) and remove any existing instance of it.

The slide function is invoked when the user drags the slide handle:

Click to enlarge.
Here we actually create the tooltip which displays the current value and also call a custom function to change the background color of the slider.

Finally, the change function is invoked when the user releases the handle:

This is the ideal place to do the following:
  • Set a property (so that the PM can access the new value)
  • Set the control value (remember, the control isn't the slider)
  • Change the background color (using the custom function)
  • "Wake up" the PM so that it can handle the value change
The final three lines of the ShowUI() function create the slider proper using the slider() method which takes the options variable. We also add a new class to the element for easier styling and finally hide the original control so that it is out of sight.

The aforementioned custom function to change the background color is an attempt to compute the color based on the value. I am sure there are much more elegant ways to accomplish the same, forgive me, but the reverse polish part of my brain was on vacation when I wrote this ;-)

Because we want the slider to show the correct value when the user selects another record, we use a common technique of attaching to a property using code similar to the following in the class constructor:

this.GetPM().AttachPMBinding( "SE_ProbValNew", UpdateSlider, {scope:this});

This will cause the UpdateSlider() function to be invoked every time the SE_ProbValNew property is touched (by the PM).

And here is the function itself:

The code gets the old and new values and ensures that the slider is only updated when necessary. In addition we remove any stray tooltips and call the magic code to change the background color.

2. The Presentation Model

In the presentation model's Init() function, we first register all properties, methods and event handlers

The following function is invoked when the PR calls the PROB_SET event which actually happens in the slider's change() event handler.

The main goal of the function is to ensure that the slider value is propagated to the BC field (and subsequently saved). I took the approach of setting the BC field which has the nice side effect of refreshing the UI, e.g. in another applet in the view based on the same BC. A bit of digging in the documentation showed that from the PM you can use the InvokeMethod method to invoke an arbitrary method such as WriteRecord.

The SelectionChange() function is invoked when the cursor is set to a different record and ensures that the PR gets notified by updating the property to which it has attached the UpdateSlider() function.

Subsequently, the slider is refreshed to represent the value of the current record's probability field which is necessary to update the form applet for example when the user scrolls in a parent list applet.

3. Styles

The following screenshot shows the CSS rules for the slider and tooltip

4. Test

The following screenshot shows the slider while the user drags the handle. Note the low value and reddish hue.

And here the same slider with a higher value. Note the green color.


It's a bit of a drag (pun intended) but with a still surprisingly small number of code lines (which can be optimized from this scholarly example) we can spoil our dear end users with a full grown slider control.

The above example has been implemented on

have a nice day



Konstantin said...

Hi Alex. Could you please tell where the code should be placed to? The same question appears when I read the "Configuring Siebel Open UI" doc. The piece of code or a function is given in the doc but in what file it should be placed for heaven sake???

Alexander Hansal said...

Hi Konstantin,

please refer to this article where you can find complete physical renderer and presentation model templates for both versions ( / .10 and IP 2013).

have a nice day


jo [] said...

Hi Alex,

Very nice article.But small request

1) can you give the complete code for PM and PR

2) For CSS change is it a custom css file

Joseph Thomas

Alexander Hansal said...

Hi Joseph Thomas,

as for your request to give the complete code: As you notice, I only provide screenshots of code to "encourage" my readers to go for their own implementation.

I learned coding by writing code, not by uploading ready-to-use files.

So please understand why I do not provide complete code samples.

For the CSS change: yes it has to be added to a custom CSS file (as modifying Oracle-delivered files is not supported).

have a nice day


jo [] said...

HI Alex,

Yes .you are correct .i will do it myself.

Joseph thomas