Modifications Required for DOM Elements with No Representation

For DOM elements with no representation, you must find and modify these instances your custom physical renderer for code. These are typically found where the DOM is being created and objects are being attached. This will usually have no representation anywhere in the SWE server.

To bind DOM elements with no representation

1. Determine if you have custom physical renderer code similar to the following:

   CustomPhysicalRenderer.prototype.ShowUI = function () {   
   var clientHTML = "<div id='moreinfo'>Click here for more information about Customer 
   Types</div>",   
   appletContainer = this.GetPM().Get("GetFullId");
   $("#" + appletContainer).append(clientHTML);   
   SiebelAppFacade.CustomPhysicalRenderer.superclass.ShowUI.call(this);   
   };
   CustomPhysicalRenderer.prototype.BindEvents = function(){   
   $("[id=" + "moreinfo" + "]").bind("mouseover", { ctx : this }, function(event){   
   vent.data.ctx.GetPM().OnControlEvent("MORE_INFO");   
   });   
   SiebelAppFacade.CustomPhysicalRenderer.superclass.BindEvents.call(this);   
   };
   

   The first section of the code creates a client side piece of the DOM which is appended to the end of the applet container in the ShowUI section of the custom renderer. The BindEvents section is then overridden to attach a custom event handler to the DOM element.

   The second section of the code is an event that will be attached to a custom presentation model using an AttachEventHandler call. The call will then trigger custom functionality when the handler is run. This will display a dialog containing additional information about the contextual record.

2. Modify the code located in Step 1 to resemble the following code:

   CustomPhysicalRenderer.prototype.BindEvents = function () {   
   var moreInfoElement = $("[id=" + "moreinfo" + "]"),   
   eventHelper = SiebelApp.S_App.PluginBuilder.GetHoByName("EventHelper");   
   if (eventHelper && moreInfoElement.length) {   
   eventHelper.Manage(moreInfoElement, "mouseover", { ctx: this }, OnClickMoreInfo);   
   }   
   SiebelAppFacade.CustomPhysicalRenderer.superclass.BindEvents.call(this);   
   };
   function OnClickMoreInfo(event) {   
   event.data.ctx.GetPM().OnControlEvent("MORE_INFO");   
   }
   

Note: The code in this example is only meant as a guide.

The mouseover event is attached to the stray DOM element that has been created in ShowUI using the Manage API of the Event Helper object. Mouseover is homogenized to work with touch based events on touch based devices, if available.