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.


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


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



  //Add a button to submit the info

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

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









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




function addButtons(app){

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

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


  //Create handler to add/remove row

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



  //Add row button and handler

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

  table.setWidget(numRows, 4, addRowBtn);



  //remove row button and handler

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

  table.setWidget(numRows, 5, removeRowBtn);



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'){




  else if(source == 'removeOne'){

    if(tag > 1){

      //Dcrement the tag by one

      var numRows = tag-1;


      //Set the new tag of the table


      //Add buttons in previous row




  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];



  //Here result is the json of submitted data

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


  return app;