Grid Templates

Overview

Grid templates are designed to create not only grid tables but also more complex structures that fulfill a broader range of design requirements. Additionally, users can embed the created grid template into other non-grid templates, simplifying updates significantly.

Creating grid templates require basic knowledge of HTML syntax. If you are not comfortable with HTML, it is recommended to use Grids in Tables instead.

How Grid Templates Work

Grid templates use a grid wrapper to define content that will be repeated, once per record, within a defined data set . During the merge process, entries are iterated over, and the specified content area are created repeatedly.

This means it can generate rows by iterating records in dataset, or even repeat a section as needed.

Grid templates require two parts:

1. Grid Wrapper: A grid wrapper is a container that holds the structure to be created repeatedly.

2. Content Area: Within a grid wrapper, a content area is defined to dictate how each section or component should appear within the section.

The following is the basic syntax for the grid template.

          
    {{#each ObjectApiName}}               <-- Opening Grid Wrapper

        {{ObjectApiName-FieldApiName}}    <-- Content Area

    {{/each}}                             <-- Closing Grid Wrapper
          

Let’s analyse each part:

1. {{#each}} ... {{/each}}: This is the grid wrapper which declares that the area between {{#each}} and {{/each}} is for looping. Anything inserted in this area will be repeated from the first to the last record. For example, if an offer has 10 items, it will loop 10 times (once per record).
   You can insert a grid wrapper easily using the Grid Wrapper Helper from the Helpers section on the Bookmarks menu. For detailed instructions, please refer to the following article : Template Helpers.

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

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

How to Create Grid Templates

1. From the Utilities menu, Go to Utilities > Templates > Templates, and click on New Template at the top right.

2. Select desired Object and Channel, and make sure you select Grid in Type. Then, click on Next.

   

3. Enter the details of the grid template.

   

4. Click on Helper > Grid Utilities > Grid Wrapper in the Bookmarks menu to insert Grid Wrapper.

   

5. Replace ReplaceWithGridApiName with the desired grid API.
   You can check the Object Api Names by clicking on the desired grid item in Grid Fields from the Bookmark menu. Grid items are indicated by a table icon()next to their names.

   

6. Enter the content you want to repeat between {{#each}} and {{/each}}.

   

7. Click on Save and Exit to finish.

   

How to Insert Grid Templates

1. From the Utilities menu, Go to Utilities > Templates > Templates, and click on the template you’d like to insert grid templates.

   

2. Move the text cursor to where you’d like to display the grid template, and click on the name of the grid template from the Grid Templates menu in Bookmarks.

3. Click on Save and Exit to finish.

   

Grid Template Examples

Example 1 - Student Contact Confirmation

Input

          
            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.

Example 2 - Student Contact Confirmation with HTML formatting

Input

          
            <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.

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