Liquid template language Support

Overview

Liquid is an open-source template language that is used in many web applications to place dynamic content and modify data. All the Liquid API and syntax are fully supported in App Studio.

To learn more about Liquid, see the official Liquid Documentation.

Categories

In Liquid, there are three types of code: objects, tags, and filters.

Objects

Objects are surrounded by matched pairs of curly braces {{ }}. They can be used in App Studio to show content. Note that the templates will resolve to the initial type of the field. For more information about Object Types in Liquid, see Liquid object types.

Here are a couple of object example outputs:

  1. {{user.name}} This example results in a string.

  2. {{item.active}} This example results in a boolean.

Note: In the second example, active will be true/false. Accordingly, it will resolve to a boolean and will not be converted to a string.

Tags

Tags which do not resolve to text are surrounded by matched pairs of curly braces and percent signs {% and %}. They are used for logic operations and control flow for templates.

{% if res10.supplierId != blank %}Updated by {% endif %}

Note: The text surrounded by the curly brace percentage delimiters has no visible output when the template is rendered.

Filters

Filters change the output of a Liquid object or variable. They are used within double curly braces {{ }} and variable assignment, and are separated by a pipe character |, for example:

{{ user.name | upcase }}

App Studio quick tips

Add rules to trigger properties

The Properties section of a component allows you to set rules to trigger some of the properties, such as Hidden, Disabled or Read only Interactions or the Required field Validation.

Here is a quick tip to set any of them using Read only as an example:

  1. Go to the Interactions section in your component. This example uses the Select component.
  2. Select the Read only checkbox.
  3. Enter the Liquid code {{checkbox1.value == true}} in the Rule field, where checkbox1 is the Template ID of the component that will trigger the property, in this case the Checkbox component.

In this example the component will be Read only only when the rule is fulfilled. Now, when the Checkbox component value matches the rule (in this case, when the box is selected), the rule returns as valid (true). This triggers the rule, setting the component to Read only, in this example a Select component.

Read only rule example

Use data from the Grid component

You can use Liquid to get data from your resources.

Get specific data from the Grid component

Here is a quick tip if the data you need is a specific cell value of the Grid component:

  1. Enter {{gridId.rows[3].columnID}} in the component field.

  2. gridId specifies the grid that you want to retrieve data from, and is the Template ID of the Grid component.

  3. rows[3] specifies the row within the grid, where the number corresponds to the array position. Note that in Liquid arrays, counting starts from 0.

  4. columnID specifies the column of the Grid component, and is the Column ID of the column.

Get all data from the Grid component

Here is a quick tip if you want to get all the data from your Grid component in JSON format:

  1. Enter {{gridId.rows | json}} in the component field.

  2. gridId specifies the grid that you want to retrieve data from, and is the Template ID of the Grid component.

  3. rows all the rows from the Grid component.

  4. json specifies the format in which you want to retrieve the data.

Add a filter to a component

Here is a quick tip if you want to filter data from an array in your resources. This example has two components, where the second component filters data according to the value of the first.

  1. Enter {{res1 | where: 'name', my1Component.value}} in the required field of your second component.

  2. res1 specifies the resource array that you want to filter data from., and is the default name given to the resource.

  3. name specifies in which property from the resource array we want to filter.

  4. my1Component.value is the value we want to filter, where my1Component is the Template ID of the first component.

Use tags to display a message

Here is a quick tip if you want to use a Liquid tag to display a message.

{% if res10.supplierId != blank %}Updated by {% endif %}

{% if res10.supplierId != blank %}{{res10.lastUpdated.updatedBy}}{% endif %}

{% if res10.supplierId != blank %}, {{res10.lastUpdated.updatedAt | date: "%m/%d/%Y %H:%M" }} (User time zone) {% endif %}

Example app with Liquid Tag and Filter

and here is a preview of the end-user app:

App Preview with Liquid Tag and Filter