Display data from your database

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:


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 Data Query
  3. Your container is now connected to a query

Set an item template

  1. Select the level 2 template container, then navigate to Connect panel
  2. Under ITEM VIEW, switch on Use as item view
  3. Your sub-container is now 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.

Let's start building

We've learned that growing a successful business is hard, your idea needs to be flexible to evolve while lacking resources.

Our goals focus on providing a set of tools, make it easier to change, help you save time and money to evolve your business

  • Up to 2 projects
  • Up to 20 pages*
  • Up to 5000 monthly visits*
* quota for each projectGet started— it's free