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. Figure 29. Customizing the Plug-in Wrapper to Display the Control Identity
To customize the plug-in wrapper to display the control differently
- 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) {
- 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.
- 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.
- 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.
- 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.
- Save the ColorBoxPW.js file.
|