英文:
Updating a status message in a sidebar with Google App Scripts
问题
我正在尝试创建一个相当简单的Google Apps脚本，用于在Google表格上运行一系列函数。实际的函数运行正常，显示Google App表格也没有问题。
我遇到的问题是，我想在用户点击提交并启动函数后向他们显示某种进度，但似乎没有办法在函数运行时从服务器发送消息到客户端，只能在返回值中。
例如，如果我这样做：
服务器端代码：
function computePO() {
for (i=1; i < 10000; i++) {
// 做一些需要一些时间的工作
// 想要在这里向用户更新日志消息
}
return "完成";
}
HTML中的客户端代码：
google.script.run.withSuccessHandler(updateMessage).computePO(this);
function updateMessage(data) {
document.getElementById('msg').innerHTML = data;
}
那么它只会在整个程序完成时在侧边栏中显示"完成"消息，这并不实用。我希望在整个过程中发送状态消息，以便保持用户的了解，但似乎找不到方法来实现这一点。
英文:
I'm trying to create a pretty simple Google Apps script that runs a series of functions on a Google Sheet. The actual functions work fine, and displaying the Google App Sheet is not a problem at all.
The issue I am having is that I would like to display some kind of progress to the user after they hit submit and start the function, however, there doesn't seem to be anyway to send messages from the server to the client while the function is running, only in a return value.
For example, if I did this:
SERVER CODE:
function computePO() {
for (i=1; 1 < 10000; i++) {
// do stuff that takes some time
// want to update user with a log message here
}
return "done";
}
CLIENT CODE in HTML:
google.script.run.withSuccessHandler(updateMessage).computePO(this);
function updateMessage(data) {
document.getElementById('msg').innerHTML = data;
}
Then it will only display the done message in the sidebar when the entire routine is done, which isn't useful. I want to send status messages the entire time to keep the user informed but can't seem to find a way to do this.
答案1
得分: 1
以下是使用HTML Service和Cache Service创建状态栏的示例。
Code.gs
function startProgress() {
let progress = 0;
CacheService.getUserCache().remove("Progress");
CacheService.getUserCache().put("Progress", JSON.stringify({ progress: 0 }));
}
function runProgram() {
let progress = 0;
while (progress < 100) {
progress++;
Utilities.sleep(10);
CacheService.getUserCache().put("Progress", JSON.stringify({ progress: progress }));
}
}
function getProgress() {
let cache = JSON.parse(CacheService.getUserCache().get("Progress"));
return cache.progress;
}
HTML_StatusBar.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<label for="progressBar">Percent Complete:</label>
<progress id="progressBar" value="0" max="100"> hi </progress>
<input type="button" value="Start" onclick="runProgram()">
<script>
function getProgress() {
google.script.run.withSuccessHandler(
function (progress) {
if (progress === 100) {
document.getElementById("progressBar").value = 100;
alert("done");
return;
}
document.getElementById("progressBar").value = progress;
getProgress();
}
).getProgress();
}
function runProgram() {
try {
google.script.run.withSuccessHandler(
function () {
google.script.run.runProgram();
getProgress();
}
).startProgress();
}
catch (err) {
alert(err);
}
}
</script>
</body>
</html>
References
- [google.script.run][2]
- [Cache Service][3]
<details>
<summary>英文:</summary>
Here is an example of a status bar using HTML Service and Cache Service.
[![enter image description here][1]][1]
**Code.gs**
function startProgress() {
let progress = 0;
CacheService.getUserCache().remove("Progress");
CacheService.getUserCache().put("Progress",JSON.stringify({progress:0}));
}
function runProgram() {
let progress = 0;
while( progress < 100 ) {
progress++;
Utilities.sleep(10);
CacheService.getUserCache().put("Progress",JSON.stringify({progress:progress}));
}
}
function getProgress() {
let cache = JSON.parse(CacheService.getUserCache().get("Progress"));
return cache.progress;
}
**HTML_StatusBar.html**
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<label for="progressBar">Percent Complete:</label>
<progress id="progressBar" value="0" max="100"> hi </progress>
<input type="button" value="Start" onclick="runProgram()">
<script>
function getProgress() {
google.script.run.withSuccessHandler(
function (progress) {
if( progress === 100 ) {
document.getElementById("progressBar").value = 100;
alert("done");
return;
}
document.getElementById("progressBar").value = progress;
getProgress();
}
).getProgress();
}
function runProgram() {
try {
google.script.run.withSuccessHandler(
function () {
google.script.run.runProgram();
getProgress();
}
).startProgress();
}
catch(err) {
alert(err);
}
}
</script>
</body>
</html>
**References**
- [google.script.run][2]
- [Cache Service][3]
[1]: https://i.stack.imgur.com/rurcR.png
[2]: https://developers.google.com/apps-script/guides/html/reference/run
[3]: https://developers.google.com/apps-script/reference/cache/cache-service
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论