How to convert variable into HTML code in HTML file

Question

So I have several spreadsheets that send out automated emails, and last week I asked how to include email signatures when they get sent out. I finally figured it out based on the answer to this question. I added the "Gmail" service to my script and included the suggested "signature" variable. Here's a snippet of my script:

function ncnsEmailFunction () {

const values = ncnsSheet.getRange(2, 1, 10, 7).getValues();

values.forEach(function(value, index){
if (value[0] === "") return;
let t = HtmlService.createTemplateFromFile("NCNSEmailTemplate");

const date = new Date();
const formattedDate = Utilities.formatDate(new Date(date), "PST", "MM/dd/yyyy")

t.todaysDate = formattedDate; // Today's Date
t.value0 = value[0]; // First Name
t.value1 = value[1]; // Last Name
t.value2 = value[2]; // Supervisor
t.value3 = value[3]; // Shift Start
t.value4 = value[4]; // Notification Time
t.signature = Gmail.Users.Settings.SendAs.list("me").sendAs.filter(function(account){if(account.isDefault){return true}})[0].signature;

const htmlBody = t.evaluate().getContent();
MailApp.sendEmail(
  {to: Session.getActiveUser().getEmail(),
  // cc: emailRecipients,
  subject: `NCNS ${value[0]} ${value[1]} for ${formattedDate}`,
  htmlBody: htmlBody});
})
}

Here is what my HTML file looks like:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>

Hello <?=value0?>, 
<p>
You were a No-Call No-Show for your scheduled shift on <?=todaysDate?> at <?=value3?> hours. Supervisor <?=value2?> called you at <?=value4?> hours but was unable to reach you.
<p>
While we do understand that there are emergencies, you're required to call the Supervisor's Office at least 24 hours prior to your scheduled start time, or as soon as reasonably possible, to notify them of your absence.
<p>
If you have not done so already, please contact the Supervisor's office at (555) 555-5555 within 24 hours of this email, to discuss this No-Call No-Show.
<p>

<?=signature?>

  </body>
</html>

However, now the user's email signatures do show up but with all the HTML code, like so:

<div dir="ltr"><div><div dir="ltr"><div><div dir="ltr"><div><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div style="color:rgb(136,136,136);font-family:helvetica;font-size:13px"><div style="color:rgb(34,34,34);font-family:arial,sans-serif;font-size:12.800000190734863px;margin:0px"><div><span style="font-size:13px"><font color="#444444" face="arial, helvetica, sans-serif">Jane Doe</font></span></div><div><span style="font-size:13px"><font color="#444444" face="arial, helvetica, sans-serif">Supervisor</font></span></div>

Anyone have suggestions to fix this?

score 0 · Answer 1 · answered Sep 25 '22 at 19:45

0

You need to use scriptlets like this <?= value0 ?> They are explained here

answered Sep 25 '22 at 19:45

Cooper

59,616
6
23
54

Yes, this is how the variable appears in my HTML file: =signature?> (it's when the email is sent out that all the HTLM code for the signature appears) – Borgher Sep 25 '22 at 19:50
I think you might wish to share an html example file. – Cooper Sep 25 '22 at 19:54
Oops you're right, I have updated my original question – Borgher Sep 25 '22 at 19:57

score 0 · Accepted Answer · answered Sep 25 '22 at 23:16

I figured it out!!!

The key is to create the signature as a regular variable and add it to the MailApp htmlBody code:

function ncnsEmailFunction () {

const values = ncnsSheet.getRange(2, 1, 10, 7).getValues();

values.forEach(function(value, index){
if (value[0] === "") return;
let t = HtmlService.createTemplateFromFile("NCNSEmailTemplate");

const date = new Date();
const formattedDate = Utilities.formatDate(new Date(date), "PST", "MM/dd/yyyy")

t.todaysDate = formattedDate; // Today's Date
t.value0 = value[0]; // First Name
t.value1 = value[1]; // Last Name
t.value2 = value[2]; // Supervisor
t.value3 = value[3]; // Shift Start
t.value4 = value[4]; // Notification Time

// t.signature = Gmail.Users.Settings.SendAs.list("me").sendAs.filter(function(account){if(account.isDefault){return true}})[0].signature; Not Correct

// Correct variable:
const emailSignature = Gmail.Users.Settings.SendAs.list("me").sendAs.filter(function(account){if(account.isDefault){return true}})[0].signature;

const htmlBody = t.evaluate().getContent();
MailApp.sendEmail(
  {to: Session.getActiveUser().getEmail(),
  // cc: emailRecipients,
  subject: `NCNS ${value[0]} ${value[1]} for ${formattedDate}`,
  htmlBody: htmlBody + emailSignature});
})
}

score 0 · Answer 3 · answered Sep 26 '22 at 04:24

When you have a variable that contains html, and you insert that variable's content in an html template via a scriptlet, you need to use a force-printing scriptlet, with an exclamation mark, like this:

<?!= signature ?>

If you use a regular printing scriptlet, <?= signature ?>, the variable is rendered as an html string, but with a force-printing scriptlet its html content is rendered. As discussed on the referenced page:

you’ll need to force-print if your scriptlet’s output intentionally contains HTML or scripts that you want to insert exactly as specified.

How to convert variable into HTML code in HTML file

3 Answers3