User Interfaces Guide

Learn how to build professional, responsive user interfaces using Appivo's hierarchical UI system.

Understanding the UI Architecture

Appivo organizes user interfaces in a clear hierarchy:

Application (Schema)
└── User Interfaces (desktop, mobile, public, web)
    └── Views (individual screens/pages)
        └── Widgets (UI elements like buttons, forms, grids)

This structure allows you to create multiple interfaces for different platforms while sharing the same data and business logic.

User Interfaces

A User Interface is a complete UI environment for your application. Each application can have multiple user interfaces optimized for different purposes.

User Interface Types

Each User Interface contains its own:

• Set of Views
• Menu structure
• Theme settings
• Initial views (starting screens)
• Common elements shared across all views

Desktop User Interface

Best for complex business applications accessed via web browsers:

• Default width: 1280px
• Full widget library available (73 widgets)
• Keyboard and mouse optimized
• Multiple views with menu navigation
• Support for complex layouts and data grids

Mobile User Interface

Optimized for touch devices and smaller screens:

• Touch-optimized widgets (28 M-prefixed widgets)
• Responsive layouts
• Gesture support (swipe, pull-to-refresh)
• Bottom tab navigation typical
• Simplified interfaces for essential tasks

Public User Interface

For unauthenticated access to your application:

• Can be desktop or mobile type
• Public access enabled
• Limited to public data and features
• No authentication required
• Ideal for customer portals, contact forms, status pages

Views

A View is an individual screen or page within a User Interface. Views contain the actual widgets and define the layout of a specific screen.

View Structure

Each View can contain:

View: "CustomerList"
├── Forms (data binding)
│   └── CustomerForm (bound to Customer model)
├── Widgets
│   ├── DataGrid (displays customer records)
│   ├── SearchBar (filters the grid)
│   ├── Button (add new customer)
│   └── Panel (container for layout)
├── Queries (data sources)
│   └── ActiveCustomers query
└── Functions (view logic)
    └── refreshData(), validateForm()

Common View Types

List View

Display multiple records with search and filtering:

• DataGrid as primary widget
• Search/filter capabilities
• Navigation to detail view
• Bulk actions toolbar

Detail View

Show or edit a single record:

• Form with model binding
• Field validation
• Save/Cancel buttons
• Related data tabs

Dashboard View

Overview and analytics:

• Chart widgets
• Summary cards
• Recent activity lists
• Quick action buttons

Wizard View

Multi-step processes:

• StepPanel for navigation
• Conditional visibility
• Progress indicator
• Validation between steps

Creating Views

1. Navigate to User Interfaces in the Application Builder
2. Select your User Interface
3. Click Add View
4. Name your view descriptively
5. Start adding widgets to build the layout

Working with Multiple User Interfaces

When to Create Multiple UIs

Create separate User Interfaces when you need:

• Different device experiences: Desktop UI for office users, Mobile UI for field workers
• Different user types: Admin UI with full features, Public UI with limited access
• Different purposes: Main UI for daily operations, Kiosk UI for self-service

Sharing Components Across UIs

While each UI has its own Views, they can:

• Share the same Models and data
• Use the same Actions and Rules
• Access the same Queries
• Call the same Integrations

Example: Desktop vs Mobile UI Design

Desktop CustomerDetailView:
- Three-column layout
- All fields visible
- Multiple tabs for related data
- Rich text editor for notes
- Full DataGrid with sorting

Mobile CustomerDetailView:
- Single column, scrollable
- Collapsible sections
- Essential fields only
- Simple text area for notes
- Card-based list view

Complete Example: Multi-UI Application

Here's how User Interfaces and Views work together:

