CODEWITHSUNDEEP
javascriptemailgoogle-apps-scripthtml-email
João Rafael Borowski Tedeschi
João Rafael Borowski Tedeschi

Reputation: 25

Google Apps Script HTML style not rendering correctly

I'm trying to style my HTML file to output a grid with tiles layout. But it seems that the MailApp is not rendering it correctly. Can anyone tell me what is wrong on the code?

I've tried to write the HTML file with inline styling but it did not work out. I've tried adding the .setSandboxMode(HtmlService.SandboxMode.IFRAME) method but it did not work out.

Code.gs


function createEmail() {
  var templ = HtmlService.createTemplateFromFile('test')

  var message = templ.evaluate().setTitle('Weekly Performance Review').setSandboxMode(HtmlService.SandboxMode.IFRAME).getContent();

  Logger.log(message)
  var email = "[email protected]";
  Logger.log("[email protected]");
  MailApp.sendEmail({
    to: email,
    subject: "Weekly Performance Review 🍔",
    htmlBody: message
})

}

File test.html


<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <style>
    .app {
      display: grid;
      grid-gap: 50px;
      overflow: hidden;
      /*   grid-template-columns: repeat(auto-fill, 200px); */
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      /*   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr) 150px); */
      grid-auto-flow: dense;
    }
  </style>
</head>

<body>
  <div class="app"
    style="display: grid; grid-gap: 50px; overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-auto-flow: dense;">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5</div>
    <div class="item">item 6</div>
    <div class="item">item 7</div>
    <div class="item">item 8</div>
    <div class="item">item 9</div>
    <div class="item">item 10</div>
    <div class="item">item 11</div>

  </div>
</body>

</html>

Output email body

Output Email Body

Also, I have not been able to add a style tag and render it, I do not know very much about styling or html, could someone explain?

I was expecting something like this

Grid Layout

Thanks

Upvotes: 0

Views: 242

Answers (1)

Wicket
Wicket

Reputation: 38131

MailApp hasn't a sendEmail method able to handle "correctly" an object as the first parameter.

Instead of

MailApp.sendEmail({
    to: email,
    subject: "Weekly Performance Review 🍔",
    htmlBody: message
})

use

MailApp.sendEmail(
    email,
    "Weekly Performance Review 🍔",
    {htmlBody: message}
)

or

GmailApp.sendEmail({
    to: email,
    subject: "Weekly Performance Review 🍔",
    htmlBody: message
})

References

Upvotes: 1

Related Questions