Elements Reference
This reference defines the reusable UI elements used throughout the Doctor App. Each element includes configuration rules, preview types, interaction options, and constraints.
Base Components
🔹
Displays a labeled header row with optional styling or icons.
🔹
Allows scrolling of its content area.
🔹
Base container component for layout and structure.
Feedback Components
🔹
Displays a numeric count.
Navigation Components
🔹
Navigable anchor component that supports routing.
🔹
Segmentation of content into separate panels.
🔹
Segmentation of content into separate panels.
🔹
Nested content organizer based on tabs.
🔹
Embeds external or internal web content within the app interface.
🔹
Group of actions or navigation options.
Input Components
🔹
Validates and captures email input.
🔹
Securely captures user passwords.
🔹
Captures and formats phone number input.
🔹
Input field for selecting a calendar date.
🔹
Dropdown for selecting a single option.
🔹
Allows selecting multiple options.
🔹
Enables single-choice from a group.
🔹
Toggle input for yes/no decisions.
🔹
Captures multiline freeform input.
🔹
Captures numeric input (whole numbers).
🔹
Captures decimal numeric input.
🔹
Editable text input with validation.
🔹
Captures time input.
Layout & Container Components
🔹
Structured layout container for grouping content.
🔹
Organizes and wraps related child components.
🔹
Framed container with scrollable or fixed content.
🔹
Container that splits content regions.
🔹
Adds spacing between elements.
🔹
Divider element for spacing layout.
🔹
Thin horizontal line for visual separation.
🔹
Visual gap or break in layout.
Text Styling Components
🔹
Displays caption or label text.
🔹
Header text for screens or sections.
🔹
Secondary-level heading text.
🔹
Used to label grouped UI regions.
🔹
Informational text, typically non-editable.
🔹
Text with visual emphasis.
🔹
Additional information or hint text.
🔹
Text styled for received messages.
🔹
Text styled for sent messages.
🔹
Color-coded label elements for statuses or emphasis.
Media & Visual Components
🔹
Static image asset for layout or decoration.
🔹
Displays uploaded or captured user image.
🔹
Avatar or profile image display.
File Upload & Embed Components
Button Variants
🔹
Primary action trigger.
🔹
Low-priority transparent button.
🔹
Alternative button variant.
Action Metadata and Behavior
This section defines the supported action types and how UI components trigger them using metadata configuration.
Each action uses a combination of fields to control behavior, appearance, and runtime execution.
Metadata-Driven Interactions
Use action metadata to configure behaviors declaratively. This model lets UI components initiate navigation, API operations, or app interactions based on configuration rather than custom code.
This approach:
- Reduces the need for imperative logic
- Enables consistent behavior across components
- Simplifies onboarding and app-triggered flows
- Centralizes interaction patterns for easier maintenance
Action Properties
| Property | Type | Default | Description |
|---|---|---|---|
action | String | — | Specifies the action type to trigger when the component is activated. |
argument | String | None | Supplies a value such as a URL, message, or parameter for the action. |
autostart | Boolean | false | Runs the action automatically when the component loads. |
close | Boolean | false | Closes the popup or parent UI container after the action completes. |
banner | String | None | Displays a banner message after the action executes, if defined. |
Supported Action Types
These are the predefined action types supported by the Doctor App SDK.
| ID | Action | Category | Requires argument | Description |
|---|---|---|---|---|
| 1 | browser | General | URL | Opens a browser tab to the specified URL. |
| 2 | copy | General | Text | Copies the provided text to the clipboard. |
| 3 | permission | General | CSV | Requests runtime permission (e.g., location, camera). |
| 4 | page | Server | URL | Loads a new screen using a GET request. |
| 5 | popup | Server | URL | Opens a popup window with the specified GET request. |
| 6 | patch | Server | URL | Sends a PATCH request to the specified resource. |
| 7 | location | Server | URL | Sends a POST request containing location data. |
| 8 | save | Server | URL | Sends a POST request containing current field values. |
| 9 | camera | Video | — | Enables or disables camera input. |
| 10 | flip | Video | — | Switches between front and rear cameras. |
| 11 | mute | Video | — | Mutes or unmutes the microphone. |
Live Usage Example
This example configures a Combo field that automatically loads a country selector when the screen opens. It opens a popup and shows a banner after completion.
{
"type": "combo",
"label": "Select Country",
"action": "popup",
"argument": "/v3/countries/list",
"autostart": true,
"close": true,
"banner": "Country list loaded"
}
Why use this?
- Enables preloading behavior without JavaScript.
- Automatically triggers when the field appears.
- Closes the popup after interaction.
- Provides user feedback via a banner.
Field Type Compatibility
The following table summarizes which component types support actions and related metadata.
| Type | Category | Supports List | Supports Range | Supports Event | Examples |
|---|---|---|---|---|---|
Field | Text | — | — | — | Email, Phone, Password |
Dropdown | Field | ✅ | — | ✅ | Combo, Multiselect |
Range | Field | ✅ | ✅ | — | Integer, Date, Time |