SnapLogic - Integration Nation

snapping_turtl3 · ‎01-20-2024

Hi All

Is there a way to transpose a HTML table in Email sender Snap? I am using a mapper Snap to pass key,value pairs to a Email sender snap and put them as a table in the email body. I have tried the sample code provided in below URL, however the table content is quite lengthy so it does not look good.

https://docs-snaplogic.atlassian.net/wiki/spaces/SD/pages/1438208/Email+Sender?desktop=true&macroNam...

any help would be appreciated

koryknick · ‎01-30-2024

@snapping_turtl3 - try this:

Change the "Email type" property to "HTML text"
Switch the Template Body to enable expression (depress the equals sign) and use the following Template Body:

'<!DOCTYPE html>
<html>
<head>
<title>Email Snap HTML Table</title>
<style type="text/css"> table.Snap {background-color:transparent;border-collapse:collapse;width:100%;} table.Snap th,
table.Snap td {text-align:center;border:1px solid black;padding:5px;} table.Snap th {background-color:AntiqueWhite;}
</style>
</head>
<body>
<p>Dear SnapLogic Users:</p>
<p>This is a sample Snap email with HTML Table email type.</p>
<table class="Snap">
' + $.entries().map(x=> '<tr><th>' + x[0] + '</th><td>' + x[1] + '</td></tr>').join('\n') + '
</table>
<p></p>
<p>Regards,</p>
<p>SnapLogic Staff</p>
</body>
</html>
'

Make sure you keep the begin and end quote character since most of this is a static string. The only real difference here is the line that builds the HTML Table data explicitly rather than relying on the internal engine to do it.

' + $.entries().map(x=> '<tr><th>' + x[0] + '</th><td>' + x[1] + '</td></tr>').join('\n') + '

Basically, this is using the Object.entries() method to get an array of [key,value] pairs from the input document. Then the Array.map() method to create one static string of "<tr><th>[key]</th><td>[value]</td></tr>" for each key/value pair. Finally the Array.join() method is used to reduce the whole array to a single string with all table rows.

Hope this helps!

View solution in original post

koryknick · ‎01-22-2024

@snapping_turtl3 - Please download the attached ZIP file, decompress it, and import it as a new pipeline to your org. I copied the HTML Table Email Template Body directly from the documentation, and can verify it is working as expected. Here is a sample of the email generated by this pipeline.

A few important Email Sender snap properties to ensure this is working correctly:

Email type - must be set to HTML table in order to make use of the built-in table formatting
Template body
- must contain the "style" CSS that describes the table.Snap
- leave <table class="Snap"></table> tags empty - when the documents are passed in, the snap will auto-generate the correct HTML markup to place the data in the table
Table-data path - you can leave this as "$" to allow the snap to create your table data from the entire input document, as I have in this example; or you can give it a field name that contains and array to process
Batch size - this property allows multiple emails to be sent in the event there is a large number of documents passed into the snap to prevent overly-large emails from being sent

Hope this helps!

snapping_turtl3 · ‎01-30-2024

@koryknick Thanks for the response. However, What I require is to transpose the table. i.e. Columns should be listed on the left hand side veristically. I am trying to print the key, value pairs from the previous mapper snap, so it would have two columns, the first column having the keys listed veristically and the second column containing the corresponding values.

koryknick · ‎01-30-2024

@snapping_turtl3 - try this:

Change the "Email type" property to "HTML text"
Switch the Template Body to enable expression (depress the equals sign) and use the following Template Body:

'<!DOCTYPE html>
<html>
<head>
<title>Email Snap HTML Table</title>
<style type="text/css"> table.Snap {background-color:transparent;border-collapse:collapse;width:100%;} table.Snap th,
table.Snap td {text-align:center;border:1px solid black;padding:5px;} table.Snap th {background-color:AntiqueWhite;}
</style>
</head>
<body>
<p>Dear SnapLogic Users:</p>
<p>This is a sample Snap email with HTML Table email type.</p>
<table class="Snap">
' + $.entries().map(x=> '<tr><th>' + x[0] + '</th><td>' + x[1] + '</td></tr>').join('\n') + '
</table>
<p></p>
<p>Regards,</p>
<p>SnapLogic Staff</p>
</body>
</html>
'

Make sure you keep the begin and end quote character since most of this is a static string. The only real difference here is the line that builds the HTML Table data explicitly rather than relying on the internal engine to do it.

' + $.entries().map(x=> '<tr><th>' + x[0] + '</th><td>' + x[1] + '</td></tr>').join('\n') + '

Basically, this is using the Object.entries() method to get an array of [key,value] pairs from the input document. Then the Array.map() method to create one static string of "<tr><th>[key]</th><td>[value]</td></tr>" for each key/value pair. Finally the Array.join() method is used to reduce the whole array to a single string with all table rows.

Hope this helps!

snapping_turtl3 · ‎02-04-2024

@koryknick This is exactly what I was looking for. It works just as I expected. I have done a couple of changes to the CSS so that it looks better on a vertical table:

Thanks for your help!

SnapLogic - Integration Nation

Transposing HTML table in Email sender Snap