Как я могу отредактировать HTML элемент пользовательского интерфейса листов Google после отправки формы? - PullRequest
Новая
       34

Как я могу отредактировать HTML элемент пользовательского интерфейса листов Google после отправки формы?

0 голосов
/ 16 февраля 2019

С Как добавить несколько входов из HTML-интерфейса в электронную таблицу Google? Я скопировал следующий скрипт из верхнего ответа и сделал 2 добавления , которые япомечены комментариями в приведенных ниже сценариях.

addItem.gs

В файл ниже добавлено 2 файла 

function openInputDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index').setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi()
       .showModalDialog(html, 'Add Item');
}

function itemAdd(form) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  //Addition #2
  document.getElementById("status_value").innerHTML = "Submitted!"; 
  sheet.appendRow(["  ", form.category, form.item, form.manupub, form.details, form.quantity]);
  return true;
}

Index.html

В файл ниже добавлено 1 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <br>
  <form>
    Category:<br>
    <input type="text" name="category">
    <br>
    Item:<br>
    <input type="text" name="item">
    <br>
    Manufacturer or Publisher:<br>
    <input type="text" name="manupub">
    <br>
    Details:<br>
    <input type="text" name="details">
    <br>
    Quantity:<br>
    <input type="text" name="quantity">
    <br><br>
     <input type="button" value="Submit"
        onclick="google.script.run
            .withSuccessHandler(google.script.host.close)
            .itemAdd(this.parentNode)" />
    </form>
    <!-- Addition #1 -->
    <p>Status: </p><p id="status_value"></p>
</html>

Проблема:

Сценарий, приведенный выше, завершается неудачно, когда он попадает в дополнение № 2.Кажется, он не может найти элемент id = status_value в html.

Примечание:

Я хочу обновить html из.Файл сценария gs, потому что у меня есть случаи, когда сценарий может занять некоторое время, я хочу изменить сообщение о статусе, когда сценарий достигает определенных этапов в сценарии.

Ответы [ 2 ]

0 голосов
/ 16 февраля 2019

Обратите внимание, что

... функции браузера, такие как манипулирование DOM или API окон, недоступны.

Вышеуказанное означает, что getElementById не можетиспользоваться на серверном коде (.gs).

От моего ответа до Стандартная поддержка JavaScript JavaScript Script для Служб Google

С https://developers.google.com/apps-script/guides/services/#basic_javascript_features (27 января 2019 г.)

Основные функции JavaScript

Сценарий приложений основан на JavaScript 1.6 , плюс несколько функций из 1.7 и 1.8.Таким образом, многие встроенные функции JavaScript доступны в дополнение к встроенным и расширенным службам Google: вы можете использовать общие объекты, такие как Array, Date, RegExp и т. Д., А также Math и Object глобальные объекты.Однако, поскольку код скрипта Apps выполняется на серверах Google (не на стороне клиента, кроме страниц служб HTML), функции браузера, такие как манипулирование DOM или API Window, недоступны.

0 голосов
/ 16 февраля 2019

Файлы .gs запускаются на стороне сервера, а html - на стороне клиента.Вы не можете передавать данные назад и вперед, как если бы они работали вместе, поэтому функциональность google.script.run .

Если вы хотите отправить данные обратно из серверного скрипта послефункция вызывается со стороны клиента с использованием этой функциональности, просто return it.

Затем вы можете использовать возвращенные данные для внесения изменений на стороне клиента:

HTML

<input type="button" value="Submit" onclick="google.script.run .withSuccessHandler(function (data) { document.getElementById("status_value").innerHTML = data; google.script.host.close() ; } ) .itemAdd()" />

.gs 

function itemAdd(form) { 
var ss = SpreadsheetApp.getActiveSpreadsheet(); 
var sheet = ss.getSheets()[0];
sheet.appendRow([" ", form.category, form.item, form.manupub, form.details, form.quantity]); 
return "Submitted" ;
 }
...