abp/docs/en/low-code/dashboards.md

//[doc-seo]
{
    "Description": "Define ABP Low-Code dashboard pages, visualizations, filters, layout, permissions, and React runtime data flow."
}

Dashboards

Dashboards are low-code pages that render charts, lists, and number widgets from low-code entity data. A dashboard is still a page, so it uses the normal page name, title, icon, order, group, and permission model, but its page type is dashboard and its page definition carries a nested dashboard payload. The screenshot below shows an inventory-style dashboard from the demo app, and the JSON that follows is a simplified descriptor that uses the same layout concepts.

The runtime below was generated from a low-code dashboard page definition:

Dashboard Pages

Dashboard pages live in the normal page descriptor collection. In source-controlled models, a dashboard page still belongs under pages/, not a separate dashboard folder.

Typical page-level fields include:

• name
• title
• icon
• type: "dashboard"
• group
• order
• permissionConfig
• dashboard

Runtime routes use the same dynamic page convention:

/dynamic/<page-name>

Layout Model

The stored dashboard descriptor uses a flat visualization list. Each visualization defines its own placement:

• row: zero-based visual row index
• order: order within the row
• width: current dashboard grid width, typically 1 or 2

At runtime, the React UI groups those flat visualizations into rendered rows. This is similar to form layouts: storage stays flat, rendering derives the grouped structure.

{
  "name": "inventory-overview",
  "title": "Inventory Overview",
  "type": "dashboard",
  "group": "inventory",
  "dashboard": {
    "description": "Operational inventory view",
    "visualizations": [
      {
        "name": "product-count",
        "type": "numberContainer",
        "title": "Product Count",
        "row": 0,
        "order": 0,
        "width": 1,
        "numberContainer": {
          "items": [
            {
              "name": "total-products",
              "title": "Total Products",
              "entityName": "Acme.Catalog.Product",
              "aggregation": "count",
              "format": "number"
            }
          ]
        }
      },
      {
        "name": "stock-by-product",
        "type": "chart",
        "title": "Stock by Product",
        "row": 0,
        "order": 1,
        "width": 1,
        "entityName": "Acme.Catalog.Product",
        "chart": {
          "chartType": "bar",
          "xAxis": { "property": "Name" },
          "yAxis": [
            { "aggregation": "sum", "property": "StockCount", "label": "Stock" }
          ]
        }
      }
    ]
  }
}

Visualization Types

The current dashboard visualization types are:

• chart
• list
• numberContainer

Chart

Chart visualizations define:

• chartType: bar, line, pie, or donut
• xAxis
• one or more yAxis aggregation series
• optional maxItems
• optional showRecordCount
• optional bar orientation

List

List visualizations define:

• fields
• optional sortBy
• maxRows
• rowHeight
• optional colorBy

Number Container

Number containers hold one or more number items. Each item can define:

• aggregation
• aggregationProperty
• format
• color
• entity-specific filters and global date filter linkage
• click-through behavior

The sample descriptor above combines a number container and a chart in the same Inventory Overview page.

Filters and Interactivity

Dashboards support three filter layers:

• globalFilters for page-level controls such as date range
• visualization-level filter for fixed query constraints
• visualization userFilters for interactive filtering exposed to the runtime user

Other useful dashboard interaction fields include:

• globalDateFilterProperty
• showDescriptionAsTooltip
• clickToSeeRecords

These options let a dashboard stay compact while still allowing drill-down behavior in the runtime.

Runtime Shape

The runtime definition exposed to React is grouped by rows and items, even though the stored descriptor is flat. The React runtime uses:

• useDashboardDefinition
• useDashboardData
• GET /api/low-code/ui/dashboards/{pageName}
• POST /api/low-code/dashboards/{pageName}/data

See React Runtime for hook-level details and route integration.

Permissions and Menu Placement

Dashboard pages are read-oriented. Generated dashboard page operations are view only, so the usual CRUD operation set does not apply.

Dashboard pages can still:

• appear inside a Page Group
• carry a menu icon and order
• use explicit or generated page permission configuration

Menu placement is handled at the page level through the normal group and order fields.

See Also

• React Runtime
• Low-Code Designer
• Page Groups
• Model Descriptor Files