“应用脚本”对话框 - HTML服务 - 应用" withSuccessHandler"正确 - google.script.run

时间:2018-04-02 20:10:16

标签: html google-apps-script web-applications

背景

我对编码很新,而且我已经使用GAS为Google表格构建了这个小UI,这是我刚才难以理解的概念之一。我尝试并尝试过阅读,从概念上理解并将withSuccessHandler(function)应用于各种示例,但我似乎无法让它发挥作用。

到目前为止我所理解的是:

  • 在客户端运行以下内容时(例如Index.html):



google.script.run.withFailureHandler(CallbackFunction).ServerSideFunction(aVariable)




一个。 ServerSideFunction(aVariable):首先调用Code.gs中的这个函数并返回一个值," OutputA,"回到Index.html。

CallbackFunction :然后,调用此函数并使用" OutputA"作为其输入并返回另一个值,您可以将其用于任何目的。

目标

  • 打开对话框,询问"姓名"和"电子邮件。" 完成
  • 一旦用户点击"提交"输入填充在电子表格中。 完成
  • 然后清除表单,以便他们可以添加其他人或退出,如果他们想要的话。

问题

对于最后一篇文章,我似乎无法使用SuccessHandler从我的脚本返回一个值,确认输入输入正确,我真的不知道如何继续。

我已经包含了以下代码的工作版本,但未提供withSuccessHandler以供参考。任何有助于更好地理解这一点以及如何将其合并到下面的代码中的帮助都将非常感激!

Google脚本



function onOpen(e) {
  SpreadsheetApp.getUi()
    .createMenu('Menu')
    .addItem('Add Member', 'createDialog')
    .addToUi();
}

function createDialog() {
  var htmlOutput = HtmlService
    .createHtmlOutputFromFile('Index')
    .setWidth(300)
    .setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, " ");
}

function addAName(bName, bEmail) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  var ControlSheet = sheet.getSheetByName('Control Sheet');
  var lRow = ControlSheet.getRange(1, 1, ControlSheet.getLastRow(), 1).getValues().filter(String).length;
  var Name = ControlSheet.getRange(lRow + 1, 1);
  var Email = ControlSheet.getRange(lRow + 1, 2);

  var ValidName = /(^[A-Za-z]+)\s([A-Za-z]{1}[.]{1}\s)?([A-Za-z]+$)/g;
  var ValidEmail = /(^[A-Za-z]+)([.]{1})([A-Za-z]{1}[.]{1})?([A-Za-z]+)(@google.com|@yahoo.com)$/g;
  if (bName.match(ValidName) && bEmail.match(ValidEmail)) {
    Name.setValue(bName);
    Email.setValue(bEmail);

  }

}




HTML



<body>
  <h2>Add New Member</h2>
  <div class="mdc-layout-grid">

    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
      <div class="mdc-text-field mdc-text-field--upgraded" data-mdc-auto-init="MDCTextField">
        <input class="mdc-text-field__input" id="Name" type="text" aria-controls="name-validation-message" pattern="(^[A-Za-z]+)\s([A-Za-z]{1}[.]{1}\s)?([A-Za-z]+$)">
        <label for="Name" class="mdc-floating-label">Name</label>
        <div class="mdc-line-ripple"></div>
      </div>
      <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" id="name-validation-message" aria-hidden="true">
        Please enter your full name.
      </p>
    </div>
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
      <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
        <input class="mdc-text-field__input" id="Email" type="text" aria-controls="name-validation-message" pattern="(^[A-Za-z]+)([.]{1})([A-Za-z]{1}[.]{1})?([A-Za-z]+)(@google.com|@yahoo.com)$">
        <label for="Email" class="mdc-floating-label">Email Address</label>
        <div class="mdc-line-ripple"></div>
      </div>
      <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" id="name-validation-message" aria-hidden="true">
        Please enter a valid Google or Yahoo email address.
      </p>
    </div>

  </div>
  <div class="Right_Side">
    <button class="mdc-button mdc-button--unelevated secondary-filled-button" OnClick="google.script.host.close()">Cancel
    </button>
    <button class="mdc-button mdc-button--unelevated primary-filled-button" OnClick="sendInputToGS()">Submit
    </button>
  </div>

  <script>
    window.sendInputToGS = function() {
      var aName = document.getElementById("Name").value;
      var aEmail = document.getElementById("Email").value;
      google.script.run.addAName(aName, aEmail);
    }
  </script>

  <script type="text/javascript">
    window.mdc.autoInit();
  </script>

</body>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

只能将一个参数添加到被调用的服务器函数中。但是您可以使用数组作为一个参数,并将多个值放入数组中。

var data_Array = [aName, aEmail];
google.script.run
  .withSuccessHandler(myClientSideFunction)
  .addAName(data_Array);

不会自动返回值,您必须添加return myValue语句。

function addAName(data) {
  var bName, bEmail;

  bName = data[0];//Arrays in JavaScript are zero indexed
  bEmail = data[1];


  //code

  return "something";
}

客户代码

<script>
  window.sendInputToGS = function() {
    var aName = document.getElementById("Name").value;
    var aEmail = document.getElementById("Email").value;

    var data_Array = [aName, aEmail];
    google.script.run
      .withSuccessHandler(confirmationBack)
      .addAName(data_Array);
  }

  window.confirmationBack = function(rtrn) {
    if (rtrn === 'success') {

    }
  }
</script>

答案 1 :(得分:0)

Apps Script实例与客户端HTML代码之间的异步通信的成功和失败处理程序是客户端代码中的函数,而不是在Apps脚本中编写的{{1} })。

当您calling服务器端函数.gs时,可以根据需要使用它来调用其他服务器端函数(foo(input)bar()),并使用它们输出以形成发送到客户端成功处理程序的值。

示例:

.GS

baz()

的.html

function foo(valFromClient) {
  var firstPart = bar(valFromClient);
  var secondPart = baz(valFromClient);
  return {input: valFromClient, first: firstPart, second: secondPart};
}
function bar(input) {
  return "'bar' called, input '" + String(input) + "'.";
}
function baz(val) {
  return "'baz' called, input '" + String(val) + "'.";
}

在这个例子中,因为我们的代码不会抛出任何异常,所以永远不会调用失败处理程序,只会调用成功处理程序。浏览器控制台将记录对象... <script> function getServerStuff() { google.script.run .withFailureHandler(serverThrewException) .withSuccessHandler(serverFunctionCalledReturn) .foo("Hi"); } function serverThrewException(err) { console.log(err); } function serverFunctionCalledReturn(value) { console.log(value); } </script>