Question

我正在尝试做什么

我尝试使用点击事件向Google表单中的模式对话框添加HTML，以触发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开始，它从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。

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

Answer 1

服务器端代码只能返回某些类型的参数，如here所述。由于您尝试返回一个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在客户端进行调试。这将在将来用于您自己的调试时很有用。

希望有所帮助。

根据用户操作修改谷歌表单中的模式对话框

我正在尝试做什么

HTML索引页

1 个答案: