Transactional template designer does not respect handle bars

[thombrink]

Actual Behavior

When creating a transactional template with the designer, code blocks aren't correctly formatted.

It looks like this after formatting:

{{#each user.orderHistory}}
    
    {{/each}}
  <table>
  <tbody><tr>
      <td>You ordered: {{this.item}} on: {{this.date}}</td>
    </tr></tbody>
</table>

Expected Behavior

It should look like this:

<table>
  <tbody>
    {{#each user.orderHistory}}
    <tr>
      <td>You ordered: {{this.item}} on: {{this.date}}</td>
    </tr>
    {{/each}}
  </tbody>
</table>

Steps to reproduce it

Create a code block in the transactional template designer UI and paste the code above.

[gurpreetatwal]

I'm having this same issue as well, I thought I was messing something up. Probably wasted ~2 hours on this. It works correctly if you don't use tables though.

so the following will work:

<ol>
    {{#each items}}
    <li> {{this.text}} {{this.price}}</li>
    {{/each}}
</ol>

but this won't

<table style="width:100%;" cellspacing="5" cellpadding="5" border="0" align="center">
  <tbody>
    {{#each items}}
    <tr>
      <td>{{this.text}}</td>
      <td>{{this.price}}</td>
    </tr>
    {{/each}}
  </tbody>
</table>

I've filed a support ticket regarding this as well

[gurpreetatwal]

So it seems like this an issue with Sendgrid not following the best practices for using Handlebars. See handlebars-lang/handlebars.js#604 (comment) for more info on that. A work around for now is to just put the handlebars code in a comment.

<table>
  <tbody>
    <!-- {{#each items}} -->
    <tr>
      <td>{{this.key}}</td>
      <td>{{this.value}}</td>
    </tr>
    <!-- {{/each}} -->
  </tbody>
</table>

[jpzbkk]

Yeah i just came across this myself, wasted a lot of time. I was able to get it to work correctly when using Pure HTML, not the designer. Using code snippets in the designer I was getting your exact results, but the Code Editor is fine, unfortunately I am not great at HTML so it is not idea. I just copy and pasted the example and removed whatever I didn't need.

[webdev12-v]

The problem is still there today. a year after. Also spent over an hour to narrow down the issue culprit.

[rlightner]

ya this is super annoying. Would love an update from sendgrid on it.

[WhereJuly]

Sendgrid support told they passed the issue to the engineering team. Though with the workaround above, thanks to @gurpreetatwal, this was easy to fix.

[gurpreetatwal]

Not to be cynical, but I doubt it's going to be fixed anytime soon. The issue was "passed to the engineering team" over a year ago. :/

I really wish they would at least make a note of it on the docs so that people don't waste their time.

Oct 8, 2018

Hello,

Thanks for reaching out to SendGrid Support!

We are aware of that and, unfortunately, the each statement doesn't work with tables. Our engineers are trying to implement that for some time now, so it will be available in the future, but for now it doesn't work, not supported by the current Handlebars syntax.

You can try to use that without tables, styling the content to look like tables and it should work.

I'm sorry for the inconvenience that this is creating.

Please let me know if you have any other questions.

Best regards,

Oct 9, 2018

Ah okay, understood. Is there any timeline for when the fix will be available?

In the meantime, the documentation should be updated to note that this does not work correctly. I wasted a good amount of time because I thought I was doing something wrong since nothing the docs told me otherwise. There was an example template available with a table + each. I work at a platform company as well, so I know it's difficult to keep docs up to date, but as a user knowing about the known issues is very useful.

Thanks for the prompt reply!

On that note, would you mind If I pasted your reply (I won't name you, just the body of your reply) in the GitHub issue so that the other dev knows you guys are aware?

Please let me know how to proceed.

Oct 9, 2018

Hello Gurpreet,

Unfortunately I don't have an ETA to offer at this point, and yes, you can go ahead and post it on Github.

Regarding the documentation, I think your feedback is super-relevant, thank you for providing it. If you're willing, we have a feedback form in the SendGrid website app and you have our humble invitation to submit this feedback there.

Let me know if there's anything else I can help you with.

[dashingsuma]

Is this solved . I wasnt facing this some time ago but from 3 - 4 days its been there.