Loops

Wattyo Composer offers a powerful and flexible Loop feature that allows you to iterate over collection of records.

Suppose you want to list all the contacts related to the root record and show the contact information for each of them. In this case you will need to use the loop feature.

Loop definition
When you want to define a loop you need to add the data-collection and data-loopname attributes to any html tag.

For instance

<ul data-collection="Contacts" data-loopname="myLoop">
....
</ul>

<table data-collection="Contacts" data-loopname="mySecondLoop">
<tr><td>My Cell</td></tr>
</table>

This will make the engine repeat the content of the Loop tag for each record in the collection and render the it with the information from each iteration data.

data-loopname

The data-loopname must be a unique identifier for the whole template. Repeating it could lead to unexpected behaviours. This loopname is used for two purposes:

• Internal logic
• To reference a parent loop on nested loops.

data-collection

The data-collection attribute must refer to an existing relationship or collection. This can take two different type of values: Relationships or Loop collections.

You can specify a relationship as the collection, i.e: Contacts, wattyo__Child_Itemsr, etc. The relationship path must be relative to the root record. It can be a direct relationship on the Root Record (i.e. Contacts) or a Traversed Relationship (i.e. Account.wattyoInvoices__r).

In case you are working with nested loops, the syntax is different, as you should refer to the parent collection as the parent LoopName.items.

For example:

<ul data-collection="Contacts" data-loopname="MainLoop">
    <li>
         {{Name}}
         <ul data-collection="wattyo__Invoices__r" data-loopname="Invoices">
            <li>{{wattyo__Amount__c}}</li>
         </ul>
    <li>
<ul>

//this would render

<ul>
  <li>
     Contact 1
     <ul>
        <li>Invoice 1 Amount</li>
        <li>Invoice 2 Amount</li>
     </ul>
  </li>
  <li>
     Contact 2
     <ul>
        <li>Invoice 3 Amount</li>
     </ul>
  </li>
</ul>

data-groupby

You can set a group by clause to group the collection items and iterate over the the groups and then over the items.

When using groups the Loop with the group by clause will return a collection with the First item of each group. So for instance, y you are grouping the following elements by name:

Contacts:
- Jon Snow
- Rich Snow
- Ned Stark
- Arya Stark

Group by: LastName

Returns:
- Jon Snow
- Ned Stark

So it’s important to keep in mind that if you access a field not included in the group by Clause, it will return the value for the first record. In other words, when using grouped loops you should only refer to the fields used in the group by clause.

Additionally, if you want to iterate over each group items, you must use the {{CollectionName.items}} syntax. Note that the .items is the way to reference the items of each of the groups.

<ul data-collection="Contacts" data-groupby="LastName" data-loopname="MainLoop">
    <li>
         {{LastName}}
         <ul data-collection="MainLoop.items" data-loopname="contacts">
            <li>{{FirstName}}</li>
         </ul>
    <li>
<ul>

//this would render

<ul>
  <li>
     Snow
     <ul>
        <li>Jon</li>
        <li>Rich</li>
     </ul>
  </li>
  <li>
     Stark
     <ul>
        <li>Ned</li>
        </li>Arya</li>
     </ul>
  </li>
</ul>

data-filter

You can specify a valid SOQL filter for your collection. For instance:

• Name != null
• wattyoTypec == ‘Account’ AND CreatedDate > TODAY

data-orderby

You can set a valid Order By SOQL clause which will order the items returned by the collection.

For instance:

• NAME
• Name ASC
• Name Asc, LastName Desc