如何将值传递到 HTML 模板侧边栏？

Question

我的任务是更换一些现有的 Access 数据库，我想知道你们是否可以帮助我。

\n\n

目前，我有一张Google 表格将接受 Google 表单回复的 Google我想要创建某种类型的 UI，允许某人一次查看侧边栏上的订单项详细信息。然后，我希望他们能够通过侧边栏更新 Google 表格，而不是让他们直接更新 Google 表格。实际上，我需要他们做的就是用一个按钮标记他们已经读取了该行，该按钮用“读取”或类似的内容更新该行。不过，我的第一步是看看是否可以在侧边栏顶部显示用户的电子邮件，然后将数据从电子表格传递到其中。

\n\n

现在，我的背景几乎只有SQL/VBA，所以我的JS有所欠缺。然而，我能够得到以下工作，但有一个例外；变量 LeaderEmail 没有按预期出现在侧边栏上上。

\n\n

我已经验证了 Session.getActiveUser().getEmail(); 可以与我们的 GSuite 域电子邮件配合使用。我认为将其声明为变量应该可以通过 Apps Script 在 HTML 模板中使用，对吧？

\n\n

我将不胜感激你们能够提供的任何/所有帮助。

\n\n

注意：触发器当前设置为 onOpen() 事件。如果您不想运行 Google 表格，请随时为自己制作一份副本。

\n\n

谢谢！

\n\n

代码.gs

\n\n

// Show Sidebar\nfunction showUpdatesMenu(){\n  // Start UI Menu\n  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.\n        .createMenu(\'Updates Menu\')\n        .addItem(\'Leadership\', \'openLeadership\')\n        .addToUi();\n\n   // Log the email address of the person running the script.\n    var sessionEmail = Session.getActiveUser().getEmail();\n    var currentTime = Date.now();\n   Logger.log(sessionEmail);\n}\n

\n\n

侧边栏.html

\n\n

<!-- Use a templated HTML printing scriptlet to import common stylesheet. -->\n<!-- ?!= HtmlService.createHtmlOutputFromFile(\'mtoStylesheet\').getContent(); ? -->\n<!-- This CSS package applies Google styling; it should always be included. -->\n<!-- link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css" -->\n\n<style>\nlabel {\n  font-weight: bold;\n}\n\n.branding-below {\n  bottom: 54px;\n  top: 0;\n}\n\n.branding-text {\n  left: 7px;\n  position: relative;\n  top: 3px;\n}\n\n.logo {\n  vertical-align: middle;\n}\n\n.width-100 {\n  width: 100%;\n  box-sizing: border-box;\n  -webkit-box-sizing : border-box;\xe2\x80\x8c\n  -moz-box-sizing : border-box;\n}\n\n#sidebar-value-block,\n#dialog-elements {\n  background-color: #eee;\n  border-color: #eee;\n  border-width: 5px;\n  border-style: solid;\n}\n\n#sidebar-button-bar,\n#dialog-button-bar {\n  margin-bottom: 30px;\n}\n</style>\n\n<!-- Below is the HTML code that defines the sidebar element structure. -->\n<!-- div class="sidebar branding-below" -->\n  <p>\n  <b>Logged in as <?= sessionEmail ?></b>\n  </p>\n  <hr />\n  <p><b>CLEAR ALL LAPS AND STEPS:</b><br> This button clears all previous results.</p>\n\n  <div class="block" id="sidebar-button-bar-clear">\n    <button id="sidebar-clear-button1" style="width:100%" onclick="onClearClick();" value="1">Clear blocks</button>\n  </div>\n  <hr />\n  <hr />\n\n\n\n\n<!-- Use a templated HTML printing scriptlet to import JavaScript. -->\n<!-- ?!= HtmlService.createHtmlOutputFromFile(\'sidebar-Javascript\').getContent(); ? -->\n<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>\n<script>\n\n</script>\n

\n\n

开放领导力.gs

\n\n

function openLeadership() {\n //  var html = HtmlService.createHtmlOutputFromFile(\'Page\')\n//      .setTitle(\'My custom sidebar\')\n  var cache = CacheService.getUserCache();\n  var leaderEmail = Session.getActiveUser().getEmail();\n  var html = HtmlService.createHtmlOutputFromFile(\'Sidebar\')\n      .setSandboxMode(HtmlService.SandboxMode.IFRAME)\n      .setTitle(\'Leadership\')\n      .setWidth(100)\n      .setHeight(200);\n  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.\n      .showSidebar(html);\n\nvar cache = CacheService.getUserCache();\n\n}\n

\n

Answer 1

要在 HTML 文件中渲染 Apps 脚本数据，您需要将 HTML 作为模板进行处理，然后在渲染之前将相关数据显式传递到模板中。

看起来是这样的：

  var html = HtmlService.createTemplateFromFile('Sidebar');
  html.sessionEmail = Session.getActiveUser().getEmail();

  var rendered = html.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setTitle('Leadership')
      .setWidth(100)
      .setHeight(200);

  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showSidebar(rendered);