Why Plug-in Wrapper ?
A plug-in wrapper is a complete and independent manager of an applet control and its life-cycle. It is entirely responsible for all actions of a control.
Suppose we want to change checkboxes to flip-switches across application OR change textarea to popup colorbox textarea OR change drop-down combo-boxes to a silder. Then we can achieve by using Plug-in wrapper as we can directly target a control withour interferring other objects.
How its different from Physical Renderer ?
- This file solely responsible for controls.
- We cannot bind this file with Presentation Model methods.
- It registers on application level and attach directly to control
Plug-in Wrapper Methods
GetElMethod
The GetEl method simplifies the process of finding DOM element
var el = this.GetUIWrapper( control ).GetEl();
when the control has multiple DOM instances, as in a list applet:
var el = this.GetUIWrapper( control ).GetEl( index );
ShowUIMethod
ShowUI is a lifecylce method that gets called when the PW is being instantiated. We can customize look n feel of controls in this method.
BindEventsMethod
The BindEvents method attaches events to the DOM instance of a control, so that right actions can occur when the user does different actions on the control.
SetValueMethod
SetValue is an API that’s called when a value change has occured on that control. This could either be due to a change by the user or by the Siebel system.
SetValue(value, index)
GetValueMethod
The GetValue method gets the value of the control field from the DOM.
GetValue(index)
How to register Plug-in Wrapper ?
- Register this file in manifest on application level so that its available on application load only.
- Navigate to theAdministration -Application screen, and then the Manifest Administration view.
- In the UI Objects list, add a new record with the following values:
Type – Application
Usage – Type Common
Name – PLATFORM INDEPENDENT
Plug-in Builder Class
AttachPW use to attach the plug-in wrapper to a control conditionally.
SiebelApp.S_App.PluginBuilder.AttachPW(Control Type, PW Class, function (control, objName) { return <conditions>;
How to apply Plug-in Wrapper based on conditions ?
Based on Applet Name:
SiebelApp.S_App.PluginBuilder.AttachPW(consts.get("SWE_CTRL_TEXT"), SiebelAppFacade.CustomTextPW,
function (control, objName) {
return (objName === "AppletName1" || objName === "AppletName2");
});
Based on Control Name:
SiebelApp.S_App.PluginBuilder.AttachPW(consts.get("SWE_CTRL_TEXT"), SiebelAppFacade.CustomTextPW,
function (control, objName) {
return (control.GetName() === "ControlName" && objName === "AppletName1");
});
Based on Device Type:
SiebelApp.S_App.PluginBuilder.AttachPW(consts.get("SWE_CTRL_CHECKBOX"), SiebelAppFacade.CustomCheckPW,
function (control) {
return SiebelAppFacade.DecisionManager.IsTouch();
});
Based on Application Name:
SiebelApp.S_App.PluginBuilder.AttachPW(consts.get("SWE_CTRL_COMBOBOX"), SiebelAppFacade.CustomPW,
function (control) {
return (SiebelApp.S_App.GetName() === "ApplicationName")
});
Based on View Name:
SiebelApp.S_App.PluginBuilder.AttachPW(consts.get("SWE_CTRL_CHECKBOX"), SiebelAppFacade.CustomPW,
function (control) {
return (SiebelAppFacade.DecisionManager.IsTouch() && control.GetApplet().GetView().GetName === "ViewName")
});
Plug-in Wrapper Example
In this example, we are customizing “Probability” control to add color tag based on its value and one info icon to click & get popup for its legend or color definition. You can download this file, it is self explaintry.You can write for any doubt in comments below.
Download Plug-in Wrapper Example
[su_slider source=”media: 907,906,905,904″ link=”lightbox” target=”blank” width=”1210″ height=”500″]
[su_divider style=”dotted”]
@AskmeSiebel