01 Page Dashboard trong 01 measure, tại sao không?

Quy trình: PBIP → Semantic Model ZIP → Copilot → HTML Content → 1-page Dashboard

Mục tiêu

Tạo một page dashboard trong Power BI, trong đó phần visualization chính được render bởi một custom visual HTML Content nhận đầu vào từ một DAX measure duy nhất.

Các slicer, tiêu đề trang và control nên để native Power BI.

Lưu ý về license và grounding Copilot

•        “ZIP SemanticModel → Copilot Chat” là cách cung cấp context file cho chat, không cùng cơ chế với Copilot tích hợp trong Power BI (grounded trực tiếp trên schema/metadata của model đang mở).

Bước 01 – Lưu dự án Power BI dạng PBIP

1.     Mở report trong Power BI Desktop và lưu thành Power BI Project (.pbip).

2.     Save lại project ngay trước khi đóng gói.

Kiểm tra thư mục gốc có file .pbip, thư mục .Report và thư mục .SemanticModel (xem Hình 2). Microsoft mô tả PBIP lưu report và semantic model thành các file text theo cấu trúc thư mục, thuận lợi cho kiểm tra bằng công cụ AI/code.

Hình 1 — File › Save as, chọn định dạng Power BI project (*.pbip).

Bước 02 – Nén thư mục Semantic Model và lưu lên OneDrive

1.     Trong thư mục dự án, chọn <TênDựÁn>.SemanticModel.

2.     Nén riêng thư mục này thành <TênDựÁn>_SemanticModel.zip.

3.     Đưa ZIP lên OneDrive và dùng Share/Copy link theo quyền truy cập phù hợp. Tránh bật public sharing nếu model là dữ liệu nội bộ.

Hình 2 — Cấu trúc PBIP trong thư mục OneDrive; nén riêng .SemanticModel và chia sẻ trong tổ chức.

Bước 03 – Yêu cầu Copilot Chat đọc cấu trúc semantic model

1.     Cung cấp ZIP trực tiếp nếu giao diện chat cho phép đính kèm loại file này. Nếu không, dùng link OneDrive mà Copilot có quyền truy cập.

2.     Yêu cầu Copilot trước tiên tạo model inventory: facts/dimensions, relationships, measures, date fields, business dimensions, flags và các measure có sẵn.

3.     Chỉ sau khi inventory đúng mới chuyển sang bước thiết kế dashboard.

Prompt gợi ý:

Read this semantic model. List tables (fact/dimension), columns, relationships, measures, valid date fields and flags. Do not design anything yet.

Hình 3 — Đính kèm ZIP, yêu cầu inventory trước; chưa thiết kế dashboard ở bước này. Dữ liệu minh hoạ.

Bước 04 – Import custom visual HTML Content

1.     Trong Power BI Desktop, mở Get more visuals/AppSource.

2.     Tìm HTML Content của Daniel Marsh-Patrick.

3.     Add visual vào report. Marketplace mô tả visual này render HTML, SVG và Markdown từ data model; DAX measure có thể tạo dynamic content.

Lưu ý: Nếu tenant chặn uncertified visuals hoặc cần export PDF/PowerPoint, kiểm tra chính sách và cân nhắc HTML Content (Secure) theo hướng dẫn của publisher.

Hình 4 — Visualizations › ··· › Get more visuals, tìm “HTML Content” và Add.

Bước 05 – Phác layout trước khi viết DAX

1.     Ghi rõ slicer nào để native bên ngoài.

2.     Vẽ wireframe trước: KPI row, trend, breakdown, contribution, detail/exception — và visual nào cần nằm trong “one HTML visual”.

3.     Ghi trường dữ liệu nào điều khiển từng chart. Với dashboard Procurement, pattern thực tế có thể là KPI: PR/PO volume, sourcing lead time, status; trend theo Order Date; bar theo Buyer; donut theo status; detail exceptions.

Hình 5 — Wireframe: ranh giới “one HTML visual”, slicer native bên ngoài, mapping field cho từng chart.

Bước 06 – Prompt Copilot tạo 1 measure cover layout

1.     Dùng prompt mẫu ở phần cuối bài.

2.     Yêu cầu chỉ dùng field/measure đã có trong model inventory; thiếu measure thì phải liệt kê rõ dependency trước.

3.     Yêu cầu code trả về là ONE DAX MEASURE tạo một HTML string hoàn chỉnh, có CSS inline và SVG/chart markup nếu cần.

Lưu ý: Sau khi Copilot sinh code, kiểm tra syntax, totals và filter context. Microsoft cũng khuyến cáo review DAX do Copilot tạo trước khi đưa vào model.

Hình 6 — Copilot liệt kê dependency trước, sau đó trả về ONE DAX measure. Code rút gọn để minh hoạ.

Bước 07 – Tạo measure và bind vào HTML Content

1.     Trong Power BI Desktop chọn Modeling › New measure.

2.     Paste toàn bộ DAX và sửa các lỗi field name nếu có.

3.     Đưa HTML Content visual vào canvas, kéo measure vào field/data well của custom visual.

4.     Resize visual theo vùng dashboard đã thiết kế.

Hình 7 — Modeling › New measure, paste DAX, kéo measure vào field well Values của HTML Content.

Bước 08 – Thêm slicer, title và kiểm thử

1.     Tạo native slicer cho Year/Month, Buyer, PR hoặc các dimension thật sự có trong model.

2.     Thêm title, subtitle, filter guidance và last refresh nếu model có thông tin tương ứng.

3.     Test từng slicer xem measure có phản ứng đúng filter context không.

4.     Đối chiếu KPI với native card/table để xác nhận số liệu trước publish.

Hình 8 — Dashboard hoàn tất: slicer native ở header, toàn bộ nội dung bên dưới do 1 measure render. Số liệu minh hoạ.

Prompt mẫu cho Copilot

Dán liền phần 1 và phần 2 thành một prompt.

Phần 1/2 · Context & layout

You are a senior Power BI developer and dashboard designer.

 Context:

- I have provided the semantic model files from my Power BI PBIP project.

- First, inspect the model and use ONLY tables, columns, relationships and measures that actually exist. Never invent a field.

 Goal:

Create ONE copy-paste-ready DAX measure named [HTML - Dashboard Page] that returns a complete HTML string for the HTML Content custom visual in Power BI.

 Dashboard layout:

1) Header: dashboard title + short context text.

2) KPI row: 3-5 most important business KPIs available in this model.

3) Main trend: time-series chart using the model's valid date dimension/date field.

4) Comparison: bar chart by the most relevant business dimension.

5) Contribution: donut/ring visualization by the most relevant status/category dimension.

6) Detail/exception area: compact table or ranked list using fields available in the model.

Phần 2/2 · Technical requirements

Technical requirements:

- Output ONE DAX measure only.

- HTML/CSS/SVG must be contained inside the DAX string.

- The measure must react to Power BI filter context and native slicers.

- Use VAR blocks to keep the DAX readable.

- Escape quotes correctly for DAX.

- Handle BLANK/empty selections gracefully.

- Use responsive CSS grid/flex layout.

- Do not use fields that are not present in the semantic model.

- Before the final code, list the exact model fields/measures you will use and flag any missing dependency.

- After that, provide the final FULL DAX measure in one code block, ready to paste into Power BI.