Displaying your data using Liquid

Liquid is a powerful templating language that lets you retrieve and display dynamic data in Fernand. You can use Liquid to pull data from external sources, display it in your components, and even apply logic like conditional statements or for each loops.

Retrieving and displaying data

To retrieve and display data using Liquid, you'll often use variables from API responses or data models. Here’s a simple example of displaying a variable:

<p>Created on {{ created }}</p>

In this example, the {{ created }} variable displays the date an object was created. Liquid automatically outputs the value when the template is rendered.

Component library

We have designed a component library to help you quickly get an interface to display your data up and running in no time.

Using conditional statements

Conditional statements in Liquid allow you to show or hide content based on conditions. For example, you can check if a value is true or false, or compare values. Here’s an example:

<span>
  {% if user.active %}
    User is active
  {% else %}
    User is inactive
  {% endif %}
</span>

This code checks if user.active is true. If so, it displays "User is active." Otherwise, it displays "User is inactive."

Creating "for each" loops

Loops in Liquid let you iterate over a list of items, such as an array of domains or a collection of users. This is useful when displaying a list of data dynamically. Here’s an example using a for each loop:

<ul>
  {% for item in domains['items'] %}
    <li>
      <span class="pill {% if item.active == true %}pill--green{% else %}pill--red{% endif %}">{{ item.domain }}</span>
    </li>
  {% endfor %}
</ul>

In this example, Liquid loops over a list of domains. For each item, it checks if the domain is active and applies a green pill if true, or a red pill if false. This is a great way to visually indicate status within a list of items.

Handling nested data

Liquid also supports accessing nested data. For example, if you have a nested object, you can access its properties like this:

<p>Domain owner: {{ domain.owner.name }}</p>

In this case, {{ domain.owner.name }} would output the name of the owner of the domain.

Combining logic with display

Liquid allows you to combine logic and data display seamlessly. For instance, you can create a table with conditional formatting based on values:

<table>
  <thead>
    <tr>
      <th>Domain</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    {% for item in domains.get('items') %}
      <tr>
        <td>{{ item.domain }}</td>
        <td>
            {% if item.active %}
                <span class="badge badge--green">Active</span>
            {% else %}
                <span class="badge badge--red">Inctive</span>
            {% endif %}
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>

Here, Liquid loops through the domains, displaying each domain and its status in a table. The status column uses conditional logic to display a green badge for active domains and a red badge for inactive ones.