Как я могу создать диалоговое окно HTML, содержащее раскрывающийся список?
Я хочу записывать пользовательский ввод в определенных категориях - для этого я хочу, чтобы пользователь выбирал категорию из раскрывающегося списка, а также имел еще одну текстовую ячейку, где они могут вводить текст.
Моя цель — заполнить раскрывающийся список определенными критериями, а затем записать выбор пользователей и дополнительную текстовую строку в переменные, которые затем записываются в электронную таблицу.
Обновлено: мне удалось создать раскрывающийся список и заполнить его, однако выбранный ввод из раскрывающегося списка возвращается в электронную таблицу очень спорадически (он работал дважды примерно из 30 попыток).
Обновлено еще раз: если я удалю google.script.host.close(); из кода, переменная будет передана обратно в электронную таблицу. Похоже, что диалоговое окно закрывается слишком быстро, но sleep() в функции functionToRunOnFormSubmit(fromInputForm) вообще не задерживает код.
Код.js:
function fncOpenMyDialog() {
//Open a dialog
var htmlDlg = HtmlService.createHtmlOutputFromFile('addDeck')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(200)
.setHeight(150);
SpreadsheetApp.getUi()
.showModalDialog(htmlDlg, 'Add a New Deck');
};
function functionToRunOnFormSubmit(fromInputForm) {
Logger.log(fromInputForm);
var ss = SpreadsheetApp.getActive();
ss.getSheetByName("test").getRange(2, 1, 1, 1).setValue(fromInputForm);
};
addDeck.html
<!DOCTYPE html>
<html>
<body>
<form>
<select name = "Class" id = "class-selector" autofocus = "autofocus" autocorrect = "off" autocomplete = "off">
<option value = "" selected = "selected">Class</option>
<option value = "Druid">Druid</option>
<option value = "Hunter">Hunter</option>
<option value = "Mage">Mage</option>
<option value = "Paladin">Paladin</option>
<option value = "Priest">Priest</option>
<option value = "Rogue">Rogue</option>
<option value = "Shaman">Shaman</option>
<option value = "Warlock">Warlock</option>
<option value = "Warrior">Warrior</option>
</select>
<input type = "submit" value = "Submit" onclick = "myFunction()">
</form>
<p id = "addDeck"></p>
<script>
function myFunction() {
var x = document.getElementById("class-selector").value;
document.getElementById("addDeck").innerHTML = x;
google.script.run
.functionToRunOnFormSubmit(x);
google.script.host.close();
}
</script>
</body>
</html>
Код получен в основном из Использование раскрывающегося меню HTML со скриптом Google Apps в Google Sheets, а также из Как создать раскрывающийся список в поле ввода электронной таблицы (App Script)?.
Мне все еще нужно добавить текстовую ячейку для пользовательского ввода и вернуть это значение в электронную таблицу.
Любая помощь будет принята с благодарностью, спасибо!
Ответы 1
- Вы хотите получить значение раскрывающегося списка и поместить значение на лист «тест» в активной электронной таблице.
- Вы хотите поместить новое поле ввода текста в HTML и получить введенное значение. Затем вы хотите поместить значение вместе со значением раскрывающегося списка в электронную таблицу.
Если я правильно понимаю, как насчет этой модификации?
Модифицированный скрипт
Скрипт Google Apps:
From:ss.getSheetByName("test").getRange(2, 1, 1, 1).setValue(fromInputForm);
ss.getSheetByName("test").getRange(2, 1, 1, 2).setValues([[fromInputForm.Class, fromInputForm.sample]]);
HTML:
Есть 2 части модификации.
From:<input type = "submit" value = "Submit" onclick = "myFunction()">
<input name = "sample" type = "text"> <!-- Added -->
<input type = "submit" value = "Submit" onclick = "myFunction(this.parentNode)"> <!-- Modified -->
А также
From:function myFunction() {
var x = document.getElementById("class-selector").value;
document.getElementById("addDeck").innerHTML = x;
google.script.run
.functionToRunOnFormSubmit(x);
google.script.host.close();
}
withSuccessHandler() используется для этого.
function myFunction(obj) { // Modified
var x = document.getElementById("class-selector").value;
document.getElementById("addDeck").innerHTML = x;
google.script.run // Modified
.withSuccessHandler(() => google.script.host.close())
.functionToRunOnFormSubmit(obj);
}
Ссылка:
Если я неправильно понял ваш вопрос, и это не тот результат, который вы хотите, приношу свои извинения.
@ Аарон Ирвин Я рад, что ваша проблема была решена. И тебе спасибо.
@Tanaike, почему ты меняешь this.parentNode на functionToRunOnFormSubmit()?
@Andrew Kirna В этом случае я думаю, что объект формы, включая введенные значения, отправляется на сторону скрипта Google Apps. Таким образом, на стороне скрипта Google Apps можно получить введенные значения. Об этом, я думаю, вы можете подтвердить причину этого, проверив журнал на functionToRunOnFormSubmit(fromInputForm). Если это не тот ответ, которого вы ожидаете, прошу прощения.
@Tanaike, спасибо за быстрый ответ! Я получал ScriptError с отказом в доступе, но я просто исправил это, выйдя из всех своих учетных записей и войдя снова. Единственное, что я не могу заставить работать, это .withSuccessHandler(() => google.script.host.close()). Есть идеи, что я могу сделать?
@Tanaike, другими словами, как мне сказать google.script.run, что моя функция выполнена успешно?
@Andrew Kirna Спасибо за ответ. Я должен извиниться за свое слабое мастерство. Из вашего ответа я не могу понять вашу ситуацию. Я глубоко извиняюсь за это. Итак, чтобы правильно понять вашу текущую ситуацию, можете ли вы опубликовать ее как новый вопрос, включив подробную информацию для воспроизведения вашей проблемы? Таким образом, это поможет пользователям, включая меня, подумать о решении. Когда вы можете сотрудничать, чтобы решить вашу проблему, я рад.
@Tanaike, мой скрипт теперь работает! Спасибо за ответ!
@Andrew Kirna Спасибо за ответ. Я рад, что ваша проблема была решена.
<3 <3 <3 ЭТО РАБОТАЕТ!!!! <3 <3 <3 СПАСИБО ОГРОМНОЕ! Ваше объяснение и то, как вы изложили код, были ИДЕАЛЬНЫМИ для меня, чтобы понять, какие изменения вы внесли. Ты удивительный! (Просматривая ваш обновленный код, я понял, что добавлю
;в конце каждой функции в code.js, которая, как я только что понял, называется code.gs) O_O