Siebel Open UI – Complete Async Search functionality

This is the final part of the a case study involving newly introduced Siebel Open UI’s AI object and Block UI jQuery plugin. In the last part of the series we will see how to attach a click event to a image control and trigger the search functionality.

I wouldn’t go into details of how to get an image on the applet the way the video shows. All I can tell you is that we created a new web template and added specific id and classes to image control inside the template to make our jQuery selectors simple.

The binding was done in the PR’s BindEvent Method as recommended.

AppletSearch.prototype.BindEvents = function (controlSet) {
SiebelAppFacade.AppletSearch.superclass.BindEvents.call(this);//call the super class BindEvent first
var psIn = SiebelApp.S_App.NewPropertySet();//create a new property set
$( "#nsearch" ).on("click","img.nsearch-icon", {ctx : this, ps : psIn}, ExecuteSearch );
}//bind the click with image control through wrapper class

Explanation of above code:

The binding itself is pure jQuery code. In simple terms we are saying is “find an element with id as “nsearch” and on click of an image with class “nsearch-icon”, trigger the function ExecuteSearch and pass the data object (things inside curly brackets {}) to it”.

The code of “on” event would vary based on how you have included the image control in your applet. In most cases it would refer to the placeholder div and id of the control will be obtained using GetControls Method.

The last step is to define the ExecuteSearch Function

function ExecuteSearch(evt){
     $.blockUI({ message: “Please Wait” });
     var conf = {};
     conf.async = true;
     conf.scope = this;
     conf.cb = function(){
         $.unblockUI();
    }
    var pm = evt.data.ctx.GetPM();
    pm.ExecuteMethod("InvokeMethod","AsyncSearch",evt.data.ps,conf);
}

ExecuteSearch is basically same code as described in previous post wrapped inside function.

This completes the case study of implementing a Asynchronous Search functionality using a custom image control and Siebel Open UI is AI object.

This helped ?? Don’t be shy to share your comments or questions.