如何在 google 日历 add-on 上获取输入值？

Question

我正在为 Google 日历编写我的第一个 add-on，但我无法从输入字段或日期选择器获取值。

我创建了一张卡片，其中包含几个日期选择器（活动开始日期和结束日期）、一个文本输入（用于活动标题）和一个按钮。我想要做的是在单击一个按钮后我想获取文本输入的输入值并（现在）记录它。

这是我得到的：

var card = CardService.newCardBuilder();
var textInputTitle = CardService.newTextInput()
    .setFieldName("text_input_title")
    .setTitle("Title for editor");

function onHomepage(e) {
  return createCard(e.hostApp, true);
}

function createCard(text) {

// Create action button for submitting entered data
  var action = CardService.newAction()
      .setFunctionName('onCreateEvent')
      .setParameters({text: text});
  var button = CardService.newTextButton()
      .setText('Create event')
      .setOnClickAction(action)
      .setTextButtonStyle(CardService.TextButtonStyle.FILLED);
  var buttonSet = CardService.newButtonSet()
      .addButton(button);

  var startDateTimePicker = CardService.newDateTimePicker()
    .setTitle("Event start date")
    .setFieldName("date_time_field_start")
    .setValueInMsSinceEpoch(new Date().getTime())
    .setTimeZoneOffsetInMins(+2 * 60)
    .setOnChangeAction(CardService.newAction()
    .setFunctionName("handleDateTimeChange"));

  var endDateTimePicker = CardService.newDateTimePicker()
    .setTitle("Event end date")
    .setFieldName("date_time_field_end")
    .setValueInMsSinceEpoch(new Date().getTime())
    .setTimeZoneOffsetInMins(+2 * 60)
    .setOnChangeAction(CardService.newAction()
    .setFunctionName("handleDateTimeChange"));


  var section = CardService.newCardSection().setHeader("I am section header")
      .addWidget(startDateTimePicker)
      .addWidget(endDateTimePicker)
      .addWidget(textInputTitle)
      .addWidget(buttonSet);

  card.addSection(section);
  return card.build();
  } 

function onCreateEvent(e){
  Logger.log("Text input%s ",JSON.stringify(e) );
}

我尝试记录 textInputs 值，但我得到的只是空值。我还检查了解决类似问题的，但我无法弄清楚 e.formInput 的来源。

更新添加我的清单文件

{
  "timeZone": "America/New_York",
  "dependencies": {
    "enabledAdvancedServices": [{
      "userSymbol": "Calendar",
      "serviceId": "calendar",
      "version": "v3"
    }]
  },
  "exceptionLogging": "STACKDRIVER",
  "oauthScopes": ["https://www.googleapis.com/auth/calendar.addons.execute",
                  "https://www.googleapis.com/auth/calendar", 
                  "https://www.googleapis.com/auth/script.locale"
                 ],
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "name": "event creator",
      "logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/calendar_today_black_48dp.png",
      "useLocaleFromApp": true,
      "homepageTrigger": {
        "runFunction": "onHomepage",
        "enabled": true
      }
    },
    "calendar": {
      "eventOpenTrigger": {
        "runFunction": "onCalendarEventOpen"
      }
    }
  }
}

Answer 1

问题

正在事件对象上访问 formInput / formInputs 属性。

事件处理

要了解 formInputs 道具的位置，您需要了解附加组件如何处理事件:

每个可以交互的小部件 class 都可以分配一个 Action 实例；
Action 有一个回调（由 setFunctionName() 设置），当动作被触发时执行；
当一个动作被触发时，一个事件对象被构造并传递给分配给Action的函数作为它的第一个参数。
此事件对象包含元数据、传递给回调的自定义参数（由 setParameters() 添加）以及所需的 formInput 和 formInputs 字段。

应用于问题

如果我正确理解了您的代码的意图，按下按钮后调用 onCreateEvent(e) 时您将可以访问提交的数据。请注意 DateTimePickers return 它们的值作为嵌套对象。

参考资料

附加操作guide
事件对象reference

备注

您可以根据需要链接回调并传递事件对象（不过请务必 return 在 30 秒内做出响应，否则您将超时），请参阅类似的问题。
在调用回调之前不会填充事件对象，因此您不能运行或从编辑器或本地调试它（除非您只是简单地模拟事件对象 - 它有详细记录）

Answer 2

将 Logger.log("Text input%s ",JSON.stringify(e.formInput.text_input_title)); 更改为 console.log("Text input%s ",JSON.stringify(e.formInput.text_input_title));:

记录器未显示任何内容，因此将其更改为控制台日志是解决方案。要在创建事件后查看控制台日志，您必须转到脚本编辑器并转到 view -> Stackdriver Logging -> Apps Script Dashboard 在那里你会看到最后一次执行made 和控制台日志的结果（日志可能需要几秒钟才能出现）：

如您所见，结果是 JSON，例如：

{ 
   "clientPlatform":"web",
   "userLocale":"en",
   "parameters":{ 
      "text":"calendar"
   },
   "userTimezone":{ 
      "offSet":"3600000",
      "id":"Europe/Madrid"
   },
   "formInputs":{ 
      "date_time_field_end":[ 
         { 
            "hasDate":true,
            "hasTime":true,
            "msSinceEpoch":1581478200000
         }
      ],
      "date_time_field_start":[ 
         { 
            "msSinceEpoch":1581516320343,
            "hasDate":true,
            "hasTime":true
         }
      ],
      "text_input_title":[ 
         "This is a test title"
      ]
   },
   "formInput":{ 
      "date_time_field_end":{ 
         "hasTime":true,
         "msSinceEpoch":1581478200000,
         "hasDate":true
      },
      "date_time_field_start":{ 
         "hasDate":true,
         "hasTime":true,
         "msSinceEpoch":1581516320343
      },
      "text_input_title":"This is a test title"
   },
   "hostApp":"calendar",
   "userCountry":"",
   "commonEventObject":{ 
      "parameters":{ 
         "text":"calendar"
      },
      "platform":"WEB",
      "formInputs":{ 
         "date_time_field_end":{ 
            "dateTimeInput":{ 
               "hasTime":true,
               "msSinceEpoch":1581478200000,
               "hasDate":true
            }
         },
         "date_time_field_start":{ 
            "dateTimeInput":{ 
               "hasDate":true,
               "hasTime":true,
               "msSinceEpoch":1581516320343
            }
         },
         "text_input_title":{ 
            "stringInputs":{ 
               "value":[ 
                  "This is a test title"
               ]
            }
         }
      },
      "hostApp":"CALENDAR",
      "timeZone":{ 
         "id":"Europe/Madrid",
         "offset":3600000
      },
      "userLocale":"en"
   },
   "calendar":{ 

   }
}

所以现在如果我们控制台日志 -> console.log("Text input",JSON.stringify(e.formInput.text_input_title)); 我们可以看到：

如何在 google 日历 add-on 上获取输入值？

How to get inputs value on google calendars add-on?

google-apps-script

google-calendar-api

google-apps-script-addon