Widgets
Build user interfaces with Appivo's pre-built widgets
Widgets
Widgets are the building blocks of your Appivo user interfaces. With 101 pre-built widgets, you can create professional applications without writing code.
Widget Categories
Appivo organizes widgets into categories based on their purpose:
Input Widgets
Capture user input with these widgets:
| Widget | Purpose |
|---|---|
| TextField | Single-line text input |
| TextArea | Multi-line text input |
| DateField | Date picker |
| TimeField | Time picker |
| DateTimeField | Combined date and time |
| Select | Dropdown selection |
| CheckBox | Boolean toggle |
| RadioButton | Single selection from options |
| NumberField | Numeric input |
| EmailField | Email input with validation |
| PhoneField | Phone number input |
| PasswordField | Password input (masked) |
| FileUpload | File attachment |
| ImageUpload | Image with preview |
Display Widgets
Show information to users:
| Widget | Purpose |
|---|---|
| Label | Text display |
| Icon | Icon display |
| Image | Image display |
| HTML | Rich HTML content |
| Video | Video player |
| Badge | Status indicator |
| Progress | Progress indicator |
| Avatar | User photo display |
Container Widgets
Organize and structure your layout:
| Widget | Purpose |
|---|---|
| Panel | Content grouping |
| FlexContainer | Flexible responsive layout |
| GridContainer | Grid-based layout |
| TabContainer | Tabbed content sections |
| Accordion | Collapsible sections |
| Card | Card-style container |
| Modal | Popup dialog |
| Drawer | Slide-out panel |
Data Widgets
Display and manage data:
| Widget | Purpose |
|---|---|
| DataGrid | Tabular data display |
| List | List of items |
| Chart | Data visualization |
| Calendar | Calendar view |
| Map | Geographic display |
| Tree | Hierarchical data |
| Timeline | Chronological events |
Navigation Widgets
Help users navigate your application:
| Widget | Purpose |
|---|---|
| Button | Clickable action |
| Link | Navigation link |
| Menu | Dropdown menu |
| NavigationBar | Top navigation |
| Breadcrumb | Path navigation |
| Tabs | Tab navigation |
| Stepper | Multi-step wizard |
Mobile Widgets
Appivo provides 28 mobile-optimized widgets for touch interfaces:
| Widget | Purpose |
|---|---|
| MButton | Touch-optimized button |
| MTextField | Mobile text input |
| MDateField | Native date picker |
| MList | Scrollable list with pull-to-refresh |
| MTabBar | Bottom navigation |
| MSwitch | Toggle switch |
| MSlider | Range slider |
| MCard | Mobile card layout |
Mobile widgets are prefixed with "M" and include touch-specific features like swipe gestures, pull-to-refresh, and native device integration.
Using Widgets
Adding Widgets
- Navigate to User Interfaces in the Application Builder
- Create or open a view
- Drag widgets from the widget palette onto the canvas
- Position and resize as needed
Widget Properties
Every widget has configurable properties:
- General - Name, visibility, enabled state
- Appearance - Size, colors, fonts, borders
- Data - Bindings to model attributes
- Events - Actions triggered by user interaction
- Validation - Input rules and error messages
Data Binding
Connect widgets to your data models:
Direct Binding Bind a widget to a model attribute:
Widget: TextField
Property: value
Binding: customer.name
Calculated Binding Display computed values:
Widget: Label
Property: text
Binding: order.quantity * order.unit_price
Event Handling
Respond to user interactions:
| Event | When It Triggers |
|---|---|
| onClick | Widget is clicked |
| onChange | Value changes |
| onFocus | Widget receives focus |
| onBlur | Widget loses focus |
| onSubmit | Form is submitted |
Layout Best Practices
Use Container Widgets
Start your layouts with container widgets:
- FlexContainer for responsive layouts that adapt to screen width
- GridContainer for structured grid-based designs
- TabContainer for organizing content into sections
Form Layout
When building forms:
- Group related fields with Panel containers
- Use clear Label widgets for each input
- Mark required fields with visual indicators
- Provide helpful placeholder text
- Add validation feedback messages
Responsive Design
Make your interfaces work on all screen sizes:
- Use FlexContainer for layouts that reflow
- Set percentage-based widths instead of fixed pixels
- Test on multiple screen sizes using preview mode
- Consider separate mobile UI for touch devices
Widget Styling
Appearance Properties
Customize widget appearance with:
- Size - Width, height, min/max dimensions
- Colors - Background, text, border colors
- Typography - Font family, size, weight
- Spacing - Margin, padding
- Borders - Width, style, radius
- Shadow - Box shadow effects
Theming
Apply consistent styling across your application:
- Define theme colors and use them consistently
- Create reusable style patterns
- Use CSS variables for dynamic theming
- Support light and dark modes
Common Widget Patterns
Data Table with Actions
FlexContainer
├── DataGrid (bound to model)
│ ├── Column: Name
│ ├── Column: Status
│ └── Column: Actions (Edit, Delete buttons)
└── Button: Add New
Form with Validation
Panel: Customer Form
├── TextField: Name (required)
├── EmailField: Email (required, unique)
├── PhoneField: Phone
├── Select: Status
└── FlexContainer
├── Button: Save
└── Button: Cancel
Dashboard Card
Card
├── FlexContainer (header)
│ ├── Icon
│ └── Label: Title
├── Label: Value (large, bold)
└── Label: Description (small, muted)
Next Steps
- Quick Start - Build your first application
- User Interface Guide - Advanced UI patterns
- Data Modeling - Define your data structure
- Mobile Development - Build mobile apps