AppML Filters — Advanced Data Filtering and Search Techniques

In this tutorial, you will learn about AppML Filters. We cover key concepts, practical examples, and best practices to help you master this topic.

AppML filters let users narrow down data sets by specific criteria. Beyond basic dropdown filters, AppML supports date ranges, numeric ranges, full-text search, combined conditions, and saved filter presets.

What You'll Learn

You will configure advanced filters including date ranges, numeric ranges, combined conditions, custom search queries, and user-saved filter presets.

Why It Matters

Data is only useful when you can find what you need. Advanced filtering turns a generic data table into a powerful analysis tool, letting users answer specific questions without scrolling through thousands of records.

Real-World Use

The Durga Antivirus Pro threat analysis dashboard uses combined filters for severity, date range, threat type, and affected platform. Analysts save common filter combinations as presets for recurring investigations.

flowchart LR
    A[Filter Configuration] --> B{Filter Type}
    B --> C[Dropdown]
    B --> D[Date Range]
    B --> E[Numeric Range]
    B --> F[Text Search]
    B --> G[Combined]
    C --> H[SQL WHERE Clause]
    D --> H
    E --> H
    F --> H
    G --> H
    H --> I[Filtered Results]
    style A fill:#1e293b,color:#fff
    style I fill:#0f172a,color:#fff

Basic Filter Configuration

Filters are defined in the view configuration and render as UI controls above the data table.

<view type="list" table="products">
  <filter field="category" type="dropdown" label="Category">
    <option value="">All Categories</option>
    <option value="Electronics">Electronics</option>
    <option value="Clothing">Clothing</option>
    <option value="Books">Books</option>
  </filter>
  <filter field="active" type="boolean" label="Active Only"/>
  <column field="name" header="Name"/>
  <column field="category" header="Category"/>
</view>

Expected output: Two filter controls above the table. A dropdown to select category and a checkbox to show only active products.

Date Range Filters

Filter records by date ranges with a date picker UI.

<filter type="date-range" field="created_at" label="Created Date"/>
<filter type="date-range" field="order_date" label="Order Date">
  <preset name="Today" days="0"/>
  <preset name="Last 7 Days" days="-7"/>
  <preset name="This Month" start="-30" end="0"/>
  <preset name="This Year" start="-365" end="0"/>
</filter>

Expected output: Date range pickers with from and to fields. Preset buttons for common ranges like Today, Last 7 Days, and This Month.

Numeric Range Filters

Filter numeric fields with min and max values.

<filter type="range" field="price" label="Price Range"
  min="0" max="10000" step="10"
  prefix="$"/>
<filter type="range" field="stock" label="Stock Level"
  min="0" max="1000"/>
<filter type="range" field="rating" label="Minimum Rating"
  min="1" max="5" step="0.5"/>

Expected output: Range sliders or min-max input fields with appropriate formatting. Price shows dollar prefix. Rating shows half-star increments.

Combined Filters

Combine multiple filter types for complex queries.

<view type="list" table="orders">
  <filter type="group" label="Order Status">
    <filter field="status" type="dropdown">
      <option value="">All</option>
      <option value="pending">Pending</option>
      <option value="shipped">Shipped</option>
      <option value="delivered">Delivered</option>
    </filter>
  </filter>
  <filter type="date-range" field="order_date" label="Date Range"/>
  <filter type="range" field="total" label="Order Total"
    min="0" max="10000" prefix="$"/>
  <search fields="customer_name,order_id,email"
    placeholder="Search orders..."/>
</view>

Expected output: Three independent filter controls and a search box. All filters combine with AND logic. The data updates when any filter changes.

Custom SQL Filter Conditions

For complex filtering logic, define custom SQL conditions.

<view type="list" table="orders">
  <filter type="custom" label="Delivery Status" field="delivery_status">
    <option value="late">Late Delivery</option>
    <option value="on-time">On Time</option>
  </filter>
</view>

With a custom condition mapping:

// filters/delivery.js
module.exports = {
  late: 'expected_date < NOW() AND status != "delivered"',
  on_time: 'expected_date >= NOW() OR status = "delivered"'
};

Expected output: Selecting Late Delivery shows orders past their expected date that have not been delivered.

Saved Filter Presets

Let users save and recall filter combinations.

<view type="list" table="support_tickets">
  <presets enabled="true"/>
  <filter field="priority" type="dropdown"/>
  <filter field="status" type="dropdown"/>
  <filter field="assigned_to" type="dropdown"/>
</view>

Expected output: A Save Filter button above the filters. Users name and save their current filter combination. Saved presets appear in a dropdown for quick access.

Common Mistakes

1. Adding too many filters to one view: More than 5-6 filters overwhelm the interface. Use filter groups and hide advanced filters behind an expandable section.

2. Not providing default values: Without default filter values, users see all data on first load. Set sensible defaults for common use cases.

3. Using dropdown filters for fields with hundreds of unique values: Dropdowns with too many options are unusable. Use search-type filters instead.

4. Forgetting to index filtered columns: Filters perform SQL WHERE queries. Unindexed columns cause slow queries on large tables.

5. Ignoring filter state in URL parameters: AppML preserves filter state in URL parameters so users can bookmark or share filtered views.

Practice Questions

1. What filter type would you use for a date range selection?

type="date-range" with from and to date pickers.

2. How do you add preset quick-select buttons to a date range filter?

Use <preset> child elements with name and days or start/end attributes.

3. What is a filter group used for?

A filter group visually combines related filters under one label and applies AND logic between them.

4. How do users save their favorite filter combinations?

Enable the presets feature with <presets enabled="true"/> on the view.

5. How does AppML combine multiple active filters?

All active filters combine with AND logic. Each filter adds a WHERE condition to the generated SQL.

Challenge

Create a support ticket dashboard with filters for priority, status, assigned agent, date range, and keyword search. Add at least three saved filter presets. Test that combining all filters produces the correct SQL query.

Frequently Asked Questions

Mini Project

Build a financial transactions dashboard with filters for date range, Transaction type (debit/credit), amount range, merchant name search, and status. Add a filter preset for Monthly Expenses, Recent Large Transactions, and Pending Refunds.

What's Next

Continue to AppML Customization to learn how to extend AppML with custom components, integrations, and advanced configuration.