如何使用 gs 文件中的變量作為 Google Apps 腳本中 HTML 文件的輸入值？

Question

testGetFieldName function 的變量 fieldName 位於 Code.gs

我想將它插入到 index.html 文件的輸入值中。

但是，如果我使用 testSetValue 打開 Sidebar，該值就會顯示為 undefiend。

我怎樣才能讓變量'Account'產生價值？

我寫的代碼如下。

//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

<!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

在您的腳本中，如何進行以下修改？

Google Apps 腳本方面：

從：

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

至：

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

HTML 側：

從：

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

至：

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

筆記：

如果你想使用google.script.run ，那么下面的修改呢？

從

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

至

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

參考：

HTML 服務：模板化 HTML

Answer 2

通常，最好將 HTML、CSS、JavaScript 文件分開。

參考

HtmlService 最佳實踐

如何使用 gs 文件中的變量作為 Google Apps 腳本中 HTML 文件的輸入值？

問題描述

2 個解決方案

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

Google Apps 腳本方面：

從：

至：

HTML 側：

從：

至：

筆記：

參考：

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

參考

如何使用 gs 文件中的變量作為 Google Apps 腳本中 HTML 文件的輸入值？

問題描述

2 個解決方案

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

Google Apps 腳本方面：

從：

至：

HTML 側：

從：

至：

筆記：

參考：

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

參考

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

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