Google Apps Script - How to send HTML email from Sheet?

Question

I'm trying to write a code to send an html email from a Sheet. I have a template in a GAS html file. Gmail API is enabled.

I did manage to send an email this way, complete with replaced placeholders. However, I'm just sending all the text in the html file, tags and all.

function htmlTry() {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sample");
  var lastRow     = spreadsheet.getLastRow();
  var name        = spreadsheet.getRange(lastRow, 3).getValue();
  var problem     = spreadsheet.getRange(lastRow, 6).getValue();

  if(problem == "Yes") {
    var htmlBody  = HtmlService.createHtmlOutputFromFile('htmlFile').getContent()
      .replace("#name", name)
      .replace("?name", name)
      .replace("/name", name);
      
    MailApp.sendEmail ("sample@email.com", "Problem: " + name, htmlBody);
  }
}

I've provided a sample of the html file as well. Which is exactly what the email says, except it loses the indents.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Problem</title>
    <style>
        body,table,thead,tbody,tr,td,img {
            padding: 0;
            background-color: #23A5F3;
        }

        .wrapper {
            padding-left: 10px;
            padding-right: 10px;
        }

        h1,h2,h3,h4,h5,h6,p {
            font-family: Trebuchet MS, Arial, sans-serif;
            color:#9CD6FA;
        }

        p,a,li {
            font-family: Trebuchet MS, Arial, sans-serif;
            color:#000000;
        }

    </style>
</head>

<body style="background-color:#FFFFFF;">
    <table width="100%">
        <tbody>
            <tr>
                <td class="wrapper" width="600" align="center">
                    <table class="section header" cellpadding="0" cellspacing="0" width="600">
                        <tr>
                            <td class="column">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td align="left" style="background-color: #FFFFFF;">
                                                <p style="text-align:justify;">Lorem ipsum</p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Solved thanks to Irvin Jay G. who took the time to explain why I should have done exactly what they suggested, rather than thinking for myself. Hope you have a wonderful couple of days.

Answer 1

Solution:

You need to use the advanced parameter called htmlBody , as per the MailApp's sendEmail(recipient, subject, body, options) method, to show the file in html view instead of showing the pure html codes on the email message.

I was able to replicate your script and got this result on my test email account:

Here's the tweaked script using the htmlBody advanced parameter:

function htmlTry() {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sample");
  var lastRow     = spreadsheet.getLastRow();
  var name        = spreadsheet.getRange(lastRow, 3).getValue();
  var problem     = spreadsheet.getRange(lastRow, 6).getValue();

  if(problem == "Yes") {
    var htmlBody  = HtmlService.createHtmlOutputFromFile('htmlFile').getContent()
      .replace("#name", name)
      .replace("?name", name)
      .replace("/name", name);

    MailApp.sendEmail("sample@email.com", 'Problem: '+ name, htmlBody, {
    htmlBody: htmlBody
    });
  }
}

Google Apps Script - How to send HTML email from Sheet?

Question

1 answers

solution1
1 ACCPTED 2021-06-16 16:24:54

Google Apps Script - How to send HTML email from Sheet?

Question

1 answers

solution1 1 ACCPTED 2021-06-16 16:24:54

solution1
1 ACCPTED 2021-06-16 16:24:54