Want to include a data-grid (your in-form table) directly in your email notifications? By default, the data-grid component doesn't automatically appear in emails, but we have an easy workaround for you.
This guide will walk you through using a "helper" field to convert your grid into an email-friendly table.
Step 1: Add Your Data-Grid
First, drag a Data-Grid component into your form just as you normally would.
Click on the data-grid to edit it, then go to the Data tab. Make a note of its Property Name (this is its unique ID, sometimes called the API key). For this guide, we'll assume ours is named myDataGrid.
Step 2: Add a Hidden "Helper" Field
Next, we'll add a field to do the behind-the-scenes work.
Drag a Hidden component onto your form. You can find this under the "Data" components.
This field won't be seen by your users. We'll use it to automatically translate your data-grid into a table format that emails can understand.
Step 3: Add the "Translator" Code
Now, we'll give our helper field its instructions.
Click on your new Hidden component to edit it.
Go to the Data tab.
Find the Calculated Value and copy/paste the following code snippet into the box
value = instance.root.getComponent('myDataGrid').getValueAsString(data.myDataGrid, {email: true})Important: You must change 'myDataGrid' in that code to match the Property Name you noted in Step 1. For example, if your data-grid's property name is supplierList, your code would look like this:
value = instance.root.getComponent('supplierList').getValueAsString(data.supplierList, {email: true})
This code simply tells the hidden field, "Go find the data-grid, copy its data, and format it as an email-friendly table."
Step 4: Add the Helper Field to Your Email
Now, let's tell your email template to show the results from our new helper field.
Go to the Settings > Emails tab in your form builder.
In your email template editor, click where you want your table to appear.
Add the dynamic field for your Hidden component. (If you didn't rename it, it will likely be
{{ data.hidden }}).
Step 5: Add the "Magic" Brackets
This is the final and most important step! By default, Team Forms shows dynamic fields as plain text. We need to tell it to show this data as an HTML table.
In the email editor, click the "Code View" button in the top right corner of the editor.
Find your hidden field tag, which will look like this:
{{ data.hidden }}All you need to do is add one extra set of curly brackets on each side, so it looks like this:
{{{ data.hidden }}}
The standard {{ }} tells the email to "show this as plain text." The "magic" {{{ }}} tells the email, "This is HTML code—please render it!"
That's it! Save your form. Now, when the form is submitted, your email notification will include a neatly formatted table of all the data-grid results.