Multiple Google events from multiple text boxes

Question

I am trying to create a form that will hold multiple Google Calendar events in multiple text boxes, the user should be able to add another text box to hold another event. As each text box is created its name will incremented from the last e.g. textbox1, textbox2 etc. The code below shows the code I have so far, I can't seem to make it work. Any advice would be greatly appreciated.

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 noOfEvents = app.createTextBox().setName('noOfEvents').setValue(1).setWidth(30); 

 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(noOfEvents)
     .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 numberOfEvents = app.getElementById("noOfEvents");
 numberOfEvents++;
 app.getElementById('noOfEvents').setValue(numberOfEvents);
 var eventTitleLabel = app.createLabel('Event Title:');
 var eventTitle = app.createTextBox().setName('eventTitle'+numberOfEvents).setWidth(200);
 //the new textBox 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 app = UiApp.getActiveApplication();

 try{
  var numberOfEvents = Number(e.parameter.noOfEvents);
  for (var i = 1; i < numberOfEvents; i++) {

   var event = e.parameter[eventTitle+i];;

   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 don't have time right now to check everything but here is an error I saw...)

In this function :

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

 var numberOfEvents = app.getElementById("noOfEvents"); 

You are trying to get the value in a widget but what you get is the widget itself (as a UiApp object) so you can't use numberOfEvents++; that is a method for numbers...

To get a widget value use var numberOfEvents = Number(e.parameter.numberOfEvents); because e.parameter.numberOfEvents is actually a string.

If ever you have non decimal value in that string you can get rid of it easily using a simple regex like below : var numberOfEvents = Number(e.parameter.numberOfEvents.replace(/\D/g,'')); , this way you are sure that only numbers will be passed as value.

---

EDIT

Found the time to go further...

here is a working version of the code... there were indeed a few details that prevent it to work :

• missing id on noOfEvent
• name of eventTitle was not right (there should be a number added to it because later you setName with numbers

• getting 'var event = e.parameter['eventTitle'+i];' , you forgot the '' to build the name

  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 noOfEvents = app.createTextBox().setName('noOfEvents').setId('noOfEvents').setValue(1).setWidth(30); 
  
   var eventTitleLabel = app.createLabel('Event Title:');
   var eventTitle = app.createTextBox().setName('eventTitle1').setWidth(200);  
   var eventButton = app.createButton('Create Events');
   var childButton = app.createButton('+ Event');
  
   left.add(noOfEvents)
       .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 noOfEvents = Number(e.parameter.noOfEvents.replace(/\D/g,''));;
   noOfEvents++;
   app.getElementById('noOfEvents').setValue(noOfEvents);
   var eventTitleLabel = app.createLabel('Event Title:');
   var eventTitle = app.createTextBox().setName('eventTitle'+noOfEvents).setWidth(200);
   //the new textBox 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 app = UiApp.getActiveApplication();
  
   try{
    var noOfEvents = Number(e.parameter.noOfEvents.replace(/\D/g,''));;
    for (var i = 1; i <= noOfEvents; i++) {
  
     var event = e.parameter['eventTitle'+i];;
  
     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 2

For better clarity, I added this second answer with a reviewed version of the code in which I added a few validators to handle empty responses , feel free to have a look and comment if needed.

It is not perfect yet but it shows a few possibilities... demo here (neutralized to avoid creating events in my calendar ;)

code :

function doGet(){
  var app = UiApp.createApplication().setTitle('QuickAdd Events');
  var parent = app.createHorizontalPanel().setId('parent').setStyleAttributes({'padding':'25px'});
  var left = app.createVerticalPanel().setId('left').setWidth(200);
  var right = app.createVerticalPanel().setId('right').setStyleAttributes({'paddingLeft':'10px'});
  var noOfEvents = app.createTextBox().setName('noOfEvents').setId('noOfEvents').setValue(1+' event to create').setWidth(110); 
  var eventButton = app.createButton('Create Events').setId('btn').setEnabled(false).setPixelSize(100,30).setStyleAttributes({'borderRadius':'8px'});
  var warning = app.createHTML('<b>warning</b><br>not all events have been defined').setId('warning').setStyleAttributes({'paddingLeft':'10px'});
  var childButton = app.createButton('+ Event').setStyleAttributes({'borderRadius':'5px'});
  var CH = app.createClientHandler().forTargets(eventButton).setEnabled(true).forTargets(warning).setVisible(false);
  var eventTitleLabel = app.createLabel('Event Title:');
  var eventTitle = app.createTextBox().setName('eventTitle1').setWidth(200).addClickHandler(CH);  
  var clrH = app.createClientHandler().forTargets(eventTitle).setText('');
  left.add(noOfEvents)
  .add(eventTitleLabel)
  .add(app.createHorizontalPanel().add(eventTitle).add(app.createButton('clear',clrH).setStyleAttributes({'padding':'0px','borderRadius':'5px'}).setPixelSize(40,17)));

  right.add(app.createHorizontalPanel().add(eventButton)
  .add(warning))
  .add(childButton);

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

  var panelHandler = app.createServerHandler('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 eventButton = app.getElementById('btn').setEnabled(false);
  var warning = app.getElementById('warning');
  var noOfEvents = Number(e.parameter.noOfEvents.replace(/\D/g,''));
  noOfEvents++;
  var CH = app.createClientHandler().forTargets(eventButton).setEnabled(true).forTargets(warning).setVisible(false);
  app.getElementById('noOfEvents').setValue(noOfEvents+' events to create');
  var eventTitleLabel = app.createLabel('Event Title:');
  var eventTitle = app.createTextBox().setName('eventTitle'+noOfEvents).setWidth(200).addClickHandler(CH);
  var clrH = app.createClientHandler().forTargets(eventTitle).setText('');
  app.getElementById('warning').setVisible(true)
  app.getElementById('btn')
  app.getElementById('left').add(eventTitleLabel)
  .add(app.createHorizontalPanel().add(eventTitle).add(app.createButton('clear',clrH).setStyleAttributes({'padding':'0px','borderRadius':'5px'}).setPixelSize(40,17)));;
  return app;
}

function createEvents(e){
  Logger.log(JSON.stringify(e));
  var app = UiApp.getActiveApplication();
  var noOfEvents = Number(e.parameter.noOfEvents.replace(/\D/g,''));
  var eventButton = app.getElementById('btn');
  for (var i = 1; i <= noOfEvents; i++) {   
    var event = e.parameter['eventTitle'+i];
    if(event.replace(/ /g,'')==''){eventButton.setEnabled(false) ; app.getElementById('warning').setVisible(true) ; return app }
  }
  for (var i = 1; i <= noOfEvents; i++) {   
    var event = e.parameter['eventTitle'+i];
    try{
      var cal = CalendarApp.getDefaultCalendar();
 //     cal.createEventFromDescription(event);
      app.add(app.createLabel('Event Nr'+i+' created Successfully'));
    }catch(err){
      app.add(app.createLabel('Event Nr'+i+' : error :'+JSON.stringify(err)));
    }
  }
  //make the form panel invisible
  app.getElementById('parent').setVisible(false);
  return app;
}