Handlebars if statement

[DanielMoreno58]

Hi there!

I'm writing a transactional email (with of Sendgrid of course) and I'm having troubles with the if statement support by the Handlebars.

According to the docs of Sendgrid:

https://sendgrid.com/docs/ui/sending-email/using-handlebars/#substitution

And also the docs of Handlebars

https://handlebarsjs.com/

It says that the if statement works like this:

{{#if variable_condition}}
  //write whatever you like
{{/if}}

But when I implement this syntaxis in my transactional email it says that is "The template you provided is invalid.", I don't really know why, and the docs doesn't say nothing more, maybe is a bug or a compability issue, that's why I open this issue for its consideration.

[duncanleung]

Hi @DanielMoreno58 can you share a code snippet from your transactional email?
(You can strip any sensitive information if needed)

It would help to reproduce the issue.

[kylearoberts]

Hi @DanielMoreno58

I am guessing there is something wrong with the v3 payload you provided. Here is an example payload:

{ "personalizations": [ { "to": [ { "email": "[email protected]", "name": "Send To Name" } ], "dynamic_template_data": {json payload} } ], "from": { "email": "[email protected]", "name": "Sender Name" }, "reply_to": { "email": "[email protected]", "name": "Sender Name" }, "template_id": "template ID" }

Often time issues like this are best handled by support, but lets see if we can help you out. Can you share the v3 payload you were using and remove any sensitive information as needed. Also if we can get the template ID we can take a look and see what you have setup.

[apigirl]

@DanielMoreno58 - for future reference, you can file a ticket with our awesome support team by logging in at https://support.sendgrid.com/hc/en-us

[DanielMoreno58]

Okey, what I wanted to say is that the if conditional doesn't work with the handlebars in a transactional email (in the editor online), I cannot shared the code because I don't have the access right now, but I think there is an issue in there, I will try to create a free account and tried to reply the error.

[kylearoberts]

@DanielMoreno58

Let me know if you have any issues with creating an account. I'll do what I can to move things along. I just want to make sure we get the information we need if we do indeed have a bug. Thanks for your effort in helping with this.

[HerohunterAU]

I'm new at this, but have you tried using < p >? It might work instead of the slashes.

[apigirl]

I am going to close this, but please feel free to continue the convo folks!

[bxm156]

@ksigler7

I'm encounter this as well, when doing something like the following:

<table>
<tr><td>Something</td></tr>
{{#if conditional_value }}
<tr><td>Some conditional row</td></tr>
{{/if}}
</table>

I get an error that the template is invalid, when I open the code again for editing, i see the following:

{{#if conditional_value }}
{{/if}}
<table>
<tr><td>Something</td></tr>
<tr><td>Some conditional row</td></tr>
</table>

[kylearoberts]

@bxm156

Sounds like you are running into a known issue with the Drag & Drop Editor option. Even when you use a Code Module you will still have this issue. For now if you want to get around this you will have to use the Code Editor. Sorry for the trouble this causes.

[fabken]

Hi,

I also encounter this error and only want to use sendgrid templates with the design editor.
When will this bug be fixed?

[kylearoberts]

@fabken

Unfortunately, there is no ETA as this fix is going to take a decent amount of work. All I can say is that this is something that is being worked on currently.

[AndrewNyaisonga]

I think this alternative should be clearly documented here handlebars-documentation, so people can clearly see. It's a bit hard to find this workaround.

[Ruud-cb]

@kylearoberts the whole idea of design templates is so that the marketing team can create beautiful e-mails and the dev team just has to insert the handlebars. After going through the pain of substitutions not working anymore (sendgrid/sendgrid-csharp#716), I am now encountering this.

I really need an ETA on this, your next sprint probably starts next week so please plan it, we need this ASAP, this is one of your core features, how come this is not your top priority on the list? It's a frustrating Sunday like this, thanks to SendNothingGrid!

[dssagar93]

I am also facing the same issue and I am really not able to figure out whats the error. Everything on code is pretty fine. HTML renders the page if saved via .html . SendGrid seems to gives this error without mentioning the exact error. I dont have if clause. It's a basic template. Any solution to this?

[danhadzami]

I'm having the same problem here. The Drag and Drop Editor is not working with double curly brackets. It just simply can't save the template. But, if I remove these double curly brackets from the template, it will save.

@apigirl please stop closing the issue since it's not even solved yet. Frustrating!

[Ruud-cb]

What workarounds are you guys using until @apigirl has re-opened and asked their team to fix this? I Experienced the same as daniyaalhadzami, didn't use it that much but was able to get it sometimes to save. IF it saves and the brackets are still there then it will also work.

Still waiting on an ETA. I will just shoot in a support ticket as well, who follows?

[dssagar93]

Sometimes if the template is not being saved, copy the code and open it up in Brackets editor ( Google it if you don't knw abt this) and then paste it over there... reformat the structure by indentation and copy and paste it back into the Sendgrid edit box. It works sometimes like that.

[danhadzami]

What workarounds are you guys using until @apigirl has re-opened and asked their team to fix this? I Experienced the same as daniyaalhadzami, didn't use it that much but was able to get it sometimes to save. IF it saves and the brackets are still there then it will also work.

Still waiting on an ETA. I will just shoot in a support ticket as well, who follows?

I had the support ticket. It was unhelpful.

[Ruud-cb]

Same, supports provides no solution or ETA. I hope via the development community we can push is further ahead because obviously this is really annoying, sendgrid seems te have a culture of ignoring issues until they hope to be disappeared. Perhaps I should start looking for alternatives...

[igorshtopor]

Any updates on this?

[khose]

Trying to keep this thread alive before @apigirl closes it again.

[celwell]

I've recommended that we use SendGrid at the past few startups I've been at, but this issue tipped me over the edge: unfortunately, I will no longer be recommending SendGrid. Ever since Twilio acquired them, it's gone downhill fast.

[ghost]

Has any progress been made on this? At the moment, we're creating and having to manage extra templates just to workaround not being able to conditionally remove elements from an email template - very poor DX!

[Pete214]

I just had what I think was the same problem as discussed above with the drag and drop editor. But when I took the underscore out of the merge tag it worked; i.e. {{{subs_date}}} didn't worked but {{{subsdate}}} did. I hope that helps.

[mfethney]

Over a year and this still isn't fixed? That's poor.

Thanks @Pete214 unfortunately removing the underscore did not work for me.

[mzhukovs]

@apigirl @kylearoberts FYI this is a legitimate bug, and not only that, it is a regression. I had a template that was working fine previously with conditionals in it in the scenario that
@bxm156 described, where I was inserting a different <td> element into a <tr> in a <table> depending on the value of a variable being true or false. I had to update that template just now and upon opening it, it stripped out the conditionals from their original spot. I had always worked with the code editor, never used the alternative method others described.

Anyway, I got around the issue by applying the conditional to the ENTIRE table element, with the only difference being the <td> I needed to swap out, so a lot of duplicate code but at least I got it working this way, fyi @bxm156 .

In short, there is an issue with the conditionals being applied to children of table elements.

[cuddeford]

We are also facing this problem, despite the clearly documented supported #if statement. Our variables are camelcase so it's not caused by underscores.

Edit:
What's worse is that upon saving, the UI leads us to believe the template was saved successfully. We closed the tab after spending a long time creating a template, only to find that it had not saved. Hours of work lost.

The only way to know that there is a problem is to open the developer tools and check the network tab. There we can see that the patch request fails with "The template you provided is invalid." as the response. This is indeed terrible UX.

At present we are completely unable to create conditional emails, which is a massive dealbreaker. There is no way we are going to create a new template for each condition.

Edit again:
Turns out it was actually caused by this array index notation: {{charges.0.last4}}. Changing it to {{charges.[0].last4}} fixed it although the first is valid Handlebars if the elements are objects, at least according to this link.

[AGDevX]

I ran into the same issue as described on this thread, but I was able to get it to work through some tinkering.

Here's my test data:
{ "userFirstName": "Kevin", "someLink": "https://www.google.com/" }

Here's my Text Module content:
`
{{#if @root.userFirstName}}
Hello {{@root.userFirstName}},
{{else}}
Hello,
{{/if}}

Test.

{{@root.someLink}}
`

And if it's helpful, here's the Text Module code:
<div style="font-family: inherit; text-align: inherit">{{#if @root.userFirstName}}</div>
<div style="font-family: inherit; text-align: inherit">Hello {{@root.userFirstName}},</div>
<div style="font-family: inherit; text-align: inherit">{{else}}</div>
<div style="font-family: inherit; text-align: inherit">Hello,</div>
<div style="font-family: inherit; text-align: inherit">{{/if}}</div>
<div style="font-family: inherit; text-align: inherit"><br></div>
<div style="font-family: inherit; text-align: inherit">Test.</div>
<div style="font-family: inherit; text-align: inherit"><br></div>
<div style="font-family: inherit; text-align: inherit">{{@root.someLink}}</div>

Viewing that in the Preview panel shows it working how I expected. It also works when I send an email.

While messing around I kept saving and sometimes SendGrid said the template saved correctly, but it failed to send the test email even when it said successfully sent. It only sent the email once I got everything exactly right. When I did get the notification that my handlebars code was invalid it didn't tell me why which is super unhelpful.

I'm just getting into using SendGrid, but so far my experience hasn't been too positive. Getting everything set up to use their API was straightforward, but the support I'm seeing on this thread is lackluster and UI issues (like the unhelpful "invalid" message and not being able to copy/paste in a Text Module) detract from the overall quality of this service.

I hope this helps.

Edit: typos

[kdenz]

Seems like some text formatting issues are causing the problem. When I copied the text block to my macbook's notepad app and pasted it back again with cmd + shift + v (pasting without preserving formatting), it works.