select a row from a flextable in google script - google-apps-script

Question

I am new to google script. I have a datasource that I need to display in a table and allow user to select a row and select open button. the event handler of the open button should be able to find out the row number so that I will be able to send a request with the name user chosen.
I thought of adding a check box and on the click event, simply read the name of the checkbox which has the row number.
Please let me know how to do this. thanks
var panel = app.createVerticalPanel();
var scroll = app.createScrollPanel().setPixelSize(500, 300);
scroll.add(panel);
var flexTable = app.createFlexTable().setStyleAttribute('border', '1px solid black')
.setStyleAttribute('borderCollapse','collapse')
.setBorderWidth(1);
flexTable.setText(0, 1, 'Application Name')
flexTable.setRowStyleAttribute(0,'color', 'blue')
flexTable.setText(0, 2, 'Owner')
flexTable.setText(0, 3, 'Date')
var handler = app.createServerClickHandler('clickTable');
var counter = 1;
for (var i in queryResult.records) {
var chkBox = app.createCheckBox().setName('chk' + counter).setId('chk');
var owner = queryResult.records[i]["Owner"]["Name"];
var AppName = queryResult.records[i]["Name"];
var ModifiedDate = queryResult.records[i]["LastModifiedDate"]
var UniqId = queryResult.records[i]["Apttus_XApps__UniqueId__c"]
flexTable.setWidget(counter, 0 , chkBox)
flexTable.setText(counter, 1, AppName.toString());
flexTable.setText(counter, 2, owner.toString());
flexTable.setText(counter, 3, ModifiedDate.toString());
counter ++;
}
panel.add(app.createButton('Open', handler));
panel.add(flexTable);
app.add(scroll);

Answer 1

You have only created server handler, but no callback elements are attached to it. Please have a look at this page
So your code will be like.
var handler = app.createServerClickHandler('clickTable');
handler.addCallbackElement(panel)
Next: at your server function clickTable
function clickTable(e)
{
for (var i in e.parameter) {
Logger.log('parameter ' + i+1 + ' is ' + e.parameter[i]);
}
//try logging all the values that are passed and use it accordingly,
}

Answer 2

Here is an example of an implementation I suggested in comments above using radioButtons.
User can only submit if one option has been selected
test online here
code :
function doGet(){
var app = UiApp.createApplication();
var panel = app.createVerticalPanel().setStyleAttributes({'padding':'15px'});
var handler = app.createServerClickHandler('clickTable').addCallbackElement(panel);
var btn = app.createButton('Open', handler).setEnabled(false);
panel.add(btn);
var scroll = app.createScrollPanel().setPixelSize(500, 400);
scroll.add(panel);
var flexTable = app.createFlexTable().setStyleAttribute('border', '1px solid black')
.setStyleAttributes({'borderCollapse':'collapse'})
.setBorderWidth(1).setCellPadding(2);
flexTable.setText(0, 1, 'Application Name')
flexTable.setRowStyleAttribute(0,'color', 'blue')
flexTable.setText(0, 2, 'Owner')
flexTable.setText(0, 3, 'Date')
var radioValue = app.createTextBox().setName('radioValue').setVisible(false);// set it to visible if you want to see what happens in tests
panel.add(radioValue);
var counter = 1;
for (var i =0;i<10;i++) {
var name = counter;
var radio = app.createRadioButton('radioBtn','select');
var CliHandler = app.createClientHandler().forTargets(radioValue).setText(name).forTargets(btn).setEnabled(true);
radio.addClickHandler(CliHandler);
// var owner = queryResult.records[i]["Owner"]["Name"];
// var AppName = queryResult.records[i]["Name"];
// var ModifiedDate = queryResult.records[i]["LastModifiedDate"]
// var UniqId = queryResult.records[i]["Apttus_XApps__UniqueId__c"]
// temp var definitions for test
var owner = 'test';
var AppName = 'test';
var ModifiedDate = 'test';
var UniqId = 'test';
// delete in production code
flexTable.setWidget(counter, 0 , radio)
flexTable.setText(counter, 1, AppName.toString());
flexTable.setText(counter, 2, owner.toString());
flexTable.setText(counter, 3, ModifiedDate.toString());
counter ++;
}
panel.add(flexTable);
app.add(scroll);
return app;
}
function clickTable(e){
var app = UiApp.getActiveApplication();
app.add(app.createLabel('you have selected item nr '+e.parameter.radioValue));
return app
}