CODEWITHSUNDEEP
htmlgoogle-apps-script
Brandon Pillay
Brandon Pillay

Reputation: 1166

How to edit an HTML template (before displaying it) with Google App Script?

I have a function that triggers another function which shows a dialogue box in Google Sheets. The first function passes an event array(unsure if this is the correct terminology) to the second function which needs to be set a values for some <p> tags.

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() 
        }

I really appreciate the help!

Upvotes: 1

Views: 363

Answers (1)

Cooper
Cooper

Reputation: 64040

Here's a basic framework. You still have to add button handlers and other things but I think it gives you the basic idea. You could use a template but I just find it easier to put it all in one file. Less switching around from file to file while your editing.

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>

The 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;
}

Upvotes: 2

Related Questions