KPI card

Use lcsKpiCard for the row of numbers at the top of a dashboard or a home screen: open orders, revenue this month, on-time delivery, tickets over SLA. Makers rebuild this card for every app, and the hard parts are always the same: formatting the number, working out the change and colouring it the right way round (a fall in open tickets is good), and keeping a target bar honest. This component has them:

• Formats: Number, Currency (with your symbol), Percent (0.42 shows as 42%) and Compact (12,400 shows as 12.4K), with Decimals;
• Change against Previous, as a percentage with an arrow, coloured by GoodWhen (Up, Down or None);
• Target progress as a bar, and a status that follows it (good at or above the target, warning from 70%, bad below) or one you set;
• Outputs your screen can use: Change, ChangePercent, Trend, TargetPercent, StatusShown, ValueText;
• OnSelect, so the card opens the detail behind it, and a Caption for cards with no comparison ("Updated 5 min ago").

The examples call it kpiOpen, on a dashboard over a Dataverse table Orders.

The number, and last week's for the change:

// kpiOpen.Label
"Open orders"

// kpiOpen.Value
CountIf(Orders, Status = 'Status (Orders)'.Open)

// kpiOpen.Previous
varOpenLastWeek   // set in Screen.OnVisible from your own query or a saved snapshot

// kpiOpen.GoodWhen
"Down"            // fewer open orders is good

Money, with a target:

// kpiRevenue.Value
Sum(Filter(Invoices, 'Invoice Date' >= DateAdd(Today(), -30)), Total)

// kpiRevenue.Format and kpiRevenue.CurrencySymbol
"Currency"; "$"

// kpiRevenue.Target
250000

A percentage that must not fall:

// kpiOnTime.Value
CountIf(Deliveries, 'On Time' = true) / Max(1, CountIf(Deliveries, true))

// kpiOnTime.Format
"Percent"

// kpiOnTime.Target
0.95

Open the list behind the number:

// kpiOpen.OnSelect
Navigate(scrOrders, ScreenTransition.None, {filter: "Open"})

A row of cards that fit the screen:

// kpiOpen.Width (and the others)
(Parent.Width - 3 * 16) / 4

• Counts. CountRows(Orders) on a whole table returns a number Dataverse caches, which can be stale; CountIf(Orders, condition) is exact up to 50,000 rows and delegates. Over 50,000, count in a flow or a view.
• Sums and averages. Sum, Average, Min and Max delegate to Dataverse for up to 50,000 rows, with a Filter inside to stay under; they don't delegate to SharePoint.
• Previous values. Dataverse has no "last week" built in: query it the same way with the earlier date range, or save a daily snapshot row and read it; set it once in OnVisible so the card doesn't recount on every redraw.
• Choice columns. Compare the choice value (Status = 'Status (Orders)'.Open) rather than its text, so the formula delegates.

• The whole card is one button whose name reads the card out: "Open orders: 128, down 12.5% vs last week". Enter and Space run OnSelect.
• The change is never colour alone: the arrow's direction and the text carry it, and GoodWhen only changes the colour.
• The icon's tinted circle shows the status as colour; the status word is in StatusShown for your own labels, the change chip carries its arrow and sign, and the bar's length carries the progress.
• With Motion on, the arrow pops in and the target bar fills when the card loads or its values change, in under a second. None plays for people who've asked their device for reduced motion, and Motion off draws it at once.

• Percent expects a fraction (0.42), as CountIf divisions give; a value already in percent shows as 4,200%: divide by 100.
• The change is a percentage of Previous; when Previous is 0 it shows the absolute change instead.
• Compact rounds to one decimal: 1,250 shows as 1.3K.
• Width below 200 cramps the value; at 28 points a number longer than about nine characters needs a wider card or Compact.

• 0.1.0: first version: label, value in four formats, change against a previous value with GoodWhen, target bar and Auto status, icon and caption, the six outputs, OnSelect, light and dark, motion.