来自多个文本框的多个 Google 事件

Question

我正在尝试创建一个表单，该表单将在多个文本框中保存多个 Google 日历事件，用户应该能够添加另一个文本框来保存另一个事件。在创建每个文本框时，其名称将从最后一个例如递增。 textbox1、textbox2 等。下面的代码显示了我到目前为止的代码，我似乎无法让它工作。任何建议将不胜感激。

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

（我现在没有时间检查所有内容，但我看到了一个错误......）

在这个函数中：

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

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

您正在尝试获取小部件中的值，但您得到的是小部件本身（作为 UiApp 对象），因此您不能使用 numberOfEvents++; 这是一种数字方法...

要获取小部件值，请使用var numberOfEvents = Number(e.parameter.numberOfEvents); 因为e.parameter.numberOfEvents实际上是一个字符串。

如果您在该字符串中有非十进制值，您可以使用如下简单的正则表达式轻松摆脱它： var numberOfEvents = Number(e.parameter.numberOfEvents.replace(/\D/g,'')); ，这样你就可以确定只有数字会作为值传递。

---

编辑

有时间再进一步...

这是代码的工作版本...确实有一些细节阻止它工作：

• noOfEvent 上缺少 id
• eventTitle 的名称不正确（应该添加一个数字，因为稍后您 setName 带有数字

• 得到'var event = e.parameter['eventTitle'+i];' , 你忘记了建立名字的''

  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

为了更清楚起见，我在第二个答案中添加了代码的审查版本，其中我添加了一些验证器来处理空响应，如果需要，请随时查看和评论。

它还不完美，但它显示了一些可能性...... demo here（中和以避免在我的日历中创建事件；）

代码：

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