Javascript 如何在称为HTML模板的内部创建HTML模板_Javascript_Google Apps Script_Google Sheets

Javascript 如何在称为HTML模板的内部创建HTML模板

javascript google-apps-script google-sheets

Javascript 如何在称为HTML模板的内部创建HTML模板,javascript,google-apps-script,google-sheets,Javascript,Google Apps Script,Google Sheets,所以，我最近一直在试验反谷歌应用程序脚本。到目前为止还不错，但我遇到了一个让我头疼的问题：我在电子表格中有一个按钮，可以调用带有脚本函数的边栏菜单宏 function sbCases() { var Form = HtmlService.createTemplateFromFile("Cases"); var ShowForm = Form.evaluate(); ShowForm.setTitle("ASS-CAD - Cases manager system").set

所以，我最近一直在试验反谷歌应用程序脚本。到目前为止还不错，但我遇到了一个让我头疼的问题：我在电子表格中有一个按钮，可以调用带有脚本函数的边栏菜单

宏

function sbCases() {
   var Form = HtmlService.createTemplateFromFile("Cases");
   var ShowForm = Form.evaluate();

   ShowForm.setTitle("ASS-CAD - Cases manager system").setHeight(400).setWidth(1000);
   SpreadsheetApp.getUi().showSidebar(ShowForm);

使用此函数调用的html文件工作正常，但我想调用第二个表单，也可以通过html文件来管理电子表格数据。因此，我已将此函数添加到.gs文件中（并启动了一个新的html文件）：

但是，当我试图从第一个html文件中的按钮调用它时，单击按钮时什么也没有发生（检查了日志，按钮应该调用的函数没有被执行）。遵循代码（html充满了内容，比如按钮和所有东西）（“btn”是处理html文件的按钮的ID）：


document.getElementById（“btn”）.addEventListener（“单击”，新建案例）；
函数NewCase（）{
google.script.run.NewCase（）
}

我在大学里学习c语言，但对javascript和google脚本几乎没有经验，所以我敢肯定我做了一些非常错误的事情。提前感谢您的帮助。：）

您可以尝试以下方法：

运行showTSidebar以启动程序，然后单击按钮

ag1.gs：

function loadForm() {
  var html='<form><input type="text" name="name1"/><input type="button" value="Click" onClick="process(this.parentNode);" /></form>';
  return html;
}

function showTSidebar() {
  SpreadsheetApp.getUi().showSidebar(HtmlService.createTemplateFromFile('ah4').evaluate());
}

function processForm(obj) {
  SpreadsheetApp.getUi().alert('name1: ' + obj.name1);
}

function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

函数加载形式（）{
var html=''；
返回html；
}
函数showTSidebar（）{
SpreadsheetApp.getUi（）.showSidebar（HtmlService.createTemplateFromFile（'ah4'）.evaluate（））；
}
函数processForm（obj）{
SpreadsheetApp.getUi（）.alert（'name1:'+obj.name1）；
}
函数包括（文件名）{
返回HtmlService.createHtmlOutFromFile（文件名）.getContent（）；
}

ah4.html：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('sbresrc') ?>
  </head>
  <body>
   <div id="form"></div>
   <input type="button" value="Load Form" onClick="loadForm();" />
    <?!= include('ah6') ?>
  </body>
</html>

ah6.html：

<script>
  function loadForm() {
    google.script.run
    .withSuccessHandler(function(html){
      $('#form').html(html);
      $('#form').css('display','block');
    })
    .loadForm();
  }
  function process(obj) {
    google.script.run.processForm(obj);
  }
</script>


函数loadForm（）{
google.script.run
.withSuccessHandler（函数（html）{
$（'#form'）.html（html）；
$（'#form'）.css（'display'，'block'）；
})
.loadForm（）；
}
功能过程（obj）{
google.script.run.processForm（obj）；
}

sbresrc.html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

动画：

这是否回答了您的问题？我得到的是：“ReferenceError:include未定义”。：\（我正在使用MaterializeCSS）哦，是的，这是一个我忘记添加的函数。当我到达我的计算机时，我会进入。我把include放在那里。那么，“ah4.html”是边栏文件，按钮调用“ah6.html”文件？如何更改botton调用的html文件？我会尝试将yout按钮的功能整合到我已有的固定动作按钮中。实际上，我会说ah4、ah6和sbresr是侧边栏。因此，边栏中的按钮首先调用javascript函数，该函数设置回调函数，然后在服务器上调用loadForm返回，然后将html返回回调函数，该函数随后将表单加载到div中。我认为您的操作按钮是一个图像…对吗？如果是这样，它将无法工作，因为它无法调用侧栏，除非侧栏设置了回调，而这无法从侧栏外部完成。

<script>
  function loadForm() {
    google.script.run
    .withSuccessHandler(function(html){
      $('#form').html(html);
      $('#form').css('display','block');
    })
    .loadForm();
  }
  function process(obj) {
    google.script.run.processForm(obj);
  }
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>