CODEWITHSUNDEEP
javascriptgoogle-apps-scriptgoogle-sheets
azmirfakkri
azmirfakkri

Reputation: 601

Undefined variables in html templates for MailApp

I am trying to send an HTML email using MailApp. This is the table where I will pull the data from:

enter image description here

After reading the documentations and posts on SO, I am still unable to pin point why the email sent out is showing undefined in the variables part.

enter image description here

Would appreciate if someone can point me to the right direction.

These are my codes:

sendHtmlEmail.gs

function sendEmails() {
    var ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
    var lastRow = ss.getLastRow();

    var quotaLeft = MailApp.getRemainingDailyQuota();
    if((lastRow-1) > quotaLeft){
     Browser.msgBox("You have " + quotaLeft + " email quota left and you're trying to send " + (lastRow-1) + " emails. Emails were not sent.")
    } else {
      for (var row = 2; row <= lastRow; row++){
        var currentEmail = ss.getRange(row, 4).getValue(); 
        var currentContact = ss.getRange(row, 3).getValue();
        var currentNewSize = ss.getRange(row,8).getValue();
        var currentSub = ss.getRange(row, 9).getValue();
        var returnData = [currentContact, currentNewSize, currentSub];
        var html = HtmlService.createTemplateFromFile('htmlTemplate');

        html.data = returnData;
        var template = html.evaluate().getContent();
        var subjectLine = "Important notice";
        MailApp.sendEmail({to: currentEmail, subject: subjectLine, htmlBody: template}); 
       } //close for loop
        Browser.msgBox("You have successfully sent " + (lastRow-1) + " emails.")
     } //close else statement 
}

htmlTemplate.html

<!DOCTYPE html><html><head><base target="_top"></head><body style="text-align: center;font-family: Arial;">
  <div id="center" style="width:300px;border: 2px dotted grey;background:#ececec;margin:25px;margin-left:auto;
margin-right:auto;padding:15px;"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_Alert.svg/600px-Simple_Alert.svg.png"
width="180" style="margin:10px 0px"><br /><div style=" border: 2px dotted grey;background:white;margin-right:auto; margin-left:auto;
padding:10px;"><h2>Alert</h2><h3>Important Notice <br /><br />
+ <?= data.currentContact ?> + '<br />' + <?= data.currentNewSize ?> + '<br />' + <?= data.currentSub ?> + '<br /></h3></div></body></html>'

I know that it is something to do with the htmlTemplate data.currentNewSize etc, but after tweaking my codes they are still showing undefined as shown in the image.

Upvotes: 0

Views: 245

Answers (2)

azmirfakkri
azmirfakkri

Reputation: 601

The issue lies in the html code. As I have declared the array in sendHtmlEmail.gs, I did not call it correctly in my htmlTemplate.html.

In this line:

var returnData = [currentContact, currentNewSize, currentSub];

currentContact is in position 0, currentNewSize is in position 1 and so forth.

In the htmlTemplate.html, I need to replace this line:

+ <?= data.currentContact ?> + '<br />' + <?= data.currentNewSize ?> + '<br />' + <?= data.currentSub ?> + '<br /></h3></div></body></html>'

with this:

+ <?= returnData[0];?> + '<br />' + <?= returnData[1];?> + '<br />' + <?= returnData[2];?> + '<br /></h3></div></body></html>'

Upvotes: 0

Amit Agarwal
Amit Agarwal

Reputation: 11268

You are using an array in the method while the template is expecting an object.

Replace 

    var returnData = [currentContact, currentNewSize, currentSub];

with

    var returnData = {currentContact: currentContact, currentNewSize: currentNewSize, currentSub: currentSub}

Upvotes: 1

Related Questions