Google apps script 基于用户操作修改google窗体中的模式对话框我想做的事_Google Apps Script_Google Forms

Google apps script 基于用户操作修改google窗体中的模式对话框我想做的事

google-apps-script

Google apps script 基于用户操作修改google窗体中的模式对话框我想做的事,google-apps-script,google-forms,Google Apps Script,Google Forms,我正在尝试使用单击事件将HTML添加到google Forms中的模式对话框中，以触发google.script.run.withSuccessHandler（）调用来提供新的HTML，以便获得额外的用户输入 GS代码 function onOpen(e) { FormApp.getUi().createMenu("My Menu").addItem('Set Up Invites', 'setUpInvite').addToUi(); } function setUpInvite() {

我正在尝试使用单击事件将HTML添加到google Forms中的模式对话框中，以触发

google.script.run.withSuccessHandler（）

调用来提供新的HTML，以便获得额外的用户输入

GS代码

function onOpen(e) {
  FormApp.getUi().createMenu("My Menu").addItem('Set Up Invites', 'setUpInvite').addToUi();
}

function setUpInvite() {
  //this is the main function
  var ui = HtmlService.createHtmlOutputFromFile("Index")
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setTitle("Setup");

  FormApp.getUi().showModalDialog(ui, "Setup");
}

function getEventQAnswer(answer) {
  var html;
  switch(answer)
  {
    case "yes":
      //TODO
      //get the event info
      return "";
      break;

    case "no":
      //create the event
      html = HtmlService.createHtmlOutputFromFile("createEvent.html")
      return html;
      break;
  }
}

HTML索引页 在这一页上，我试图更改“让函数在单击时工作”。我最初试过一次，但还是不起作用。它从getSelectAnswer开始，它从选择问题中获取值，然后调用GS函数getEventQAnswer，它从服务器端获取正确的HTML并将其传递给函数addHTMLChoice。然而，目前，它似乎没有任何作用

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <script>
  //document.getElementById("eventQ").addEventListener("onchange", getSelectAnswer);
  document.getElementById("eventQ").onclick.getSelectAnswer();
  function addHTMLChoice(html) {
  var div = document.getElementById('eventInfo');
  div.innerHTML = html;
  }

  function getSelectAnswer() {
  var e = document.getElementById('eventQ');
  var val = e.options[e.selectedIndex].value;
  google.script.run.withSuccessHandler(addHTMLChoice).getEventQAnswer(val);
  }

  </script>
  <form>
  <div>
  <select id="eventQ">
  <option value="yes">Yes</option>
  <option value="no">No, create one now</option>
  </select>

  </div>
  <div id="eventInfo">

  </div>
</form>
  </body>
</html>


//document.getElementById（“eventQ”）.addEventListener（“onchange”，getSelectAnswer）；
document.getElementById（“eventQ”）.onclick.getSelectAnswer（）；
函数addHTMLChoice（html）{
var div=document.getElementById（'eventInfo'）；
div.innerHTML=html；
}
函数getSelectAnswer（）{
var e=document.getElementById（'eventQ'）；
var val=e.options[e.selectedIndex].value；
google.script.run.withSuccessHandler（addHTMLChoice）.getEventQAnswer（val）；
}
对
不，现在创建一个

这是我试图在测试中返回的createEvent.html

<div>
    <input id="datetime" name="datetime" type="datetime-local">
    <p>hi</p>
</div>

嗨

服务器端代码只能返回特定类型的参数，如下所述。由于您试图返回html对象，因此不会将其传递到客户端（您的模式对话框）。因此，对服务器端进行如下修改：

function getEventQAnswer(answer) {
  var html;
  switch(answer)
  {
    case "yes":
      //TODO
      //get the event info
      return "";
      break;

    case "no":
      //create the event
      html = HtmlService.createHtmlOutputFromFile("createEvent.html").asTemplate().getRawContent()
      return html;
      break;
  }
}

注意转换为RawContent

此外，我发现设置onchange事件触发器以获得选择更容易，如下所示：

<form>
  <div>
  <select id="eventQ" onchange ='getSelectAnswer()'>
  <option value="yes">Yes</option>
  <option value="no">No, create one now</option>
  </select>

  </div>


对
不，现在创建一个

最终的html索引代码为：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <script>
  //document.getElementById("eventQ").addEventListener("onchange", getSelectAnswer);
  //document.getElementById("eventQ").onclick.getSelectAnswer();
  function addHTMLChoice(html) {
  console.log("success")
  console.log(html)
  var div = document.getElementById('eventInfo');
  div.innerHTML = html;
  }

  function getSelectAnswer() {
  console.log("getting selected Answer")
  var e = document.getElementById('eventQ');
  var val = e.options[e.selectedIndex].value;
  console.log(val)
  google.script.run.withSuccessHandler(addHTMLChoice).withFailureHandler(failed).getEventQAnswer(val);
  }
  
  function failed(e){
  console.log("Failed")
  console.log(e)
  }

  </script>
  <form>
  <div>
  <select id="eventQ" onchange ='getSelectAnswer()'>
  <option value="yes">Yes</option>
  <option value="no">No, create one now</option>
  </select>

  </div>
  <div id="eventInfo">

  </div>
</form>
  </body>
</html>


//document.getElementById（“eventQ”）.addEventListener（“onchange”，getSelectAnswer）；
//document.getElementById（“eventQ”）.onclick.getSelectAnswer（）；
函数addHTMLChoice（html）{
console.log（“成功”）
console.log（html）
var div=document.getElementById（'eventInfo'）；
div.innerHTML=html；
}
函数getSelectAnswer（）{
日志（“获取所选答案”）
var e=document.getElementById（'eventQ'）；
var val=e.options[e.selectedIndex].value；
console.log（val）
google.script.run.withSuccessHandler（addHTMLChoice）.withFailureHandler（failed）.getEventQAnswer（val）；
}
功能失败（e）{
console.log（“失败”）
控制台日志（e）
}
对
不，现在创建一个

注意，使用

console.log

在客户端进行调试。这将在将来对您自己的调试非常有用

希望能有所帮助。

非常感谢。我已经阅读了HTMLService文档，感觉像是读了一百万遍，完全错过或误解了整个合法退货类型。我不知道我可以在GAS开发环境中使用console.log（），但我通过检查firefox浏览器上的元素找到了答案。游戏规则改变者——我断断续续地做了一年半了。