Detail Layouts

 Last Edited: May 22, 2019

When enabled, WebApps have detail views. These are pages, where you can create a standardised layout that automatically pulls out any content from your WebApp. Users can make new WebApp items and the page will automatically be created for them.

Syntax

Datasource

{% include 'webapp', id: '28148', item_ids: this['Related Project'], datasource: 'true', layout: 'related' -%}

List Layout

{%- include 'webapp', id: '3', layout: 'default', per_page: '20', sort_type: 'properties.name', sort_order: 'asc', type: 'list' -%}

To output a WebApp list within a detail layout you must include the following parameter: type: 'list'

See more about list output parameters on the List Layouts doc.


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:

  • detail/ - the detail layouts of the WebApp, visible on the url of the item

    • default.liquid - the default detail layout

Editing Layouts

To create a custom layout file, right click on the detail folder. Alternatively, you can edit the default file. All layout files must use the .liquid file extension, for example mylayout.liquid. You can select which detail layout a WebApp from a dropdown on the edit WebApp page.

While editing the layout of the WebApp using Code Editor, you can output any field using the dropdown along the top of the editor.