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

Customizing the Physical Renderer to Refresh the Recycle Bin

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

At this point in this example, you have configured the ShowUI, BindData, and BindEvents methods of the physical renderer, and this renderer displays the carousel with no records. To display deleted records in the carousel, you customize Siebel Open UI to bind the data from these deleted records to the carousel control. To do this, you use dependency injection through the AttachPMBinding method. For more information, see About Dependency Injection and AttachPMBinding Method.

Siebel Open UI includes the AttachPMBinding method in the presentation model, but it is recommended that you configure Siebel Open UI to call it from the physical renderer so that the presentation model remains independent of methods that you declare in the physical renderer. AttachPMBinding adds a dependency from a physical renderer method to a presentation model method or property. If Siebel Open UI modifies a property value or runs a method in the presentation model, then it uses this dependency to call a method that resides in the physical renderer.

Figure 26 illustrates the code you use to customize the physical renderer to refresh the recycle bin. Each number in this figure identifies the corresponding step number in the numbered task list that this book includes immediately after this figure.

Figure 26. Customizing the Physical Renderer to Refresh the Recycle Bin

To customize the physical renderer to refresh the recycle bin

1. In the recyclebinrenderer.js file, bind the RefreshCarousel method that the physical renderer contains to the RefreshList method that the presentation model contains:

   SiebelJS.Extend(RecycleBinRenderer, SiebelAppFacade.JQGridRenderer);
   RecycleBinRenderer.prototype.Init = function () {
     SiebelAppFacade.RecycleBinRenderer.superclass.Init.call(this);
     this.AttachPMBinding("RefreshList", RefreshCarousel);

   In this example, you implemented the RefreshList method in the presentation model in Step 12. This presentation model calls the RefreshList method when the user adds a record or removes a record from the recycle bin. AttachPMBinding configures Siebel Open UI to call RefreshCarousel when the presentation model runs the RefreshList method. You must configure your custom physical renderer to call the AttachPMBinding method so that it overrides the Init function. You must make sure you configure Siebel Open UI to call the Init function of the superclass before it creates or attaches a modification in your custom physical renderer.

   You must specify all AttachPMBinding calls in the Init function in the physical renderer.

2. Configure the RefreshCarousel to read the value of the DeletionCompleteSet property in the physical renderer:

   var pm = this.GetPM(),
     recordSet = pm.Get("DeletionCompleteSet");

3. Calculate the container in the HTML DOM that hosts the carousel:

   el = $("#s_" + pm.Get("GetFullId") + "_div" + "_recycle");

4. Find the data in the carousel:

   carousel = el.data('jcarousel');

5. Reset the data:

   carousel.reset();

6. Declare the following variable:

   this.listOfCols = [ "Name", "Location" ];

7. Refresh the carousel:

   var count = 0;
   for(var i = 0, len = recordSet.length; i < len; i++){
     if(recordSet[i]){
       carousel
   .add(count,
         "<li>" + GetCurrentCarouselItems.call(this, recordSet[i], this.listOfCols, i) + "</li>");
   count++;
     }
   }

   This code does the following work:

   • Loops through the set of records that the DeletionCompleteSet property contains.
   • Adds the records and the separate items.
   • Sends the index of the record that resides in the DeletionCompleteSet property to the GetCurrentCarouselItems method.
   • Uses the GetCurrentCarouselItems method to create the markup for each carousel item.
   • Uses GetCurrentCarouselItems to add the index to the markup for the individual item. This configuration makes sure the item is available if the user chooses to restore the record.
   • Iterates through a number of list columns according to the Location variable that you declare in Step 6.
8. Inform the carousel how many items Step 7 added:

   carousel.size(count);

   This step makes sure scrolling works correctly.

9. Hide the restore button on each carousel record:

   el.find("a.siebui-citem-add").hide();

10. Remove the DOM references:

    el = carousel = null;

    It is recommended that you remove any DOM references that you configure.

11. Save the recyclebinrenderer.js file.