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

Creating the Plug-in Wrapper

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

The plug-in wrapper uses the Init method to configure the properties, methods, and bindings. For more information about these methods, see Life Cycle of User Interface Elements.

Figure 28 illustrates the code you use to create 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.

This topic describes how to modify code that resides in the ColorBoxPW.js file. It is recommended that you get a copy of this file to assist in your understanding of how to implement the example that this topic describes. This file includes all the code in this example. It also includes more comments that describe code functionality. To get a copy of this file, see Article1494998.1 on My Oracle Support.

For more information about the folders you can use to store your customizations, see Organizing Files That You Customize. For more information about the language_code, see Languages That Siebel Open UI Supports.

To create the plug-in wrapper

1. Create the plug-in wrapper file:
   1. Download a copy of the ColorBox.js file to the following folder:

   INSTALL_DIR\applicationcontainer\webapps\siebel\\language_codefiles\custom

   2. Use a JavaScript editor to open the ColorBoxPW.js file that you downloaded in Step a.
2. Make sure the ColorBoxPW class does not exist and that you do not configure Siebel Open UI to override this class. You add the following code:

   if(typeof(SiebelAppFacade.ColorBoxPW) === "undefined"){

3. Make sure a namespace exists that Siebel Open UI can use to prevent conflicts:

   SiebelJS.Namespace("SiebelAppFacade.ColorBoxPW");

4. Use the Define method to identify the presentation model file:

   define("siebel/custom/ColorBoxPW", [siebel/basePW], function(){

   You must use the Define Method to ensure that Siebel Open UI can identify the constructor. You must include the relative path and the name of the presentation model file without the file name extension. For more information, see Define Method

   NOTE:  Any third-party files that the plug-in wrapper uses must be mentioned in the dependencies section of the define statement.

5. Define the class:

   SiebelAppFacade.ColorBoxPW = (function(){

6. Define the class constructor:

   function ColorBoxPW(){
   SiebelAppFacade.ColorBoxPW.superclass.constructor.apply(this,
   arguments);
   }

7. Set up the injected dependency:

   SiebelJS.Extend(ColorBoxPW, SiebelAppFacade.DropDownPW);

   For more information about injected dependency, see About Dependency Injection.

8. Return the constructor:

   return ColorBoxPW;
   } ());
   return SiebelAppFacade.ColorBoxPW;
   });

9. Attach the plug-in wrapper:

   SiebelApp.S_App.PluginBuilder.AttachPW(consts.get("SWE_CTRL_COMBOBOX"), SiebelAppFacade.ColorBoxPW, function (control) {

10. Write the condition for which the plug-in wrapper should kick in:

    return (control.GetName() === "Probability2");

11. Save the ColorBoxPW.js file.