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

Customizing the Physical Renderer to Render the Carousel

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. This method 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 a list applet. 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 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 Document Object Model (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. Build the HTML for the third-party carousel plug-in:

   var carouselHtml = "<div class='siebui-jcarousel-wrapper'> " +
   "<div class='siebui-jcarousel' id=\"" + placeHolder + "_recycle\"> " +
   "<ul class='siebui-list-carousel' >" +
   "<li></li>" +
   "</ul>" +
   "</div>" +
   "<a href='#' class='siebui-jcarousel-prev'>&lsaquo;</a> " +
   "<a href='#' class='siebui-jcarousel-next'>&rsaquo;</a>" +
   "</div>";

5. Add a CSS class:

   .addClass("siebui-list-recyclebin")

6. Add the constructed HTML for the carousel after the carousel container:

   .after(carouselHtml)

7. Modify the existing jcarousel div container, to make it a carousel:
   1. Locate the jcarousel div container in the first child of the parent container. The container will look similar to the following:

   .eq(0)
   .hide()
   .children( "div.siebui-jcarousel" )

   2. Make a carousel out of the jcarousel that you located in Step a:

   .jcarousel({
   });

8. Save the recyclebinrenderer.js file.