Thursday, November 21, 2013

jQuery UI Widgets in Siebel Open UI - Part 4: Progressbar

As you can see from my previous articles, I currently have a crush on jQuery UI. Today, let's have a look at the progressbar widget.

While a progress bar is typically used to distract a user's attention from a slow upload to some moving pixels on the screen, we could also use it to convey the "completeness" of a record in Siebel CRM.

For a simplistic example, we could display a progress bar on top of an applet, just below the applet title. When only a few fields are populated, the bar is short and red and would tell the user "This record is incomplete". Like this:

Click to enlarge.
When more fields are populated, the progress bar turns yellow and then green. Like this:

As you can see from the above screenshots, I took the liberty of experimenting with the progressbar widget on the Opportunity Form Applet which has fallen victim to my abusive coding just recently.

In the following, I would like to give an overview of the code I added to both the presentation model and physical renderer extension class to make the progressbar work.

1. Display the progressbar

The following code has been added to the ShowUI() method of the physical renderer extension class to display a progress bar underneath the applet title.
Click to enlarge
The major difficulty I faced was to find a suitable place for the progress bar. I decided to go for a new <div> element after the applet title.

2. Style

The default style makes the progress bar look a bit fat, so I added the following rules to my custom style sheet:

.ui-progressbar {
    height: 6px;
    width: 75%;
    position: relative;
    border-color: burlywood;
    background: beige;
    border-radius: 0px;
.ui-progressbar .ui-progressbar-value {
    margin: 0px;
    height: 6px;
    background: burlywood;
    border-radius: 0px;
    border: beige 0px;

This makes for a lithe progress bar with edged corners.

As with any jQuery UI widget, we could also use the famous ThemeRoller application to customize the styles but for a simple educational demo, I just stick with some hand-crafted rules.

3. Set the progressbar value

Now comes the logic to set the value of the progress bar. As with any custom logic, the code resides in the presentation model. I crafted the following method to compute the percentage of populated fields against all input controls on the applet.

Click to enlarge.
With a bit of Open UI API experience, the code to parse the current control array of an applet should be common sense.

It is somewhat tricky to separate the "real" input controls from the other controls such as buttons. I went for the option to read the BC field name because only the "real" controls are associated with such.

You can see that I increase two counters, one for all "real" input controls and one for those which have a value. This makes it easy to calculate a share in percent and store it in a property in the final line of code.

In a presentation model class, we must register new functions like this:

this.AddMethod("computeProgress", computeProgress, {sequence : false, scope : this});

Then we can invoke them like this:


The above line was put into the methods handling the "ShowSelection" and "FieldChange" events. So every time a field is changed or another record is selected, the progress bar value would be recalculated.

4. Update the UI

The physical renderer's role is to take care of the visual appearance of data. First we must register a binding of the PR to the property (set by the PM) with the following line in the PR class constructor.

this.GetPM().AttachPMBinding( "SE_Progress",UpdateProgressbar, {scope:this});

The screenshot below shows the UpdateProgressbar method which will be invoked every time the SE_Progress property is touched by the PM.

Click to enlarge.
The method simply reads the property value and passes it to the progress bar. Finally we add some colors depending on the value (red, yellow, green).


Visual cues which help end users understand the completeness or validity of data are very important in complex business applications like Siebel CRM. jQuery UI provides developers with an easy-to-use progressbar widget to accomplish such requirements.

The above example has been implemented on Siebel

have a nice day



Anonymous said...

Hi Alex,

thanks for sharing another great JQuery example. One quick question: How can we add a control to the array of controls available in PM/PR, in case it's not displayed in the applet directly. I remember reading about an applet user property somewhere, but can't figure out what it was.


Alexander Hansal said...

Hi Benjamin,

I believe you refer to the new (in IP 2013) ClientPMUserProp user property which allows us to "send" properties to the Open UI framework and get them in the PM.

have a nice day


Anonymous said...

Hi Alex,

thank you! I think this is not what I am looking for.
Imagine the following: I want to do some decisions in my custom PM based on BC fields, which are not exposed on the applet. Therefore, I can not get their values from the array of controls available in PM.
I thought there was a way to explicitly add certain applet controls to the controls array of the PM, even when they are not displayed in the applet.

One way is of course to add the controls to the applet, but set HTML Type = "Hidden".

But I thought there was a user property which I just cannot find ...

Maybe I was wrong though!


Anonymous said...

We should build a custom properties for open ui, which should get loaded as java object on application load. This will help to reuse the customisation everywhere and make it controllable without release.

any thoughts?


Anonymous said...

i m facing one prob with this code.
May i know what is controlName in point3.

Alexander Hansal said...

Hi Anonymous,

it's a variable to hold the current control name in the for loop.

have a nice day