Как получить значение из списка в службе HTML

Question

У меня проблема с HTML-сервисом в Google Apps Script.Я пытаюсь получить значение из списка, чтобы вытащить и заполнить оставшуюся часть формы.Это прекрасно работало при использовании uiApp, но так как Google решил закрыть uiApp в следующем месяце, у меня нет другого выбора, кроме как перенести все мои приложения в службу HTML.

Я обнаружил некоторые укусы при использованиискриптлеты здесь на stackoverflow, но я продолжаю получать ошибки.

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>

Похоже, что скрипт не может получить значение, переданное при использовании скриптлета.Получение ошибки

"ReferenceError:" значение "не определено. (Строка 5, файл" Код ")"

Я наконец смог получить форму дляЗаполните поля, используя метод window.document.getElementById, но похоже, что сценарий останавливается, когда скриптлет не используется.

Любая помощь будет принята.

Answer 1

Проблема

Вы смешиваете серверный компонент, который запускается только один раз при оценке шаблона (скриплеты) и клиентский скрипт.Таким образом, value, используемый в качестве аргумента doThisOnChange, не может быть доступен в скрипте.

Решение

Если вам нужно вызвать серверный компонент большечем один раз, вы должны использовать google.script.run API вместо этого, так как это единственный способ взаимодействия с функциями на стороне сервера.

Пример

Итак, если я понялваша цель правильно, вы должны отделить свой код следующим образом (обратите внимание, что для серверной функции важно явно return желаемый вывод + вы устанавливаете 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 значений для перебора будут структурированы как:

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

Обратите внимание, что работа с экземплярами 2D 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;
}

Полезные заметки

Связь клиент-сервер с google.script.run равна асинхронный по своей природе, что означает, что вам не нужно ждать , пока ваша функция на стороне сервера не завершит выполнение других задач, но в то же время вы можете получить доступ только к результатам на стороне сервера в рамках функции обратного вызова .

Полезные ссылки

1. Шаблон HTML guide ;
2. Связь клиент-сервер руководство ;
3. google.script.run API ссылка ;
4. getValue() метод ссылка ;