Data placeholder variable

You can use a Data Placeholder variable to insert data content into your text. Those data can be data items from a query, predefined global variables for the current page, project, URL, or basic calculation and text transform.

Data Placeholder variables can be used in:

• Blocks (i.e: text content, image URL)
• Page settings (i.e title, URL for dynamic URL, featured photo when connected to a query)

1. How to use Data Placeholder

To use a data placeholder variable, you must pass its full path in between a curly-brackets. For example {page.name} to show the current page's name, {item.name} to display the name column from a data item.

Let's say you have a data item with name is Avengers: Endgame, and releaseDate is 2019-06-22. If you connect the name column to a text field, it will only show Avengers: Endgame. And you need another text field to display the releaseDate.

With Data Placeholder, you can combine multiple data columns in a single text field, by using {item.name} ({item.releaseDate}) format on Text content in the Style Panel, or Format in the Connect Panel. The text output will be Avengers: Endgame (2019-06-22)

2. Data item variables: item

Data item variables only available when displaying a data item from a query.

You can use item.columnName to access the value from a data item. As the example in section 1, you can display the movie name by using {item.name} format, or {item.releaseDate} to display the release date.

3. Predefined Global variables

There are a few things you can access from the current page, like page title, project name, a parametter from URL.

Note that to access one of following variable, use {page.variableName}, or {project.variableName}, or {url.variableName}

Page variables: page

current page's variables

• url: the current url (showing in the address bar)
• title: the current page title (from the page settings)
• description: the current page description (from the page settings)

Project variables: project

current project's variables

• name: the current project name (from the project settings)
• domain: the current project name (from the project settings)
• createdOn: the creation date of the current project
• updatedOn: the last updated data of the current project
• description: the project description (from the project settings)

URL variables: url

When the page has a dynamic URL, the url variables will extract that info. For example, your page have a dynamic URL as /categories/{category} and your address bar is showing https://yourdomain.com/categories/stories, the url variable will have:

• category is stories

4. Calculation and value formatting with Formatter

Besides display data variables, you can use Formatter to format text, or calculate number values. For example, in the section 1, the {item.name} ({item.releaseDate}) format will show Avengers: Endgame (2019-06-22).

But instead of showing the full date, you can show only the year, by using {item.name} ({item.releaseDate(YYYY)}) format. And the result will be Avengers: Endgame (2019).

Below is a list of supported Formatter:

• date: format date. The format syntax is {data(input, date format (optional))}. For example: {date()},{date(item.created)},{date(item.created, "YYYY")}
• substr: removing part of a text postition. The format syntax is {substr(input, start, end (optional))}
• slugify: transform input value into url-hyphen-case. The format syntax is {slugify(input)}
• calc: calculate math expression (including data item). The format syntax is {calc(math expression)}. For example: {calc(1 * 21)},{calc(item.price + item.total)}
• formatNumber: format number to a language-sensitive representation text. The format syntax is formatNumber