Configuring Siebel Open UI > Example of Customizing Siebel Open UI > Process of Customizing the Plug-in Wrapper >

Customizing the Plug-in Wrapper to React to Value Changes of a Control

This task is a step in Process of Customizing the Plug-in Wrapper.

In this topic, you define behavioral customizations when changes occur in a control value. These changes affect the appearance of the colorbox element that you created in Creating the Plug-in Wrapper.

Figure 32 illustrates the code you use to style the color box based on the value that is being set on a control. Each number in this figure identifies the corresponding step number in the numbered task list that this book includes immediately after this figure.

To define the value based modifications in the plug-in wrapper

1. In the colorboxpw.js file, introduce the SetValue method that is a part of the life cycle of a control's existence.

   ColorBoxPW.prototype.SetValue = function (value, index) {

   The SetValue API is called as part of a control life cycle when a value change occurs on the control, either directly by the user, or by the Siebel application. This call is responsible for the value change to appear in the DOM. In this example, SetValue is overridden in order to read into the value change that is happening on the control, and consequently makes modifications to the color box based on the value. For more information about the SetVAlue API, see Architecture of Siebel Open UI.

2. Call the superclass method to make sure that the dropdown receives the intended value:

   SiebelAppFacade.ColorBoxPW.superclass.SetValue.call(this);

   This will call the SetValue of the DropDownPW class, which is responsible for applying the correct value on to the dropdown field itself.

3. Get the new DOM element and the value that is being set:

   var colorbox = this.GetEl(index).parent().find("div[id^=colorbox]");
   if (colorbox && colorbox.length) {
   var val = parseInt(value);

   Because the value is in string form, and our future actions on this value involve treating it as a number, we need to convert it into a number form. The standard JavaScript method that is used for the purpose is parseInt.

4. Validate the value and specify values that modify the color box in different ways:

   if (!isNaN(val)) {
   if (val >= 0 && val < 25) {
   colorbox.css("background-color", "red");

   }
   else if (val < 50) {
   colorbox.css("background-color", "orange");
   }
   else if (val < 75) {
   colorbox.css("background-color", "yellow");
   }
   else {
   colorbox.css("background-color", "green");
   }
   }
   else {
   colorbox.css("background-color", "inherit");
   }

   In this example, the value is verified to ensure that it is a number. If it is not, the background color is set to inherit, which sets the color to the same color as the dropdown element. This behavior would be applicable, for example, in cases where the user has entered a blank value, or inadvertently provided a string. If the value is a number, then use an if-else construct to define ranges and apply different colors on to the color box DOM element.