Forum Discussion

snapping_turtl3's avatar
snapping_turtl3
New Contributor II
2 years ago
Solved

Transposing HTML table in Email sender Snap

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&macroName=paste-code-macro#HTML-Table-Email-Template-Body

any help would be appreciated

 

  • koryknick's avatar
    koryknick
    2 years ago

    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!

     

4 Replies

  • koryknick's avatar
    koryknick
    Employee
    2 years ago

    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's avatar
      snapping_turtl3
      New Contributor II
      2 years ago

      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:

      <style type="text/css"> table.Snap {background-color:transparent;border-collapse:collapse;width:25%;} table.Snap th,
      table.Snap td {text-align:left;border:1px solid black;padding:2px;} table.Snap th {background-color:AntiqueWhite;}
      </style>

      Thanks for your help!

  • koryknick's avatar
    koryknick
    Employee
    2 years ago

    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's avatar
      snapping_turtl3
      New Contributor II
      2 years ago

      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.