CRM Application
├── Desktop UI (main)
│   ├── Menu Structure
│   │   ├── Dashboard
│   │   ├── Customers
│   │   ├── Orders
│   │   └── Settings
│   └── Views
│       ├── DashboardView
│       │   ├── SummaryCards widget
│       │   ├── SalesChart widget
│       │   └── RecentOrders grid
│       ├── CustomerListView
│       │   ├── CustomerGrid widget
│       │   └── SearchBar widget
│       ├── CustomerDetailView
│       │   ├── CustomerForm (bound to Customer model)
│       │   ├── OrderHistory grid
│       │   └── NotesPanel
│       └── SettingsView
│           └── ConfigurationForm
│
├── Mobile UI
│   ├── Bottom Tab Navigation
│   │   ├── Home
│   │   ├── Customers
│   │   └── Profile
│   └── Views
│       ├── MobileHomeView (simplified dashboard)
│       ├── MobileCustomerListView (card layout)
│       └── MobileCustomerDetailView (stacked layout)
│
└── Public UI
    └── Views
        ├── PublicLandingView
        ├── ContactFormView
        └── StatusCheckView

Navigation Between Views

Within a User Interface

Navigate between Views in the same UI:

// From a button click event
context.navigateToView('CustomerDetailView', {
    customerId: selectedCustomer.id
});

View Initialization

When a View loads, it can access:

• URL parameters
• Navigation context
• Form data from previous view
• User session data

Widget System

Appivo provides 101 pre-built widgets organized into categories:

Desktop Widgets (73)

Mobile Widgets (28)

For complete widget documentation, see the Widget Reference.

Data Binding

Connect widgets to your data models.

Direct Binding

Bind widget values to model attributes:

Widget: TextField
Property: value
Binding: customer.name

When the user types, customer.name updates automatically.

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

Layout Strategies

FlexContainer Layouts

Use FlexContainer for responsive designs:

FlexContainer
  direction: row
  wrap: wrap
  gap: 16px
  justify: space-between
  align: center

GridContainer Layouts

Use GridContainer for structured grids:

GridContainer
  columns: "1fr 2fr 1fr"
  rows: "auto 1fr auto"
  gap: 20px
  areas: "header header header"
         "sidebar main aside"
         "footer footer footer"

Responsive Design

Design interfaces that work on all screen sizes:

1. Use Flexible Containers: FlexContainer adapts to screen width
2. Set Breakpoints: Define behavior for mobile vs desktop
3. Test on Multiple Devices: Use preview mode to test
4. Mobile-First Approach: Design for mobile, enhance for desktop

Form Building Best Practices

When creating forms within your Views:

1. Group Related Fields: Use Panel widgets to organize sections
2. Clear Labels: Every input needs a descriptive label
3. Validation Messages: Show helpful error messages
4. Required Indicators: Mark mandatory fields clearly
5. Logical Tab Order: Ensure keyboard navigation works

Form Layout Example

Panel: Personal Information
├── TextField: First Name
├── TextField: Last Name
└── TextField: Email

Panel: Address
├── TextField: Street
├── TextField: City
├── Select: Country
└── TextField: Postal Code

Panel: Actions
├── Button: Save
└── Button: Cancel

Event Handling

Common Widget Events

Event Actions

Actions you can trigger from events:

• Navigate to another view
• Save/update records
• Show modal dialogs
• Call API endpoints
• Run custom scripts
• Invoke AI agents

Styling

Common Style Properties

All widgets support these base properties:

Theme Integration

Use theme colors for consistency:

• Primary color for main actions
• Secondary color for alternate actions
• Success/error/warning for feedback
• Neutral colors for backgrounds

Best Practices

Consistency

• Use consistent layouts across views
• Apply same patterns for similar operations
• Maintain consistent navigation structure
• Use standard widget configurations

User Experience

• Provide loading indicators for async operations
• Show progress for long operations
• Handle errors gracefully with clear messages
• Give immediate feedback for user actions

Accessibility

• Use descriptive labels for all inputs
• Ensure keyboard navigation works
• Provide alt text for images
• Maintain sufficient color contrast

Performance

• Paginate large data sets in DataGrid
• Lazy load heavy content
• Optimize images for web
• Minimize initial view load time

Next Steps

• Widget Reference - Complete widget documentation
• Forms Guide - Advanced form design
• Mobile Development - Mobile-specific UI patterns
• Data Modeling - Design data for your UI