根据用户操作修改 google 表单中的模态对话框

Question

我想做什么

我正在尝试将 HTML 添加到 google 表单中的模态对话框，使用单击事件触发 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 索引页

在此页面上，我试图更改获取函数以在单击时起作用。我最初尝试了 onchange，但它仍然没有用。它从 getSelectAnswer 开始，它从 select 问题中获取值，然后调用 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>

这是 createEvent.html 我正在尝试 return 在测试中。

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

Answer 1

服务器端代码只能return特定类型的参数，描述here。由于您正在尝试 return 一个 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>

注意，使用console.log在客户端调试。这对您将来自己的调试很有用。

希望对您有所帮助。

根据用户操作修改 google 表单中的模态对话框

Modify modal dialog box in google forms based on user action

google-apps-script

google-forms

我想做什么

HTML 索引页