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