Settings Editor
The Settings Editor gives you full control over your app’s settings page. You determine which elements are displayed, how they look, and where they navigate.
Overview
Section titled “Overview”The settings page consists of various elements that you can freely combine:
Opening the Editor
Section titled “Opening the Editor”- Open Edit Mode in your app (App Builder Tools)
- Go to the Settings Page in your app
- Tap on an element or the edit button
- The editor opens with a live preview
Editor Interface
Section titled “Editor Interface”The Toolbar
Section titled “The Toolbar”At the top you’ll find a toolbar with the following functions:
| Button | Function |
|---|---|
| + | Add new element |
| Undo | Undo last action |
| Redo | Redo undone action |
| Reorder | Sort elements via drag & drop |
| Page Design | Open global design settings |
| Theme Toggle | Switch between light and dark mode |
The Element List
Section titled “The Element List”Below the toolbar you see all elements of your settings page. Each element shows:
- A live preview of how it looks in the app
- An eye icon for showing/hiding
- A badge if it’s hidden (“Hidden”)
- A Firebase Auth badge for the logout button
The Smart Panel
Section titled “The Smart Panel”When you tap an element, the Smart Panel opens with all editing options. The available tabs depend on the element type.
Adding an Element
Section titled “Adding an Element”- Tap the + in the toolbar or on the “Add element” placeholder
- Select an element type from the list:
- Header - Section title
- Navigation - Link to an app page
- Custom Link - External link
- Divider - Horizontal line
- Spacing - Vertical spacing
- Text Label - Descriptive text
- The new element is inserted at the end of the list
- The Smart Panel opens automatically for editing
Editing an Element
Section titled “Editing an Element”- Tap on an element in the list
- The context menu appears with options:
- Edit - Open Smart Panel
- Duplicate - Create a copy
- Delete - Remove element
- Select “Edit” to open the Smart Panel
- Navigate through the tabs for different settings
Sorting Elements
Section titled “Sorting Elements”- Tap the sort icon in the toolbar
- Reorder mode is activated
- Drag elements to the desired position
- Tap the icon again to exit the mode
Automatic Saving
Section titled “Automatic Saving”All changes are saved automatically. You don’t need to do anything extra - as soon as you change something, it’s automatically saved to the database after 500ms.
Element Types Overview
Section titled “Element Types Overview”| Type | Description | Tabs in Smart Panel |
|---|---|---|
| Header | Section title with optional icon | Content, Style, Advanced |
| Navigation | Link to an app page | Content, Style, Behavior, Advanced |
| Custom Link | External link (Web/Email/Phone) | Content, Style, Behavior, Advanced |
| Divider | Horizontal line | Style, Advanced |
| Spacing | Vertical spacing | Spacing |
| Text Label | Descriptive text | Content, Style, Advanced |
| Logout Button | Logout button | Basic Settings, Colors, Typography, Icon, Dimensions |
How do I save my changes?
Section titled “How do I save my changes?”Changes are saved automatically! As soon as you change something, it’s automatically saved after 500ms.
Can I undo changes?
Section titled “Can I undo changes?”Yes! Use the undo button in the toolbar. Up to 20 steps are saved. You can also restore undone actions with “Redo”.
Why don’t I see a logout button?
Section titled “Why don’t I see a logout button?”The logout button only appears when:
- Firebase Auth is active in your app
- A user is logged in
Can I delete the logout button?
Section titled “Can I delete the logout button?”No, the logout button is automatically controlled by Firebase Auth. However, you can customize it (colors, text, style) and move it.
How do I change the order of elements?
Section titled “How do I change the order of elements?”Tap the sort icon in the toolbar and drag the elements to the desired position.
How do I hide an element without deleting it?
Section titled “How do I hide an element without deleting it?”Tap the eye icon to the right of the element. Hidden elements show a “Hidden” badge.