AppML Views — Displaying Data with Lists, Grids, and Detail Views

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

AppML views control how your data appears to users. You configure list views, detail views, card grids, and custom layouts in the model, and AppML renders the corresponding HTML automatically.

What You'll Learn

You will create different view types in AppML models, configure columns, apply formatting, enable sorting and filtering, and design custom detail pages for record editing.

Why It Matters

Views are what users interact with. A well-configured view makes data easy to scan, search, and understand. AppML handles the HTML generation so you focus on what data to show and how to format it.

Real-World Use

The Durga Antivirus Pro threat dashboard uses an AppML card grid view for threat summaries and a detail view for full threat analysis. The support team uses filters to find specific threats in seconds.

flowchart LR
    A[AppML View Config] --> B{View Type}
    B --> C[List View]
    B --> D[Detail View]
    B --> E[Card Grid]
    B --> F[Custom View]
    C --> G[Table with Columns]
    D --> H[Form Layout]
    E --> I[Card Layout]
    style A fill:#1e293b,color:#fff

List View Configuration

The list view displays multiple records in a table format with configurable columns.

<appml>
  <datasource type="sqlite">
    <table name="employees">
      <field name="id" type="integer" key="true"/>
      <field name="name" type="string"/>
      <field name="department" type="string"/>
      <field name="salary" type="decimal"/>
      <field name="start_date" type="date"/>
    </table>
  </datasource>
  <view type="list" table="employees">
    <column field="name" header="Full Name" sortable="true"/>
    <column field="department" header="Department" sortable="true"/>
    <column field="salary" header="Annual Salary" format="currency" sortable="true"/>
    <column field="start_date" header="Started" format="date"/>
  </view>
</appml>

Expected output: A data table with four columns. Column headers are clickable for sorting. Salary values display as currency. Dates show in the configured format.

Detail View Configuration

The detail view provides a form layout for viewing and editing a single record.

<view type="detail" table="employees">
  <section header="Personal Information">
    <field ref="name" label="Full Name"/>
    <field ref="department" label="Department"/>
  </section>
  <section header="Compensation">
    <field ref="salary" label="Salary" format="currency"/>
    <field ref="start_date" label="Start Date"/>
  </section>
</view>

Expected output: A form with two sections. Fields are displayed with labels and formatted values. Users can edit fields and save changes.

Card Grid View

The card grid displays records as visual cards instead of a table, ideal for dashboards and galleries.

<view type="grid" table="products" columns="3">
  <card>
    <field ref="name" style="title"/>
    <field ref="price" style="subtitle" format="currency"/>
    <field ref="category" style="badge"/>
    <image field="thumbnail" style="cover"/>
  </card>
</view>

Expected output: Products appear in a three-column grid. Each card shows a thumbnail, product name as title, price as subtitle, and category as a badge.

Filters and Search

Add filters to help users narrow down records quickly.

<view type="list" table="employees">
  <filter field="department" type="dropdown"/>
  <search fields="name,email" placeholder="Search employees..."/>
  <column field="name" header="Name"/>
  <column field="department" header="Department"/>
</view>

Expected output: A dropdown filter for department above the table and a search box that filters by name and email. Matching records update in real time.

Formatting Options

AppML supports built-in formatters for common data types.

<column field="created_at" format="datetime"/>
<column field="price" format="currency" currency="EUR"/>
<column field="progress" format="percent"/>
<column field="active" format="boolean"/>
<column field="rating" format="stars"/>

Expected output:

• created_at: "Jun 28, 2026 14:30"
• price: "1.234,56 EUR"
• progress: "75%"
• active: checkmark or cross icon
• rating: star icons

Common Mistakes

1. Not setting sortable columns: Without sortable columns, users cannot reorder data. Enable sort on columns users need to analyze.

2. Overloading the list view with too many columns: More than 8-10 columns creates horizontal scrolling and poor usability. Use detail views for additional data.

3. Forgetting to add search fields: Without search, users must scroll through all records to find specific entries. Always enable search for data-heavy views.

4. Using grid view for dense data: Card grids work well for visual content like products or profiles. Use list views for data with many columns.

5. Not grouping fields into sections in detail views: Long flat forms overwhelm users. Group related fields into sections with headers.

Practice Questions

1. What view type would you use to show many records with sortable columns?

The list view type. It renders data in a table with sortable columns and pagination.

2. How do you add a currency format to a column?

Use format="currency" on the column element. Optionally set the currency attribute for non-USD currencies.

3. What is the purpose of sections in a detail view?

Sections group related fields visually with headers, making long forms easier to navigate.

4. How do you limit the number of columns in a grid view?

Set the columns attribute on the view element. Value 2 creates a two-column grid.

5. What filter types does AppML support?

Dropdown, text, date range, numeric range, and checkbox filters are built in.

Challenge

Create a dashboard view with three sections: a card grid showing top products, a list view showing recent orders, and a detail view showing a selected order. Wire them together so clicking an order in the list opens its detail view.

Frequently Asked Questions

Mini Project

Create a product catalog with three views: a grid view with product cards for browsing, a list view with sortable columns for inventory management, and a detail view for editing product information.

What's Next

Continue to AppML Templates to learn how to customize the HTML output with custom templates and themes.