如何使用 gs 文件中的变量作为 Google Apps 脚本中 HTML 文件的输入值？

Question

The variable fieldName for testGetFieldName function is located at Code.gs testGetFieldName function 的变量 fieldName 位于 Code.gs

I want to insert it into the input value of the index.html file.我想将它插入到 index.html 文件的输入值中。

But if I open Sidebar using testSetValue, the value comes out as undefiend.但是，如果我使用 testSetValue 打开 Sidebar，该值就会显示为 undefiend。

How can I get the variable 'Account' to come out with Value?我怎样才能让变量'Account'产生价值？

The code I wrote is as follows.我写的代码如下。

//code.gs
function testGetFieldName(){
  var fieldName = 'Account';
  return fieldName;
}

function testSetValue(){
  var html = HtmlService.createTemplateFromFile('index');
  var output = html.evaluate()
      .setTitle('MySidebar')
      .setWidth(400)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi().showSidebar(output);
}

index.html index.html

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>

<body>
  <input type="text" id ='textValue' name='textValue' value=''/>
   <script>
     document.getElementById('textValue').setAttribute('value',google.script.run.testGetFieldName());
   </script>
 </body>
</html>

Answer 1

In your script, how about the following modification?在您的脚本中，如何进行以下修改？

Google Apps Script side: Google Apps 脚本方面：

From:从：

var html = HtmlService.createTemplateFromFile('index');
var output = html.evaluate()

To:至：

var html = HtmlService.createTemplateFromFile('index');
html.value = testGetFieldName();
var output = html.evaluate()

HTML side: HTML 侧：

From:从：

document.getElementById('textValue').setAttribute('value',google.script.run.testGetFieldName());

To:至：

document.getElementById('textValue').setAttribute('value', '<?= value ?>');

Note:笔记：

If you want to use google.script.run , how about the following modification?如果你想使用google.script.run ，那么下面的修改呢？

From从

 document.getElementById('textValue').setAttribute('value',google.script.run.testGetFieldName());

To至

 google.script.run.withSuccessHandler(e => { document.getElementById('textValue').setAttribute('value', e); }).testGetFieldName();

Reference:参考：

HTML Service: Templated HTML HTML 服务：模板化 HTML

Answer 2

In general, it's a best practice to separate your HTML,CSS,JavaScript files.通常，最好将 HTML、CSS、JavaScript 文件分开。

References参考

HtmlService Best Practices HtmlService 最佳实践

如何使用 gs 文件中的变量作为 Google Apps 脚本中 HTML 文件的输入值？

问题描述

2 个解决方案

解决方案1
1 2022-08-24 08:49:26

Google Apps Script side: Google Apps 脚本方面：

From:从：

To:至：

HTML side: HTML 侧：

From:从：

To:至：

Note:笔记：

Reference:参考：

解决方案2
0 2023-01-11 08:06:46

References参考

如何使用 gs 文件中的变量作为 Google Apps 脚本中 HTML 文件的输入值？

问题描述

2 个解决方案

解决方案1 1 2022-08-24 08:49:26

Google Apps Script side: Google Apps 脚本方面：

From:从：

To:至：

HTML side: HTML 侧：

From:从：

To:至：

Note:笔记：

Reference:参考：

解决方案2 0 2023-01-11 08:06:46

References参考

解决方案1
1 2022-08-24 08:49:26

解决方案2
0 2023-01-11 08:06:46