| name | wireframe-power-bi-page |
| description | Use when planning the layout of a Power BI report page. Triggers on phrases like "wireframe a page", "layout for a dashboard", "where should I put the visuals", "design the page layout", "how should I arrange these visuals". Covers canvas geometry (1280x720), 5 validated layouts, the pbir_layout_grid tool, spacing math. |
Wireframe a Power BI Page
Power BI report pages have hard geometric constraints. Get the math wrong and the wireframe-validator rejects every visual. Get it right once via pbir_layout_grid and the server handles the math for you.
Canvas constants (1280 x 720, 16:9, FitToPage)
- Page margins: 15px left, 15px right, 6px bottom, 0 top.
- Usable content width: 1250px (1280 - 15 - 15).
- Usable content height: 714px (720 - 6).
- Gap between visuals: 5px horizontal and vertical.
- Banner (page title): full-width at
x:0, y:0, w:1280, h:52 — exempt from side margins.
- First content row starts at
y:57 (banner 52 + gap 5).
- Last row bottom edge must be
<= 714.
The validator refuses any non-banner visual at x<15, right>1265, or bottom>714. If you hand-compute coordinates and get one margin wrong, every visual on the page fails.
Preferred path: pbir_layout_grid
For any new page with multiple visuals, call pbir_layout_grid instead of computing pixels. You declare the grid shape; the server returns x/y/w/h per cell, guaranteed valid.
{
"pageId": "summary",
"rows": 2,
"cols": 3,
"reserveBannerRow": false,
"cells": [
{ "row": 0, "col": 0, "visualType": "card", "title": "Revenue" },
{ "row": 0, "col": 1, "visualType": "card", "title": "Margin" },
{ "row": 0, "col": 2, "visualType": "card", "title": "Orders" },
{ "row": 1, "col": 0, "visualType": "columnChart", "title": "By Region" },
{ "row": 1, "col": 1, "visualType": "lineChart", "title": "Trend" },
{ "row": 1, "col": 2, "visualType": "pieChart", "title": "Mix" }
],
"planOnly": true
}
rowSpan/colSpan are supported. reserveBannerRow:true starts the grid at y:57 so a separately-added banner shape sits above.
Two modes:
planOnly:true (default): returns the plan without writing. Sanity-check column widths and spans.planOnly:false: validates bindings and layout, then writes every cell as a visual in one call. Fails fast — no partial writes.
The 5 validated layouts
- Dashboard — banner + 2x2 content grid.
- Analysis — hero visual + sidebar.
- KPI Summary — 5-card strip at top + full-width chart below (use
visualType:"card" for the KPIs, NOT the kpi visual — see report-design skill).
- Sidebar Nav — narrow left column for slicers, wide right area for content.
- 3x3 Grid — for monitoring dashboards with many small tiles.
Quick checks before placing anything
- Count the visuals. If >12-15, you have too many for one page — split it.
- Pick a layout from the 5 above. Don't invent a new one.
- Use
pbir_layout_grid planOnly first. Read back the column widths. Then planOnly:false to write.
- If you're adding to an existing page (not building from scratch), inspect via
pbir_list_pages({includeVisuals:true}) and use pbir_move_visual for tweaks rather than recomputing the grid.
For full layout patterns, the spacing formula derivation, batch-creation templates, and the wireframe-validator's exact rules, ask the MCP: pbir_guide("wireframes").
