Databases Section
The Databases Section in the Floating Design Panel allows you to connect elements, tiles, and pages to data sources. This enables dynamic content that updates based on stored or retrieved data.
Overview
The Databases Section enables you to:
- Connect to data sources for dynamic content
- Bind elements to database fields
- Display lists of records in card lists
- Manage data submissions from forms
Accessing the Databases Section
- Select an element, tile, or page in the builder
- Open the Floating Design Panel
- Click the Databases tab in the top menu
How Database Connections Work
┌─────────────────────────────────────────────────────────────┐
│ DATABASE CONNECTION │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ DATABASE │ ←→ │ TILE │ │
│ │ (Source) │ │ (Display) │ │
│ └──────────────┘ └──────────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ Fields │ →→→ │ Elements │ │
│ │ (Columns) │ │ (Bindings) │ │
│ └──────────────┘ └──────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘Database Types
Internal Databases
Databases created within ACENji:
| Type | Description |
|---|---|
| Project Databases | Custom data tables created for your project |
| User Data | User information from Variable Center |
| Session Data | Group session participant data |
External Connections
Connect to external data sources:
| Type | Description |
|---|---|
| API Endpoints | REST API connections |
| Webhooks | Incoming data from external services |
Connecting to a Database
Step 1: Select Data Source
- In the Databases tab, click "Select Database"
- Choose from available databases
- The database schema loads
Step 2: Map Fields to Elements
- For each element that needs data:
- Click the element in the builder
- In the Connect tab, select the database field
- The element now displays data from that field
Step 3: Configure Display Options
| Option | Description |
|---|---|
| Single Record | Display one record (current user, selected item) |
| List View | Display multiple records in a card list |
| Filtered | Apply conditions to limit displayed records |
Data Binding
Read Bindings
Display database values in elements:
Element: Text Label
Binding: [Database.firstName]
Result: Shows "John" from databaseWrite Bindings
Save element values back to database:
Element: Text Input
Binding: [Database.notes]
Action: On save, writes input value to databaseTwo-Way Bindings
Both read and write:
Element: Text Input
Binding: [Database.email]
Behavior: Loads current value, saves changesWorking with Card Lists
Card Lists display multiple database records:
Setup
- Add a Card List element to your page
- In Databases tab, select the data source
- Design the card template with bound elements
- Each record creates a card instance
Card List Options
| Option | Description |
|---|---|
| Items Per Row | Number of cards displayed horizontally |
| Pagination | Enable page navigation for large datasets |
| Sorting | Default sort order for records |
| Filtering | Conditions to limit displayed records |
Data Operations
Read Operations
Fetch and display data:
- Load on page open
- Refresh on user action
- Filter based on conditions
Write Operations
Save data to the database:
- Submit form data
- Update existing records
- Create new records
Delete Operations
Remove records:
- Delete single record
- Bulk delete with confirmation
Filtering Data
Apply filters to limit displayed records:
Static Filters
Predefined conditions:
Filter: [status] equals "active"
Result: Only shows active recordsDynamic Filters
Based on user input or variables:
Filter: [category] equals [Selected Category]
Result: Shows records matching user's selectionCommon Use Cases
User Profile Display
Show current user's information:
Database: User Data
Filter: [email] equals [Current User Email]
Display: Profile tile with bound fieldsDynamic Lists
Show filtered content:
Database: Products
Filter: [category] equals [Selected Category]
Display: Card list of matching productsForm Submissions
Save user input:
Elements: Text inputs, dropdowns
Action: On submit, create new database recordLookup Fields
Reference data from another table:
Element: Dropdown
Source: [Categories Database]
Display: Category names
Save: Category IDDatabase Schema
When a database is connected, you can view:
| Column | Description |
|---|---|
| Field Name | Database column name |
| Type | Data type (text, number, date, etc.) |
| Required | Whether field must have a value |
| Default | Default value if none provided |
Best Practices
Plan your data structure - Design databases before building UI
Use meaningful field names - Makes binding easier to understand
Validate input - Ensure data meets requirements before saving
Handle empty states - Show appropriate messages when no data exists
Optimize queries - Filter data server-side when possible
Test with real data - Verify bindings work with actual records
Troubleshooting
Data Not Displaying
- Verify the database connection is active
- Check that field bindings are correct
- Ensure records exist in the database
- Review filter conditions
Data Not Saving
- Confirm write permissions are configured
- Check required field validation
- Verify the save action is triggered
Wrong Data Showing
- Review filter conditions
- Check for multiple bindings on same element
- Verify the correct database is selected
Questions?
If you have any questions, please don't hesitate to contact us. Alternatively, you can submit an issue on this platform.
Useful Links:
Floating Design Panel - https://help.acenji.com/#/./create-web-application/website-builder/floating-design-panel/index Card List Element - https://help.acenji.com/#/./create-web-application/elements/card-list/index Variable Center - https://help.acenji.com/#/./shared-concepts/variable-center/index