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

Customizing the Plug-in Wrapper to Display the Control Differently

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

In this step, you customize the setup logic of the plug-in wrapper so that it adds a color-box to the control.

In this example, the ShowUI method will be overridden to add a different element on to the DOM as a part of this control. The functionality of the control will remain unaffected, effectively, you will be decorating it with a new element.

This is an optional step: the base functionality of how a control looks and behaves can be completely changed based on your requirements. An out-of-the-box example of this type of modification is a flip switch that appears instead of a check box on touch devices in Siebel Open UI, which is accomplished using a plug-in wrapper.

Figure 29 illustrates the code you use to customize the ShowUI method of the plug-in wrapper. Each number in this figure identifies the corresponding step number in the numbered task list that this book includes immediately after this figure.

To customize the plug-in wrapper to display the control differently

1. In the colorboxpw.js file, introduce the ShowUI method that is a part of the life cycle of rendering a control.

   ColorBoxPW.prototype.ShowUI = function (control) {

2. Call the superclass method to get the dropdown to appear:

   SiebelAppFacade.ColorBoxPW.superclass.ShowUI.call(this, control);

   This will call the ShowUI method of the DropDownPW class, which is responsible for showing the drop down field in the Siebel Open UI client.

3. Get a reference to the existing element, and if it exists, get the parent element:

   var el = this.GetEl();
   if (el && el.length) {
   parent = el.parent();

   NOTE:  This step is required to position the new DOM element as a sibling to the current element.

   The GetEl() API framework method is a plug-in wrapper space that retrieves the jQuery element representing the control. parent() is a jQuery call which retrieves the parent node of the element in the DOM. For more information about the GetEl() API method, see Architecture of Siebel Open UI.

4. Add a new HTML div, which will serve as our color box:

   parent.append("<div id='colorbox_" + el.attr("name") + "' ></div>");

   You must specify a unique name for the element. In this example, colorbox_ is added to the existing name of the original element. The append() and attr() specifications are both jQuery APIs. The former adds DOM elements at the end of a given element and the latter extracts the specified attribute.

5. Style the newly created div. This will serve as our colorbox:

   parent.find("div[id^=colorbox]").css({
   "width": "inherit",
   "height": "20px",
   "background-color": "inherit"
   });

   The css()is a JQuery API that applies CSS styles to the given element. In this example, the colorbox gets the same width as the original dropdown and a height of 20 pixels. The original background color is inherited from the dropdown.

6. Save the ColorBoxPW.js file.