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：未定义“值”。（第5行，文件“代码”）””

我终于可以使用window.document.getElementById方法来获得用于填充字段的表单，但是当不使用scriptlet时，脚本似乎停止了。

任何帮助将不胜感激。

Answer 1

问题

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

解决方案

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

样品

因此，如果我正确理解了您的目标，则应像这样解耦代码（请注意，对于服务器端函数而言，显式return所需的输出很重要+您设置了{{1 }}对服务器端功能成功执行的结果执行客户端操作：

服务器端

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上调用getValues()方法，则要迭代的结果Range的结构将为：

Array

请注意，在2D [ //pseudo-code; row1 [ col1 , ..., colN ] , ..., rowN [ col1, ..., colN ] ]实例上工作只是一种最佳实践，因为Array / getValue()方法的计算量很大。总结起来，不是直接返回诊所的getValues()，而是创建一个包含所有诊所属性的name实例（以后可以由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; }的客户端到服务器通信本质上是异步，这意味着您不必等待直到服务器端功能完成执行其他任务，但是同时您只能在回调函数的范围内访问服务器端结果。

有用的链接

模板HTML guide;
客户端到服务器的通信guide;
google.script.run API reference;
google.script.run方法reference;

如何从HTML服务中的列表框中获取值

1 个答案: