CODEWITHSUNDEEP
javascriptgoogle-apps-scriptweb-applications
John O
John O

Reputation: 5423

How do you use an external javascript library in a Google Apps addon script?

I've been working through the example code as best I can, and I've got an addon that when you click the custom menu, it pops up a dialog based on an html file (the HtmlService class stuff).

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('dialog')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(400)
      .setHeight(300);
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showModalDialog(html, 'Need a name for this');
}

I can't however seem to load any external javascript libraries from this html file. If they're included with the script tag, no errors are thrown, but any attempt to execute javascript within the html file fails silently. I understand that there is a security model, but the documentation is unenlightening.

Is this actual html file (an iframe? I can't find it in Dev Tools, assuming that Sheets is rendering everything with a canvas or something like that)?

I believe I've read the documentation thoroughly at (and linked from): https://developers.google.com/apps-script/reference/html/

... yet I'm not seeing anything I recognize as relevant to what I'm attempting.

Specifically, I'm hoping to be able to use the Dracula graphing library (or perhaps another similar one) to implement a new type of chart. I'll need to be able to execute the methods contained in that library.

Upvotes: 2

Views: 1313

Answers (1)

Tovly Deutsch
Tovly Deutsch

Reputation: 663

To load external javascript, you have to use scriplets in templated HTML (partially taken from GAS documentation)

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('StylesheetFileName'); ?>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Please enjoy this helpful script.</p>
    <?!= include('JavaScriptFileName'); ?>
  </body>
</html>

And in your gs code you would have something like this

function showDialog() {
var html = HtmlService.createTemplateFromFile('dialog')
            .evaluate()
            .setSandboxMode(HtmlService.SandboxMode.IFRAME)
            .setWidth(400)
            .setHeight(300);
        SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
        .showModalDialog(html, 'Dialog Title');
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

Upvotes: 2

Related Questions