Creating form elements dynamically using Google Apps Script (GAS)

Few days back, A guy asked me by mail, How to add form elements dynamically in a form. This case mostly arises when you need to add similar information and the number of information items is not fixed.

Suppose, you want to make a group registration form in which you want to add the detail of the group members as well but the number of Group members is not fixed. So here is a code example to make a form UI.

Demo:

To try the demo, click the '+' and '-' buttons to add/remove rows and submit.

Code:

function doGet() {

  var app = UiApp.createApplication();

  var panel = app.createVerticalPanel();

  var groupNameLB = app.createLabel('Group Name');

  var groupNameTB = app.createTextBox().setId('groupName').setName('groupName');

  var mebersLabel = app.createLabel('Members info');

  var table = app.createFlexTable().setId('table').setTag('0'); //Here tag will count the number of members

  //Write the header for the table

  var headerArray = ['First Name', 'Last Name', 'Date of birth', 'Notes'];

  for(var i=0; i<headerArray.length; i++){

    table.setWidget(0, i, app.createLabel(headerArray[i]));

  }

  //Add the first row of form elelments to input Member information

  addMemebrRow(app);

  //Add a button to submit the info

  var button = app.createButton('Submit');

  var handler = app.createServerHandler('_processSubmittedData');

  handler.addCallbackElement(panel);

  button.addMouseUpHandler(handler);

  panel.add(groupNameLB)

    .add(groupNameTB)

    .add(mebersLabel)

    .add(table)

    .add(button);

  app.add(panel);

  return app;

}

function addMemebrRow(app){

  var table = app.getElementById('table');

  var tag = parseInt(table.getTag());

  var numRows = tag+1;

  if(numRows >1){

    table.removeCell(numRows-1, 5);

    table.removeCell(numRows-1, 4);

  }

  table.setWidget(numRows, 0, app.createTextBox().setId('fName'+numRows).setName('fName'+numRows));

  table.setWidget(numRows, 1, app.createTextBox().setId('lName'+numRows).setName('lName'+numRows));

  table.setWidget(numRows, 2, app.createDateBox().setId('dob'+numRows));

  table.setWidget(numRows, 3, app.createTextArea().setId('note'+numRows).setName('note'+numRows));  

  table.setTag(numRows.toString());

  addButtons(app);

}

function addButtons(app){

  var table = app.getElementById('table');

  var numRows = parseInt(table.getTag());

  //Create handler to add/remove row

  var addRemoveRowHandler = app.createServerHandler('_addRemoveRow');

  addRemoveRowHandler.addCallbackElement(table);

  //Add row button and handler

  var addRowBtn = app.createButton('+').setId('addOne').setTitle('Add row');

  table.setWidget(numRows, 4, addRowBtn);

  addRowBtn.addMouseUpHandler(addRemoveRowHandler);

  //remove row button and handler

  var removeRowBtn = app.createButton('-').setId('removeOne').setTitle('Remove row');

  table.setWidget(numRows, 5, removeRowBtn);

  removeRowBtn.addMouseUpHandler(addRemoveRowHandler);

}

function _addRemoveRow(e){

  var app = UiApp.getActiveApplication();

  var table = app.getElementById('table');

  var tag = parseInt(e.parameter.table_tag);

  var source = e.parameter.source;

  if(source == 'addOne'){

    table.setTag(tag.toString());

    addMemebrRow(app);

  }

  else if(source == 'removeOne'){

    if(tag > 1){

      //Dcrement the tag by one

      var numRows = tag-1;

      table.removeRow(tag);

      //Set the new tag of the table

      table.setTag(numRows.toString());

      //Add buttons in previous row

      addButtons(app); 

    }

  }

  return app;

}

function _processSubmittedData(e){

  var app = UiApp.getActiveApplication();

  /*Let us make a json with name result

  //Output will be like

result : {

  grupName : 'myGroup',

  members  : [{dateOfBirth='Wed Feb 29 10:30:00 PST 2012', lastName= 'lastName of Member1', firstName='firstName of Member1', note='Note for member1'},

                {dateOfBirth='Wed Feb 27 10:30:00 PST 2012', lastName= 'lastName of Member2', firstName='firstName of Member2', note='Note for member2'},

                {dateOfBirth='Wed Feb 26 10:30:00 PST 2012', lastName= 'lastName of Member3', firstName='firstName of Member3', note='Note for member3'},]

}

//*/  

  var result = {};

  result.groupName = e.parameter.groupName;

  var numMembers = parseInt(e.parameter.table_tag);

  result.members = []; 

  //Member info array

  for(var i=1; i<=numMembers; i++){

    var member = {};

    member.firstName = e.parameter['fName'+i];

    member.lastName = e.parameter['lName'+i];

    member.dateOfBirth = e.parameter['dob'+i];

    member.note = e.parameter['note'+i];

    result.members.push(member);

  }

  //Here result is the json of submitted data

  var html = app.createHTML(Utilities.jsonStringify(result), true);

  app.add(html);

  return app;

}