【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