How do I store multiple text boxes?

Question

I am creating a form in Google App Script to create multiple events at once, I have methods to create another event text box and then add it to the panel but I don't know how to create the multiple events. How should I store the multiple text boxes so that I can call createEvent() on each of them?

function doGet(){

 var app = UiApp.createApplication().setTitle('QuickAdd Events');

 //Create a penel which holds all the form elelemnts
 var parent = app.createHorizontalPanel().setId('parent');
 var left = app.createVerticalPanel().setId('left').setWidth(200);
 var right = app.createVerticalPanel().setId('right');

 var eventTitleLabel = app.createLabel('Event Title:');
 var eventTitle = app.createTextBox().setName('eventTitle').setWidth(200);
 var eventButton = app.createButton('Create Events');
 var childButton = app.createButton('+ Event');

 left.add(eventTitleLabel)
     .add(eventTitle);  

 right.add(eventButton)
      .add(childButton);

 var eventHandler = app.createServerClickHandler('createEvents');
 eventHandler.addCallbackElement(left);
 eventButton.addClickHandler(eventHandler);

 var panelHandler = app.createServerClickHandler('createAnotherEvent');
 panelHandler.addCallbackElement(left);
 childButton.addClickHandler(panelHandler);

 parent.add(left)
       .add(right);

 app.add(parent);
 app.close();
 return app;
}

function createAnotherEvent(e){
 var app = UiApp.getActiveApplication();

 var eventTitleLabel = app.createLabel('Event Title:');
 var eventTitle = app.createTextBox().setName('eventTitle').setWidth(200);

 app.getElementById('left').add(eventTitleLabel)
                           .add(eventTitle);
 return app;
}

function createEvents(e){

 var app = UiApp.getActiveApplication();
try{
 //get the entries;
 var event = e.parameter.eventTitle;

 var cal = CalendarApp.getDefaultCalendar();
 cal.createEventFromDescription(event);

 app.add(app.createLabel('Event created Successfully'));

 //make the form panel invisible
 app.getElementById('parent').setVisible(false);
 return app;
 }

//If an error occurs, show it on the panel
catch(e){
  app.add(app.createLabel('Error occured: '+e));
  return app;
 }
}

Answer 1

I played a bit with your code but since I don't know exactly what you want to do I'm not sure it will help...

At least it shows how to know which button was pressed, how to create widgets in loops and assign them names and ids... but the whole thing is a bit messy I admit ;-)

feel free to destroy what you don't need.

function doGet(){

  var app = UiApp.createApplication().setTitle('QuickAdd Events');
  var label = ['label title1','label title2','label title3','label title4']
  var title = ['title1','title2','title3','title4']
  //Create a penel which holds all the form elelemnts
  var parent = app.createHorizontalPanel().setId('parent');
  var left = app.createVerticalPanel().setId('left').setWidth(200);
  var right = app.createVerticalPanel().setId('right');
  var eventHandler = app.createServerClickHandler('createEvents');
  eventHandler.addCallbackElement(left);
  var panelHandler = app.createServerClickHandler('createAnotherEvent');
  panelHandler.addCallbackElement(left);

  for(var n in label){
  var eventTitleLabel = app.createLabel(label[n]);
  var eventTitle = app.createTextBox().setName(title[n]).setWidth(200);
  var eventButton = app.createButton('Create Events').setId('event'+n);
  var childButton = app.createButton('+ Event').setId('ch'+n);

  left.add(eventTitleLabel)
  .add(eventTitle);  

  right.add(eventButton)
  .add(childButton);

  eventButton.addClickHandler(eventHandler);

  childButton.addClickHandler(panelHandler);
  }  
  parent.add(left)
  .add(right);
  var hidden = app.createHidden('numberOfTitles').setId('numberOfTitles').setValue(n);// the number of events
  left.add(hidden);
  app.add(parent);
  app.close();
  return app;
}


function createAnotherEvent(e){
  var app = UiApp.getActiveApplication();
  var source = Number(e.parameter.source.replace(/\D/g,''));// the event number from the button pressed
  var numberOfTitles = Number(e.parameter.numberOfTitles);
  numberOfTitles++
    app.getElementById('numberOfTitles').setValue(numberOfTitles);
  var eventTitleLabel = app.createLabel('Event Title:');
  var eventTitle = app.createTextBox().setName('eventTitle'+numberOfTitles).setWidth(200);// this way the new textBow has a new predictable name and you can easily get it in the handler

  app.getElementById('left').add(eventTitleLabel)
  .add(eventTitle);
  return app;
}

function createEvents(e){
  Logger.log(JSON.stringify(e));
  var source = Number(e.parameter.source.replace(/\D/g,''));
  var numberOfTitles = Number(e.parameter.numberOfTitles);
  var app = UiApp.getActiveApplication();

  try{
    //get the entries;
    var event = e.parameter.eventTitle;

    var cal = CalendarApp.getDefaultCalendar();
    cal.createEventFromDescription(event);

    app.add(app.createLabel('Event created Successfully'));

    //make the form panel invisible
    app.getElementById('parent').setVisible(false);
    return app;
  }

  //If an error occurs, show it on the panel
  catch(e){
    app.add(app.createLabel('Error occured: '+e));
    return app;
  }
}

EDIT : your script makes me think about an old post I answered a while ago, It might interrest you to have a look at it here : Store & retrieve the identifiers of a multipliable widget's instances