The "collection" parameter

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

Do note the "collection" value of the render parameter is completely different than the collection parameter.

One of the coolest things about using Liquid is that you can use custom logic to render the output of your modules and bypass the layout altogether.

Using Liquid you can make available a module's output in a collection and process it however you want directly in the page context without using a layout.

To see how this works let's use the same webapp module we rendered using render="collection" in the previous article .

To make the contents of the module available in a collection we need to add the collection parameter like this:

<!DOCTYPE html>
<html>
    <head>
        <title>Collection demo</title>
        <meta name="description" content="" />
    </head>
    <body>
        {module_webapps collection="myWebapp" render="collection" template="/layouts/custom/car_collection.tpl" id="35209" filter="all"}
    </body>
</html>

The collection name - myWebapp - is the name of the object containing the module's properties, there is no fixed naming convention, your collections can be named however you need.

If you refresh the page now you will get the webapp listing rendered using the car_collection.tpl layout. Behind the scenes though, the module's data is also placed in the myWebapp collection.

Let's edit the page again and dump the content of the collection below the module.

<!DOCTYPE html> <html> <head> <title>Untitled
    page</title> <meta name="description" content="" /> </head> <body>
    {module_webapps render="collection" collection="myWebapp" template="/layouts/custom/car_collection.tpl"
    id="35209" filter="all"} <pre>{{myWebapp | json}}</pre>
    </body> </html> 

Best practice: It is always a good idea to wrap {{this | json}} or {{this.collection_name | json}} in a <pre> element so the output is nicely formatted.

At this point you will get both the original webapp listing and the dump of the myWebapp collection.

Because we have access to the collection items directly in the page context it means we can use Liquid to loop and process the collection items directly in the page. Let's add some logic to loop and render the items:


<!DOCTYPE html>
<html>
<head>
  <title>Untitled page</title>
  <meta name="description" content="" />
</head>
<body>
  {module_webapps render="collection" collection="myWebapp" template="/layouts/custom/car_collection.tpl" id="35209" filter="all"}
  <table>
    <thead>
      <th>Makes</th>
      <th>Engine size (L)</th>
      <th>Engine layout</th>
      <th>Performance</th>
    </thead>
    <tbody>{% for item in myWebapp.items %}
      <tr>
        <td>{{item.name}}</td>
        <td>{{item.['engine size']}}</td>
        <td>{{item.['engine layout']}}</td>
        <td>{{item.performance}}</td>
      </tr>{% endfor %}</tbody>
  </table>
</body>
</html>

At this point the webapp listing should appear twice on your page. That happens because it is rendered once by the module according to the custom layout we specify and the other is rendered using the myWebapp collection.

To suppress the module's output and only use the collection loop we will need to replace the template="/layouts/custom/car_collection.tpl" parameter with template="" - this basically instructs the module to suppress its output and only create the collection. Take a look at this section for more info on suppressing a module's output.