-1

I'm attempting to send emails using an HTML template.

I've looked at this post: (https://stackoverflow.com/questions/33178702/passing-variables-into-html-code)

Would either of the two code examples be close to something that could work to pass the variables from the Javascript to the HTML template? My javascript variables are named detail2, detail3, detail4, detail5 and detail6.

1st attempt:

<html>
  <head>
    <script>
    {
    
    var detail2 = document.getElementById("detail2").innerHTML;
    var detail3 = document.getElementById("detail3").innerHTML;
    var detail4 = document.getElementById("detail4").innerHTML;
    var detail5 = document.getElementById("detail5").innerHTML;
    var detail6 = document.getElementById("detail6").innerHTML;

      }
    }
    </script>
  </head>
  <body>
    
<p>
      <br>"Punctual? " document.getElementById('detail2').value<br>
      <br>"Attention to detail? " document.getElementById('detail3').value<br> 
      <br>"Overall Professionalism? " document.getElementById('detail4').value<br> 
      <br>"Date of Service: " document.getElementById('detail5').value<br>
      <br>"Notes/Details: " document.getElementById('detail6').value<br>
</p>

  </body>
</html>

2nd attempt:

<html>
  <head>
    <script>
    {
    
    <input type="hidden" id="Detail2" value="detail2" />
    <input type="hidden" id="Detail3" value="detail3" />
    <input type="hidden" id="Detail4" value="detail4" />
    <input type="hidden" id="Detail5" value="detail5" />
    <input type="hidden" id="Detail6" value="detail6" />

      }
    }
    </script>
  </head>
  <body>
    
<p>
      <br>"Punctual? " document.getElementById('detail2').value<br>
      <br>"Attention to detail? " document.getElementById('detail3').value<br> 
      <br>"Overall Professionalism? " document.getElementById('detail4').value<br> 
      <br>"Date of Service: " document.getElementById('detail5').value<br>
      <br>"Notes/Details: " document.getElementById('detail6').value<br>
</p>

  </body>
</html>

Finally, the method given on GAS Dev is below, but this only confuses me more. I am sure I've been at this too long and I'm burned out, I just can't seem to see the answer on this one.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <table>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td><?= data[i][j] ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>
  </body>
</html>

If anyone can help it's much appreciated!

Below is the Javascript from the .gs script file.

function SendEmail() {
                                   // initialize data
 var ss = SpreadsheetApp.getActiveSpreadsheet();
 var sheet = ss.getActiveSheet();
 var range = sheet.getDataRange();
 var values = range.getValues();
                                   // iteration loop
    for (var i = 1; i<values.length; i++) {
                                   // current times for comparator
 var month = new Date().getMonth();          // returns today as 0-11 -- Jan is 0
 var day = new Date().getDate();             // returns today as 1-31
 var hour = new Date().getHours();           // returns today as 0-23
 var minute = new Date().getMinutes();       // returns today as 0-59
                                   // pull data from spreadsheet rows
 var company = values[i][0];
 var rating = values[i][1];
 var detail1 = values[i][2];
 var detail2 = values[i][3];
 var detail3 = values[i][4];
 var detail4 = values[i][5];
 var detail5 = values[i][6];
 var sendTime = values[i][7];
                                   // character send times for comparator
 var cSendMonth = sendTime.getMonth();        // returns sendMonth as 0-11 -- Jan is 0
 var cSendDay = sendTime.getDate();           // returns sendDay as 1-31
 var cSendHour = sendTime.getHours();         // returns sendHour as 0-23
 var cSendMinute = sendTime.getMinutes();     // returns sendMinute as 0-59
                                   // comparator
    if(cSendMonth == month) {
      if(cSendDay == day) {
        if(cSendHour == hour) {
          if(cSendMinute == minute) {
 var htmlBody = HtmlService.createHtmlOutputFromFile('mail_template').getContent();
      MailApp.sendEmail({
          to: Session.getActiveUser().getEmail(),
          subject: 'Test Email markup2 - ' + new Date(),
          htmlBody: htmlBody,
  });
          } // end if minute test
        }// end if hour test
       }// end if day test
      }// end if month test
    }// end for loop
}
Community
  • 1
  • 1
  • Alas, web pages do not run on wishful thinking. Your simplest version is to give an ID to a container, and use the innerHTML: `

    ` and use `document.getElementById("det2").innerHTML=detail2;`
    – mplungjan Jul 17 '16 at 06:05
  • duplicate of http://stackoverflow.com/q/30033459/2213940 – Zig Mandel Jul 17 '16 at 14:53
  • Apps Script uses JavaScript as it's server code language. I mention that because sometimes new users confuse what is server code and what is client code, code that runs in your browser. From your question, I'm not sure where the original values are coming from. Are the original values coming from a spreadsheet? Hard coded in a `.gs` script file? Entered by the user in an HTML form? And I'm not sure what it is that you want the end result to be? You mention an email, but I don't see any email code. – Alan Wells Jul 17 '16 at 17:42
  • @SandyGood That is correct, the values come from the spreadsheet and I am using the .gs script file to transfer to the HTML the template. Does the script file have to designate the values to the HTML before they can be brought into the HTML template? I've added the javascript to the post. – Bryan Tribolet Jul 18 '16 at 04:36
  • Okay, I think I understand the overall context now. I'll put some information into in an answer. – Alan Wells Jul 18 '16 at 15:31

2 Answers2

0

Can you try:

<html>
  <head>
    <script>
      (function() {
         var detail2 = document.getElementById("detail2").innerHTML;
         document.getElementById("detail2_val").innerHTML = detail2; 
      })();    
    </script>
  </head>
  <body>

   <p>
      <br>"Punctual?" <span id="detail2_val"></span><br>
   </p>

  </body>
</html>
Arun Ghosh
  • 7,634
  • 1
  • 26
  • 38
0

Currently, this line:

var htmlBody = HtmlService.createHtmlOutputFromFile('mail_template').getContent();

will not evaluate a template.

The method being used is:

createHtmlOutputFromFile('mail_template')

HtmlService has quite a few methods for creating html content. You need to use:

HtmlService.createTemplateFromFile(filename).evaluate()

There are some possible things that could go wrong in your overall work flow. If the situation is one in which you are writing data, and then immediately trying to read that same data that was just written, there could be a problem with the new data not being available to be read in such a short time span.

I would use:

SpreadsheetApp.flush();

immediately after writing the new data, and before creating the template.

Only your third html example has code for a template. To retrieve data and put it into a template, a scriptlet must either run a function, that then retrieves the data, or the data must be in global variables. The situation with global variable makes no sense, because you are using dynamic data, so a function would need to run to first put the data into a global variable. The function might as well just return the data directly. So, your scriptlet will probably need to run a server side function and return text or HTML to the html template. You probably need to use a printing scriptlet.

Apps Script documentation - force printing scriptlets

Alan Wells
  • 30,746
  • 15
  • 104
  • 152