website logo
⌘K
Introduction
PORTAL
Agency Whitelabelling
PAGES
Pages - Accessing Page Data
Pagination Layouts
Page Templates
FORMS
Form Confirmation Pages
Adding a Progress Bar
Adding Custom CSS To Show Form Submit Process
Dynamic Content in Workflow and Autoresponder Emails
How to output Custom Field Set fields in a Form's Custom Layout
Custom JavaScript Validation for Forms
File Upload Previews
FAQ
CATEGORIES
Filtering WebApps and Modules by Categories
Outputting Categories on WebApp / Module / eCommerce Layouts
Outputting Category Fields in any Location
Category Detail Layouts
FAQ
COMPANY INFORMATION
Company Information
SITE SEARCH
Site Search
PUBLIC API/ZAPIER
Zapier - Formatting arrays correctly
Public API/Zapier Changelog
MODULES
Module Marketplace
Building Custom Modules
Siteglide Modules
Front-end Submit Modules
DATA STRUCTURES
Automations
Creating WebApps from the CLI
Field Types
WEBAPPS
Front-end Submit WebApps
Layouts
Search and Filtering
Understanding Custom Field Names and IDs
FAQ
CRM
User Details
User Secure Zones
Storing User's Favourite WebApp / Module Items
User's Form Submissions (Cases)
How Users Edit their Email and Password Front End
Editing a User's CRM record Front End with Custom Field Sets
CLI
Introducing Siteglide CLI
CLI Changelog
Secure Zones with CLI
Page Templates with Siteglide CLI
Pages with Siteglide CLI
Includes with Siteglide CLI
Managing Email Templates
Migrate - Manual Form setup
Migrate - Convert existing Forms
Liquid
Accessing Assets
Liquid Dot Notation
Using WebApp Collections- Tutorial
Using the current_user object with Secure Zones
Preventing Duplicate Content with Query Parameters- Canonical URL and Robots.txt
FAQ
GraphQL
Tutorial Overview
About GraphQL
Tutorial 1- Your First Query
Tutorial 2 - Pagination
Tutorial 3 - Filtering the Results
Tutorial 3 - Answers to the First Filtering Challenge
Tutorial 4 - Advanced Filtering
Tutorial 4 - Challenge Answers
Tutorial 5 - Using Liquid to run GraphQL queries on your Site
Tutorial 6 - Variables
Tutorial 6 - Answers to the Variables Challenge
Tutorial 7 - Sorting
Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
Best Practice and Performance
Module/WebApp Caching
Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
Includes
ecommerce/checkout_standard
Frequently Asked Questions
Using Liquid Logic to Check if a field exists, or is empty on the Front End
How do I learn more about Liquid?
How to setup a multi domain start page
Docs powered by archbee 
14min

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:

HTML
|

This outputs:

Document image

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:

HTML
|

This outputs:

Document image

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.

HTML
|

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. 

Document image

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:

Document image

Updated 19 Oct 2021
Did this page help you?
Yes
No
UP NEXT
Using the current_user object with Secure Zones
Docs powered by archbee 
TABLE OF CONTENTS
Prerequisites
Introduction
Using Collection
A Possible Use Case 
Advanced Looping
Using Layouts with Collections