Google apps script: include script tag within html list

Issue

I have a Google Sheet and a bounded script that automates sending a daily email with a dashboard, based on data from the spreadsheet. Part of this dashboard is a bullet point list ul li in my html. Now, one of this bullet point li is optional, sometimes I have something to write on this bullet point, sometimes not. I’m trying to insert a script tag in my html file so that, whenever this li is empty in my spreadsheet, the html file does not include it and switch to the next one (because for now, when this bullet point is empty, I can still see the line break with the empty bullet point in my dashboard email, which does not look great).

I tried many different options to include an "if" clause within the tag but I have been unsuccessful so far.

So here is my piece of html:

      <ul>
      <li><?= sub11 ?></li>
      <li><?= sub12 ?></li>
      <script>
        if (sub14 !='') {
          <li><?= sub14 ?></li>
        } 
      </script>
      <li><?= sub13 ?></li>
      </ul>

    <br>

The sub11, sub12, sub13, sub14 are each bullet point, i.e. variables linked to a specific cell of my spreadsheet where I have the dynamic text for that specific bullet point. sub14 is the one that is optional and I’m trying to code something like: if sub14 is empty, then switch to sub13 and do not include a specific bullet point for sub14.

Any help would be much appreciated. This is definitely not crucial for my dashboard, but I’m trying to make progresses on my low coding skills, so would be eager to understand that one.

Thanks!

Solution

Scriplets

html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
     <ul id ="list">
      <li><?= sub11 ?></li>
      <li><?= sub12 ?></li>
      <? let n = sub14  ?>
      <? if ( n ) { ?>
         <li><?= sub14 ?></li>
      <? } ?>
      <li><?= sub13 ?></li>
    </ul>
  </body>
</html>

GS:

function  lfunko() {
  let t = HtmlService.createTemplateFromFile("ah2");
  t.sub11 = "Line 11";
  t.sub12 = "Line 12";
  t.sub13 = "Line 13";
  t.sub14 = "Line 14";
  SpreadsheetApp.getUi().showModelessDialog(t.evaluate(),"Dialog Test");
}

Templated HTML

Answered By – Cooper

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.