Chapter 5 - Use Your Internal Database in the App

In this lesson, we’ll learn how to connect the internal database we created in Chapter 3 to an actual page in our application. The goal is to fetch and display real data automatically, as soon as the page loads, without any code.

‍

To begin, head to the component panel on the left and drag a Table component onto the canvas. This table will serve as the main visual to present your database content to users.

then let's connect the database to our table component!

‍

‍

Part 2: Display and filter internal database content dynamically

‍

we’ll now make the internal database content more dynamic by adding filters and interactivity. This means letting users choose what kind of data they want to see like selecting a specific department, mood rating, or time range.

In the upcoming video we’ll demonstrate how to bind a dropdown component to a data source. First, we drag the dropdown onto the page in the builder. With the dropdown selected, we enable the data-source option, then click the Configure button that appears beneath it. The configuration panel opens; here we choose the internal database created earlier and select the table that contains our data. From the list of columns we pick “Department,” setting it as both the display label and the stored value. After confirming the selection, we close the configuration panel and switch to live preview. The dropdown now loads automatically, showing every department fetched from the database.

‍

‍

Connect a selection component to a data source

‍

‍

‍

Rename the dropdown so your project stays clear and easy to maintain

‍

Before moving on, it’s good practice to rename the dropdown so your project stays clear and easy to maintain. Click the dropdown to open its configuration panel on the right. In the small icon bar you’ll see a button with the letter A. Click it to switch to advanced mode; the icon changes to an S. Scroll to the very bottom of the configuration panel and you’ll find the field where you can change the component name. Replace the generic name like “input1” with something explicit, for example departmentDropdown. A clear name makes future logic much easier to read, especially in larger apps.

‍

‍

‍

Filter a table using a selection component

‍

Now that our dropdown component is connected to the database and shows all departments, we’re going to use it to filter the data displayed in our table. The idea is simple: when the user selects a department in the dropdown, the table should update to show only the rows that match that department.

To achieve this, open the configuration of the table component. Scroll down to the Filters section. Add a new filter by selecting the department column as the field to filter. For the condition, choose is. Then, drag and drop the dropdown component into the value field.

What we’ve just done is tell the table: “Only show rows where the department matches the currently selected value in the dropdown.” Once you confirm the configuration and preview the app in real-time view, you’ll see it working immediately. When you select “Finance” in the dropdown, only the rows where the department is “Finance” will be shown in the table. This makes your interface dynamic and user-friendly and all without a single line of code.

‍