How do I display checklists or tables in emails?

Modified on Thu, 4 Dec at 11:32 AM

How do I display checklists or tables in emails?

This guide covers display checklists or tables in emails.

On this page

Jump to any section using the links below

Hubhus supports multiple ways to display checklist submissions inside emails.
You can use a built-in visual summary, render a custom HTML table, or loop through all submissions manually.

This article explains all three methods.


1. The easiest method: <hh-checklist.table-summary>

Hubhus includes a built-in component that automatically renders a checklist using the same layout you see internally:

<hh-checklist.table-summary checklist="job-completed" />

This automatically displays:

  • Checklist title

  • Filled-out date + user

  • All fields in the correct order

  • Images (before/after photos etc.)

  • Text fields

  • Yes/No fields

  • Multi-select fields

  • Technician notes

  • File uploads

  • Styling optimized for email delivery

When to use this method

Use it when you want:

✔ Complete checklist
✔ No manual table formatting
✔ A professional layout that mirrors Hubhus UI
✔ Automatic image rendering

This is the recommended approach for customer reports, work confirmations, installation summaries, and service documentation.


2. Displaying checklist data using placeholders

If you want a custom layout — or only specific fields — use checklist placeholders.

Placeholder options:

@checklistSubmissions[checklist-slug] @checklistSubmissionDatetime[checklist-slug] @checklistSubmissionUsername[checklist-slug] @checklistValue[checklist-slug, field-slug] @foreach_checklistSubmissions(checklist-slug) ... @endforeach_checklistSubmissions

Example with English slugs:

Total submissions: @checklistSubmissions[job-completed] @foreach_checklistSubmissions(job-completed){ Submitted at: @checklistSubmissionDatetime[job-completed] Technician: @checklistSubmissionUsername[job-completed] Final cleaning: @checklistValue[job-completed,final-cleaning] Walkthrough: @checklistValue[job-completed,customer-walkthrough] Matches description: @checklistValue[job-completed,matches-description] Notes: @checklistValue[job-completed,technician-notes] }@endforeach_checklistSubmissions

3. Displaying the checklist as a proper HTML table

For structured outputs, you can use a standard HTML table:

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse: collapse; width: 100%;"> <tr> <th align="left">Field</th> <th align="left">Value</th> </tr> @foreach_checklistSubmissions(job-completed){ <tr> <td>Final cleaning</td> <td>@checklistValue[job-completed,final-cleaning]</td> </tr> <tr> <td>Customer walkthrough</td> <td>@checklistValue[job-completed,customer-walkthrough]</td> </tr> <tr> <td>Matches description</td> <td>@checklistValue[job-completed,matches-description]</td> </tr> <tr> <td>Technician notes</td> <td>@checklistValue[job-completed,technician-notes]</td> </tr> }@endforeach_checklistSubmissions </table>

When to use this method

Use HTML tables when you need:

✔ full control over layout
✔ custom labels
✔ conditional formatting
✔ only a subset of the checklist fields


4. Showing only the latest submission

Hubhus automatically returns the most recent submission when using direct value placeholders:

Latest Job Completed Submission Date: @checklistSubmissionDatetime[job-completed] User: @checklistSubmissionUsername[job-completed] Final cleaning: @checklistValue[job-completed,final-cleaning] Walkthrough: @checklistValue[job-completed,customer-walkthrough] Notes: @checklistValue[job-completed,technician-notes]

5. Troubleshooting

Checklist appears empty

Check:

  • Wrong checklist slug

  • Wrong field slug

  • Checklist not submitted yet

  • Field optional and not filled

Loop prints nothing

@foreach_checklistSubmissions returns nothing if:

  • Zero submissions exist

  • Wrong checklist slug

Images not showing?

Images only appear when using:
<hh-checklist.table-summary />
Placeholders do not render images unless manually built.


SUMMARY

You have three ways to show checklists in Hubhus emails:

1. <hh-checklist.table-summary> (recommended)

Best visual layout, supports images, fastest setup.

2. Placeholder-based output

For custom messaging and selective fields.

3. Manual HTML table

Full control over appearance and formatting.

? Common searches

email setup • send email • email template • automated email

? Also known as

message • notification • mail

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article