Hello World Example

Build your first Appivo application - a simple contact directory.

What You'll Build

A basic contact management application with:

• A data model for contacts
• A list view showing all contacts
• A form to add new contacts

Prerequisites

• An Appivo account with access to the Application Builder
• Basic understanding of data models and user interfaces

Step 1: Create a New Application

1. Log in to the Appivo platform
2. Navigate to Applications
3. Click Create New Application
4. Enter a name: "My First App"
5. Click Create

Step 2: Create a Contact Model

Define your data structure:

1. Navigate to Models
2. Click Add Model
3. Name it "Contact"
4. Add attributes:

5. Click Save

Step 3: Create a List View

Display your contacts:

1. Navigate to User Interfaces
2. Select Desktop UI
3. Click Add View
4. Name it "Contact List"
5. Add a DataGrid widget:
   • Data source: Contact model
   • Columns: name, email, phone
   • Enable: Sorting, Pagination
6. Add a Button widget:
   • Label: "Add Contact"
   • onClick: Navigate to Add Contact view

Step 4: Create an Add Contact Form

Build the data entry form:

1. Add a new view named "Add Contact"
2. Add a Panel widget with title "New Contact"
3. Add input widgets:
   • TextField bound to name
   • EmailField bound to email
   • PhoneField bound to phone
   • TextArea bound to notes
4. Add buttons:
   • Button "Save" - Saves record, navigates to list
   • Button "Cancel" - Navigates back to list

Step 5: Test Your Application

1. Click Preview in the Application Builder
2. Click "Add Contact" button
3. Fill in the form and click Save
4. Verify the contact appears in the list

What You Learned

Complete Application Structure

My First App
├── Models
│   └── Contact
│       ├── name (Text)
│       ├── email (Email)
│       ├── phone (Phone)
│       └── notes (Long Text)
│
└── User Interfaces
    └── Desktop UI
        ├── Contact List (DataGrid, Button)
        └── Add Contact (Form with inputs)

Next Steps

Extend your application:

1. Add edit functionality - Edit existing contacts
2. Add search - Filter contacts by name or email
3. Add validation - Require valid email format
4. Add automation - Send welcome email to new contacts

Continue learning:

• CRUD Operations - Complete data management
• Form Handling - Advanced forms
• Data Modeling Guide - Model design patterns