Изменение данных Google Sheet на основе выбора пользователя на сайте Google (веб-приложение)

Question

Я создаю сайт Google, на котором отображается раскрывающийся список на основе данных, поступающих из таблицы Google. Оно работает.

В качестве следующего шага я хочу, чтобы, когда пользователь выбирает раскрывающийся список из списка, выбранное значение записывается в ячейку Google Sheet (в приведенном ниже примере выбранное значение будет записано в Sheet : «Панель мониторинга», ячейка: B92).

Например, предположим, что раскрывающийся список содержит следующие значения, взятые из Листа: «Элемент 1», «Элемент 2», «Элемент 3».

Когда пользователь выбирает «Элемент 1» на веб-сайте, сценарий должен записать «Элемент 1» в ячейке таблицы Google B92. Точно так же, если пользователь выберет «Элемент 2», сценарий установит «Элемент 2» в ячейку B92.

Я пробовал использовать приведенный ниже код, но думаю, что что-то не так:

• получить в файле HTML
• doPost (e) , потому что я не уверен, как передать параметр

(Я удалил весь код, чтобы сосредоточиться на неправильных частях. При необходимости могу добавить его обратно)

</p> <pre><code>function doPost(e) { var ss=SpreadsheetApp.openById('XXXXXXXX'); var sh=ss.getSheetByName('Dashboard'); sh.getRange(92,2).setValues(e.parameter); }

HTML файл:

<script type="text/javascript">
      var lastIndex = "";
      const url = "https://script.google.com/a/google.com/macros/s/AKfycbxHX7cthji076OrqfY9ZpGa7jNDxKHUMf_ib7Ekmoo0Ir5DQF1Y/exec";
    function listQ(){
        var e = document.getElementById("sel1");
        if(e.selectedIndex > 0){
                lastIndex = e.selectedIndex;
                console.log(lastIndex);
                fetch(url, {
                    method: "POST"
                    , body: lastIndex
                }).then(function (response) {
                    return response.json()
                }).then(function (data) {
                    console.log(data);            
            })
         }
    }

document.getElementById("sel1").addEventListener("click",listQ);
</code>

Answer 1

Я считаю, что ваша цель следующая.

• Вы хотите поместить выбранное значение на вкладке select в HTML в ячейку «B92» на листе Dashboard.
• Вы хотите отправить значение в веб-приложения с помощью метода POST.

Для этого, как насчет этого ответа?

Точки модификации:

• На стороне скрипта Google Apps:
  • Если вы хотите использовать метод POST, тело запроса включается в e.postData.contents.
  • sh.getRange(92,2).setValues(e.parameter); неверно. В этом случае используйте setValue /
  • В вашем doPost значения не возвращаются. В этом случае при отправке значения на стороне Javascript возникает ошибка.
• На стороне Javascript возвращается
  • lastIndex. В случае When the user select "Item 1" from the web site, the script should write "Item 1" in Google sheet cell B92. Similarly, if the user select "Item 2", the script will set "Item 2" in cell B92. выбранное значение необходимо получить и вернуть.

Когда вышеуказанное изменение отражается в вашем скрипте, оно становится следующим.

Измененный скрипт:

Сторона скрипта Google Apps:

function doPost(e) {
  var value = JSON.parse(e.postData.contents).value;
  var ss = SpreadsheetApp.openById('XXXXXXXX');
  var sh = ss.getSheetByName('Dashboard');
  sh.getRange(92, 2).setValue(value);
  return ContentService.createTextOutput(JSON.stringify({message: "ok"})).setMimeType(ContentService.MimeType.JSON);
}

HTML и Javascript сторона:

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

<select id="sel1">
  <option value="sample1">sample1</option>
  <option value="sample2">sample2</option>
  <option value="sample3">sample3</option>
</select>


<script>
  function listQ() {
    const index = this.selectedIndex;
    if (index > 0) {
      const e = document.getElementById("sel1");
      const value = e.options[index].value;
      const url = "https://script.google.com/macros/s/###/exec";  // Please replace this for your Web Apps.
      fetch(url, {
        method: "POST",
        body: JSON.stringify({index: index, value: value}),
      })
      .then(function (response) {
        return response.json();
      })
      .then(function (data) {
        console.log(data);
      })
    }
  } 

  document.getElementById("sel1").addEventListener("change", listQ);
</script>

• В этой модификации, когда выбраны опции sample2 и sample3, значение отправляется в веб-приложения. Затем в веб-приложениях полученное значение помещается в ячейку «B92».

Примечание:

• Когда вы изменили сценарий веб-сайта Приложения, повторно разверните его как новую версию. Таким образом, последний сценарий отражается в веб-приложениях. Будьте осторожны.

Ссылки:

• Веб-приложения
• Использование преимуществ веб-приложений со скриптом Google Apps

Answer 2

В дополнение к ответу Танаике я публикую альтернативу, используя google.script.run, которая позволяет избежать проблемы CORS, с которой могут столкнуться некоторые пользователи.

Полное объяснение здесь: Блок CORS: WebApp POST на лист

в файле gs:

function yourServerSideFunc(body) {
  var value = body["value"];
  var ss = SpreadsheetApp.openById('1ROvDcIQ9JCGxzLvCvTKIqSor576Uj9ZJv-n6hQ762XB');
  var sh = ss.getSheetByName('Dashboard');
  sh.getRange(92, 2).setValue(value);
  return ContentService.createTextOutput(JSON.stringify({message: "ok"})).setMimeType(ContentService.MimeType.JSON);  
}

и в HTML:

function listQ() {
  const index = this.selectedIndex;
  if (index > 0) {
    const e = document.getElementById("sel1");
    const value = e.options[index].value;
    const body = { index: index, value: value };
    google.script.run.withSuccessHandler(yourCallBack).yourServerSideFunc(body);
  }
}
document.getElementById("sel1").addEventListener("change",listQ);

function yourCallBack(response) {
}