Passing JS variable to HTML in Google Scripts

Question

I am trying to change text in the html that is sent via email to a JS variable that I have defined. It is important that I am doing this in Google Scripts and have 2 files Code.gs & Email.html.

It seems like my html is not able to access the JS variable but I am not sure where I am going wrong here. I have referenced somewhat similar posts and tried a could different ways but cant get it to work. If anyone ha suggestions, that would be fantastic.

Code.gs

var JSname;

function Email() {

  JSname = 'It works!'
  var theEmail = '[email protected]';
  var theSubject = 'Email subject line';
  var template = HtmlService.createTemplateFromFile('Email');
  var message = template.evaluate().getContent();
  MailApp.sendEmail({ to: theEmail, subject: theSubject, htmlBody: message });
  return
}

Email.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <span id="HTMLname">[Text here]</span>
    <script type="text/javascript" src="Code.gs">
      document.getElementById("HTMLname").innerHTML = JSname;
    </script>
  </body>
</html>

Are you having trouble accessing properties set on the template? As here: developers.google.com/apps-script/reference/html/… — Mic
– Mic, Commented Oct 10, 2019 at 19:53
There's no Javascript associated with email html i.e. the htmlBody parameter. Everything in that htmlBody string has to be defined within the string. So you can just assume that you're in the body tag. Don't work about DocType, html, head or script tags. They're all pointless in the email. — Cooper
– Cooper, Commented Oct 10, 2019 at 19:56
You substitute any variables that you want using Utilities.formatString() server side before you send the email. — Cooper
– Cooper, Commented Oct 10, 2019 at 20:05

AP. · Accepted Answer · 2019-10-10 20:09:43Z

Issue:

You're using a variable out of scope, simple as that

Fix:

Use template vars:

code.gs

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('Index'); // Or whatever you have
  var JSname = 'It works!' // Ideally var names should start with lowercase

  template.JSname = JSname // This is the IMPORTANT change

  // Build and return HTML in IFRAME sandbox mode. (Copied from GS directly)
  return template.evaluate()
    .setTitle('Web App Window Title')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function Email() {
  var theEmail = '[email protected]';
  var theSubject = 'Email subject line';
  var template = HtmlService.createTemplateFromFile('Email');
  var message = template.evaluate().getContent();
  MailApp.sendEmail({
    to: theEmail,
    subject: theSubject,
    htmlBody: message
  });
}

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>

<body>
  <span id="HTMLname"><?= JSname ?></span>
</body>

</html>

Source: https://script.google.com/u/1/home/start

Couple syntax issues to fix there. AppScript has an older ECMA parser so let isn't supported. And you're missing a matching curly brace at the end.

Collectives™ on Stack Overflow

Passing JS variable to HTML in Google Scripts

1 Answer 1

Issue:

Fix:

Source: https://script.google.com/u/1/home/start

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Issue:

Fix:

Source: https://script.google.com/u/1/home/start

4 Comments

Related