Records and Container Pages

📘

Prior reading required

If you are not already familiar with Records and Container pages , please review those topics first.

Container pages in unison with records

When creating a container page and applying a record type to the page, certain changes occur within the record type's definition without requiring any user action.

If a record type is applied to a container page, two additional record fields are added to each record in the set, with initially blank values.

The first is URL Path. If a record is in a record type attached to a container page, and this value is a valid, unique URL path, then a site visitor may reach that URL in their browser.

Example: You create a container page, and attach a record type called myBlogArticles. You then edit one of the records in myBlogArticles, and give it a URL Path of my-blog/my-article-title. Now if a user visits https://yourSiteHere.liftoff.shop/my-blog/my-article-title , they will be greeted with a page specific to that exact record, utilizing the content and layout of its container page.

Display record content on a container page

To display record content on a container page, you must first add one or more content blocks to the container page. This content block can contain any HTML and valid Handlebars logic desired.

In Work with records, displaying entire sets of records on a page is discussed. The principle is the same when working within the context of a container page, though the syntax is slightly different.

To reference a record field for the single record being displayed on a container page, use the following syntax (HTML markup included as an example), and assume that the fields for the record type are defined as follows:

Name

Code

Type

Article Title

title

text

Article Content

content

html

<h1>{{record.title}}</h1>
<hr>
<p>{{{record.content}}}</p>

It's that simple! Within a container page, any time you want to reference a record field code for the record being displayed, just prefix the code with record. .

📘

Avoid escaping HTML

Note that the placeholder for record.content utilizes a "triple mustache" or "triple handlebar" instead of the normal double (i.e., {{ }} vs {{{ }}}). The triple-stache has a special purpose within the Handlebars system: It tells Liftoff not to "escape" any HTML included in the field, which is important since content is defined as an HTML field type in this case.

If the value of content for this record were Hello <strong>friend</strong>, and you used a double-braced placeholder, it would show up in the browser as exactly that:

Hello <strong>friend</strong>

By using the triple-braced version, the system knows to handle the HTML as normal instead, and you should instead see:

Hello friend

Display links to all container-page enabled records in a set

If you want to create an individual link to each container page enabled record in a record type, the syntax is the same as that listed in Work with records, except that the fields for page title and URL are represented by p.title and p.url respectively (the p stands for page record, or "the record of note being displayed according to the design of this record type's container page". This also helps avoid a collision if the record type already contains fields with the code title or url).

<ul>
  {{#records.myBlogArticles_created_asc_all}}
    <li><a href="{{p.url}}">{{p.title}}</a></li>
  {{/records.myBlogArticles_created_asc_all}}
</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.