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:

This photo demonstrates connecting elements with "skills" query

Connect panel

Connect panel is where you create, manage a query, connect it to block elements. It located at the bottom right of the Editor panel (icon ). Connect panel contains:

  1. CONNECT TO TABLE: Create/edit a query, connect query to a block element
  2. CONNECT TO FIELD: assign a item field to an element (for text and image element)
  3. ITEM VIEW: set item template (for block element)

Connect data query to a container

Before connecting a query to a container, you'll need to create a query with Query Builder

When viewing the webpage, it will load data from the data query connected to the container. Then looks for the item template, render data and repeat for each items.

To connect to a query:

  1. Select the 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

Data items are rendered using an item template, you can specify by

  1. Select the 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 define 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 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.