Help Center

/

Display and customize data

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:


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.

Share

Last updated on 19/01/2022

Get started for free.

Rebit provides a set of tools, make it easier to change, help you save time and money to evolve your business

Try now →

icon

© 2021 Rebit

Privacy Policy

Terms of Use

Rebit - Create Free Websites
Built with Rebit