How to have Binary File attachment AND html body text

[n8nnoob]

Describe the problem/error/question

I’m trying to create a workflow that captures responses from a multi page survey. The responses then get calculated and turned into a Pie Chart which then becomes an Email attachment. (Up to this point, it works), Then want to replay the responses in the email body as a HTML table.

The error I’m getting

It sends an Email with an attachment from the workflow, but there’s nothing in the Body

Please share your workflow

Does anyone have any suggestions as to how I replay the the responses back to the respondent in the email body?

Thanks!

[mohamed3nan]

Hi @n8nnoob

@n8nnoob

It sends an Email with an attachment from the workflow, but there’s nothing in the Body

The screenshot indicates that {{ $json.table }} is undefined. Are you sure about that? Could you please share what the JSON tab looks like?

[Franz]

I would like to suggest the following changes:
For the Code Node, it should only be executed after the Red Node. If not adjusted this way, the Code Node would run after each step in the form process, even if only the second or third page has been completed and not all values are yet available. This would lead to the creation of four separate HTML documents instead of just one.
Additionally, a Merge Node is needed before the Outlook Node. Without this, the Outlook Node would execute twice – once with the Pie Chart and once with the HTML document. If both are needed, it’s better to combine them using a Merge Node.

[n8nnoob]

@mohamed3nan

This is what was from the HTML output, hope that helps.

[mohamed3nan]

Hi @n8nnoob, I suggest following @Franz’s recommendations, as the screenshot shows you’re already experiencing the issues he mentioned—namely, the four HTML items along with the merge node…

[n8nnoob]

Hi @Franz ,

Thanks for your input, I tried to do what you have said, but it hasn’t been successful yet

I have made the code node only execute after red, and I have also added a Merge node before outlook.

It still gives me an error saying no binary file exists. The output does Send me an email, but it is just the graph image sent as an attachment, and has no text in the email body.

Is the Merge node supposed to be in append? or another option?

My goal was to have the table output in the email body.

Do you have any suggestions?

[mohamed3nan]

@n8nnoob

Is the Merge node supposed to be in append? or another option?

I think “Combine”

[n8nnoob]

Hi @mohamed3nan

It appears that the combine all possible combinations has worked!

This is what the output looks like though,

Am I doing something wrong with my Outlook Node?

I was expecting it to convert the HTML into a table with the responses.

[mohamed3nan]

@n8nnoob

I was expecting it to convert the HTML into a table with the responses.

I think you need to set “Message Type” as well

[n8nnoob]

@mohamed3nan

Wow that that was silly that I missed that

Thanks!

Not sure if you can help me with this final one but:

Is there a way to make the columns in the html table same width?

I was trying to google how to do it, trouble figuring out which n8n options to use:

[mohamed3nan]

@n8nnoob

Is there a way to make the columns in the html table same width?

Yes, you can go with something like this

Table Attributes:

style="table-layout: fixed; width: 100%; border: 1px solid #ccc;"

Header Attributes:

style="width: 25%;"

Cell Attributes:

style="width: 25%;"

You can ask any AI to assist you to write these styles for you

[n8nnoob]

@mohamed3nan

Thanks Mohamed, I wasn’t sure I tried to use the AI Transform tool, and it wasn’t being very helpful.

I did try what you said and i don’t believe it changed the table

Did I do something wrong?

[mohamed3nan]

Maybe the styling does not render here, send a test email

[n8nnoob]

@mohamed3nan

I executed the test workflow from the beginning, filled out the survey, and it sent an email, received the attachment as well as the table, but the style of the table seems to remain different column widths

Above is a test email I just did.

Below is the complete current workflow.

Any Ideas?

[mohamed3nan]

Honestly, I’m not sure why the table style isn’t applied correctly.

Here’s a workaround: use the “Generate HTML template” option in the HTML node:

<div style='width:100%'>
  {{ $json.html.replace('<table', '<table style="width:100%; table-layout:fixed; border-collapse:collapse;"').replace('<th', '<th style="width:25%; text-align:center; padding:10px;"').replace('<td', '<td style="text-align:center; padding:10px;"') }}
</div>

Then, in the Outlook node, simply use {{ $json.html }}.

[n8nnoob]

@mohamed3nan

I really appreciate your help.

Unfortunately didn’t work still.

I even updated to latest stable version of n8n.

[mohamed3nan]

Sorry, there was a mistake.
Could you please try this?

[n8nnoob]

@mohamed3nan

I assume the only change was in the HTML node right?

I replaced it with what you had, and still same issue being undefined

I’m pretty sure I updated it all to be the same

[mohamed3nan]

oh, sorry again, here is the html node

[n8nnoob]

Thanks @mohamed3nan, you patient legend!

haha.

It works! Thanks so much!

I’m not too sure how I learn from this for future, as I also don’t understand why the previous solutions didn’t work. Might just save these to reference haha.

Thanks again!