Work with records

Liftoff's Records give you the power to add data-driven content to almost every page of your site, as well as allowing you to build advanced functionality such as blogs, asset libraries, and more. If you haven't reviewed the full documentation on Records, doing so before you start might be a good idea. Also, while it is not required, reviewing the documentation on Handlebars and its place within Liftoff is highly recommended.

Display a set of records on a page

One of the simplest uses of records is to display a set of records on a page. One example use case is included in every Liftoff site: Navigation. The header and footer navigation of every Liftoff theme is driven by records -- specifically the Default - Main Navigation and Default - Footer Navigation record sets which are included on every Liftoff site.

The following example is adapted from the Nebula theme's default layout, and is very similar in each theme:

<ul class="nav-list">
    {{#records.defaultMainNavigation_order_asc_all}}
        <li><a href="/{{url}}">{{title}}</a></li>
    {{/records.defaultMainNavigation_order_asc_all}}
</ul>

The <ul>, <li> and <a> tags you should recognize as the HTML elements for an unordered list, list item, and anchor (hyperlink) respectively. Next, let's break down line 2 of the above example:

  • {{#records denotes that we're looking to loop through all records of a specific type.
  • defaultMainNavigation identifies which record type we're looking to pull from. This is the record type's code. (See: Record types )
  • order is the record field by which we'd like to order our results. The Default - Main Navigation record type includes a number field named Order with the code order. Each record in this record set has an integer ranging from 0 to the maximum allowed value.
  • asc is the order direction. The value asc will sort in ascending order, and desc will sort in descending order.
  • all is the limit. This can also be a number, preceded by top (i.e., top5 to include the top 5 results). This indicates the maximum number of records we wish to show.

📘

Alternative loop syntax

Handlebars supports two syntaxes for iterating over records. The first is shown above, and the second, which utilizes the each keyword is shown below. Either is correct and will function identically to the other. The only difference is in the closing Handlebars tag:
{{#records.[record type code]_[sort field code]_[sort order]_[limit]}}
...
{{/records.[record type code]_[sort field code]_[sort order]_[limit]}}

vs
{{#each records.[record type code]_]sort field code]_[sort order]_[limit]}}
...
{{/each}}

Use the syntax with which you are most comfortable.

<ul class="nav-list">
    {{#each records.defaultMainNavigation_order_asc_all}}
        <li><a href="/{{url}}">{{title}}</a></li>
    {{/each}}
</ul>

Next, let's examine the {{url}} and {{title}}. Each of these is a placeholder for data from a record. The names correspond to the codes for these fields, as defined in the record type. The Default - Main Navigation record type specifies a URL type field with code url and a text type field with code title. Whatever value is entered in a record for these fields will be yielded in the final results.

If you were to add the above code to a content block and place it on a page, then view the page in the browser, and your record set contained the data in the following table, then you would see an unordered list of links, and behind the scenes, the markup listed below would be created:

Order

Title

URL

0

Google

https://www.google.com

2

Liftoff

https://www.liftoff.shop

1

This page

<ul class="nav-list">
  <li><a href="https://www.google.com">Google</a></li>
  <li><a href="#">This Page</a></li>
  <li><a href="https://www.liftoff.shop">Liftoff</a></li>
</ul>

👍

Where can I learn HTML / CSS / JavaScript, or other web technologies?

Launchpad does not offer training in these subjects. However, they are the building blocks of the web, and there are countless resources available for learning about them and their applications. Our team members may be able to offer recommendations of learning materials that they have found useful as they've developed their own professional skillsets over our combined 100+ years of experience if you are interested in learning more.
Launchpad does not offer training in these subjects. However, they are the building blocks of the web, and there are countless resources available for learning about them and their applications. Our team members may be able to offer recommendations of learning materials that they have found useful as they've developed their own professional skillsets over our combined 100+ years of experience if you are interested in learning more.

Display an image stored in a record

To display an image stored in a record on a page, use the following markup within your loop (see section above titled Display a set of records on a page):

<img src="/{{image}}">

where image is the field code for the image field in your record type.

Link to a file stored in a record

To link to a file stored in a record on a page, use the following markup within your loop (see section above titled Display a set of records on a page):

<a href="/{{file}}">Link Text Here</a>

where file is the field code for the file field in your record type.

Reference a single record from a set

To reference record fields from a single record from a record set, you must provide an index (an integer greater than or equal to 0).

As an example, if you had a record type with code myRecordType which defines two record fields of types text and number with field codes myText and myNumber, and wanted to reference the first record in the set when ordering by creation date, in ascending order:

Return the value of the field with code myText:
{{records.myRecordType_created_asc_all.0.myText}}

Return the value of the field with code myNumber:
{{records.myRecordType_created_asc_all.0.myNumber}}

Return the value of myText for the 2nd record in the set:
{{records.myRecordType_created_asc_all.1.myText}}

📘

Zero-based indexing

In the examples above, take note that 0 represents the first item in the returned set of records. This is an example of "zero-based indexing," and is a common practice in computer science and development.

Remember: When referencing a single record by index, provide an index that is one less than the record you wish to reference.