14

我有一个运行一些 Apps 脚本服务器代码以连接到 SQL 服务器的 Google 表格。我想在刷新数据时在模式对话框中显示消息“正在加载...”。我可以弹出模式，但我想在代码完成后立即自动关闭对话框。

我设置的一个例子是：

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 中处理，以便在代码完成时触发。

4

4 回答 4

17

事件流可能是：

  • 用户做某事
  • 触发模态对话框
  • onLoad模态对话框事件触发客户端代码
  • 客户端google.script.run触发服务器端.gs功能运行
  • .gs脚本文件中的服务器函数运行。
  • 从服务器更新的数据库。
  • 服务器代码将返回值发送回对话框
  • 对话框中的“withSuccessHandler()”检测来自服务器的返回
  • “withSuccessHandler()”运行并关闭对话框使用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)
于 2015-09-11T17:00:51.453 回答
11

//显示对话框

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!")
于 2018-01-29T19:05:15.283 回答
1

我也接受了@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);
}

}

该函数从主代码调用如下，最后一个参数是一个打开/关闭布尔值。

htmlmodalDialog('Starting', 'Working ...', false);
    
//do something here

htmlmodalDialog('Finished', 'Operation completed.', true);

希望这可以帮助某人。

于 2021-02-11T09:35:17.003 回答
0

此解决方案提供了一个立即关闭对话框的按钮，并会在 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>
于 2021-02-20T19:10:35.920 回答