将谷歌脚本值传递给 html

Question

I have been looking at various other solutions posted here but none of them seem to work for me.我一直在查看此处发布的各种其他解决方案，但它们似乎都不适合我。

I'm trying to pass a variable from my google script (which is originally stored in google's PropertiesService) to my html, because I want to use previously saved data as values for my text input box (showing the previously saved data).我试图将一个变量从我的谷歌脚本（最初存储在谷歌的 PropertiesService 中）传递给我的 html，因为我想使用以前保存的数据作为我的文本输入框的值（显示以前保存的数据）。

This is my gs file (minus unrelated parts):这是我的 gs 文件（减去不相关的部分）：

function openSettings() {

  var htmlTemplate = HtmlService.createTemplateFromFile('settingsForm')


  var userProperties = PropertiesService.getUserProperties();
  var time = userProperties.getProperty('selectedTime');
  htmlTemplate.timehtml = time;

  var html = htmlTemplate.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setTitle('Settings')
    .setWidth(300)
  SpreadsheetApp.getUi()
    .showSidebar(html);
  return html
}

function processForm(form) {

  var userProperties = PropertiesService.getUserProperties();

  var time = userProperties.getProperty('selectedTime');
  time = form.time;
  userProperties.setProperty('selectedTime', time);
}

And this is my html file (left out other unrelated parts):这是我的 html 文件（省略了其他不相关的部分）：

<!DOCTYPE html>

<html>

<div>
 <form>
   <input type="text" name="time" id="time" style="width: 40px;">
   <br><br><input type="button" class="action" onClick="writeFormData(); 
   alert('submitted')" value="Submit"/>
 </form>
</div>

<script>
  var timeInput = document.getElementById("time");
  var timehtml = time;
  timeInput.value = timehtml;
</script>

<script type="text/javascript">
       function writeFormData() {
           google.script.run.processForm(document.forms[0]);
       }
</script>

</html>

Perhaps my whole approach is wrong.也许我的整个方法都是错误的。 But what I'm trying to do is store the user choices (might want to change userProperties to documentProperties, to make the settings document specific) in Google's PropertiesService and then save these values when the submit buttons is pressed in a sidebar.但我想要做的是在 Google 的 PropertiesService 中存储用户选择（可能想要将 userProperties 更改为 documentProperties，以使设置文档特定），然后在侧边栏中按下提交按钮时保存这些值。 Next time when the sidebar is opened these saved settings should be shown.下次打开侧边栏时，应显示这些保存的设置。

Answer 1

You are on the right track.你在正确的轨道上。 Because you've already passed the variable to the HtmlTemplate object, the only remaining step is to use GAS template engine to render it.因为您已经将变量传递给 HtmlTemplate 对象，所以剩下的唯一步骤就是使用 GAS 模板引擎来呈现它。

.GS file .GS 文件

...
htmlTemplate.timehtml = time;
...

HTML template HTML 模板

   <input type="text" name="time" id="time" value="<?!= timehtml ?>">

More on templated HTML in GAS herehttps://developers.google.com/apps-script/guides/html/templates更多关于 GAS 中的模板化 HTML 在这里https://developers.google.com/apps-script/guides/html/templates

The reason your code doesn't work is that you are passing the variable by setting the property of the HtmlTemplate object.您的代码不起作用的原因是您通过设置 HtmlTemplate 对象的属性来传递变量。 HtmlTemplate and HtmlOutput objects exist only in the context of GAS Script Editor runtime. HtmlTemplate 和 HtmlOutput 对象仅存在于 GAS 脚本编辑器运行时的上下文中。 Your browser ends up getting the HTML string which it then parses into DOM elements and renders.您的浏览器最终会获取 HTML 字符串，然后将其解析为 DOM 元素并呈现。 At that stage, any GAS-related context is lost, with your locally installed browser software being the new runtime environment for your code.在那个阶段，任何与 GAS 相关的上下文都将丢失，您本地安装的浏览器软件将成为您代码的新运行时环境。 That's the reason why you can't reference the 'timehtml' variable.这就是您不能引用“timehtml”变量的原因。

Answer 2

I wanted a value in my javascript so doGet like this:我想要一个值在我的 javascript 所以 doGet 像这样：

function doGet(e){
  const template = HtmlService.createTemplateFromFile("index")
  template.userEmail = Session.getActiveUser().getEmail();
  return template.evaluate()
    .addMetaTag("viewport", "width=device-width, initial-scale=1.0");
}

and javascript like this:和这样的javascript：

// pass from BE
const _user_email = "<?!=userEmail?>";

将谷歌脚本值传递给 html

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-05-22 11:35:56

解决方案2
0 2022-06-05 02:32:38

将谷歌脚本值传递给 html

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-05-22 11:35:56

解决方案2 0 2022-06-05 02:32:38

解决方案1
1 已采纳 2018-05-22 11:35:56

解决方案2
0 2022-06-05 02:32:38