Copilot · Community sample

My Time Off — Time-Off & Absence Copilot App

A SharePoint Copilot App (SPFx 1.24 Copilot Components) that brings the employee time-off (PTO) experience inside the Microsoft Copilot canvas — a personal overview, a request form with an Outlook conflict pre-check, and a team view with manager approvals and a full-screen absence calendar, all powered by delegated, client-side SharePoint REST and Microsoft Graph calls.

Copilot componentReactSPFx 1.24.0

My Time Off scenario — inline balance card and full-screen team absence calendar

The idea behind the sample

My Time Off is a SharePoint Copilot App built as an SPFx 1.24 Copilot Components sample (not a classic web part). It ships three components that render directly in the Microsoft Copilot chat: timeOffOverview (GetMyTimeOff) shows the signed-in user's balances, upcoming leave and request history; timeOffRequest (RequestTimeOff) is a booking form that checks the user's Outlook calendar for conflicts before writing a new request; and timeOffTeam (GetTeamTimeOff) surfaces who's out, a manager approvals inbox and a full-screen team absence calendar.

The headline capability the sample highlights is authenticated, delegated client-side API calls — something the MCP app specification itself does not provide. Every component reads and writes with the signed-in user's own identity, calling SharePoint REST (three lists: TimeOffRequests, LeaveBalances, CompanyHolidays) and Microsoft Graph (calendar conflict pre-check, manager and team roster resolution, and 48x48 profile photos) directly from the browser — no MCP server, no middle tier, no app-only secrets. New requests are routed to the submitter's line manager resolved via Graph (/me/manager) with a self-approval fallback that keeps single-user demo tenants working.

The data services call SharePoint and Graph live but never throw: on any failure they fall back to an in-memory data set so the components always render, and the team calendar self-heals to a demo roster when User.Read.All is not consented. A PnP PowerShell provisioning script creates and seeds the lists, and a TimeOffSite tenant property lets an admin repoint the components at a different lists site without rebuilding. Built with the Heft build system, React 18.3.1 and Fluent UI v9 with host-driven theming inside Copilot's sandboxed iframe.

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

My Time Off personal overview (light theme)

Request Time Off form with Outlook conflict pre-check (light theme)

Team view with manager approvals and absence calendar (light theme)

My Time Off personal overview (dark theme)

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.
PnP PowerShell — PnP PowerShell is a cross-platform PowerShell module providing cmdlets to manage and provision SharePoint Online artifacts such as the lists this sample uses.

Keep the ideas flowing

Back to all possibilities