Google Apps脚本-HTML服务-“等待”客户端表单提交

Question

I am creating a container-bound Google Apps Scripts that is bound to a Google Spreadsheet. 我正在创建绑定到Google Spreadsheet的容器绑定的 Google Apps脚本。 In my GS code I am using Google HTML Service to display a dialogue box in Google Sheets (ie an HTML form). 在我的GS代码中，我正在使用Google HTML Service在Google表格中显示一个对话框（即HTML表单）。

The issue I am running into is that when I render the HTML form client-side, the GS server-side code continues to run. 我遇到的问题是，当我渲染HTML表单客户端时，GS服务器端代码将继续运行。 Instead, I would like to "pause" the server side code and have it wait until the user submits the form. 相反，我想“暂停”服务器端代码，并等待用户提交表单。

Is that possible to do? 那有可能吗？

Here's what I have so far: 这是我到目前为止的内容：

Code.gs 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 的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>

Any ideas, thoughts or suggestions are appreciated! 任何想法，想法或建议，表示赞赏！

Answer 1

I guess you are bit confused how the js function works in app script. 我想您对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) {

        }

Also, its better to add type="button" to both the button or else it can consider it as submit buttons. 同样，最好在两个按钮上都添加type="button" ，否则可以将其视为提交按钮。

Google Apps脚本-HTML服务-“等待”客户端表单提交

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-08-16 18:57:02

Google Apps脚本-HTML服务-“等待”客户端表单提交

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-08-16 18:57:02

解决方案1
1 已采纳 2017-08-16 18:57:02