Configuring Siebel Open UI > Post-Upgrade Configuration Tasks > Modifying Physical Renderer Code for Event Helper >

Binding Events for Controls

This topic describes how to bind events for controls. Similarly to stray DOM event binding, any renderer code that bound events on to existing repository based controls will now have to work with the Event Helper object to bind handlers to controls instead of direct jQuery calls, which is necessary to homogenize events bound to controls across different platforms.

To bind control events

1. Determine if you have custom renderer code that contains control event binding of the following types:

   CustomPhysicalRenderer.prototype.BindEvents = function () {
    var controlSet = this.GetPM().Get("GetControls");
    for (var controlName in controlSet) {
     if (controlSet.hasOwnProperty(controlName)) {
      var control = controlSet[controlName];
      if (control.GetName() === "Probability") {
       $('[name="' + control.GetInputName() + '"]').on("click", { ctx: this }, function () {

        event.data.ctx.GetPM().OnControlEvent(("PROBABLITY_CLICK"));
       });
      }
     }
    }
    SiebelAppFacade.CustomPhysicalRenderer.superclass.BindEvents.call(this);
   };

   In the above code, the complete set of controls is obtained from the framework PM property and the render is looping through set. Upon encountering a particular control by the repository name Probability, a click event handler is being bound to the DOM element representing that control which then triggers the event PROBABILITY_CLICK on to the PM. Eventually, a custom handler is attached as a customized presentation model using the AttachEventHandler API.

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

   CustomPhysicalRenderer.prototype.BindEvents = function () {
    var eventHelper = SiebelApp.S_App.PluginBuilder.GetHoByName("EventHelper"),
     controlSet = this.GetPM().Get("GetControls"),
     controlEl = null;
   

    for (var controlName in controlSet) {
     if (controlSet.hasOwnProperty(controlName)) {
      var control = controlSet[controlName];
      if (control.GetName === "Probability") {
       controlEl = this.GetUIWrapper(control).GetEl();
       if (controlEl.length && eventHelper) {
        eventHelper.Manage(controlEl, "click", { ctx: this }, OnClickProbability);
       }
      }
     }
    }
    SiebelAppFacade.CustomPhysicalRenderer.superclass.BindEvents.call(this);
   };

   function OnClickProbablility(){
    event.data.ctx.GetPM().OnControlEvent(("PROBABLITY_CLICK"));
   }

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

   In this new code, if the correct control is found using the matching condition, first, the control's element is obtained using the GetEl() API of the control's wrapper. This is subsequently used in the Manage() API of the Event Helper to attach a homogenized click handler on to the DOM element of the control. The named method OnClickProbability is triggered when the event occurs on the control.