Я создал диалоговое окно HTML (с помощью сообщества), которое будет добавлять элементы к определенным категориям в наборе данных на основе ввода пользователя. Сейчас я работаю над диалоговым окном, чтобы предложить пользователю удалить элемент в наборе данных на основе тех же критериев.
Я попробовал «обратную разработку» кода, который у меня есть для добавления элементов в набор данных, но я впервые углубился в добавление диалоговых окон HTML в свою электронную таблицу, и поэтому я очень стараюсь понять, как он взаимодействует с файлом сценария .gs. Я искал потенциально важные вопросы о переполнении стека, но нашел только тот, который показался мне подходящим.
До сих пор я создал диалоговое окно HTML, в котором пользователю предлагается выбрать Region из выпадающего списка - это затем определяет, какой столбец вкладки электронной таблицы я помещаю в переменную - как код очертания. Я добавил Logger.log, чтобы проверить, что данные собираются правильно.
Я только сегодня узнал о <? ?> скриптлетах, и я не уверен, правильно ли я их использую. Я не очень много сделал с массивами, поэтому я также не уверен, что именно так они должны быть вызваны (я понимаю, что мне нужно было бы настроить цикл для создания опций выпадающего меню, но я просто пытаясь заставить что-то работать).
В идеале раскрывающийся список параметров должен отображаться в существующем диалоговом окне, созданном из файла removeDeckSelectRegion.html, но я не уверен, как это сделать. Первое диалоговое окно не закрывается, а второе не открывается в данный момент.
Демо-таблица
Код и HTML для добавления колод (работает нормально)
function addDeck() {
//Open a dialog
var htmlDlg = HtmlService.createHtmlOutputFromFile('addDeck')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(180)
.setHeight(150);
SpreadsheetApp.getUi().showModalDialog(htmlDlg, 'Add a New Deck');
}
function functionToRunOnFormSubmit(fromInputForm) {
var decks = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Decks");
for (var i = 4; i >= 1; i++) {
if (decks.getRange(i, 1).getValue() == "") {
break
}
}
decks.getRange(i, 1, 1, 2).setValues([[fromInputForm.Class, fromInputForm.Archetype]]);
}
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 name="Archetype" type="text">
<input type="submit" value="Submit" onclick="addDeck(this.parentNode)">
</form>
<p id="addDeck"></p>
<script>
function addDeck(obj) {
var x = document.getElementById("class-selector").value;
google.script.run
.withSuccessHandler(() => google.script.host.close())
.functionToRunOnFormSubmit(obj);
}
</script>
</body>
</html>
Код для удаления колод (не работает)
function removeDeck() {
//Open a dialog
var htmlDlg = HtmlService.createHtmlOutputFromFile('removeDeckSelectRegion')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(180)
.setHeight(150);
SpreadsheetApp.getUi().showModalDialog(htmlDlg, 'Select Region');
}
function functionToRunToRemoveDeckSelectRegion(fromInputForm) {
var decks = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Decks");
var lastRow = decks.getLastRow();
if (fromInputForm.Region == "Americas") {
var existingDecks = decks.getRange(4, 2, lastRow-3, 1).getValues();
}
Logger.log(existingDecks);
Logger.log("-----------");
for (var i = 0; i < existingDecks.length; i++) {
Logger.log(existingDecks[i][0]);
}
var htmlDlg2 = HtmlService.createHtmlOutputFromFile('removeDeck')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(180)
.setHeight(150);
SpreadsheetApp.getUi().showModalDialog(htmlDlg, 'Select Deck');
}
removeDeckSelectRegion.html
<!DOCTYPE html>
<html>
<body>
<form>
<select name="Region" id="region-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
<option value="" selected="selected">Region</option>
<option value="Americas">Americas</option>
<option value="Europe">Europe</option>
<option value="Asia">Asia</option>
</select>
<input type="submit" value="Submit" onclick="removeDeckSelectRegion(this.parentNode)">
</form>
<p id="removeDeckSelectRegion"></p>
<script>
function removeDeckSelectRegion(obj) {
var x = document.getElementById("region-selector").value;
google.script.run
.withSuccessHandler(() => google.script.host.close())
.functionToRunToRemoveDeckSelectRegion(obj);
}
</script>
</body>
</html>
removeDeck.html
<!DOCTYPE html>
<html>
<body>
<form>
<select name="Deck" id="deck-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
<option value="" selected="selected">Deck</option>
<option value="<? existingDecks[1][0] ?>"><? existingDecks[1][0] ?></option>
<option value="<? existingDecks[2][0] ?>"><? existingDecks[2][0] ?></option>
<option value="<? existingDecks[3][0] ?>"><? existingDecks[3][0] ?></option>
</select>
<input type="submit" value="Submit" onclick="removeDeck(this.parentNode)">
</form>
<p id="removeDeck"></p>
<script>
function removeDeck(obj) {
var x = document.getElementById("deck-selector").value;
google.script.run
.withSuccessHandler(() => google.script.host.close())
.functionToRunToRemoveDeck(obj);
}
</script>
</body>
</html>