Filtering & Sorting Example

Learn how to filter, sort, and search data in your Appivo applications.

What You'll Build

An order management view with:

• Filter orders by status, date, customer
• Sort by any column
• Search across multiple fields
• Save filter presets

Prerequisites

• Completed the CRUD Operations example
• Understanding of DataGrid widget

Step 1: Create the Order Model

Define your data structure:

Status options: Pending, Processing, Shipped, Delivered, Cancelled

Step 2: Build the Order List View

Create a filterable order list:

Panel: Order Management
├── Panel: Filters
│   ├── Select: Status Filter
│   ├── DateField: Start Date
│   ├── DateField: End Date
│   ├── TextField: Search
│   └── Button: Clear Filters
│
└── DataGrid: Orders
    Data Source: Order model
    Columns:
      - order_number (sortable)
      - customer_name (sortable)
      - order_date (sortable)
      - status
      - total (sortable, currency format)
      - priority

Step 3: Implement Status Filter

Filter by order status:

Status Filter Widget

Select: Status Filter
Options:
  - All (value: "")
  - Pending
  - Processing
  - Shipped
  - Delivered
  - Cancelled
Default: All

Apply Filter to DataGrid

DataGrid: Orders
Filter:
  If status_filter is not empty:
    status = status_filter value

Step 4: Implement Date Range Filter

Filter orders by date range:

Date Fields

DateField: Start Date
Label: "From"
onChange: Update DataGrid filter

DateField: End Date
Label: "To"
onChange: Update DataGrid filter

Date Filter Logic

DataGrid: Orders
Filter conditions:
  If start_date has value:
    order_date >= start_date
  If end_date has value:
    order_date <= end_date

Step 5: Implement Search

Search across multiple fields:

Search Field

TextField: Search
Placeholder: "Search orders..."
onChange: Filter DataGrid (debounced)

Search Filter Logic

DataGrid: Orders
Search filter:
  order_number contains search_value
  OR customer_name contains search_value

Step 6: Combine Multiple Filters

Apply all filters together:

DataGrid: Orders
Filter expression:
  (status_filter is empty OR status = status_filter)
  AND (start_date is empty OR order_date >= start_date)
  AND (end_date is empty OR order_date <= end_date)
  AND (search is empty OR
       order_number contains search OR
       customer_name contains search)

Step 7: Enable Sorting

Configure sortable columns:

DataGrid: Orders
Sorting:
  Default sort: order_date DESC
  Sortable columns:
    - order_number
    - customer_name
    - order_date
    - total

Multi-Column Sort

Allow sorting by multiple columns:

DataGrid Configuration:
  Multi-sort: Enabled
  Example: Sort by status, then by order_date

Step 8: Clear Filters

Reset all filters:

Button: Clear Filters
onClick:
  1. Set status_filter to ""
  2. Clear start_date
  3. Clear end_date
  4. Clear search field
  5. Reset DataGrid to default sort

Filter Patterns

Quick Filter Tabs

ButtonGroup: Quick Filters
├── Button: All
├── Button: Pending (filter: status = "Pending")
├── Button: Processing (filter: status = "Processing")
├── Button: Shipped (filter: status = "Shipped")
└── Button: Delivered (filter: status = "Delivered")

Range Filters

For numeric values:

FlexContainer: Amount Range
├── NumberField: Min Amount
├── Label: "to"
└── NumberField: Max Amount

Filter:
  total >= min_amount AND total <= max_amount

Boolean Filters

CheckBox: High Priority Only
Filter when checked:
  priority = "High"

Relationship Filters

Filter by related data:

Select: Customer
Options: From Customer model
Filter:
  customer_id = selected_customer

Sorting Patterns

Default Sort Order

DataGrid: Orders
Default Sort:
  - Column: order_date
  - Direction: Descending (newest first)

Sort Indicators

Visual indicators show current sort:

• ▲ Ascending
• ▼ Descending
• Click column header to toggle

Custom Sort Order

For status with specific order:

Status Sort Order:
  1. Pending (urgent)
  2. Processing (active)
  3. Shipped (in transit)
  4. Delivered (complete)
  5. Cancelled (inactive)

Search Best Practices

Debounce Search

Don't search on every keystroke:

TextField: Search
Debounce: 300ms (wait for user to stop typing)

Search Indicators

Show search is active:

When search has value:
  - Show "X" button to clear
  - Show result count
  - Highlight matched text

Search Scope

Let users choose where to search:

Search Configuration:
  Search in:
    - Order Number (always)
    - Customer Name (always)
    - Notes (optional)

Complete Filter Interface

Order Management View
├── Panel: Filter Bar
│   ├── ButtonGroup: Quick Status Filters
│   ├── FlexContainer: Date Range
│   │   ├── DateField: From
│   │   └── DateField: To
│   ├── TextField: Search
│   ├── Button: More Filters (expands panel)
│   └── Button: Clear All
│
├── Panel: Advanced Filters (collapsible)
│   ├── Select: Customer
│   ├── Select: Shipping Method
│   ├── NumberField: Min Amount
│   ├── NumberField: Max Amount
│   └── CheckBox: High Priority Only
│
└── Panel: Results
    ├── Label: "Showing X of Y orders"
    └── DataGrid: Orders (with all filters applied)

Performance Considerations

Filter at Query Level

Apply filters in the data query, not after loading:

Good: DataGrid filter property (server-side)
Avoid: Loading all data then filtering in UI

Index Filtered Fields

Add indexes to frequently filtered attributes:

• status (commonly filtered)
• order_date (date range queries)
• customer_id (relationship filter)

Limit Results

Set maximum result count:

DataGrid: Orders
Max Results: 1000
Pagination: 50 per page

Best Practices

Filter UX

1. Show active filter count
2. Make it easy to clear individual filters
3. Persist filters during session
4. Show when no results match

Sort UX

1. Show current sort indicator
2. Allow clicking to reverse
3. Remember user's sort preference
4. Have sensible defaults

Search UX

1. Use placeholder to show searchable fields
2. Debounce to avoid excessive queries
3. Show "no results" state clearly
4. Allow clearing search easily

Next Steps

• Pagination - Handle large result sets
• CRUD Operations - Complete data management
• Performance Guide - Optimize queries