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

Question

在此处输入图像描述

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

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

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

如果您知道解决方案，请告诉我。

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

（如果有任何难以阅读的部分，我很抱歉......）

我的代码： 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');
  }

对话.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。

Answer 1

在您的情况下，以下修改如何？

修改点：

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

修改脚本：

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>

谷歌应用程序脚本：

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');
}

参考：

HTML服务：模板化HTML
withSuccessHandler(函数)

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-03-25 07:10:08

修改点：

修改脚本：

HTML&JavaScript:

谷歌应用程序脚本：

参考：

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-03-25 07:10:08

修改点：

修改脚本：

HTML&JavaScript:

谷歌应用程序脚本：

参考：

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

解决方案1
0 已采纳 2022-03-25 07:10:08