Configuring Siebel Open UI > Example of Customizing Siebel Open UI > Process of Customizing the Physical Renderer >

Customizing the Physical Renderer to Render List Applets

This task is a step in Process of Customizing the Physical Renderer.

The ShowUI method of the JQGridRenderer physical renderer renders a list applet in the JQGrid control. The ShowUI method in the physical renderer that the recycle bin uses places the third-party JCarousel control next to the grid. For more information, see ShowUI Method.

Figure 25 illustrates the code you use to customize the physical renderer to render list applets. Each number in this figure identifies the corresponding step number in the numbered task list that this book includes immediately after this figure.

Figure 25. Customizing the Physical Renderer to Render List Applets

To customize the physical renderer to render list applets

1. In the recyclebinrenderer.js file, call the ShowUI method of the physical renderer:

   SiebelAppFacade.RecycleBinRenderer.superclass.ShowUI.call(this);

   If you customize a physical renderer, then it is recommended that you call each life cycle method of the predefined renderer before you run any custom logic.

2. Get the presentation model instance:

   var pm = this.GetPM();

   For more information, see GetPM Method for Physical Renderers.

3. Calculate the placeholder ID of the HTML node that Siebel Open UI uses as the container for the predefined applet:

   var placeHolder = "s_" + pm.Get("GetFullId") + "_div";

   You use this ID to modify the HTML DOM. For example, to position the carousel in the recycle bin. The GetFullId property gets the unique ID of each applet that is in scope in a view. It is uses the following format:

   s_FullID_div

   where:

   • FullId in this example is S_A1. The entire ID in this example is s_S_A1_div. FullId is not a complete ID. It is a part of the ID string template named s_FullId_div.

     For more information, see Properties of the Presentation Model That Siebel Open UI Uses for Applets.

4. Resize the container:

   $("#" + placeHolder)

   This code attaches the siebui-list-recyclebin CSS class to reduce the width of the list applet and to provide sufficient room for the carousel in the recycle bin. This configuration is an example of using a cascading style sheet to dynamically modify how Siebel Open UI displays the HTML.

5. Add a CSS class:

   .addClass("siebui-list-recyclebin")

6. Add the container node for the carousel after the div container for the main applet, and add CSS classes to the carousel container:

   .after("<ul id=\"" + placeHolder + "_recycle\" class='siebui-list-carousel jcarousel-skin-tango'></ul>")

7. Get a DOM reference to this new node:

   .nextAll("#" + placeHolder + "_recycle")

8. Set the size:

   .jcarousel({
     scroll:10,
     size:0,
     vertical:true,
     itemFallbackDimension:150

9. Apply the carousel plug-in to the reference that Step 7 gets:

   .data('jcarousel')

10. Set up the plug-in:

    .setup();

11. Save the recyclebinrenderer.js file.