How to Build Custom Database Pages for SaaS Users
What a Database Page Looks Like
A database page has two views that the platform generates from your configuration:
- List view: A table showing all records with configurable columns. Users can sort, filter, search, and bulk-select records. Clicking a record opens the edit view.
- Edit view: A form with sections and fields that let users modify the record. Fields can be text inputs, dropdowns, file uploads, date pickers, rich text editors, and dozens of other types. Each section is its own form that saves independently.
For your SaaS customers, this looks like a professional data management interface. Behind the scenes, it is all driven by a single JSON configuration file.
Defining a Page With a Slug
Each database page is defined by a slug file that tells the admin engine where to find the data and how to display it. The key fields in a slug are:
- databaseTable: Which table to read from (the built-in appData table, or a custom table)
- databaseField: Which field within the database row contains the array of records
- fieldColumns: Which fields to show as columns in the list view
- EditPageSections: An array of form sections, each containing an array of field definitions
- createFields: Which fields to show in the quick-create form
- createdData: Default values for a new record
When a user navigates to this page, the admin engine loads the slug, queries the database for the user's account data, and renders the list and edit views according to the configuration.
Field Types You Can Use
The platform supports a wide range of field types for different data entry needs:
- input: Single-line text field for names, titles, short values
- textarea: Multi-line text for descriptions, notes, long-form content
- select: Dropdown with predefined options
- multiple: Multi-select for tags, categories, or multiple choices
- checkbox: Toggle for on/off settings
- date: Calendar date picker
- fileupload: File input for documents, images, attachments
- htmleditor: Rich text editor (WYSIWYG) for formatted content
- csseditor: Code editor for technical fields
- colorpicker: Visual color selection
- hidden: Hidden fields for internal values the user should not see or change
- display: Read-only display of a value the user cannot edit
Dynamic dropdowns are also supported. Set a dbfield property on a dropdown to populate its options from another field in the database. For example, a "select message" dropdown can pull its options from the user's list of saved messages.
Building a Complete Data Management Flow
For a helpdesk SaaS as an example, you might create these database pages:
- Tickets page: List view showing ticket title, status, priority, and date. Edit view with sections for ticket details, assignment, and internal notes.
- Categories page: Simple list of support categories with a name and description field each.
- Canned Responses page: List of pre-written responses with a title and body field, used by agents to respond quickly to common questions.
Each of these is a separate slug file. The app configuration lists them in order for the sidebar navigation, and your SaaS customers see a clean, professional admin interface without you writing any HTML, CSS, or JavaScript.
Connecting Pages to Your API
Database pages handle CRUD operations through the admin panel. For actions that need to trigger business logic (like sending a notification when a ticket status changes), you can connect the page to your API endpoints through field-level functions. When a field is saved, the platform can call a PHP function that runs your custom logic.
This means the admin panel is not just a data viewer. It is a complete application interface where user actions in the UI trigger real backend operations.
Build professional data management pages for your SaaS with zero frontend code. JSON configuration drives the entire interface.
Get Started Free