Я хочу запустить модальное окно с помощью флажка

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

Вот все мои созданные функциональные коды:

    let folderId = '1uQjcvYKOdbpnD3AybwN4KTKQeFfun_wB';

    function onOpen() {
        let ui = SpreadsheetApp.getUi();
        ui.createMenu('Script Menu')
        .addItem('Upload Files','uploadFile')
        .addToUi();
    }


    function uploadFile() {
        let window = HtmlService.createHtmlOutputFromFile('Upload.html');
        window.setWidth(600);
        window.setHeight(400);
        SpreadsheetApp.getUi().showModalDialog(window,"Upload File");
    }


    function saveFile(e) {
        let ss = SpreadsheetApp.getActiveSpreadsheet();
        let blob = Utilities.newBlob(e.bytes,e.mimeType,e.filename);
        let folder = DriveApp.getFolderById(folderId);
        let file = folder.createFile(blob);

        let fileName = file.getName();
        let fileUrl = file.getUrl();

        let sheet = ss.getSheetByName("Request Input").getRange('B10');

        sheet.setValue(fileUrl);

        return [fileName,fileUrl];

    }

    function checkBox() {

      const activeCell = SpreadsheetApp.getActiveSpreadsheet().getActiveCell()
      const reference = activeCell.getA1Notation()
      const sheetName = activeCell.getSheet().getName()
      const activeValue = activeCell.getValue()

      if (reference == "B10" && sheetName == "Request Input" && activeValue == true)
      {

        uploadFile();
        activeCell.setValue(false)
    
      }

    }

И вот мой HTML-код для кода функции:

<!DOCTYPE html>
<html>

<head>
  <base target = "_top">
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"
    integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous">
</head>

<body>

  <div class = "container">
    <div id = "form">
      <div id = "fileUpload" class = "mb-3">
        <input id = "file" type = "file" onchange = "saveFile(this)" />
      </div>
      <div id = "progressSpinner" class = "spinner-border" role = "status" style = "display: none;"></div>
    </div>
  </div>


  <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity = "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin = "anonymous">
  </script>

  <script>
    function saveFile(f) {
      document.getElementById('progressSpinner').style.display = 'block';
      const file = f.files[0];
      const fr = new FileReader();
      fr.onload = function (e) {
        const obj = {
          filename: file.name,
          mimeType: file.type,
          bytes: [...new Int8Array(e.target.result)]
        };
      //google.script.run.withSuccessHandler(data => success(data)).saveFile(obj);
      google.script.run.withSuccessHandler(google.script.host.close).saveFile(obj);
      }
    fr.readAsArrayBuffer(file);

    }

    function success(data) {
      document.getElementById('progressSpinner').style.display = 'none';
      document.getElementById('fileUpload').innerHTML = `<strong>File Uploaded Successfully</strong><br /><a target = "_blank" href = "${data[1]}">${data[0]}</a>`
    }
  </script>
</body>

</html>
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
96
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Попробуйте использовать устанавливаемый триггер onEdit.

function onMyEdit(e) {
  e.source.toast("Entry")
  if (e.range.getSheet().getName() == "Sheet0" && e.range.columnStart == 1 && e.range.rowStart ==1 && e.value == "TRUE") {
    e.source.toast("Here");
    SpreadsheetApp.getUi().showModalDialog(HtmlService.createHtmlOutputFromFile("ah4"), "Dialog")
  }
}

Вам нужны разрешения, чтобы открыть диалог.

Лист0:

Меня устраивает. Мне нужно больше информации, чтобы помочь вам. Мне нужна отладочная информация. Ты видишь тосты?

Cooper 09.06.2024 23:21

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

Bugsy 11.06.2024 14:24
Ответ принят как подходящий

В рассматриваемом коде нет ничего, что могло бы открыть модальное диалоговое окно, когда флажок установлен. Для этого следует использовать устанавливаемый триггер. При редактировании — наиболее удобный вариант, поскольку параметр события включает свойство диапазона, содержащее SpreadsheetApp.Range то, что было отредактировано.

Ниже у меня есть для вас элементарный пример. Он включает в себя две функции: основная функция называется editHandler, а другая функция init является необязательной, поскольку устанавливаемый триггер можно создать вручную.

