Using WebApp Collections- Tutorial

take control over your webapp layouts by exposing the data and making your own for loop with liquid prerequisites in this tutorial, we'll be using dot notation, so if you're not familiar with it, you may want to brush up here getting started with dot notation advanced dot notation arrays and key maps you'll also need to be familiar with webapps creating and editing webapps webapp list layouts webapp detail layouts introduction 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 using collection in the following example, we show the difference between a webapp list which does use collection and one which doesn't here we have an ordinary webapp {% include 'webapp' id '1' layout 'portfolio 2' per page '20' show pagination 'true' sort type 'properties name' sort order 'asc' %} here we have a webapp collection {% include 'webapp' id '1' layout 'portfolio 2' per page '20' show pagination 'true' sort type 'properties name' sort order 'asc' collection 'true' %} {{context exports webapp 1 data | json}} 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 a possible use case 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 {% include 'webapp' id '1' per page '6' sort type 'properties name' sort order 'asc' collection 'true' %} featured item {% assign this = context exports webapp 1 data result items\[0] %} {{this title}} other items {% for this in context exports webapp 1 data result items %} {{this title}} {% endfor %} 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! advanced looping 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 {% include 'webapp' id '1' per page '6' sort type 'properties name' sort order 'asc' collection 'true' %} featured item {% assign this = context exports webapp 1 data result items\[0] %} {{this title}} other items {% for this in context exports webapp 1 data result items offset 1 %} {{this title}} {% endfor %} 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 using layouts with collections 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