我想使用 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。
uj5u.com熱心網友回復：
在您的情況下，如何進行以下修改？
修改點：
- 我認為在您的腳本中，當
func02運行時，dialog使用template.textForForm_1 = 'Dummy Text for Form1';and重新打開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(函式)
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/450836.html