wireframe-power-bi-page

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.