I have an AsyncTable populated with data from the database. What I want now is to click on any row, let’s say I have a table of people, and after clicking it loads data from another table based on let’s say id of a person from a clicked row.

There is a lot of possiblities of selecting a row, but I don’t want to select it, I want to go somewhere else right away. Is that possible? I found that you can add onclick events to elements in properties view, but I can’t ‘target’ a row to even get there. What I did for now is added a button for each row, then I added onclick method for that button and added a ‘control parameter’ to pass the id of a clicked record, it works.

Hence my next question, how can I get data from another table with that id, let’s say from address table, where id matches my id passed from the click? For the people table I just use database connector that I prepared before, and I can’t do that for addresses, because I don’t know what row is gonna be clicked. I can get all the addresses and then iterate through RowSet and find one with the id etc., but i’m sure that’s not the way to go. I noticed you can add ‘conditions’ to database connector, for example ‘WHERE id = 10’, but can it be used with id generated later?

Hi Hara,

Try the below piece of code, let me know if this suffices your requirements.
You can use this for multiple row selection as well.

var counter=0;
var allowResubmit="true";
var noOfSelectedRows = CAF.model('#{activePageBean.clientIds['searchResultsTableControl']}').getValue();
var lenOfSelectedValue=noOfSelectedRows.length;
var table1 = CAF.model('#{activePageBean.clientIds['searchResultsTableControl']}');
for(counter=0;counter<lenOfSelectedValue;counter++){ 
var row = table1.get(noOfSelectedRows[counter]);       
var retriableId = row.getControlId("htmlOutputText17");
var retriableValue= CAF.model(retriableId).getValue(); 
var tcasID=row.getControlId("htmlOutputText18");
var tcasIDValue=CAF.model(tcasID).getValue(); 
if(retriableValue==null || retriableValue=="" || retriableValue=="N")
{       
allowResubmit="false";
alert("Retry not allowed for selected exceptions.Please select exceptions with Retriable column as Y for retrying");
return false;
}

}

CAF.model('#{activePageBean.clientIds['retrymodalDialog']}').show();

I resolved my second problem, now I only need to add ‘on click action’ to every row.

I guess your code is for something like:

select some rows → click a button → execute your code

What I want is:

click a single row → immediately go to the next screen

Something like adding an action to every single row, I can do that only with adding a button to each row and it looks bad.

Hi Haro,

please add the action to the table content provider, not the table itself.

Regards,
Holger

The best practice would be something like this:

1. Add a “Select Row On-Click” control to the selectable table control to make the row selected when the row is clicked.

2. Add a script block that adds a row change listener script to the table control that gets a callback when the table row selection changes. Inside this script raise a hidden command that does the refresh or navigation.

For example, the content of the script block may be something like this:

//get the table client-side model
var m = CAF.model('#{caf:cid("dataTable")}');
//function for selection callbacks
var rowSelectedFn = function(tableId, rowId, eventType) {
if ("select" == eventType) {                     
//raise the hidden command
var cm = CAF.model('#{caf:cid("hiddenCommand")}');
cm.raise(); 
}
}
m.addRowChangeListener(rowSelectedFn, "myCustomSelectFnKey");

Thank Eric, that seems like exactly what I want. Few questions tho:

1. Now I pass the control parameter on button click (“#{myTable.personId}”) and in java I do "getFacesContext().getExternalContext().getParameterMap().get(“personId”) (or something close to that), when I raise that hidden command from javascript will I be able to do the same?

2. What is the second argument in ‘addRowChangeListener’, is it required?

3. I can add that script from Async Table > Properties > Client-side events> Click > Edit javascript?

I’m really new to all this and I have no access to designer right now, I will on Monday, so can’t test anything, sorry for trivial questions.

1. Sure, you’d just want to use the go(params) method instead of raise() from the client-side model of the command control (see CAF.Command.Model in the CAF Javascript Reference)

for example, something like this to pass the selected rowId as the “personId” request parameter:

          //raise the hidden command  and pass it a parameter
var cm = CAF.model('#{caf:cid("hiddenCommand")}');  
cm.go({
"personId": rowId
});   

2. It’s an identifier key for the listener function. It is useful to ensure that the listener function is only registered once. If you call addRowChangeListener again (due to a refresh, or otherwise) with the same value as the second argument it would replace the previous function with the new one instead of adding a second copy of the same.

3. I don’t think so. You’d probably want to use the Script Block control for that.

That rowId is the actual id of the row, but can I somehow get the values from the column in that row (like firstName, lastName etc.). I tried both in javascript and in java and I can’t do that, when in java I do findComponentInRoot(rowId) it finds me the whole AsyncTable, and in javascript I couldn’t even find any field that has real values.

If you want to lookup specific values within the row in javascript, then you probably want to use the getControlId method from the row model as documented at [1] to calculate the id.

1. http://techcommunity.softwareag.com/ecosystem/documentation/webmethods/wmsuites/wmsuite9-12/My_webMethods/9-12_CAF_JavaScript_Reference/CAF.Table.Row.Model.html#getControlId

For example, something like this:

var rowModel = CAF.model(rowId);

// resolve the source value relative to the row model
var srcModelId = rowModel.getControlId("your_control_id_here"); 
var srcModel = CAF.model(srcModelId); 
var srcValue = srcModel.getValue();

However, if the controls you are using are the ‘Output Text’ controls, then you would need to make sure the ‘Raw’ property is set to false, otherwise it won’t render a tag around the text to make it referable by id.