Отправить результаты формы в скрипт Google?

avatar
AKD
8 апреля 2018 в 08:26
1954
2
2

Я пытаюсь отправить результаты ввода html-формы в боковую панель с привязкой к контейнеру и скопировать их на лист Google. Я рассмотрел несколько примеров кода с этого сайта, а также с других (https://www.packtpub.com/mapt/book/web_development/9781785882517/4/ch04lvl1sec48/submitting-form-using-google-script-api). -method), но, возможно, из-за того, что я новичок в html/javascript/gas, я нашел их запутанными и трудными для понимания, так что код, который я написал, не работает, и я не могу понять, почему.

Короче говоря, я хотел бы передать значение, введенное в текстовое поле ввода 'formcommenttext', моей функции скрипта Google Apps под названием 'postCommentToSheet', где я надеюсь получить значение, введенное пользователем, и (в конечном итоге ) запишите его на лист Google.

Есть предложения?

Вот мой HTML-код:

  <!-- input control to add comment -->
  <form id="addCommentForm">
  <fieldset>
  <legend>Add your comment:</legend>
  <br>
  <input type="text" name="formcommenttext" value=""><br>
  <input type="submit" value="Add" onclick="google.script.run.postCommentToSheet(this.parentNode);">
  <input type="reset" value="Cancel">
  </fieldset>
  </form>

Я также включил следующий фрагмент кода в скриптовую часть моей html-формы (как предлагалось в другом месте), хотя я не совсем понимаю, что он делает и как его отредактировать в соответствии со своими потребностями.

  function postData(form){
    google.script.run
      .withSuccessHandler(callback)
      .withFailureHandler(callback)
      .postFormDataToSheet(form);
  } 

Вот мой код .gs:

function postCommentToSheet(formObject) {
  //read formcommenttext from add comment form: 
  //https://www.packtpub.com/mapt/book/web_development/9781785882517/4/ch04lvl1sec48/submitting-form-using-google-script-api-method

  var result = GLOBAL_UI.alert(formObject.formcommenttext.value)

  //get comments data sheet
  var ss = GLOBAL_DataFile.getSheetByName("Comments");

  ss.appendRow([formObject.formcommenttext]);

}
Источник

Ответы (2)

avatar
Diego
8 апреля 2018 в 09:43
0

В настоящее время вам не нужна функция postData(), но вы можете вызвать ее вместо google.script.run.postCommentToSheet() в случае, если вы хотите выполнить некоторую обработку перед вызовом добавления комментария на лист.

Например, вы можете запустить проверки, чтобы предотвратить отправку пользователем, скажем, пустого комментария. Я включил именно эту функциональность в свой пример в качестве демонстрации.

Также включено пользовательское меню, позволяющее открывать боковую панель из листа, и CSS-пакет для надстроек.

enter image description here

Index.html:

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <!-- (OPTIONAL) Make your sidebar look consistent with Google Sheets with the below CSS https://developers.google.com/apps-script/add-ons/css -->
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>

<body>
  <!-- input control to add comment -->
  <form id="addCommentForm" onsubmit=checkData(this)>
    <fieldset>
      <legend>Add your comment:</legend>
      <br>
      <input type="text" name="formcommenttext" value="">
      <br>
      <input type="submit" value="Add">
      <input type="reset" value="Cancel">
    </fieldset>
  </form>

  <script>
    function checkData(form) {
      if (form.formcommenttext.value != "") {
        google.script.run.postCommentToSheet(form);
      }
    }
  </script>
</body>

</html>

Код.gs:

// Create a custom menu to open your sidebar
function onOpen() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var menuEntries = [];
  menuEntries.push({name: "Open Sidebar", functionName: "openSidebar"});
  ss.addMenu("My Custom Menu", menuEntries);
 }

// Open the sidebar
function openSidebar() {
  var sidebar =  HtmlService.createHtmlOutputFromFile("Index");
  SpreadsheetApp.getUi().showSidebar(sidebar);
}

function postCommentToSheet(formObject) {
  var ss = SpreadsheetApp.getActive();
  var sheet = ss.getSheetByName("Comments"); // Almost ALWAYS better to explicitly define which sheet to write to
  sheet.appendRow([formObject.formcommenttext]);
}
Serge insas
8 апреля 2018 в 11:20
0

Функция doGet создаст отдельное веб-приложение, а не пользовательский интерфейс боковой панели.

Diego
8 апреля 2018 в 11:26
0

Спасибо, забыл, что это боковая панель.

AKD
10 апреля 2018 в 19:52
0

Большое спасибо, Диего. Это имеет смысл, и ваш пример кода работает как шарм.

AKD
10 апреля 2018 в 19:52
0

Я также ценю, что вы указали мне на ресурсы скриптов Google CSS.

avatar
Serge insas
8 апреля 2018 в 09:27
2

вот как это работает:

  <form id="addCommentForm">
  <fieldset>
  <legend>Add your comment:</legend>
  <br>
  <input type="text" name="formcommenttext" value=""><br>
  <input type="submit" value="Add" onclick="google.script.run.postCommentToSheet(this.form);">
  <input type="reset" value="Cancel">
  </fieldset>
  </form>

и часть .gs :

function sidebar(){
  var sb =  HtmlService
    .createHtmlOutputFromFile('index');
  SpreadsheetApp.getUi().showSidebar(sb);
}

function postCommentToSheet(form){
  Logger.log(JSON.stringify(form));
  var ss = SpreadsheetApp.getActiveSheet();
  ss.appendRow([form.formcommenttext]);
}

Я добавил журнал для проверки содержимого формы ответа и немного упростил его, чтобы сделать его функциональным в этом небольшом примере.