Miscellaneous‎ > ‎

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

Comments