Widget Reference
Complete reference for all 101 Appivo widgets
Widget Reference
Appivo provides 101 pre-built widgets for building user interfaces: 73 desktop widgets and 28 mobile widgets. This reference documents all widgets with their properties, events, methods, and usage examples.
Widget Categories
Desktop Widgets (73)
Desktop widgets are optimized for web browsers and provide full functionality for complex business applications.
| Category | Widgets | Description |
|---|---|---|
| Input Widgets | TextField, TextArea, RichTextArea, NumberField, NumberSpinner, CurrencyField, DateField, TimeField, CheckBox, Select, ComboBox, MultiSelect, HorizontalSlider, VerticalSlider | Capture user input |
| Display Widgets | Label, DisplayLabel, Image, Video, Icon | Display content |
| Data Widgets | DataGrid, DataGrid2, DataList, Chart, Calendar | Display and manage data |
| Container Widgets | FlexContainer, FlexItem, GridContainer, TabContainer, BorderContainer, SplitPane | Layout organization |
| Action Widgets | Button, DropdownButton, ButtonBar | Trigger actions |
| Navigation Widgets | Menu, MenuBar, NavigationBar | Application navigation |
| Specialized Widgets | FileUpload, Dropzone, Signature, Map, Tree, Canvas, Select2, Countdown, ExcelImport, Twitter, Instagram, AutodeskViewer, AudioPlayer, Animation, FormAssistant | Special-purpose widgets |
Mobile Widgets (28)
Mobile widgets are touch-optimized with responsive layouts and gesture support. All mobile widgets are prefixed with "M".
| Category | Widgets | Description |
|---|---|---|
| Container Widgets | MView, MDialog, MFixedContainer | Mobile layout containers |
| Navigation Widgets | MTabBar, MList, MListItem | Mobile navigation |
| Input Widgets | MButton, MTextField, MTextArea, MNumberField, MDateField, MSwitch, MCheckBox, MRange | Touch input controls |
| Display Widgets | MCard, MHeading, MText, MIcon, MFab | Mobile display elements |
Common Properties
All widgets inherit these base properties from UIElement:
| Property | Type | Description |
|---|---|---|
id | String | Unique identifier for the widget |
style | String | CSS style string |
styleProps | Object | Style properties object |
hidden | Boolean | Controls visibility |
disabled | Boolean | Disables user interaction |
tabIndex | Integer | Tab order for keyboard navigation |
position | Position | Absolute positioning configuration |
autoHeight | Boolean | Automatic height adjustment |
maxi | String | Maximize behavior ("yes", "no", "auto") |
features | List | Required feature flags |
handlers | Map | Event handler mappings |
Common Events
All widgets can respond to these standard events:
| Event | Description | Parameters |
|---|---|---|
Click | User clicks the widget | event, widget |
DblClick | User double-clicks | event, widget |
Focus | Widget receives focus | event, widget |
Blur | Widget loses focus | event, widget |
KeyDown | Key pressed down | event, keyCode |
KeyUp | Key released | event, keyCode |
KeyPress | Key press complete | event, keyCode |
Common Methods
All widgets inherit these methods from the base Widget class:
| Method | Description | Parameters | Returns |
|---|---|---|---|
getValue() | Get widget value | None | Any |
setValue(value) | Set widget value | value (Any) | void |
focus() | Set keyboard focus | None | void |
blur() | Remove focus | None | void |
validate() | Validate value | None | Boolean |
reset() | Reset to initial state | None | void |
enable() | Enable widget | None | void |
disable() | Disable widget | None | void |
show() | Show widget | None | void |
hide() | Hide widget | None | void |
setHidden() | Hide widget | None | void |
getId() | Get widget ID | None | String |
getParent() | Get parent widget | None | Widget |
getForm() | Get associated form | None | Form |
setStyleProps(props) | Set CSS styles | props (Object) | void |
setStyleProp(prop, value) | Set single style | prop, value (String) | void |
getStyleProps() | Get current styles | None | Object |
Quick Reference
Desktop Widget List
Input Widgets
- TextField - Single-line text input
- TextArea - Multi-line text input
- RichTextArea - WYSIWYG editor
- NumberField - Numeric input
- NumberSpinner - Numeric with buttons
- CurrencyField - Currency input
- DateField - Date picker
- TimeField - Time picker
- CheckBox - Boolean toggle
- Select - Dropdown selection
- ComboBox - Dropdown with input
- MultiSelect - Multiple selection
- HorizontalSlider - Horizontal range
- VerticalSlider - Vertical range
Display Widgets
- Label - Static text
- DisplayLabel - Data-bound text
- Image - Image display
- Video - Video player
- Icon - Icon display
Data Widgets
- DataGrid - Tabular data
- DataGrid2 - Enhanced grid
- DataList - List display
- Chart - Data visualization
- Calendar - Event calendar
Container Widgets
- FlexContainer - Flexbox layout
- FlexItem - Flex child
- GridContainer - CSS Grid layout
- TabContainer - Tabbed panels
- BorderContainer - Border layout
- SplitPane - Resizable split
Action Widgets
- Button - Action button
- DropdownButton - Button with menu
- ButtonBar - Button group
Navigation Widgets
- Menu - Menu structure
- MenuBar - Menu bar
- NavigationBar - Navigation header
Specialized Widgets
- FileUpload - File upload
- Dropzone - Drag-drop upload
- Signature - Signature capture
- Map - Interactive map
- Tree - Hierarchical tree
- Canvas - Drawing canvas
- Select2 - Advanced select
- Countdown - Timer display
- ExcelImport - Excel import
- Twitter - Twitter feed
- Instagram - Instagram feed
- AutodeskViewer - 3D viewer
- AudioPlayer - Audio playback
- Animation - Lottie animation
- FormAssistant - AI form helper
Mobile Widget List
Container Widgets
- MView - Mobile view
- MDialog - Modal dialog
- MFixedContainer - Fixed position
Navigation Widgets
Input Widgets
- MButton - Touch button
- MTextField - Text input
- MTextArea - Multi-line input
- MNumberField - Number input
- MDateField - Date picker
- MSwitch - Toggle switch
- MCheckBox - Checkbox
- MRange - Range slider
Display Widgets
- MCard - Content card
- MHeading - Heading text
- MText - Text display
- MIcon - Icon display
- MFab - Floating action button
Data Binding
Direct Binding
Bind a widget directly 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 Binding
Respond to user interactions:
Widget: Button
Event: onClick
Action: Save record and navigate to list
Creating Responsive Layouts
Design interfaces that work on all screen sizes:
- Use Flexible Containers: FlexContainer adapts to screen width
- Set Breakpoints: Define behavior for mobile vs desktop
- Test on Multiple Devices: Use preview mode to test
- Mobile-First Approach: Design for mobile, enhance for desktop
Navigation Patterns
Common navigation approaches in Appivo:
- Menu-Based: NavigationBar with dropdown menus
- Tab-Based: TabContainer for section switching
- Wizard-Style: Multi-step forms with Next/Previous
- Dashboard: Grid of cards linking to different areas
Next Steps
- Desktop Widgets - Complete desktop widget reference
- Mobile Widgets - Complete mobile widget reference
- User Interfaces Guide - UI architecture and patterns