将变量从谷歌脚本传递到 html 对话框答案

【问题标题】：Passing variable from google script to html dialog将变量从谷歌脚本传递到 html 对话框
【发布时间】：2016-05-05 20:24:52
【问题描述】：

我正在努力尝试做一些错误提示，以防有人没有输入值。在这种情况下，我检查该值是否为空，并最终检查它是否是一个日期。

所以当这里是倒闭的时候。

1) 运行if语句，如果值为true，则使用字符串参数运行错误提示

if (sheetData[4] === ""){
  errorPrompt("Title");
}

2) 使用字符串参数运行以下函数。然后我希望函数将参数传递给 html iframe。

function to open dialog
function errorPrompt(missvar) {
  var missVar = "test";
  var html = HtmlService.createHtmlOutputFromFile('missingvar')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showModalDialog(html, missVar + ' is Missing please provide ' + missVar + " and try again.");
}

3) 然后该变量应传递给显示为模式对话框的 html 文件。如果字符串等于“Title”，则对话框应为：“Title 丢失。请输入Title 并重试。”

missingvar.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>            
        <script>
        UI.getElementById("missVar").innerHTML;
        </script>

       The <var id=missVar></var> is missing. Please enter <var id=missVar></var> and try again.
    <input type="button" value="Close"
        onclick="google.script.host.close()" />

  </body>
</html>

上面的 HTML 显示，但是 missVar 没有显示。有人有什么想法吗？需要注意的是，对话框的标题栏正确显示了变量，但这在 html 之外。

【问题讨论】：

标签： javascript html google-apps-script

【解决方案1】：

HTML Service: Templated HTML

如果您想做您所描述的事情，请使用HtmlService 模板。它删除客户端的 JS 并提供完整的对话框，missVar 完好无损。

var html = HtmlService.createTemplateFromFile(missingVar);

    html.missingVar = missVar;

var htmlOutput = html.evaluate();

您的 missingvar.html 文件将包含

<?= missingVar ?>

无论您希望该变量显示在何处。

【讨论】：

此答案仅在传递的变量不是对象（即简单的字符串或数字）时才有效。如需更完整的解决方案，请参阅stackoverflow.com/a/38314034/2213940

【解决方案2】：

我改变了提示的创建方式。不再需要 html 文件，因为 js 会即时创建它。

来自

function errorPrompt(missvar) {
  var missVar = "test";
  var html = HtmlService.createHtmlOutputFromFile('missingvar')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showModalDialog(html, missVar + ' is Missing please provide ' + missVar + " and try again.");
}

收件人

function errorPrompt(missvar) {
  var missVar = "test";
   var htmlOutput = HtmlService
     .createHtmlOutput('<p>' + missVar + ' is missing, please enter a ' +  missVar + ' and try again.</p>')
     .setSandboxMode(HtmlService.SandboxMode.IFRAME)
     .setWidth(250)
     .setHeight(300);
 SpreadsheetApp.getUi().showModalDialog(htmlOutput, missVar + ' is missing. Please provide a ' + missVar + ' and try again.');
}

【讨论】：

这实际上与我在回答中描述的模板解决方案相同。研究它，因为它将为您提供更大的灵活性/可扩展性。