Data Display for Power Apps

Data Display is the dashboard family: a KPI tile for one headline number, a spotlight that rotates through several, a bar chart built from real controls, three loading skeletons and an empty state. You reach for it when a screen shows numbers or a list rather than collecting input, and you want the loading and empty moments to look intended rather than broken. Every piece pastes as plain labels, containers and a gallery, so you bind it to your data with ordinary Power Fx.

Pick a variant

Component	Plan	What it is for	Settings you can change
Skeleton Card	Paid	Placeholder for a card while its content loads	Pulse speed (milliseconds)
Skeleton List	Paid	Placeholder rows for a gallery while it loads	Pulse speed (milliseconds), Rows
Skeleton Text	Paid	Placeholder lines for a paragraph while it loads	Pulse speed (milliseconds), Lines
KPI Spotlight Carousel	Paid	Cycling several headline metrics in the space of one tile	Seconds per metric, Metrics
KPI Tile	Paid	One headline number with a change indicator	Caption, Value, Show change indicator, Change, Direction
Bar Chart	Paid	Comparing a handful of values as horizontal bars	Title, Bars, Show values
Empty State	Paid	Telling users a gallery is empty, not broken	Icon, Heading, Explanation, Show action button, Button text, Gallery it watches (optional)

Paid means a Components, Ultra, Team or Lifetime plan (pricing). Open the category in the library: Data Display.

To copy a variant into Power Apps Studio, follow Getting Started.

After you paste

Everything you typed in Settings is pasted as static text; the snippets below swap it for live data.

On the KPI Tile, put this in the Text property of lblKpiValue to show a live total instead of the typed value:

Text(Sum(Orders, Total), "[$-en-US]$#,###")

On the Bar Chart, put this in the Items property of galBarChart. Keep the column names Label and Value, because lblBarLabel, conBar and lblBarValue read them:

AddColumns(GroupBy(Orders, "Day", "ByDay"), "Label", Day, "Value", CountRows(ByDay))

The Empty State pastes with Visible set to true so you can see it. Type your gallery's name into "Gallery it watches (optional)" before copying, or put this in the Visible property of conEmptyState afterwards:

IsEmpty(galOrders.AllItems)

The three skeletons are self-contained: nothing feeds them data. Put your loading flag in the Visible property of conSkeletonCard, conSkeletonList or conSkeletonText, and the opposite on your real content:

varIsLoading

Good to know

The KPI Spotlight Carousel has an Instructions tab. A hidden Timer named tmrKpiSpotlight advances the global variable varKpiSpotlightIndex every "Seconds per metric", and btnKpiSpotlightPause flips varKpiSpotlightPaused. Timers only run in play mode, so the Studio edit surface shows one static slide. Each slide's text is one branch of a Switch() on lblKpiSpotlightValue, lblKpiSpotlightMetric and lblKpiSpotlightContext; replace a branch with a formula wrapped in Text() to make that slide live. The Settings tab allows up to eight metrics.
On the KPI Tile the change indicator is green for Up and red for Down on purpose and ignores your brand colour. The direction is fixed at copy time: icoKpiTrend gets Icon.ArrowUp or Icon.ArrowDown. For a live direction, put an If() on the Icon property of icoKpiTrend and on the Color property of icoKpiTrend and lblKpiDelta.
The Bar Chart's bar width in conBar divides by the largest value at copy time (75 with the default bars). A gallery cannot read its own AllItems from inside its template, so with live data put Max(YourSource, Value) in a hidden label outside galBarChart and divide by that label's Text. The generated YAML ends with a comment showing the exact formula.
The Empty State's "Gallery it watches (optional)" is typed straight into the Visible formula of conEmptyState as an IsEmpty() on that gallery's AllItems, so it has to match the gallery's name in the Tree view exactly or the paste fails. btnEmptyStateAction has no OnSelect; add your own.
Each skeleton carries one hidden Repeat Timer (SkeletonCardPulse, SkeletonListPulse, SkeletonTextPulse) and every block's Fill reads that Timer's Value through a sine curve. Keep the Timer inside its container and do not rename it. The grey shade follows the theme toggle in the component header, so copy again after switching between light and dark.

Open the category in the library: Data Display. Related guides: Gallery for the lists these skeletons and the empty state stand in for, and Cards for the surfaces that usually hold a KPI tile.