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

Customizing the Physical Renderer to Bind Events

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

In this topic, you add the following functionality to the carousel:

• If the user hovers the mouse over a record in the carousel, then display a restore button as a plus sign (+).
• if the user removes the hover, then hide the restore button.
• If the user clicks the plus sign (+), then call the presentation model to restore the record.

To add this functionality, you customize Siebel Open UI to attach an event handler to each of the following items:

• To the carousel item for each hover activity.
• To the HTML node that Siebel Open UI uses for the restore button.

To customize the physical renderer to bind events

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

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

   For more information, see BindEvents Method.

2. Locate the HTML nodes that you must modify.
3. Attach event handlers for each event to the nodes that you located in Step 2:

   $("#s_" + this.GetPM().Get("GetFullId") + "_div")
     .parent()
     .delegate(
   "div.siebui-carousel-item","mouseenter",{ctx:this},ShowRestoreButton)
     .delegate(
   "div.siebui-carousel-item","mouseleave",{ctx:this},HideRestoreButton)
     .delegate(
   "a.siebui-citem-add","click",{ctx:this},AddFromRecycleBin);

   You implement these event handlers in Customizing the Event Handlers. For more information, see GetPM Method for Physical Renderers.

4. Save the recyclebinrenderer.js file.