Take control over your WebApp Layouts by exposing the Data and making your own For Loop with Liquid

In this Tutorial, we'll be using dot notation, so if you're not familiar with it, you may want to brush up here:

You'll also need to be familiar with WebApps:

By default in Siteglide, when you include a WebApp, we query the database and loop over the items for you. We take the data inside the loop and assign it to a variable called this which holds dynamic data about the current item. In certain situations, you may want to do something different, so we have provided the optional parameter collection. 

Setting collection to 'true' makes the data from the behind-the-scenes query available to you directly, without a layout.

In the following example, we show the difference between a WebApp list which does use Collection and one which doesn't:

This outputs:

To break it down further, setting collection to true exports the data to {{context.exports}} Under that, you can access it by the id of the WebApp in the original include tag. In this example, it's 1 so we can access  {{context.exports.webapp_1.data | json}}. 

You can then use dot notation to access the data as you wish. 

When would you use collection? 

Well some people will prefer to always use collection, others will prefer to use layouts. One possible use-case where Collection works better though is if you want to display the same WebApp twice on the Page but differently each time. 

For example, what if you wanted to display the first item largely at the top, then display other items in smaller cards below?

You could use the {% include 'webapp' %} tag twice to achieve this, with different Layouts each time, but this would have a negative effect on performance. This would slow the Page down, because we would be querying the database behind the scenes twice (once for every time you include the tag). 

Alternatively, you could include the webapp just once as a collection, then use Liquid to display the items you want in the way you want:

This outputs:

Great! Only one query needed behind the scenes and we've nearly met the objective, but there's one problem. The item "A Special Guest Appearance" has been included twice!

We can use the offset parameter on our loop tag to start the loop at a different index. Let's skip the first index when we loop, as this item has already been displayed.

You can do a lot with loops. Offset is just one of your options. Head to the pOS documentation to learn more about loops in Liquid: https://documentation.platformos.com/api-reference/liquid/loops

Hang on, wasn't the point of Collections to avoid Layouts? Not quite! The idea was to give you control over the loop- layouts are still possible. I can still include my portfolio_2 layout, but I need to work out its path from SITE MANAGER / Code Editor in Admin. 

I can now include the Layout at this Path: {% include 'layouts/webapps/webapp_1/list/portfolio_2' this: this %} The Layout is expecting an object called this containing the data, but as in the example above we already assigned variables called this containing the right data, the Layout works without further modification: