Liquid objects are attributes that insert dynamic content into your Card using data from the JSON that is connected with your Card. Liquid objects are sometimes referred to as Liquid variables.

To output an object's attribute, wrap the object's name in double curly braces: {{ and }}.

Let's assume your JSON that is returned by the REST API of your Connector looks like this:

  "total": 25,
  "limit": 10,
  "data": [{
    "userid": "23546",
    "first_name": "Jodie",
    "last_name": "Nelson",
    "department": "Human Resources",
    "phone": "1-607-555-2376 x271",
    "email": "j.nelson@adenin.com",
    "updatedAt": "2017-07-14T17:17:33.010Z",
    "createdAt": "2016-01-12T11:23:41.010Z"
  }, {
    "userid": "23547",
    "first_name": "Tim",
    "last_name": "Appleseed",
    "department": "Finance",
    "phone": "1-607-555-2376 x409",
    "email": "t.appleseed@adenin.com",
    "updatedAt": "2018-01-14T19:43:04.010Z",
    "createdAt": "2015-02-13T10:21:37.010Z"

Example A: Render everyone's name and department

Let's imagine we want to parse the names and departments of all our users. To achieve this we will add the following Liquid code into the 'Liquid view' Card Element:



Jodie works in Human Resources

Tim works in Finance

As you can see we wrapped our objects {item.first_name} and {item.department} into an Iteration loop. Therefore, Liquid is rendering the content of the attributes first_name and department for every item in the array data.

Example B: Show the details of one particular user

If we just wanted to display the info of a particular user this is what we could enter into our 'Liquid view' Card Element:



Jodie Nelson can be reached at 1-607-555-2376 x271 or <a href="mailto:j.nelson@adenin.com">click here to send an email</a>.

In this case we started another Iteration loop as above, but inside we placed a Control flow tag that filters for the specific entry within our array where userid matches the value 23546.

Since the userid in our example is unique, there was only one match and Liquid therefore only rendered the first_name, last_name, phone and email fields for the user 'Jodie Nelson'.

How do I get my JSON into the Card?

In order to receive the JSON that your API return you need to complete three steps:

  1. Add your source as a Connector to the Digital Assistant backend
  2. Add the service your Connector provides to the metadata of your Card
  3. Confirm your Card is showing 'Live data' in the 'Settings' tab

If you're not familiar with how to create Cards, you should follow the Card Building Guide.