Copilot · Community sample

Zava Retail Store — Retail Performance Copilot App

A SharePoint Copilot App (SPFx 1.24 Copilot Component) that renders an executive retail cockpit inside the Microsoft Copilot canvas — a compact inline performance card that expands to a full-screen dashboard covering sales, category mix, customer satisfaction, feedback, top products and store comparisons.

Copilot componentReactSPFx 1.24.0

Zava Retail Store scenario — inline card and full-screen dashboard

The idea behind the sample

Zava Retail Store is a SharePoint Copilot App built as an SPFx 1.24 Copilot Component (not a classic web part). The same React component renders in two display modes inside the Microsoft Copilot canvas: a compact inline card and an immersive full-screen executive dashboard. Copilot opens to a compact performance card — headline metrics and a sales trend — then can request expansion via requestDisplayModeAsync('fullscreen') to reveal the full experience.

The full-screen experience is an executive dashboard shell (app rail + top bar) composed of modular sections: a metrics row (sales vs target, transactions, avg basket, CSAT, NPS, conversion rate), a sales trend panel, sales by category, a customer satisfaction gauge, recent customer feedback, a top-products carousel and store/region comparison. A Filters dialog lets the user pick the target store and date and enable/disable individual panels, and the whole dashboard re-flows live to match the selection.

The sample ships with mocked, Microsoft Graph-shaped data behind a swappable data service exposing a useMock flag (true for fully offline demos, false to read a live data service and Microsoft Graph for the signed-in user), so a live implementation is a drop-in replacement. The Copilot Component is surfaced as a tool (ZavaRetailTool) a declarative agent can call, rendering its own React UI inside the Copilot host. Built with the Heft build system, React 18.3.1 and Fluent UI v9 with host-driven light/dark theming.

Make it your own

Start with the author's setup instructions, explore the implementation, and adapt the pattern to your environment. Sample code stays in its original repository, together with its requirements, license and contribution history.

Read the source documentation

A closer look

Inline Zava Retail performance card in the Copilot canvas

Full-screen Zava Retail executive dashboard

Keep exploring

Overview of the SharePoint Framework — The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open-source tooling.
Microsoft Copilot — Microsoft Copilot combines the power of large language models with your organization's data to help you be more productive.
Use Microsoft Graph in your solution — Microsoft Graph is the gateway to data and intelligence in Microsoft 365, exposing REST APIs and client libraries to access data across Microsoft 365 services.

Keep the ideas flowing

Back to all possibilities