Question

我正在制作绑定到Google电子表格的container-bound Google Apps脚本。在我的GS代码中，我使用Google HTML Service在Google表格中显示一个对话框（即HTML表单）。

我遇到的问题是，当我在客户端呈现HTML表单时，GS服务器端代码继续运行。相反，我想＆＃34;暂停＆＃34;服务器端代码并让它等到用户提交表单。

这可能吗？

这是我到目前为止所拥有的：

Code.gs

function onOpen(e) {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('Custom')
      .addItem('Generate Shipping Email', 'menuItem1')
      .addToUi();
}

function menuItem1() {
  var html = HtmlService.createHtmlOutputFromFile('index');
  var ui = SpreadsheetApp.getUi()
  ui.showModalDialog(html, 'Shipping Email Options'); // This line shows the modal in index.html

  // Here is where I would like to "pause" until the HTML form is submitted by user clicking the button with id="button1id" ...

  Logger.log("Line after showModalDialog"); // ... however, currently this code runs before the user clicks submit or cancel button in the html form
  // Rest of code which should not run until user clicks submit or cancel button will go here
}

readyToSendEmail(shippingNeeded, notes) {
  // Some non-relevant code goes here
}

的index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form class="form-horizontal">
    <fieldset>

    <!-- Form Name -->


    <!-- Multiple Radios (inline) -->
    <div class="form-group">
    <label class="col-md-4 control-label" for="radios">Do you need expedited shipping?</label>
    <div class="col-md-4"> 
    <label class="radio-inline" for="radios-0">
    <input type="radio" name="radios" id="shippingNeededYes" value="Yes" checked="checked">
    Yes
    </label> 
    <label class="radio-inline" for="radios-1">
    <input type="radio" name="radios" id="shippingNeededNo" value="No">
    No
    </label>
    </div>
    </div>

    <!-- Textarea -->
    <div class="form-group">
    <label class="col-md-4 control-label" for="textarea">Additional shipping notes:</label>
    <div class="col-md-4">                     
    <textarea class="form-control" id="textarea" name="textarea"></textarea>
    </div>
    </div>

    <!-- Button (Double) -->
    <div class="form-group">
    <label class="col-md-4 control-label" for="button1id">Ready to send?</label>
    <div class="col-md-8">
    <button id="button1id" name="button1id" class="btn btn-primary" onclick="clickedSubmit()">Yes, send the email</button>
    <button id="button2id" name="button2id" class="btn btn-default" onclick="google.script.host.close()">Cancel, do not send an email</button>
    </div>
    </div>

    </fieldset>
    </form>

  <script>
  function clickedSubmit() {
    if(document.getElementById('shippingNeededYes').checked) {
      var shippingNeeded = "Yes";
    } else {
      var shippingNeeded = "No";
    }
    var notes = document.getElementById('textarea');
    google.script.run.readyToSendEmail(shippingNeeded, notes);
  }
  </script>  

  </body>
</html>

任何想法，想法或建议都表示赞赏！

Answer 1

我猜你对app脚本中js函数的工作原理有点困惑。

//This function will run when the spreadsheet is loaded
       function onOpen(e) {
          var ui = SpreadsheetApp.getUi();
          ui.createMenu('Custom')
              .addItem('Generate Shipping Email', 'menuItem1')
              .addToUi();
        }

    //This entire function will run when you click on the menu item in the spreadsheet.
        function menuItem1() {
          var html = HtmlService.createHtmlOutputFromFile('index');
          var ui = SpreadsheetApp.getUi()
          ui.showModalDialog(html, 'Shipping Email Options'); 
        }


    //This is where you need to write the logic...this function will be called when you click on the button
       function readyToSendEmail(shippingNeeded, notes) {

        }

此外，最好在按钮上添加type="button"，否则可以将其视为提交按钮。

Google Apps脚本 - HTML服务 - ＆＃34;等待＆＃34;用于客户端表单提交

1 个答案: