Problem:
Templated emails coming from SendGrid were blocked due to a temporary reputation issue so the customer has to resubmit the data through the form to get a new copy of the document generated via email.
Solution:
Create a template our frontend engine can leverage, create a method for management users to select from a list of stored submission entries, and organize the data visually the same way the templated emails appear.
Step 1: Create a template
We don’t actually need to create the template, as we already have it. SendGrid uses it.
HTML View
<table border="1" style="border-collapse:collapse; cellpadding:2; cellspacing:1; text-align:center; width:100%; data-type:columns;">
<thead>
<tr>
<th>Date</th>
<th>Job Name</th>
<th>Job Numbers</th>
<th>Hours</th>
<th>Overtime</th>
</tr>
</thead>
<tbody>
{{#each timeEntries}
{{#if this.jobName}}
<tr>
<td>{{this.date}}</td>
<td>{{this.jobName}}</td>
<td>{{this.jobNum}}</td>
<td>{{this.hours}}</td>
<td>{{this.overtime}}</td>
</tr>
{{/if}}
{{/each}}
<tr style="background: rgba(100, 100, 100, 0.5)">
<td>Totals</td>
<td></td>
<td></td>
<td>Total Hours: </td>
<td>OT Hours: </td>
</tr>
<tr>
<td>Entries:</td>
<td>{{@root.punchCount}}</td>
<td></td>
<td>{{@root.hoursCount}}</td>
<td>{{@root.overtimeCount}}</td>
</tr>
</tbody>
</table>Compiled View
Because AppSmith (frontend) uses it’s own JIT (just-in-time) compiler, we’ll have to write a function to iterate through the fields.
function jobTable (timeEntries) {
let table= ''
for (let i = 0; i < timeEntries.length; i++) {
const row = `<tr><td>${moment(timeEntries[i].date).format('MM-DD-YYYY')}</td>` +
`<td>${timeEntries[i].jobName}</td>`+
`<td>${timeEntries[i].jobNum}</td>`+
`<td>${timeEntries[i].hours}</td>`+
`<td>${timeEntries[i].overtime}</td></tr>`
table = table + row
}
return table
}Having already pasted in the table above and renamed a few things to match the new scope provided by AppSmith, we can insert this function into the table where we want our list items (at the top of the body)
...
</thead>
<tbody>
{{iterator.jobTable(List1.selectedItem.timeEntries)}}
<tr style="background: rgba(100, 100, 100, 0.5)">
...Because our return statement is returning HTML with templated values, we don’t need to modify those values based on the scope of the object that’s displaying them. It’s just regular HTML. (This took me a while to figure out.)
our end result looks like this:
