Value Modes and Computed Rules
One SharePoint list row is one stat. Each row declares a Mode. The web part renders it as a literal number, a mapped status word, or a computed result.
Do not type a readable rule name into the Rule column. Use an accepted token such as daysUntil, daysSince, percentOfTarget, or deltaVsPrevious. Change vs previous is not an accepted Rule value.
How the mode is decided
If the row's Mode cell holds a recognized word, that wins. Recognition ignores case, spaces, and punctuation, so Computed, COMPUTED, and computed are the same.
| Mode | Accepted Mode words |
|---|---|
| Literal | literal, number, numeric |
| Mapped | mapped, state, status |
| Computed | computed, countdown, compute |
If the Mode cell is empty, unmapped, or holds an unrecognized word, the mode is inferred from the row's data:
- A date with no value → computed
- A value that parses as a number → literal
- A date with an unparseable value → computed
- Anything else, including an empty row → mapped
Required mappings: the list, plus Stat name and Value. Everything else is optional.
Literal mode
The value comes from the Value mapping only. Date and Compare value are ignored.
The number is read out of the column's displayed text, so currency symbols, percent signs, thousands separators, and trailing units are understood: $4,820,000.00, 62.4%, 1.234,56 €, 4 820 000, (1,200) (accounting parentheses mean negative).
Separator handling: exactly three digits after the last separator, with only one separator character in play, is read as thousands grouping (1,234 = 1234). Otherwise that separator is treated as the decimal point (1.234,56 = 1234.56).
With Abbreviate large numbers off, the stat renders the column's own string character-for-character. The only change is closing the gap before a %.
Non-numeric text renders verbatim (for example pending) and does not animate. Only a genuinely blank cell renders the em dash (—). Only literal rows whose value parses can count up.
| Title | Mode | Value | Caption | Renders |
|---|---|---|---|---|
| Net revenue | literal | $4,820,000.00 | FY26 to date | $4.8M |
| Gross margin | literal | 62.4% | up 3.1 pts YoY | 62.4% |
| Deals closed | literal | 318 | new logos | 318 |
Column names in this table are examples, not requirements.
Mapped mode
The row's value is a word (a status or category), rendered as text with a colored dot.
Colour comes from the State colors list you build in the property pane. Matching is trimmed and case-insensitive, but otherwise a whole-string exact match. orange matches Orange. Orange! does not. The first matching entry wins.
A word with no matching entry still renders, in plain text, with no dot and no color. Nothing is ever inferred. The web part does not read the word "Red" and pick red.
A blank value renders —. Mapped values render at a slightly smaller size than numbers and are allowed to wrap. Mapped rows never animate.
Computed mode: write tokens, not readable names
The Computed rule mapping tells the web part which rule to apply. Each rule has a human-readable name (used in the property pane and in this Help) and a set of values the Rule column itself accepts. They are not the same thing.
Write the accepted value into the column, not the readable name.
| Rule name (for Help copy) | Values the Rule column accepts |
|---|---|
| Days until | daysUntil, daysTil, countdown |
| Days since | daysSince, daysAgo, countUp |
| Percent of target | percentOfTarget, percentTarget, ofTarget |
| Change vs previous | deltaVsPrevious, delta, vsPrevious, change |
Matching ignores case, spaces, and punctuation, so deltavsprevious and Delta Vs Previous both work.
Writing the readable name "Change vs previous" into the Rule column does not select that rule. The row falls back to a date rule instead. Use deltaVsPrevious.
The lists created by the starter wizard are already set up correctly. Their Rule column offers exactly daysUntil, daysSince, percentOfTarget, and deltaVsPrevious as choices.
If no rule is given, the web part reads the Date: a past date behaves as Days since, otherwise Days until.
Dates are floating calendar dates. The date is read as a plain year/month/day and compared against the viewer's local calendar day. Time of day never matters, and a date does not shift across time zones. Today counts as day 0.
Days until
Needs: Date. Value and Compare value are ignored.
Result: whole days from today to the date, never negative. A date that has passed renders 0. Displayed as a bare number plus a separate small unit word: day when the result is exactly 1, otherwise days (so 0 days).
If the row has no caption, the target date itself is used as the caption. Missing or unreadable Date renders —.
Days since
Needs: Date.
Result: whole days from the date to today, never negative. A future date renders 0. Unit words: day ago / days ago. Missing or unreadable Date renders —.
Percent of target
The web part first checks whether Compare value holds a date. Date detection is strict: only an ISO-style YYYY-MM-DD prefix, or an unambiguous d/m/y-style slash or dash date, counts. A bare number like 184 is never treated as a date.
Numeric target form (Compare value is a number):
- Needs: Value (the actual) and Compare value (the target).
- Formula: (Value ÷ Compare value) × 100.
- Displayed as a whole number followed by
%, with no space and no+sign.850 / 1000→85%.62.4 / 55→113%. Results above 100% are not capped. - Compare value of 0 renders
—(never an infinite percentage).
Date-window form (Compare value is the window start date and Date is the window end date; Value is unused):
- Formula: whole days elapsed from start to today, divided by whole days from start to end, × 100, clamped to 0–100. Before the window starts it reads
0%. After it ends,100%. - If the start date is on or after the end date, or the Date cell is empty, it renders
—. - If the row has no caption, the end date is used as the caption.
Percentages never abbreviate and never animate.
Change vs previous
Needs: Value and Compare value, both numbers. A date in Compare value is refused (renders —).
Formula: Value − Compare value.
Displayed as the difference rendered in the Value column's own shape (its currency symbol, decimals, and separators), with a leading + when the result is positive. A negative result carries a minus sign placed outside the currency symbol, for example −$184K. A result of exactly zero gets no sign at all.
Large-number abbreviation does apply here: $4,820,000.00 − $4,100,000.00 → +$720K. Never animates.
Count-up animation
Only literal rows whose value parses as a number can animate. Mapped words and all four computed rules always sit still.
Per-row Animate values are read as Yes/No: true, Yes, 1 mean yes; false, No, 0 mean no; anything blank or unrecognized means the author didn't say.
| Global Count-up animation | Row Animate = Yes | Row Animate = No | Row blank / column unmapped |
|---|---|---|---|
| Off | no animation | no animation | no animation |
| On for every number | animates | animates (row setting ignored) | animates |
| Let each stat decide (default) | animates | does not animate | animates |
Transition speed: 1 ≈ 2000 ms, 2 ≈ 1300 ms, 3 ≈ 800 ms (default), 4 ≈ 400 ms. The pane shows the value as About {N}ms.
Counting starts when the stat first scrolls into view, not on page load, and runs once.
Reduced motion always wins. A visitor whose device requests reduced motion sees the final value immediately (not a faster count), and the loading shimmer is stilled too.
The Replay button appears to editors only.
Abbreviating large numbers
Abbreviate large numbers (default on) applies to literal rows and to Change vs previous results. It never applies to percentages or day counts.
Suffixes: K (thousands), M (millions), B (billions). One decimal below ten, none at or above: 4.8M, 48M, 1.5K, 15K.
Two different thresholds:
- A value whose column carries a currency symbol or a non-percent unit shortens from 1,000 up.
- A plain number keeps every digit until 1,000,000.
That is why $4,820,000.00 → $4.8M and −$184,000.00 → −$184K, while 12,486 stays 12,486 and 2,400,000 → 2.4M.
Because the rule reads the displayed text, a plain number column with a hand-typed unit (for example 4,200 units) is treated as a unit value and uses the lower threshold, rendering 4.2K units. A % suffix is deliberately exempt.
Display and layout
| Arrangement | Behavior |
|---|---|
| Even row (default) | One line, width shared evenly, wrapping only when the cards no longer fit |
| Wrapping grid | Exactly N per line (the Stats per row setting), then wraps |
| Stacked list | One stat per line, name pinned left, value pinned right, in smaller numerals |
Stats per row appears for Wrapping grid only. The slider offers up to 6 before the first load and up to the actual stat count afterwards, capped at 8. It never renders more columns than there are stats.
There are no fixed breakpoints. Each stat's numeral scales against the width of its own card.
Click behavior: Open the list item (default) uses the mapped Link column when the row has one and otherwise opens the row's own list item. A clickable stat is a real link. Not clickable renders no link at all.
Ordering
- No Order column mapped: the stats appear in the order the selected SharePoint view returns them.
- Order column mapped: stats sort ascending, lowest number first. Rows with a blank or unreadable Order value go last, keeping the view's order among themselves. Ties keep the view's order. Decimals and negative numbers are valid.