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