如何在谷歌日历插件上获取输入值？

Question

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

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

这就是我所拥有的：

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 值，但我得到的只是空值。 我还检查了Google app script,gmail addon get TextInput value，其中解决了类似的问题，但我无法弄清楚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 属性所在的位置，您需要了解插件如何处理事件：

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

应用于问题

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

参考文献

1. 附加操作guide
2. 事件对象reference

备注

1. 您可以链接回调并根据需要传递事件对象（但请确保在 30 秒内返回响应，否则您将超时），请参阅my older answers 中的一个类似问题。李>
2. 在调用回调之前不会填充事件对象，因此您无法从编辑器或本地运行或调试它（除非您只是简单地模拟事件对象 - 它有据可查）

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 在那里您将看到最后一次执行和控制台日志的结果（日志可能需要几秒钟才能出现):

如您所见，结果是 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)); 我们可以看到：