Passing variables to Html file in google scripts

Question

I am trying to create an input tag for an HtmlTemplate function for each file in a folder on my google Drive.

This input tag works, but I'm trying to use variables to set the team (BAL) and the src id:

<input type="image" class="teamLogo" onClick="getTeam('BAL');" src="https://drive.google.com/uc?id=12p5P6dmmHTX3PIq0kyUKr2qhWtSkmi3h">

This is the scriptlet in my html file:

<? var logos = getTeamLogos() ?>
<? for (i in logos) { ?>
    <input type="image" class="teamLogo" onClick="getTeam('"+logos[i][0]+"');" src="https://drive.google.com/uc?id="+logos[i][1]+"">
<? } ?>

And this is the getTeamLogos function I am calling:

function getTeamLogos(){
    var getLogos = DriveApp.getFolderById('redacted').getFiles();
    var logos = []
    while (getLogos.hasNext()) { 
        var logo = getLogos.next(); 
        var teamAbbrv = logo.getName(); 
        var logoId = logo.getId(); 
        logos.push([teamAbbrv,logoId]) 
        }
    logos.sort()
    console.log(logos)
    return logos 
}

Here's the console.log from the getTeamLogos function:

[ [ 'ANA', '1A8UJAYuKCter4V0gvd6nYP7z8G_QpWzK' ],   
[ 'BAL', '12p5P6dmmHTX3PIq0kyUKr2qhWtSkmi3h' ],   
[ 'BOS', '1AVMrn7E3fOlgFc_slCFPGQjFG2eauAKF' ],   
[ 'CLE', '1yY76xP_axJfbCmEZoSx2nDlILOaoKIBg' ],   
[ 'CWS', '1ZCPbHLQ_iIB8WSQ_sPYELiSw3p23uzc2' ],   
[ 'DET', '1GMmqhGr1eeCfoRgNMqliHFehwTopLVQE' ],   
[ 'HOU', '1iN-78qrvkT_E7K-CCUZbfdZV_o1vokPk' ],   
[ 'KC', '1vd_0mby6wV9qxSA4lvzBNPFi5bLnFsf3' ],   
[ 'MIN', '1HP5gArugPbXBlsCKrtYs0cPmIcff-Uf0' ],   
[ 'NYY', '1VIAYsnGgIKIG9VIIkcOVib446Wh2Ue1D' ],   
[ 'OAK', '1dYECC_EJwc2_e2WGJ_H5W0hvOAmv3w7V' ],   
[ 'SEA', '1jRotoBam7UFoCxpOxfBncdr6-JEcsnhq' ],   
[ 'TB', '10UlOIjit_K7Vmyna85aAztRuXzULnpb_' ],   
[ 'TEX', '1MgZfakotrGTrOotDVCNpehAKlWo7O4wp' ],   
[ 'TOR', '1RwmaPY8o5oPYs_hJCiEvvVe3NEE9Kuth' ] ]

But I keep getting a malformed HTML content error:

Exception: Malformed HTML content: <input type="image" class="teamLogo" onClick="getTeam('"+logos[i][0]+"');" src="https://drive.google.com/uc?id="+logos[i][1]+""> .

I've tried every combination of single quote, double quote, plus sign, ampersand, can't get the syntax quite right.

you can use localstorage: get-data-from-locals

atom06
– atom06

2022-12-02 04:34:42 +00:00
Commented Dec 2, 2022 at 4:34 — atom06
– atom06, Commented Dec 2, 2022 at 4:34

Tanaike · Accepted Answer · 2022-12-02 05:05:49Z

2

I thought that in your HTML, the scriptlets are required to be modified as follows.

From:

<? var logos = getTeamLogos() ?>
<? for (i in logos) { ?>
    <input type="image" class="teamLogo" onClick="getTeam('"+logos[i][0]+"');" src="https://drive.google.com/uc?id="+logos[i][1]+"">
<? } ?>

To:

<? var logos = getTeamLogos() ?>
<? for (i in logos) { ?>
    <input type="image" class="teamLogo" onClick="getTeam('<?= logos[i][0] ?>');" src="https://drive.google.com/uc?id=<?= logos[i][1] ?>">
<? } ?>

The scriptlets are replaced the HTML template with the values of Google Apps Script. Please be careful about this.

Note:

As additional information, in the current stage, when the loop process is used with the HTML template, the process cost will become high. Ref (Author: me) So, in your situation, I thought that the following modification might be able to be used.

HTML side
```
  <?!= values ?>
```

Google Apps Script side

  const html = HtmlService.createTemplateFromFile("index");
  html.values = getTeamLogos().map(([a, b]) => `<input type="image" class="teamLogo" onClick="getTeam('${a}');" src="https://drive.google.com/uc?id=${b}">`).join("");
  const htmlOutput = html.evaluate();
  // You can use htmlOutput to Web Apps, sidebar, dialog, and so on.

Reference:

HTML Service: Templated HTML

answered Dec 2, 2022 at 5:05

Tanaike

203k12 gold badges126 silver badges222 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Richie Travers Over a year ago

Ah, I should have tried that! I thought once I stored the outputs of the getTeamLogos function inside that variable, the scriptlet syntax was no longer necessary/appropriate. And thank you for the modification suggestion - I ran each config three times and it seems my config runs slightly faster (1.7 seconds to 1.3 seconds), maybe because I only have 30 or so images being loaded? But I'm grateful for the education!

Tanaike Over a year ago

@Richie Travers Thank you for replying. I'm glad your issue was resolved. Thank you, too.

Collectives™ on Stack Overflow

Passing variables to Html file in google scripts

1 Answer 1

From:

To:

Note:

Reference:

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

From:

To:

Note:

Reference:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related