如何使用Google App脚本编辑HTML模板(在显示之前)?

时间:2018-12-24 15:14:14

标签: html google-apps-script

我有一个函数可以触发另一个函数,该函数在Google表格中显示一个对话框。第一个函数将事件数组(不确定这是否是正确的术语)传递给第二个函数,该函数需要为某些<p>标签设置值。

HTML:

  <body>
        <p id="firstPara"></p>
        <p id="secPara"></p>
        <p id="turdPara"></p>
        <p>Choose from the Apple related items above!</p>
        <button class="button button1">CARRY OVER</button>
        <button class="button button2">SKIP</button>
        <button class="button button3">CANCEL</button>
      </body>

JS:

        function numberOne(){
         var val = ['APPLES', 'BASKET', 'HANDLE' ]  
         if(apples are green)numberTwo(val)
        }

        function numberTwo(e){
         var html = HtmlService.createHtmlOutputFromFile('OFTimeAlert')
         var content = html.getContent()
         //...
         //This is where I'm stuck: I need to get the <p> tags by Id then set 
         //the values! 
         //...
         html.setContent() 
        }

我非常感谢您的帮助!

1 个答案:

答案 0 :(得分:2)

这是一个基本框架。您仍然必须添加按钮处理程序和其他内容,但我认为它为您提供了基本概念。您可以使用模板,但我发现将其全部放入一个文件更容易。编辑时,文件之间的切换更少。

question1.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function numberOne(){
        var val = ['APPLES', 'BASKET', 'HANDLE' ];
        if(apples are green)numberTwo(val)
      }
      function numberTwo(e){
        google.script.run
        .withSuccessHandler(function(Obj){
          document.getElementById('firstPara').innerHTML=Obj.firstPara;
          ....
        })
        .getHtmlOfPTags();

      } 
      //You also need to add all of the button handler
    </script>
  </head>
  <body>
     <p id="firstPara"></p>
     <p id="secPara"></p>
     <p id="turdPara"></p>
     <p>Choose from the Apple related items above!</p>
     <button class="button button1">CARRY OVER</button>
     <button class="button button2">SKIP</button>
     <button class="button button3">CANCEL</button>
  </body>
</html>

gs:

function showDialog(){
  var ui=HtmlService.createTemplateFromFile('question1');
  SpreadsheetApp.getUi().showModelessDialog(ui, 'A Simple Dialog');
} 

function getHtmlOfPTags(){
  var Obj={'firstPara':'html','secPara':'html','turdPara':'html'};
  return Obj;
}