【Google Apps脚本】如何在一个html文件中创建一系列对话框

【Google Apps Script】 How to create a chain of dialogs in one html file

我想创建如上所示的对话框链，使用 GoogleAppsScript 中的 HtmlService。

我已经知道如何通过准备多个 HTML 文件来创建它。

但是现在，我想知道是否可以通过只准备一个 HTML 文件来实现。

如果你知道解决办法，请告诉我。

原始电子表格和我的代码在 https://docs.google.com/spreadsheets/d/1z4bF0lKuofZO6c9VM1DTT82T3C4ypiiWYq5QkA3NNOw/edit?usp=sharing 中可用。 请复制到您的 google 驱动器。

（如有不明白的地方请见谅...）

我的代码： test.gs

const ui = SpreadsheetApp.getUi();
const template = HtmlService.createTemplateFromFile('dialog');

function func(){

    template.textForForm_1 = 'What is your name ?';
    template.textForForm_2 = 'Dummy Text for Form2'; //form_2 in HTML is initially non-displayed but exist. So dummy text has to be prepared.

  ui.showModalDialog(template.evaluate(),'test');
}

function func02(name) {

    template.textForForm_1 = 'Dummy Text for Form1';
    template.textForForm_2 = `Hello, ${name}. How old are you ?`;

    //By the code below, create another dialog ...it is not what i want to realize.
    //I wonder if there is any command refresh the html only..
    ui.showModalDialog(template.evaluate(),'test');
  }

dialog.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <base target="_top">
    <style>
        #form_2 {
            display: none;
        }
    </style>
</head>
<body>
    <div id="form_1">
        <p><?=textForForm_1 ?></p>
        <input type="text" id="userName">
        <input type="button" id="ok_1" value="OK">
        <input type="button" value="cancel" onclick="google.script.host.close()">
    </div>
    <div id="form_2">
        <p><?=textForForm_2 ?></p>
        <input type="number" min="0" max="100" id="age">
        <input type="button" id="ok_2" value="OK">
        <input type="button" value="cancel" onclick="google.script.host.close()">
    </div>
</body>
<script>
    document.getElementById("ok_1").onclick = function(){
        document.getElementById("form_1").style.display = "none";

        const userName = document.getElementById("userName").value;
        google.script.run.func02(userName);

        document.getElementById("form_2").style.display = "block";

    }
</script>
</html>

结果 生成一个新对话框，而不是从 Form 1 切换到 Form 2。

你的情况，下面的修改怎么样？

修改点：

  • 我认为在您的脚本中，当 func02 为 运行 时，dialog 使用 template.textForForm_1 = 'Dummy Text for Form1'; 和 template.textForForm_2 = `Hello, ${name}. How old are you ?`; 重新打开。那时候，<div id="form_2">就是display: none。
  • 单击第一个按钮时，在 google.script.run.func02(userName); 完成之前 document.getElementById("form_2").style.display = "block"; 是 运行。

修改后的脚本：

HTML&Javascript:

<!DOCTYPE html>
<html lang="ja">
<head>
    <base target="_top">
    <style>
        <?!= sample ?> {
            display: none;
        }
    </style>
</head>
<body>
    <div id="form_1">
        <p><?= textForForm_1 ?></p>
        <input type="text" id="userName">
        <input type="button" id="ok_1" value="OK">
        <input type="button" value="cancel" onclick="google.script.host.close()">
    </div>
    <div id="form_2">
        <p><?= textForForm_2 ?></p>
        <input type="number" min="0" max="100" id="age">
        <input type="button" id="ok_2" value="OK">
        <input type="button" value="cancel" onclick="google.script.host.close()">
    </div>
</body>
<script>
    document.getElementById("ok_1").onclick = function(){
        document.getElementById("form_1").style.display = "none";
        const userName = document.getElementById("userName").value;
        google.script.run.withSuccessHandler(_ => {
          document.getElementById("form_2").style.display = "block";
        }).func02(userName);
    }
</script>
</html>

Google Apps 脚本：

const ui = SpreadsheetApp.getUi();
const template = HtmlService.createTemplateFromFile('dialog');

function func() {
  template.textForForm_1 = 'What is your name ?';
  template.textForForm_2 = 'Dummy Text for Form2';
  template.sample = "#form_2";
  ui.showModalDialog(template.evaluate(), 'test');
}

function func02(name) {
  template.textForForm_1 = 'Dummy Text for Form1';
  template.textForForm_2 = `Hello, ${name}. How old are you ?`;
  template.sample = "#form_1";
  ui.showModalDialog(template.evaluate(), 'test');
}

参考文献：