editHandler изображает использование SpreadsheetApp.Range.isChecked(), который возвращает true, если редактируемый диапазон содержит флажок Google Sheets («Вставка» > «Флажок») и он был отмечен.

/**
 * To be called by on edit installable trigger
 * 
 * @param {Objec} e Edit event object
 * @property {SpreadsheetApp.Range} range
 */
function editHandler(e = {range: SpreadsheetApp.getActiveSpreadsheet().getActiveRange()}) {
  if (e.range.isChecked()){
    const modal = HtmlService.createHtmlOutput('<p>Hello world!');
    SpreadsheetApp.getUi().showModalDialog(modal, 'Modal Demo');
  }
}

/**
 * Run once to create an on edit installable trigger for
 * the active spreasheet
 */
function init(){
  const handlerFunction = 'editHandler';
  // Prevent having multiple triggers calling the same function
  ScriptApp.getProjectTriggers().forEach(trigger => {
    if (trigger.getHandlerFunction() === handlerFunction){
      ScriptApp.deleteTrigger(trigger);
    }
  })
  ScriptApp.newTrigger(handlerFunction)
    .forSpreadsheet(SpreadsheetApp.getActiveSpreadsheet())
    .onEdit()
    .create()
}

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


Демонстрационная таблица

Для вашего удобства я создал демонстрационную таблицу с некоторыми изменениями:

  1. Сделайте копию.
    При нажатии на эту ссылку откроется страница «Создать копию» демонстрационной таблицы. Нажмите кнопку «Создать копию». Проявите терпение, поскольку создание копии может занять несколько секунд. Если вы предпочитаете, вы можете сначала просмотреть содержащийся сценарий, нажав «Просмотреть файл сценария приложения».

  2. В копии демонстрационной таблицы нажмите «Расширения» > «Скрипт приложений».

  3. Нажмите кнопку «Выполнить». По умолчанию функция инициализации будет выбрана в раскрывающемся списке функций. Эта функция создает устанавливаемый при редактировании триггер для вызова функции editHandler. При первом выполнении любой из функций этого проекта будет показано сообщение, сообщающее пользователю о необходимости авторизации. Нажмите «Просмотреть разрешения». При использовании учетной записи Gmail будет показано предупреждение.

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

    Нажмите ссылку «Дополнительно». Это покажет

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

    Перейти к открытию модального диалогового окна, когда флажок установлен (небезопасно)

    Нажмите ссылку «Перейти к открытию модального диалогового окна, если флажок установлен (небезопасно)». Это покажет необходимые разрешения.

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

    Notice  Execution started
    Notice  Execution completed
    
  4. Вернитесь к электронной таблице.

  5. Установите флажок.
    Пожалуйста, наберитесь терпения, так как функции editHandler может потребоваться некоторое время, чтобы начать выполнение и открыть модальное окно. Примечание. Флажок будет автоматически снят, и для повторного отображения модального диалогового окна потребуется один щелчок.

  6. Чтобы закрыть модальное окно, нажмите кнопку X.

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

Bugsy 09.06.2024 17:09

@Bugsy Что отображается при выполнении проекта? Чтобы более подробно ознакомиться с журналами выполнения, прочитайте Developers.google.com/apps-script/guides/support/…. Если при прочтении этого руководства вам все еще нужна помощь, задайте дополнительный вопрос.

Wicket 09.06.2024 17:15

Вы создали триггер установки?

Cooper 12.06.2024 05:06

@Bugsy Несколько минут назад я заметил ошибку в коде. Я только что исправил. Я также создал демонстрационную таблицу и расширил этот ответ, включив в него ссылку и инструкции по ее использованию.

Wicket 12.06.2024 18:54

теперь он работает хорошо. большое спасибо @Wicket, это очень помогает. Спасибо Спасибо!

Bugsy 13.06.2024 07:01

@Wicket У меня вопрос, как я могу поместить конкретную ячейку, в которой будет работать триггер, например, я хочу поставить флажок в ячейке B10, и я хочу, чтобы этот флажок cehckbox работал только над триггером, а другой флажок не будет работать, кроме ячейки B10?

Bugsy 13.06.2024 07:46

Другие вопросы по теме