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

Question

在此处输入图像描述

I want to create a chain of dialog as shown above, using HtmlService in GoogleAppsScript.我想使用 GoogleAppsScript 中的 HtmlService 创建如上所示的对话框链。

I already know how to create it by preparing multiple HTML files.我已经知道如何通过准备多个 HTML 文件来创建它。

But now, I'm wondering if it can be achieved by preparing ONLY ONE HTML file.但是现在，我想知道是否可以通过只准备一个 HTML 文件来实现。

If you know the solution, please let me know.如果您知道解决方案，请告诉我。

The original spreadsheet and my code is available in https://docs.google.com/spreadsheets/d/1z4bF0lKuofZO6c9VM1DTT82T3C4ypiiWYq5QkA3NNOw/edit?usp=sharing .原始电子表格和我的代码可在https://docs.google.com/spreadsheets/d/1z4bF0lKuofZO6c9VM1DTT82T3C4ypiiWYq5QkA3NNOw/edit?usp=sharing中找到。 please copy in your google drive.请复制到您的谷歌驱动器。

(I'm sorry if there are any difficult-to-read parts...) （如果有任何难以阅读的部分，我很抱歉......）

My code: test.gs我的代码： 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对话.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>

Result A new dialog is generated instead of switching from Form 1 to Form 2.结果生成一个新对话框，而不是从 Form 1 切换到 Form 2。

Answer 1

In your situation, how about the following modification?在您的情况下，以下修改如何？

Modification points:修改点：

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

Modified script:修改脚本：

HTML&Javascript: 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 Script:谷歌应用程序脚本：

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

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

问题描述

1 个解决方案

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

Modification points:修改点：

Modified script:修改脚本：

HTML&Javascript: HTML&JavaScript:

Google Apps Script:谷歌应用程序脚本：

References:参考：

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

问题描述

1 个解决方案

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

Modification points:修改点：

Modified script:修改脚本：

HTML&Javascript: HTML&JavaScript:

Google Apps Script:谷歌应用程序脚本：

References:参考：

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

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