Как я могу создать диалоговое окно HTML, которое содержит раскрывающийся список? - PullRequest
1 голос
/ 05 апреля 2019

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

Моя цель - заполнить раскрывающийся список конкретными критериями, а затем записать выбор пользователя и дополнительную текстовую строку в переменные, которые затем будут записаны в электронную таблицу.

РЕДАКТИРОВАТЬ: я смог создать раскрывающийся список и заполнить его - однако выбранный вход из раскрывающегося списка только очень редко возвращается в электронную таблицу (он работал дважды примерно за 30 попыток).

EDIT2: если я удаляю google.script.host.close(); из кода, тогда переменная передается обратно в электронную таблицу. Похоже, что диалоговое окно закрывается слишком быстро, но sleep() в функции functionToRunOnFormSubmit(fromInputForm) вообще не задерживает код.

Code.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 Ответ

1 голос
/ 05 апреля 2019
  • Вы хотите получить значение из раскрывающегося списка и поместить значение на лист «test» в активной электронной таблице.
  • Вы хотите поместить новое поле ввода текста в HTML и получитьвведенное значение.Затем вы хотите поместить значение вместе со значением раскрывающегося списка в электронную таблицу.

Если мое понимание правильное, как насчет этой модификации?

Модифицированный скрипт

Сценарий Google Apps:

От:
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 модификации.

От:
<input type="submit" value="Submit" onclick="myFunction()">
До:
<input name="sample" type="text"> <!-- Added -->
<input type="submit" value="Submit" onclick="myFunction(this.parentNode)"> <!-- Modified -->

И

От:
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);
}

Ссылка:

Если я неправильно понял ваш вопрос, а это не тот результат, которого вы хотите, я приношу свои извинения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...