自动关闭模态对话框 - 服务器代码完成后,关闭 Google 电子表格中的对话框
Auto close modal dialog - After server code is done, close dialog in Google Spreadsheet
我有一个 Google Sheet,它运行一些 Apps 脚本服务器代码以连接到 SQL 服务器。我想在刷新数据时在模式对话框中显示消息 "loading..."。我可以让模式弹出,但我想在代码完成后立即自动关闭对话框。
我设置的一个例子是:
function testpop () {
var htmlOutput = HtmlService
.createHtmlOutput('<p> This box will close when the data has finished loading.</p>')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(250)
.setHeight(200);
SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Loading...');
sleep(1000);
//close the dialog
}
我知道这可以在客户端调用,但需要在 GS 中处理,以便在代码完成时触发。
事件流可以是:
- 用户做了某事
- 触发模态对话框
onLoad
模态对话框事件触发客户端代码
- 客户端
google.script.run
触发服务器端.gs
函数运行
.gs
脚本文件 运行 中的服务器函数。
- 从服务器更新数据库。
- 服务器代码将 return 值发送回对话框
对话中的 - "withSuccessHandler()" 从服务器
检测到 return
- "withSuccessHandler()" 运行s 并使用
google.script.host.close();
关闭对话框
您需要在模态对话框中添加一个 <script>
标记。
<script>
window.onload = function() {
//console.log('window.onload ran!');
google.script.run
.withSuccessHandler(closeDialog)
.theFunctionNameToUpdateDatabase()
};
window.closeDialog = function() {
google.script.host.close();
};
</script>
您现在正在使用:
HtmlService.createHtmlOutput(the HTML here)
您可以改为从文件创建 HTML:
HtmlService.createHtmlOutputFromFile(filename)
//显示对话框
var output = HtmlService.createHtmlOutput('<b>Please wait...</b>');
SpreadsheetApp.getUi().showModalDialog(output, 'Saving...');
一些代码
//关闭对话框
var output = HtmlService.createHtmlOutput('<script>google.script.host.close();</script>');
SpreadsheetApp.getUi().showModalDialog(output, 'Loading...');
*可选
ui.alert("Saved Successfully!")
我也同意@pcw11211 给出的答案。我通过将 htmlmodalDialog 调用封装在一个可以打开或关闭对话框的函数中来稍微修饰一下。我也在那里添加了一些 html 样式。还要注意 htmlmodalDialog 周围的 try/catch,这样当您从脚本编辑器进行测试时,脚本仍然可以 运行,否则主脚本有时会(?)停止上下文错误。
/**
* HELPER FUNCTION : TO OPEN & CLOSE MODAL DIALOGUE
*/
function htmlmodalDialog(title, text, close){
var htmlText = '<div>' + text + '</div>';
htmlText += '<style type="text/css">';
htmlText += 'body{text-align: center; font-family: Roboto, Arial, sans-serif; font-size: 14px;}';
htmlText += 'div{margin: auto;}';
htmlText += '</style>';
if(close){htmlText += '<script>google.script.host.close();</script>';}
var htmlOutput = HtmlService
.createHtmlOutput(htmlText)
.setHeight(60)
.setWidth(200);
try {
SpreadsheetApp.getUi().showModalDialog(htmlOutput, title);
}catch(e){
Logger.log('function htmlmodalDialog(title, text, close)');
Logger.log(e);
}
}
该函数从主代码调用如下,最后一个参数是 open/close 布尔值。
htmlmodalDialog('Starting', 'Working ...', false);
//do something here
htmlmodalDialog('Finished', 'Operation completed.', true);
希望这对某人有所帮助。
此解决方案提供了一个立即关闭对话框的按钮,并会在 5000 毫秒(5 秒)后自动关闭,方法是在 body 标签中使用“onload="setTimeout(closer, 5000)"。它将传递一个 google 脚本变量到 HTML 以自定义对话框。
这是我想出的...
我的 GS 文件:
function myGSFunction(inputVariable){
const ui = SpreadsheetApp.getUi();
let gsVariable = inputVariable.toUpperCase().trim() || null;
let htmlOutput;
.
.
.
htmlOutput = HtmlService.createTemplateFromFile('errorModelessDialog');
htmlOutput.htmlVariable = gsVariable; //define variable accessible in html
ui.showModelessDialog(htmlOutput.evaluate().setWidth(400).setHeight(150), 'ERROR');
.
.
.
};
我的errorModelessDialog.html文件:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body onload="setTimeout(closer, 5000)">
<p align="center"><?!=htmlVariable?> is not valid.</p>
<p align="center"><button onclick="google.script.host.close()">Close</button></p>
<script>
function closer(){
google.script.host.close();
}
</script>
</body>
</html>
我有一个 Google Sheet,它运行一些 Apps 脚本服务器代码以连接到 SQL 服务器。我想在刷新数据时在模式对话框中显示消息 "loading..."。我可以让模式弹出,但我想在代码完成后立即自动关闭对话框。
我设置的一个例子是:
function testpop () {
var htmlOutput = HtmlService
.createHtmlOutput('<p> This box will close when the data has finished loading.</p>')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(250)
.setHeight(200);
SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Loading...');
sleep(1000);
//close the dialog
}
我知道这可以在客户端调用,但需要在 GS 中处理,以便在代码完成时触发。
事件流可以是:
- 用户做了某事
- 触发模态对话框
onLoad
模态对话框事件触发客户端代码- 客户端
google.script.run
触发服务器端.gs
函数运行 .gs
脚本文件 运行 中的服务器函数。- 从服务器更新数据库。
- 服务器代码将 return 值发送回对话框 对话中的
- "withSuccessHandler()" 从服务器 检测到 return
- "withSuccessHandler()" 运行s 并使用
google.script.host.close();
关闭对话框
您需要在模态对话框中添加一个 <script>
标记。
<script>
window.onload = function() {
//console.log('window.onload ran!');
google.script.run
.withSuccessHandler(closeDialog)
.theFunctionNameToUpdateDatabase()
};
window.closeDialog = function() {
google.script.host.close();
};
</script>
您现在正在使用:
HtmlService.createHtmlOutput(the HTML here)
您可以改为从文件创建 HTML:
HtmlService.createHtmlOutputFromFile(filename)
//显示对话框
var output = HtmlService.createHtmlOutput('<b>Please wait...</b>');
SpreadsheetApp.getUi().showModalDialog(output, 'Saving...');
一些代码
//关闭对话框
var output = HtmlService.createHtmlOutput('<script>google.script.host.close();</script>');
SpreadsheetApp.getUi().showModalDialog(output, 'Loading...');
*可选
ui.alert("Saved Successfully!")
我也同意@pcw11211 给出的答案。我通过将 htmlmodalDialog 调用封装在一个可以打开或关闭对话框的函数中来稍微修饰一下。我也在那里添加了一些 html 样式。还要注意 htmlmodalDialog 周围的 try/catch,这样当您从脚本编辑器进行测试时,脚本仍然可以 运行,否则主脚本有时会(?)停止上下文错误。
/**
* HELPER FUNCTION : TO OPEN & CLOSE MODAL DIALOGUE
*/
function htmlmodalDialog(title, text, close){
var htmlText = '<div>' + text + '</div>';
htmlText += '<style type="text/css">';
htmlText += 'body{text-align: center; font-family: Roboto, Arial, sans-serif; font-size: 14px;}';
htmlText += 'div{margin: auto;}';
htmlText += '</style>';
if(close){htmlText += '<script>google.script.host.close();</script>';}
var htmlOutput = HtmlService
.createHtmlOutput(htmlText)
.setHeight(60)
.setWidth(200);
try {
SpreadsheetApp.getUi().showModalDialog(htmlOutput, title);
}catch(e){
Logger.log('function htmlmodalDialog(title, text, close)');
Logger.log(e);
}
}
该函数从主代码调用如下,最后一个参数是 open/close 布尔值。
htmlmodalDialog('Starting', 'Working ...', false);
//do something here
htmlmodalDialog('Finished', 'Operation completed.', true);
希望这对某人有所帮助。
此解决方案提供了一个立即关闭对话框的按钮,并会在 5000 毫秒(5 秒)后自动关闭,方法是在 body 标签中使用“onload="setTimeout(closer, 5000)"。它将传递一个 google 脚本变量到 HTML 以自定义对话框。
这是我想出的...
我的 GS 文件:
function myGSFunction(inputVariable){
const ui = SpreadsheetApp.getUi();
let gsVariable = inputVariable.toUpperCase().trim() || null;
let htmlOutput;
.
.
.
htmlOutput = HtmlService.createTemplateFromFile('errorModelessDialog');
htmlOutput.htmlVariable = gsVariable; //define variable accessible in html
ui.showModelessDialog(htmlOutput.evaluate().setWidth(400).setHeight(150), 'ERROR');
.
.
.
};
我的errorModelessDialog.html文件:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body onload="setTimeout(closer, 5000)">
<p align="center"><?!=htmlVariable?> is not valid.</p>
<p align="center"><button onclick="google.script.host.close()">Close</button></p>
<script>
function closer(){
google.script.host.close();
}
</script>
</body>
</html>