google-apps-script - 如何从 HTML 服务中的列表框获取值

Question

我在使用 Google Apps 脚本中的 HTML 服务时遇到问题。我试图从列表框中获取一个值来拉动并填充表单的其余部分。这在使用 uiApp 时效果很好，但由于 Google 决定下个月关闭 uiApp，我别无选择，只能将所有应用迁移到 HTML Service。

我在 stackoverflow 上发现了一些使用 scriptlet 的技巧，但我不断收到错误。

HTML

<form>

<table>
<tbody>
<tr>
  <td><label>Select Clinic:</label></td>
  <td><select name="selectClinic"id="selectClinic"onchange="doThisOnChange(this.value)"> 
  </select>

  <script>
    doThisOnChange = function(value)
    {
    alert( "Do something with the value: " + value );
    <?!=
    var ClinicID =  value;
    var SS = SpreadsheetApp.openById("MyID");
    var sheet= SS.getSheetByName('Data');
    var getClinicName = sheet.getRange("D"+ClinicID+":D"+ClinicID);
    window.document.getElementById("clinicName").value = getClinicName ; 
    ?>          
    }
    </script>

    <tr>
    <td><label>Clinic Name:</label></td>
    <td><input type="text" name="clinicName" id="clinicName" value=""> 
  </td>
</tr>

使用 scriptlet 时，脚本似乎无法获取传递的值。获取错误

"ReferenceError: "value" is not defined. (line 5, file "Code")"

我终于能够使用 window.document.getElementById 方法获取表单来填充字段，但似乎在不使用 scriptlet 时脚本会停止。

如有任何帮助，我们将不胜感激。

Answer 1

问题

您正在混合在模板评估(脚本)和客户端脚本上仅运行一次的服务器端组件。因此，用作 doThisOnChange 参数的 value 无法在脚本中访问。

解决方案

如果您需要多次调用服务器端组件，则应使用 google.script.run API，因为这是与服务器端函数通信的唯一方式。

示例

所以，如果我正确理解你的目标，你应该像这样解耦你的代码(请注意，服务器端函数显式返回所需的输出很重要+你设置了一个withSuccessHandler() 对服务器端函数成功运行结果执行客户端操作):

服务器端

function getClinicName(ClinicID) {
  var OPCDSS = SpreadsheetApp.openById("MyID"); //I assume SS === OPCDSS?;
  var sheet = OPCDSS.getSheetByName('Data');
  var range = sheet.getRange("D"+ClinicID+":D"+ClinicID);
  var name  = range.getValue(); //this part was originally missing;
  return name;    
}

客户端

  <script>
    /**
     * Asynchronously calls server-side function;
     * @param {String} value clinic select value; 
     */
    function doThisOnChange (value) {
      alert( "Do something with the value: " + value );
      google.script.run.withSuccessHandler(fillName).getClinicName(value);
    }

    /**
     * Performs client-side actions on server-side function return;
     * @param {*} serverOutput value returned from server-side;
     */
    function fillName (serverOutput) {
      var clinicNameInput = document.getElementById('clinicName');
          clinicNameInput.value = serverOutput;
    }
</script>

多个服务器端字段

正如评论中所讨论的，添加了一个使用多列和/或多行 Range 实例的示例。如果您在 Range 上调用 getValues() 方法，则要迭代的结果 Array 值的结构将如下:

[ //pseudo-code;
  row1 [ col1 , ..., colN ] ,
  ...,
  rowN [ col1, ..., colN ] 
]

请注意，处理 2D Array 实例只是最佳实践，因为 getValue()/getValues() 方法的计算量很大。总而言之，您可以创建一个包含所有诊所属性的 Object 实例(稍后可以在客户端回调函数中引用)，而不是直接返回诊所的名称通过key)或者您可以简单地传递返回Array并在客户端处理它:

function getData(ClinicID) {
  var ss     = SpreadsheetApp.openById("MyID");
  var sheet  = ss.getSheetByName('Data');
  var range  = sheet.getRange(yourRangeboundaries); 
  var values = range.getValues(); //gets 2D Array of values;

  var output = {}; //initiate output Object;

  output.name = values[0][0]; //assuming name is in 1st row 1st column;
  output.phone = values[0][4]; //assuming phone is in 1st row 5th column;
  //etc;

  return output;
}

有用的注释

与 google.script.run 的客户端到服务器通信本质上是异步，这意味着您不必等待> 直到您的服务器端函数完成执行其他任务，但同时您只能访问回调函数范围内的服务器端结果。

有用的链接

1. 模板化 HTML guide ;
2. 客户端到服务器通信 guide ;
3. google.script.run API reference ;
4. getValue() 方法 reference ;