CRUD Operations Example

Learn the fundamental data operations: Create, Read, Update, Delete.

What You'll Build

A complete product management system with:

• Product listing with search
• Add new products
• Edit existing products
• Delete products with confirmation

Prerequisites

• Completed the Hello World example
• Understanding of models and views

Step 1: Create the Product Model

Define your data structure:

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

5. Click Save

Step 2: Create - Add Product View

Build the create form:

1. Create a new view "Add Product"
2. Add widgets:

Panel: New Product
├── TextField: Name (bound to name, required)
├── TextArea: Description (bound to description)
├── NumberField: Price (bound to price, required)
├── TextField: SKU (bound to sku, required)
├── Select: Category (bound to category)
│   Options: Electronics, Clothing, Home, Other
├── CheckBox: In Stock (bound to in_stock)
└── FlexContainer: Actions
    ├── Button: Save
    └── Button: Cancel

Save Button Configuration

Button: Save
onClick:
  1. Validate form
  2. Create new Product record
  3. Show success message: "Product created"
  4. Navigate to Product List

Step 3: Read - Product List View

Display products with search:

1. Create a new view "Product List"
2. Add widgets:

Panel: Products
├── FlexContainer: Toolbar
│   ├── TextField: Search (for filtering)
│   └── Button: Add Product
└── DataGrid: Products
    Data: Product model
    Columns:
      - sku
      - name
      - category
      - price (formatted as currency)
      - in_stock (as checkbox icon)
    Features:
      - Sortable columns
      - Pagination (25 per page)
      - Row click navigates to Edit view

Search Configuration

TextField: Search
onChange: Filter DataGrid
Filter expression:
  name contains search_value
  OR sku contains search_value

Step 4: Update - Edit Product View

Modify existing products:

1. Create a new view "Edit Product"
2. This view receives the product ID as a parameter
3. Add widgets:

Panel: Edit Product
├── TextField: Name (bound to product.name)
├── TextArea: Description (bound to product.description)
├── NumberField: Price (bound to product.price)
├── TextField: SKU (bound to product.sku)
├── Select: Category (bound to product.category)
├── CheckBox: In Stock (bound to product.in_stock)
├── Label: Created (displays product.created_at)
└── FlexContainer: Actions
    ├── Button: Save Changes
    ├── Button: Delete
    └── Button: Cancel

Save Changes Configuration

Button: Save Changes
onClick:
  1. Validate form
  2. Update the Product record
  3. Show success message: "Product updated"
  4. Navigate to Product List

Step 5: Delete - Confirmation Pattern

Safely delete products:

Delete Button

Button: Delete
variant: danger
onClick: Show Delete Confirmation Modal

Delete Confirmation Modal

Modal: Confirm Delete
├── Label: "Are you sure you want to delete this product?"
├── Label: Displays product name
└── FlexContainer: Actions
    ├── Button: Cancel (closes modal)
    └── Button: Delete (danger variant)
        onClick:
          1. Delete the Product record
          2. Show message: "Product deleted"
          3. Navigate to Product List

CRUD Summary

Complete Application Structure

Product Management
├── Models
│   └── Product
│       ├── name
│       ├── description
│       ├── price
│       ├── sku
│       ├── category
│       ├── in_stock
│       └── created_at
│
└── User Interfaces
    └── Desktop UI
        ├── Product List
        │   ├── Search field
        │   ├── Add button
        │   └── DataGrid
        ├── Add Product
        │   └── Form with Save/Cancel
        └── Edit Product
            └── Form with Save/Delete/Cancel

Adding Business Logic

Enhance with Rules and Actions:

Validate SKU Uniqueness

Rule: Validate Product SKU
Type: DATA
Trigger: Before Product create/update

Action: SCRIPT
  Check if SKU already exists
  If duplicate, return error

Audit Trail

Rule: Log Product Changes
Type: DATA
Trigger: After Product update/delete

Action: SCRIPT
  Create AuditLog record with:
    - product_id
    - action (update/delete)
    - user
    - timestamp
    - changes

Best Practices

Create

• Validate all required fields
• Set sensible defaults
• Provide clear feedback on success

Read

• Paginate large datasets
• Enable search and filtering
• Show relevant columns only

Update

• Load existing data into form
• Track what changed
• Confirm before saving

Delete

• Always confirm before deleting
• Consider soft delete (mark inactive)
• Log deletions for audit

Next Steps

• Filtering & Sorting - Advanced data queries
• Form Handling - Complex form patterns
• Rules and Actions - Add business logic