I have added a read-only React KPI Scorecard sample to the PnP SharePoint Framework webparts repository:
https://github.com/pnp/sp-dev-fx-webparts/pull/6478
The web part reads a configured SharePoint list and renders up to six KPI cards with:
- Current value and target
- Deterministic on-track, attention, at-risk, and unknown states
- Trend from the latest two observations
- Optional date filtering
- Loading, empty, access-denied, not-found, throttling, and refresh states
- Fluent UI components and keyboard-friendly status presentation
Local verification is complete: five Jest tests pass, TypeScript compiles, ESLint is clean, webpack builds, and the production .sppkg package validates.
Tenant validation requested
Could someone with a SharePoint Online tenant please try this with a representative KPI list and report:
- Whether list and field configuration works as documented.
- Whether number/date values map correctly from common SharePoint column types.
- Whether threshold and trend states are understandable.
- Whether the layout remains usable at narrow web-part widths.
- A real tenant screenshot, if possible, for the PR gallery validation.
I do not have a suitable SharePoint Online tenant for producing an authentic screenshot, so I am intentionally asking the community rather than inventing one. Positive or negative findings are welcome; they will help make the sample more useful before merge.
Source and contribution
- PR: https://github.com/pnp/sp-dev-fx-webparts/pull/6478
- Sample path:
samples/react-kpi-scorecard/ - Microsoft SPFx web parts guidance: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/overview-client-side-web-parts
Top comments (0)