siebel 在list applet 的列上绑定点击事件

In last post we learnt how to bind a click event to a image on the form applet. This will work on any control on form applet as long as you have right selectors but this trick will fail in the list applet as the column is repeated for each row which means you cannot just use one selector for every row.In this post I will show you how to bind a click event for a column in each row.

Requirement:

On click of a Opportunity Status in list applet a confirm dialog should popup asking if you want to change the status of the record.

Solution (8.1.1.11):

I am not going to go into details of how to add the JS file entries to manifest screen and jump straight into the solution.This solution involves creating only a PR file.We need to add custom code to 2 methods in the PR that are

BindData : Used to add a unique identifier to our column to facilitate binding of click event (in this particlar case a custom css class).
BindEvents: Actually write the code to bind the click event of the column.

Solution Details – BindData:

1 2 3 4 5 6 7 8 9

ListPopup.prototype.BindData = function(bRefresh) { SiebelAppFacade.ListPopup.superclass.BindData.call(this, bRefresh); varpm = this.GetPM(); //get pm varrecordSet = this.GetPM().Get( "GetRecordSet"); //get record set varrecordLength = recordSet.length; //get count for loop for( vari = 0; i < recordLength i code> $("#"+ (i+1) + "Account_Status").addClass("hoverlink"); //add custom class (for binding) to status column in each row } } //end of bind data

The code for bind data event is pretty simple. Run loop around all the records and add class with name hoverlink to the Account Status column. In a list applet each control is given a unique id which is a combination of row number and the field name with spaces replaced by underscrore (_). Using this knowledge we construct the selector and add class to our desired column ( in this case Account Status ) for each row.

The Second part of the solution is binding the click event to each column. For this part we will use our newly added class in BindData function.

BindEvents:

1 2 3 4 5 6 7 8 9 10 11 12

ListPopup.prototype.BindEvents = function(controlSet) { SiebelAppFacade.ListPopup.superclass.BindEvents.call(this); varpHolder = this.GetPM().Get("GetFullId"); //get placeholder $('#s_'+ pHolder + "_div table.ui-jqgrid-btable").on("click","td.hoverlink",{ctx:this},function(event){ //bind the click event and pass the context varrowId = $(this).parent().attr("id"); //get the row number of the column that has been clicked event.data.ctx.OnRowSelect(rowId); //physically select the row. Really important ShowDialog("Change Status ?", event); // show dialog event.preventDefault(); //stop the normal processing which is focusing on the current field returnfalse; }); }

In bind events we make use jQuery “on” function to bind the click event on the class and pass the data. One important line of code that I would like point out is

1	event.data.ctx.OnRowSelect(rowId); //physically select the row. Really important

Since we are interrupting the normal click event and introduce a custom handler it is important to physically select the row so that server side methods can work on the right record. If don’t do that then the server side will act upon the last selected line. Finally we call the ShowDialog function to show jQuery Modal Dialog.

ShowDialog:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

functionShowDialog(msg, event){ vardialogHTML = " "+ msg + " "</code>; //create a dummy div to hold dialog varpm = event.data.ctx.GetPM(); // this will be needed in order to execute Applet/BC methods //create a jquery dialog $(dialogHTML).dialog({ //set the options autoOpen: true, height: 'auto', width: 'auto', title:'Confirm', close: function(){ $(this).dialog("destroy"); //destroy the dialog on close }, "IL_AD3"class="IL_AD"<buttons:{ "OK": { 'text':'Ok', 'click': function(){ //Synchronous call to a applet/bc method to be called on click of OK button //pm.ExecuteMethod("InvokeMethod","AnyMethod"); $(this).dialog("close"); //close dialog } }, "Cancel": { 'text':'Cancel', 'click': function(){ //Synchronous call to a applet/bc method that needs to be called on click of cancel button //pm.ExecuteMethod("InvokeMethod","AnyMethod"); $(this).dialog("close"); } } } }); } </td></tr></tbody></table> This function just creates a jQuery Dialog and sets up the button to execute appropriate Server methods. This is how the dialog box will look like. Notice an hand icon on when the mouse goes over Status column ? This was done through css 1 .hoverlink {cursor:pointer;}