When placed onto a page or a template, this liquid displays the WebApp items using the defined list Layout.

{%- include 'webapp', id: '3', layout: 'default', per_page: '20', sort_type: '', sort_order: 'asc' -%}


id - the WebApp's ID
item_ids - output one or more WebApp items. For multiple ids comma separate them like so:  item_ids: '17559,17546'.
category_ids - output all items in one or more categories. Comma separate category ids to filter by multiple categories e.g:  category_ids: '17559,17546'.  
layout - default is default.liquid - 'layout' values are relative to the folder: layouts/webapps/My WebApp (webapp_1)/[layout name]
per_page - defines the number of items outputted on the page
show_pagination - default is true - defines if items should be paginated when the per_page is met.
sort_type - defines the type by which items are ordered - name of the WebApp item (alphabetical)
    created_at - date the WebApp item was created
    updated_at - date the WebApp item was last edited
    properties.weighting - weighting of the WebApp item

properties.webapp_field_1_2 - Custom Field 2 on WebApp 1 (see below for more details on this).
sort_order - defines the order in which the type is sorted
    asc - sort items in ascending order
    desc - sort items in descending order
    collection - default is 'false' - If you set it as collection: 'true' then any layout is suppressed.Data is accessible via {{}}. For Example, name would be: {{[0]['name']}} 

Sorting by Custom Fields

When sorting by Custom fields, you'll need to refer to the field by its Custom Field ID. e.g. to Sort by the 2nd Custom Field created on webapp_1, you should set the Sort Order to:

sort_order: "properties.webapp_1_2"

We use this syntax to access the field directly in the database, in order to help increase Page Load performance.

Learn more about Custom Field IDs here: Understanding Custom Field Names and IDs - and when to use them

Default Fields

Field Name: Item Name
Liquid Tag: {{ this['name'] }}
Description: name of the FAQ
Field Name: Slug
Liquid Tag: {{ this['full_slug'] }}
Description: url of the current item, relative to the layout
Field Name: Weighting
Liquid Tag: {{ this['weighting'] }}
Description: weight of item, used for sorting
Field Name: Release Date
Liquid Tag: {{ this['release_date'] }}
Description: release date of the item
Field Name: Expiry Date
Liquid Tag: {{ this['expiry_date'] }}
Description: expiry date of the item
Field Name: Enabled
Liquid Tag: {{ this['enabled'] }}
Description: enable/disable the item

Folder Structure

When you create a WebApp, default files are automatically created for you. WebApp list layouts are stored in the following folder structure, which you can view via Code Editor: layouts/webapps/My WebApp (webapp_ID)/

Within this folder you will find the following:

  • list/ - the list layouts, used when outputting items as a section on a page

  • default.liquid - the default list layout

To create a custom layout file, right click on the list folder. Alternatively, you can edit the default file. All layout files must use the .liquid file extension, for example mylayout.liquid. Any files created within this folder will automatically become available in the dropdown selector when outputting a WebApp from the Toolbox

Did this answer your question?