Home > Mobile >  Passing HTML to HTML template
Passing HTML to HTML template

Time:09-07

I know that if we want to pass variables from .gs to the HTML template, we do this:

On .html (using <?= someVariable ?>:

<div>
  <table id="summary">
    <thead>
      <th>Qty</th>
      <th>Item</th>
      <th>Price</th>
      <th>Subtotal</th>
    </thead>
    <tbody>
      // variable value goes into here
      <?= items ?>

    </tbody>
    <tfoot>
      <tr>
        <td></td>
        <td></td>
        <td>Total: </td>
             // and into here
        <td><b><?= totalCost ?></b></td>

      </tr>
    </tfoot>
  </table>
</div>

And on .gs :

var items = holdSS.getRange(i,5).getValue()
var totalCost = holdSS.getRange(i,6).getValue()   

var html = HtmlService.createTemplateFromFile("requestorEmail.html")
// matching the <?= ?> in HTML template
html.items = items
html.totalCost = totalCost

var htmlInString = html.evaluate().getContent()

The size of variable items varies, so I decided to leave it in HTML form, then pass it to the email template. So,

var items = "<tr>
                <td>1</td>
                <td>3M 500 Scotch Utility Trans. Tape 12mm x 25m</td>
                <td>0.98</td>
                <td>0.98</td>
            </tr>
             <tr>
                <td>2</td>
                <td>3M 558 Bulletin Board - Mocha</td>
                <td>19.9</td>
                <td>39.80</td>
            </tr>
             <tr>
                <td>1</td>
                <td>3M 560RP Post It Marker Rainbow 75mm x 12.5mm 4pad/pkt</td>
                <td>3.82</td>
                <td>3.82</td>
            </tr>"

Resulting in (expected, at least) :

<div>
  <table id="summary">
    <thead>
      <th>Qty</th>
      <th>Item</th>
      <th>Price</th>
      <th>Subtotal</th>
    </thead>
    <tbody>
      // replacing <?= items ?>
      <tr>
         <td>1</td>
         <td>3M 500 Scotch Utility Trans. Tape 12mm x 25m</td>
         <td>0.98</td>
         <td>0.98</td>
     </tr>
      <tr>
         <td>2</td>
         <td>3M 558 Bulletin Board - Mocha</td>
         <td>19.9</td>
         <td>39.80</td>
     </tr>
      <tr>
         <td>1</td>
         <td>3M 560RP Post It Marker Rainbow 75mm x 12.5mm 4pad/pkt</td>
         <td>3.82</td>
         <td>3.82</td>
     </tr>

    </tbody>
    <tfoot>
      <tr>
        <td></td>
        <td></td>
        <td>Total: </td>
              // and here
        <td><b><?= totalCost ?></b></td>

      </tr>
    </tfoot>
  </table>
</div>

However, console.log(html.evaluate().getContent()) gives :

  <tbody>
      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;3M 500 Scotch Utility Trans. Tape 12mm x 25m&lt;/td&gt;&lt;td&gt;0.98&lt;/td&gt;&lt;td&gt;0.98&lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3M 558 Bulletin Board - Mocha&lt;/td&gt;&lt;td&gt;19.9&lt;/td&gt;&lt;td&gt;39.80&lt;/td&gt;&lt;/tr&gt; 
      &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;3M 560RP Post It Marker Rainbow 75mm x 12.5mm 4pad/pkt&lt;/td&gt;&lt;td&gt;3.82&lt;/td&gt;&lt;td&gt;3.82&lt;/td&gt;&lt;/tr&gt;        
  </tbody>

where all the < and > in the HTML tags are escaped. I have read some threads in which they unescape the HTML entities using a textarea element but I also noted I can't execute <script> tags in email clients? What should I do in this case?

CodePudding user response:

When I saw your script, it seems that HTML is put to the template HTML using <?= ... ?> of the printing scriptlets. In this case, such a result in your question is obtained.

In order to put the value as the HTML tag, please use the force-printing scriptlets like <?!= ... ?>. So, please modify it as follows.

From:

<?= items ?>

To:

<?!= items ?>
  • And, about <?= totalCost ?>, if you want to put the HTML tag, please modify this like <?!= totalCost ?>.

Reference:

  • Related