Display and customize data

You can display content from your own database, customize styling. It's useful when building dynamic content like blogs, photo gallery, job boards, and more.

Before listing data, make sure you've already Connect to your database

This document will show you:

• Get familiar with Connect panel
• Create and connect a data query
• Set a template (using a container)
• Connect and display data (using text or image)

Connect panel

The Connect panel allows you to manage queries, connect data to elements, or create an action trigger. It's located at the bottom right of the Editor panel (icon ).

The Connect panel contains:

1. Connect to Table: Create/edit a query, connect query to a block element
2. Connect to Field: assign an item field to an element (for text and image element)
3. Fields Mapping: quickly connect the children elements to a data field
4. Action: create an event action to update/modify data

Displaying data by connecting to a query

To display data items, you need to create a query and connect it to a template view. A template view usually has 3 levels:

• Level 1 is the template container (which is connected to the query)
• Level 2 is the template item (which will be repeating for each data item)
• Level 3 is where data is displaying, such as text, image, etc.

A sample template view with 3 levels

The following steps will show you how to connect to a query and displaying the data items.

To connect to a query:

1. Select the level 1 container, then navigate to Connect panel
2. Under Connect to Table, select your query from the Data Query dropdown
3. Now, your container is connected to the selected query

Set an item template

1. Select the level 2 template container, then navigate to Connect panel
2. Under Connect To Table, from Template View, select Data item view
3. Now, the sub-container is an item template

Connect and display item fields

After defining the template, you can display item fields (i.e name, email) using text or image. Note that the process is the same for either text or image

1. Select the level 3 elements (text or image), then navigate to Connect panel
2. Under Connect to Field, select a field from the drop-down
3. Your element is now connected to a field

You now know how to connect to a data query and display data items.

First, connect data to a container. Then, set an item template. Finally, connect text and image to data item fields. Then, you can style your data items as you want.