Блог

Главная - Вопросы по программированию - Динамическая всплывающая раскрывающаяся форма Google Apps Script

Динамическая всплывающая раскрывающаяся форма Google Apps Script

#javascript #html #google-apps-script #drop-down-menu

#javascript #HTML #google-apps-script #выпадающее меню

Вопрос:

У меня есть список элементов на вкладке Сводка моей таблицы, этот список меняется относительно часто, но количество параметров ограничено 17, некоторые из которых иногда могут быть нулевыми. Я хотел бы, чтобы доступные параметры (отличные от null) были помещены во всплывающее окно с выпадающим списком. Затем это значение будет введено в определенную ячейку (пока назовем ее Summary C55).

Я думаю, что мой GS-код звучит, я теряюсь в компоненте HTML. Списки появляются без каких-либо опций.

.GS

 function getValuesFromSpreadsheet() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet=ss.getSheetByName("Summary");
  //available characters found in P2:P18 of Summary tab
  var options=[];
  var va=sheet.getRange("P2:P18").getValues();
  for (var i=0;i<va.length;i  ){
  options.push(va[i][0]);
  Logger.log(options);
}
  return options; // Retrieve values and send to Javascript
}  

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('popup').setWidth(400).setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(html, 'Select your new character');
}
function select(){
   var menu= SpreadsheetApp.getUi().createMenu('Custom Menu');
      menu.addItem('Dropdown Form', 'showDialog');
      menu.addToUi();
}

function onOpen(e){
select();
}

popup.HTML

HTML

всплывающее окно

 <!DOCTYPE html>
<script>
    function loadCharacters() {
    google.script.run.withSuccessHandler(makeoptions) 
    .getValuesFromSpreadsheet();
    }
       function makeoptions(ar){
        var charselect = document.createElementById('character');
        console.log(ar);
        for (var i=0;i<ar.length;i  );
        var option = document.createElement("option");
        option.value = ar[i]
        option.id = ar[i];
        charselect.appendChild(option);
  };
  function selected() {
    var value = document.getElementById('character').value;
    document.getElementById("value").innerHTML=value;
    console.log(value);
  };
</script>
<html>
 <head>
  <base target="_top">
</head>
  <body onload="loadCharacters()">
  <form id="Form">
    <div>
       <label for="List"> Select Character </label><br>
        <input list="character" name="charselect">
        <datalist id= "character"></datalist>
        <select id="character" onchange="selected()"> </select><br>
    </div>
    </form>
  </body>
</html>

Комментарии:

1. Могу ли я спросить вас, работает ли ваш текущий сценарий в вашем вопросе, за исключением I would like to have the available options(non null) be put into a popup with a dropdown list. ?

2. Если вы привяжете этот код к своей электронной таблице, объекта «document» не будет, потому что он выполняется в серверной части. Не могли бы вы, пожалуйста, показать, каково ожидаемое поведение?

3. @Tanaike скрипт запускается. функция getValuesFromSpreadsheet() возвращает [Brute, Spellweaver, Mindthief, Scoundrel, Craigheart, Tinkerer, , , , Берсерк, , , , , ] в журнал. Всплывающее окно отображается без каких-либо параметров внутри. Кроме того, я, похоже, вообще не могу заставить свою проверку в HTML работать. Я вижу ошибки в консоли, показывающие заблокированные действия.

4. Спасибо за ответ. Я хотел бы подтвердить, правильно ли я понимаю вашу текущую ситуацию. Из вашего ответа я понял, что в вашем скрипте работает сторона скрипта Google Apps, но сторона HTML и Javascript не работает. Правильно ли я понимаю?

5. Спасибо за ответ. Теперь я заметил, что ответ уже опубликован. Я хотел бы уважать это. Это решит вашу проблему.

Ответ №1:

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

var charselect = document.createElementById('character');

Для:

var charselect = document.getElementById('character');

Поскольку есть два элемента с одинаковым идентификатором, вам, вероятно, следует удалить это:

<datalist id= "character"></datalist>

Кроме того, вам нужно будет включить внутренний HTML-код каждого параметра (перед добавлением дочернего элемента к ВЫБОРУ), чтобы отобразить доступное имя символа:

option.innerHTML = ar[i];

Обновить:

Я понял, что в цикле For внутри ничего нет, поэтому его также необходимо изменить:

 function makeoptions(ar) {
  var charselect = document.getElementById('character');
  console.log(ar);
  for (var i = 0; i < ar.length; i  ){
    var option = document.createElement('option');
    option.value = ar[i];
    option.id = ar[i];
    option.innerHTML = ar[i];
    charselect.appendChild(option);
  }
}

Кроме этого, необходимо обновить и некоторые другие части HTML, такие как функция выбора:

 function selected() {
  var value = document.getElementById('character').value;
  document.getElementById('value').value = value;
  console.log(value);
}

И атрибут ID отсутствовал в элементе управления вводом:
<input list="character" name="charselect" id='value'/>

Затем это значение будет введено в определенную ячейку (пока назовем ее Summary C55).

Что касается записи выделения обратно в электронную таблицу, вы можете добавить это в конец функции выбора: google.script.run.withSuccessHandler(selectionWritten).writeSelection(value); .

И у вас может быть что-то вроде следующего, чтобы подтвердить операцию с HTML:

 function selectionWritten() {
  console.log('selection written to spreadsheet');
}

Затем вы добавляете что-то вроде этого на стороне скрипта приложений:

 function writeSelection(value){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet=ss.getSheetByName("Summary");
  sheet.getRange('C55').setValue(value);
}

Из того, что я пробовал, похоже, это работает с этими дополнительными изменениями.

Комментарии:

1. Это было очень полезно. Это примерно 90% пути, но по какой-то причине он заполняет только последний элемент в списке.

Метки: