Can't retrieve ServerHandler by calling app.getElementById(id) function - google-apps-script

Question

I am trying to build a FlexTable with dynamic number of rows. Each row contains a TextBox. There is a button to add new row to the table. And a Submit button that should send all TextBox widgets for processing.
I have initially declared a ServerHandler and added to it all fixed elements:
var handler = app.createServerHandler('handler12')
.addCallbackElement(fixedTextBox1)
.addCallbackElement(fixedTextBox2);
handler.setId('myHandlerId');
button.addClickHandler(handler);
Note that I have set an id to the handler. Now when I process the addition of new TextBox (row to the table) I have to call addCallbackElement(newlyCreatedField) to the handler. Otherwise I will not have it as param when the form is submitted.
I do this:
var handler = app.getElementById('myHandlerId');
handler.addCallbackElement(newlyCreatedField);
But I get the following error:
Error encountered: Cannot find function addCallbackElement in object Generic.
I logged the type of the handler var with Logger.log(handler.getType()) and it says Generic. I called app.getElementById(id) on non-existent id and it again returns an object of type Generic.
What am I doing wrong? Thank you for looking into this. Thank you for your time.

Answer 1

Is there a specific reason why you want to add each text box as a callback element. If not I suggest that you add the Flextable as the callback element and all the elements within the Flextable will be recognized in your handler functions.
var handler = app.createServerHandler('handler12')
.addCallbackElement(flexTable);

Answer 2

(Srik beat me to it...) You don't need to have every TextBox as a CallbackElement, if you have the container as a CallbackElement.
You will need to keep the names of the contained TextBox elements unique, and keep track of those names. To do that, you can use a Tag, and update it as you go.
function doGet() {
var app = UiApp.createApplication();
// FlexTable - use tag to count # rows.
var fTable = app.createFlexTable()
.setId('fTable')
.setTag('0');
app.add(fTable);
// Button to add new row
var addRow = app.createButton('Add Row');
app.add(addRow);
var addRowHandler = app.createServerHandler('addRowHandler');
addRowHandler.addCallbackElement(fTable);
addRow.addClickHandler(addRowHandler);
// Submit button
var submit = app.createButton('Submit');
app.add(submit);
var submitHandler = app.createServerHandler('submitHandler');
submitHandler.addCallbackElement(fTable);
submit.addClickHandler(submitHandler);
return app;
}
function addRowHandler(e) {
var app = UiApp.getActiveApplication();
var row = parseInt( e.parameter.fTable_tag ); // Get row counter
var tBox = 'textBox'+row;
var textBox = app.createTextBox()
.setId(tBox)
.setName(tBox);
// Place new text box in FlexTable
var fTable = app.getElementById('fTable');
fTable.setWidget(row, 0, textBox);
// Update row counter
fTable.setTag((++row).toString());
return app;
}
function submitHandler(e) {
var app = UiApp.getActiveApplication();
var rows = parseInt( e.parameter.fTable_tag ); // Get row counter
// Log contents of all textBoxes in FlexTable
for (var row=0; row<rows; row++) {
var tBox = 'textBox'+row;
Logger.log(tBox+'='+e.parameter[tBox]);
}
return app;
}
A more complete example of using dynamic form elements is available on Waqar's Apps Script Tutorial.