AsyncTable on click row

, ,
1

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?

2

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();
3

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.

4

Hi Haro,

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

Regards,
Holger

5

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");
1 Like
6

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.

7
  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
          });

  1. 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.

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

8

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.

9

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.