9

I'm using SendGrid online "Design" template, with a module "code".

In their documentation (https://sendgrid.com/docs/ui/sending-email/editor/#code-modules), they say that de code editor does not modify or validate any HTML.

If I write this piece of code inside the code module:

<ul>
{{#each items}}
    <li>test</li>
{{/each}}
</ul>
<table>
<tbody>
{{#each items}}
    <tr>
        <td>Col 1</td>
        <td>Col 2</td>
    </tr>
{{/each}}
</tbody>
</table>

it results in:

<ul>
{{#each items}}
    <li>test</li>
{{/each}}
</ul>
{{#each items}}{{/each}}
<table>
<tbody><tr>
        <td>Col 1</td>
        <td>Col 2</td>
    </tr></tbody>
</table>

We can see that the {{each}} function stays in the right place for the ul, but is remove from inside of the table. Is this a temporary bug? How can I do this simple operation?

Thanks for your help

rekam
  • 1,061
  • 3
  • 13
  • 31

2 Answers2

17

I found a undocumented way to make this works. You will need to comment out the each helper like this:

<table>
<tbody>
<!-- {{#each items}} -->
    <tr>
        <td>Col 1</td>
        <td>Col 2</td>
    </tr>
<!-- {{/each}} -->
</tbody>
</table>
Tan Duong
  • 1,473
  • 2
  • 17
  • 29
2

I get the same issue. Definitely a bug in the Design Editor. My work around was to:

  1. Style the email with the Design Editor.
  2. Export HTML.
  3. Go back and create a new version of the transaction email using the 'Code Editor' and not the 'Design Editor'.
  4. Paste in the previously exported HTML.
  5. Find the table that needs the {{each}} loop and place the functions exactly as you did.
jiminikiz
  • 2,867
  • 1
  • 25
  • 28
Craig Liesinger
  • 21
  • 4
  • 1
    thanks for your reply. Unfortunately, it doesn't fit my needs, since my client have access to the template and wants to edit it himself (and have no knowledge of HTML). Now I'm using custom styled divs to simulate tables, but it's not perfect at all – rekam Jan 03 '19 at 09:06