LibraryBusiness Dashboard
FREEdashboard
Business Dashboard
The Business Dashboard is a complete, copy-paste Power Apps screen rendered as a single SVG Image: a title bar, three KPI cards with trend deltas, a monthly bar chart, a traffic-source donut and a ranked top-categories bar list. Everything is data-driven from simple collections — no PCF, no premium connectors, no chart control. Drop it on a blank screen and you have an executive dashboard in seconds.
Palette:
Original palette · works in every Power Apps locale
Paste directly into Power Apps Studio
Revenue
$48.2k
+12.4%
Users
1,284
+8.1%
Tickets
37
-5.0%
YAML source
# Business Dashboard — PowerBlocks (PRO Screen)
# A complete dashboard rendered as a single Power Fx SVG Image: title, 3 KPI cards,
# a bar chart, a donut chart and a ranked bar list — all data-driven, no PCF, no premium connectors.
#
# The screen renders immediately: DEMO DATA is inlined at the top of the Image
# formula below (_kpi, _bars, _pie, _list).
# STEP 1 — Paste this control onto a blank screen (Tree view → Ctrl+V).
# STEP 2 — Replace each _xxx Table(...) with your own data (collections, SharePoint,
# Dataverse…). Everything rescales automatically.
- BusinessDashboard:
Control: Image
Properties:
X: =0
Y: =0
Width: =Parent.Width
Height: =Parent.Height
ImagePosition: =ImagePosition.Fit
Image: |-
=/* DEMO DATA — the dashboard renders immediately with the sample tables below.
Replace each _xxx Table(...) with your own data source (e.g. colKpi,
colBarChart, colPie, colBarList). */
With(
{
_kpi: Table(
{ Label: "Revenue", Value: "$48.2k", Delta: "+12.4%", Up: true },
{ Label: "Active users", Value: "1,284", Delta: "+8.1%", Up: true },
{ Label: "Open tickets", Value: "37", Delta: "-5.0%", Up: false }
),
_bars: Table(
{ Label: "Jan", Value: 120 }, { Label: "Feb", Value: 180 },
{ Label: "Mar", Value: 90 }, { Label: "Apr", Value: 210 },
{ Label: "May", Value: 160 }, { Label: "Jun", Value: 240 }
),
_pie: Table(
{ Label: "Direct", Value: 45, Color: "#2563EB", Idx: 1 },
{ Label: "Organic", Value: 30, Color: "#22C55E", Idx: 2 },
{ Label: "Referral", Value: 25, Color: "#F59E0B", Idx: 3 }
),
_list: Table(
{ Label: "Electronics", Value: 84 }, { Label: "Hardware", Value: 62 },
{ Label: "Safety", Value: 48 }, { Label: "Packaging", Value: 35 }
)
},
With(
{ W: 1160, H: 640, m: 24 },
With(
{
kpiMax: Max(Max(_bars, Value), 1),
pieTotal: Max(Sum(_pie, Value), 1),
listMax: Max(Max(_list, Value), 1),
circ: 2 * Pi() * 70
},
"data:image/svg+xml;utf8, " & EncodeUrl(
"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 " & W & " " & H & "'>" &
"<rect x='0' y='0' width='" & W & "' height='" & H & "' fill='#0A0A0A'/>" &
"<text x='" & m & "' y='44' font-family='Segoe UI, sans-serif' font-size='26' font-weight='800' fill='#FFFFFF'>Business Dashboard</text>" &
"<text x='" & m & "' y='68' font-family='Segoe UI, sans-serif' font-size='14' fill='#9CA3AF'>Overview · last 30 days</text>" &
// ---- KPI cards ----
Concat(
ForAll(Sequence(CountRows(_kpi)) As s,
With(
{ k: Index(_kpi, s.Value),
x: m + (s.Value - 1) * (368 + 16) },
{ seg:
"<rect x='" & x & "' y='92' width='368' height='112' rx='16' fill='#111827'/>" &
"<text x='" & (x + 22) & "' y='126' font-family='Segoe UI, sans-serif' font-size='14' fill='#9CA3AF'>" & k.Label & "</text>" &
"<text x='" & (x + 22) & "' y='168' font-family='Segoe UI, sans-serif' font-size='34' font-weight='800' fill='#FFFFFF'>" & k.Value & "</text>" &
"<text x='" & (x + 22) & "' y='192' font-family='Segoe UI, sans-serif' font-size='13' font-weight='700' fill='" & If(k.Up, "#22C55E", "#EF4444") & "'>" & k.Delta & "</text>"
}
)
),
seg, ""
) &
// ---- Bar chart panel ----
"<rect x='" & m & "' y='224' width='560' height='392' rx='16' fill='#111827'/>" &
"<text x='" & (m + 22) & "' y='258' font-family='Segoe UI, sans-serif' font-size='16' font-weight='700' fill='#FFFFFF'>Monthly revenue</text>" &
Concat(
ForAll(Sequence(CountRows(_bars)) As s,
With(
{ r: Index(_bars, s.Value),
bw: (560 - 44 * 2 - 14 * (CountRows(_bars) - 1)) / CountRows(_bars) },
With(
{ bh: Round((r.Value / kpiMax) * 280, 0),
bx: Round(m + 44 + (s.Value - 1) * (bw + 14), 0) },
{ seg:
"<rect x='" & bx & "' y='" & (588 - bh) & "' width='" & Round(bw, 0) & "' height='" & bh & "' rx='6' fill='#2563EB'/>" &
"<text x='" & (bx + Round(bw / 2, 0)) & "' y='606' font-family='Segoe UI, sans-serif' font-size='12' fill='#9CA3AF' text-anchor='middle'>" & r.Label & "</text>"
}
)
)
),
seg, ""
) &
// ---- Donut panel ----
"<rect x='600' y='224' width='268' height='392' rx='16' fill='#111827'/>" &
"<text x='622' y='258' font-family='Segoe UI, sans-serif' font-size='16' font-weight='700' fill='#FFFFFF'>Traffic sources</text>" &
"<circle cx='734' cy='430' r='70' fill='none' stroke='#1F2937' stroke-width='28'/>" &
Concat(
ForAll(_pie As p,
With(
{ before: Sum(Filter(_pie, Idx < p.Idx), Value) },
{ seg:
"<circle cx='734' cy='430' r='70' fill='none' stroke='" & p.Color &
"' stroke-width='28' stroke-dasharray='" & Round((p.Value / pieTotal) * circ, 0) & " " & Round(circ, 0) &
"' stroke-dashoffset='" & Round(-(before / pieTotal) * circ, 0) & "' transform='rotate(-90 734 430)'/>"
}
)
),
seg, ""
) &
// ---- Bar list panel ----
"<rect x='876' y='224' width='260' height='392' rx='16' fill='#111827'/>" &
"<text x='898' y='258' font-family='Segoe UI, sans-serif' font-size='16' font-weight='700' fill='#FFFFFF'>Top categories</text>" &
Concat(
ForAll(Sequence(CountRows(_list)) As s,
With(
{ r: Index(_list, s.Value),
ly: 286 + (s.Value - 1) * 44 },
With(
{ lw: Round((r.Value / listMax) * 216, 0) },
{ seg:
"<rect x='898' y='" & ly & "' width='216' height='30' rx='8' fill='#1F2937'/>" &
"<rect x='898' y='" & ly & "' width='" & lw & "' height='30' rx='8' fill='#2563EB'/>" &
"<text x='910' y='" & (ly + 20) & "' font-family='Segoe UI, sans-serif' font-size='12' fill='#FFFFFF'>" & r.Label & "</text>" &
"<text x='1102' y='" & (ly + 20) & "' font-family='Segoe UI, sans-serif' font-size='12' font-weight='700' fill='#FFFFFF' text-anchor='end'>" & Text(r.Value) & "</text>"
}
)
)
),
seg, ""
) &
"</svg>"
)
)
)
)
Common use cases
Executive overview
Give leadership a single screen with KPIs and three coordinated charts that refresh from your own data.
Internal reporting apps
Ship a polished landing dashboard for sales, operations or support without weeks of layout work.
Client-facing portals
Present metrics to external users with a clean, on-brand screen you fully control via the SVG.
How to use Business Dashboard in Power Apps
- 1Add the four collections (colKpi, colBarChart, colPie, colBarList) to Screen.OnVisible using the snippet in the YAML header.
- 2Click "Copy YAML" — the syntax is invariant and works in every Power Apps locale.
- 3Paste the control onto a blank screen in Power Apps Studio.
- 4Swap each collection for your own data — KPIs, bars, donut segments and list rows all rescale automatically.
Tip — This screen composes the same primitives as the standalone Bar Chart, Donut Chart and Bar List components — start from those if you want to rearrange the layout or add a panel.