Skip to main content
Skip table of contents

Grid Templates

Grids are a powerful template type that let you create tables or repetitive content based on a group of records.

Creating grid templates require basic knowledge of HTML syntax.

What are Grid Templates

A grid is a template type used to display multiple records in an organised format. You can think on grids like tables that display multiple records of the same data, where each record is a row in the table.

When used in conjunction with HTML, the Grids become even more powerful and useful, as it allows you to seamlessly incorporate dynamic data enhancing the visual presentation of your templates.

How Grids Work

The following is the basic syntax for the grids.

CODE
          
            {{#each ObjectApiName}} 

                {{ObjectApiName-FieldApiName}} 

            {{/each}}
          

Let’s analyse each part:

  1. {{#each}} ... {{/each}}: This declares that this area is for looping. Anything inserted in this area will be repeated from the first value to the last value. For example, if an offer has 10 items, it will loop 10 times (once per record).

  2. ObjectApiName: This is the API name of the object that you want to iterate though.

  3. FieldBookmark: This is the grid field or fields that will be inserted in the template by iterating though each record on the Object defined in the loop. These field should be placed between {{#each}} and {{/each}}.

Some Grids Examples

Template 1 - This example is a template for a Student Contact Confirmation.

Input
CODE
          
            Hi, Student!
            We're sending this email to confirm your emergency contact.
            {{#each student_contacts}}

            Name : {{student_contacts-name}}
            Mobile : {{student_contacts-mobile}}

            {{/each}}
            Please let us know, if there's anything incorrect.
          
        
Output

Hi, Student!
We’re sending this email to confirm your emergency contact.

Name : Jone Doe
Mobile : 0412123456

Name : Jane Doe
Mobile : 0498987654

Please let us know, if there’s anything incorrect.


Template 2 - This example represents Template 1 in HTML

Input
CODE
          
            <div>
              <p>Hi, Student!</p>
              <p>We're sending this email to confirm your emergency contact.</p>
              <table>
                <thead>
                  <tr>
                    <td>Name</td>
                    <td>Mobile</td>
                  </tr>
                </thead>
                <tbody>
                  {{#each student_contacts}}
                  <tr>
                    <td>{{student_contacts-name}}</td>
                    <td>{{student_contacts-mobile}}</td>
                  </tr>
                  {{/each}}
                </tbody>
              </table>
              <p>Please let us know if there's anything incorrect.</p>
            </div>
          
        
Output

Hi, Student!

We’re sending this email to confirm your emergency contact.

Name

Mobile

John Doe

0412123456

Jane Doe

0498987654

Please let us know, if there's anything incorrect.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.