Navigation

Drill-down (drill action)

Add a drill action when a click should take the reader to a different page in the same dashboard, passing along the value they clicked so the detail page can filter its own panels.

What you can do

  • A drill is an action of type drill in onClick or contextMenu.actions; the bare top-level drill panel property is inert back-compat, so use an action instead.
  • drill requires label and targetPage, a page id in the same dashboard, plus a binding: param, valueFrom, and valueType, or a bindings array.
  • The target page's panels read the bound value via data.params and a %(name)s placeholder in their query.
  • The target page must be visible in the page nav; drilling into a hidden page raises the advisory interaction-stranding lint because the viewer has no way back.
  • For a hidden target page, use openOverlay instead of drill.
  • The data-binding lint flags a bound param that no target panel declares.

Available on any panel type that accepts onClick, and on every panel type via contextMenu.

Spec

View spec
[
  {
    "id": "rev-by-region",
    "type": "chart:bar",
    "title": "Revenue by region",
    "data": {
      "query": "SELECT region, SUM(amount) AS revenue FROM orders GROUP BY 1"
    },
    "spec": {
      "categoryField": "region",
      "valueField": "revenue"
    },
    "onClick": {
      "type": "drill",
      "label": "Drill into {category}",
      "targetPage": "region-detail",
      "param": "region",
      "valueFrom": "category",
      "valueType": "string"
    }
  },
  {
    "id": "orders-in-region",
    "type": "table",
    "title": "Orders in region",
    "data": {
      "query": "SELECT order_id, customer, amount FROM orders WHERE region = %(region)s ORDER BY amount DESC",
      "params": {
        "region": null
      }
    },
    "spec": {
      "columns": [
        {
          "field": "order_id"
        },
        {
          "field": "customer"
        },
        {
          "field": "amount"
        }
      ]
    }
  }
]

The second panel, orders-in-region, lives on the region-detail page and declares the region param its query reads.

Try it live

Open the pipeline-control-room template in the Builder

No bundled template uses drill yet, and the Builder preview does not follow one. Open pipeline-control-room and read the openOverlay action on cr-rep-load: a drill binds the clicked value the same way but navigates to a visible page instead of opening a hidden one.

Build it in dvt

Every interaction on this site is a few lines of the same declarative JSON spec. Read the full spec format, or connect an AI agent to your warehouse and build one live in the quickstart.

Follow the build

dvt is in founding research. Leave your email and we'll reach out when there's something to see — no newsletters, no noise.

No spam. We use this to reach out directly, nothing else.