Samples

A RSS Reader original based on work by Olivier Carpentier, part of the SPFx Fantastic 40 Web Parts

This sample creates an Adaptive Cards Host web part that you can use to display Adaptive Cards in your SharePoint applications.

This sample demonstrates how to build a SharePoint Framework 1.22.1 web part that explores Microsoft 365 Copilot APIs through Microsoft Graph.

A SharePoint Framework (SPFx 1.22) web part that displays navigation links organized by tabbed categories. Links are stored in a SharePoint list and rendered in one of three layout styles: Card, Compact, and Tile.

This is a sample web part that illustrates how to use PnPjs, the IntersectionObserver API, and CSS animations to build a SharePoint Framework client-side web part that adds reveal-on-scroll animations to other web parts on a modern SharePoint page.

An interactive daily spin wheel game with probability-based rewards, built with React and PnPjs v4

This web part allows users to vote on an active poll and immediately see the results. It is built using the SharePoint Framework (SPFx), React, and Fluent UI. The web part fetches the active poll question and options from a SharePoint list named ‘Polls’ and stores user answers in a ‘Poll Answers’ list.

An interactive drag-and-drop matching game for SharePoint with time-based scoring and rank bonuses.

Get instant, personalized insights on any SharePoint page. This Application Customizer leverages the Microsoft Graph Copilot API to analyze page content alongside your emails, chats, meetings, and files — surfacing key people, pending actions, decisions, and context that matter to you.

This sample demonstrates how to trigger an authenticated Power Automate flow from a SharePoint document library using an SPFx ListView CommandSet extension. The extension uses the AadHttpClient to make authenticated HTTP requests to Power Automate flows configured with the “When an HTTP request is received” trigger and “Any user in my tenant” authentication.

Search People from Organization Directory and show live persona card on hover.

This solution contains an SPFx web part which shows a Kanban board using Fluent UI. The web part uses the default columns of the SharePoint Tasks list for showing the board’s columns and the tasks.

The Copilot Chat API Demo is a SharePoint Framework (SPFx) web part that demonstrates how to consume the Microsoft 365 Copilot Chat API (beta) using the native MSGraphClientV3 HTTP client. This sample showcases best practices for integrating Microsoft Graph endpoints in SharePoint Framework solutions.

This sample demonstrates how to build and integrate custom Heft plugins into SharePoint Framework 1.22 projects. It includes a practical Version Incrementer Plugin that automatically manages version numbers during production builds.

This web part fetches all the automatically added Header anchor tags in a SharePoint page and displays them in a Navigation component.

Organize SharePoint page sections and web parts into a tabbed interface with permission-based visibility, templates, and full customization.

The Tree Organization Web Part shows the Organization Chart of the or the team, the web part reads information from current user to build the Organization Chart.

Shows an organization chart based on specified user, and user can navigate to show company organization

This is a modern web part built on the GA version of the SharePoint Framework demonstrating how to build a custom web part with a calendar capabilities in it.

A dynamic SharePoint Framework web part for displaying content in flexible two-panel layouts with rich text editing, drag-and-drop reordering, and SharePoint image uploads.

SharePoint Framework web parts that integrate Microsoft 365 Copilot Chat and Search APIs to create interactive AI assistants with conversational history and intelligent document search.

An extension to provide a simple approach for company wide used templates in SharePoint Online.

A modern, feature-rich SharePoint Framework (SPFx) web part for generating customizable QR codes directly within SharePoint. This solution provides an intuitive interface for creating QR codes for URLs, WiFi, Contacts, and now Teams Meetings, Meeting Rooms, and Calendar Events. It features advanced styling options, real-time preview, and seamless integration with SharePoint document libraries.

Site Content solution contains SPFx web part that provides

A tenant-wide SPFx Application Customizer that collects telemetry from all SPFx web parts and extensions using Application Insights or Azure Functions.

SPFx React web part that sends telemetry events via CustomEvent to a tenant-wide telemetry Application Customizer.

This sample demonstrates a SharePoint Framework web part that uses Chrome’s built-in Summarizer API (Gemini Nano) to summarize SharePoint page content.

A SharePoint Framework (SPFx) List View Command Set extension that enables users to translate documents from one language to another using Azure Document Translation Service. Users can select one or more documents from a SharePoint document library and translate them into multiple target languages simultaneously.

This web part analyzes a SharePoint document library and visualizes the distribution of file types inside it. It uses the SharePoint Search API refiners to aggregate file type counts without enumerating items.

A comprehensive SharePoint Framework web part for browsing, searching, and filtering documents across multiple document libraries with folder tree navigation.

A web part that shows who is in the office and when:

A modern SharePoint Framework web part that provides hierarchical quick links management with collapsible tree navigation and inline CRUD operations directly from the page.

Hub Site Navigator solution contains SPFx web part that provides

Provides dynamic UI Editor with sharepoint like richtext editing capabilities with source code view directly from the page.

The SharePoint Custom Action Manager is a comprehensive, enterprise-grade SharePoint Framework (SPFx) web part for managing SharePoint custom actions with advanced features including bulk operations, role-based access control, template gallery, and advanced search capabilities.

A modern SharePoint Framework web part that provides dynamic quick-access links with inline editing capabilities directly from the page.

My Sites Hub is a SharePoint Framework (SPFx) Application Customizer Extension that provides users with a centralized “My Sites” dashboard accessible directly from any SharePoint site.

This sample web part provides a user interface for creating, updating, deleting and applying a Modern Experience SharePoint theme in SharePoint Online.

This component is developed for the advanced usage of commenting the page or article etc. Page Comments lists will be created to store the comments.

This is a sample web part that helps user create their avatar and save as profile picture. User can even download their avatar as PNG file. This web part can be useful in Intranet to help user create their avatar and save it as profile picture.

Three interactive web parts demonstrating Application Insights integration with real-time event tracking, custom logging, and page view analytics. Features visual feedback showing exactly what data is sent to Azure.

This web part lists all the automated Flows associated with a SharePoint List/ Library. Basic flow information like Flow Name, Flow Trigger, Flow shared Type and Flow URL are displayed.

This web part uses Chat GPT in an SPFx web part. You can ask questions from the web part and you will see the answers, most recent answers first.

This web part show images and videos in carousel

Display employees birthday per month in an accordion.

Web part that will display links to all associated sites that registered to the current site. Current site should be a hub site.

This sample web part shows a report of the web parts used on the current site.

Built purely with off-the-shelf SharePoint capabilities, Engage Hub is a contemporary SPFx-based substitute for Viva Engage. In addition to providing essential social capabilities such as liking and unliking posts, threaded comments, and comment creation, it manages post data using SharePoint Lists and Document Libraries.

A react Message Banner sample, allows to add a custom banner message to your SharePoint Online modern sites.

SharePoint Framework application customizer displaying an information banner using office-fabric-ui MessageBar.

This sample SPFx web part demonstrates multiple ways to read data from a SharePoint list/library. It includes side‑by‑side implementations using the native Fetch API, SPHttpClient, Microsoft Graph, and PnPjs.

SharePoint Online provides a list of appointments (events) on a site. The “Events” web part can be used to display them on a page. Users can access the appointment details via the web part and view all the details. The detailed view provides a link that allows them to add the appointment to their personal calendar. An appointment entry also allows them to maintain an attendee list. The “Events” list provides the “Attendees” column, where multiple people can be added. However, there is no automatic function for this; the list must be edited manually. The special app extension adds a registration and deregistration function to the detailed view. Users can register for a specific appointment and later deregister with a simple click. Attendees are automatically managed in the attendee column of the list.

This list search web part allows the user to show data from lists or libraries.

A SharePoint Framework web part that integrates OpenAI’s GPT-4 and Semantic Kernel to provide advanced chat capabilities with tool usage, including Microsoft Graph.

Displays SharePoint list items as interactive circular bubbles. Each bubble can show an optional logo, title, optional description and act as a link. The bubbles use customizable background and text colors, and a soft shadow to give a lifted appearance. On hover bubbles gently enlarge and return to their original size.

A modern take on the classic breakout game built with React 17, TypeScript, and HTML5 Canvas. Features Office-themed blocks with authentic Microsoft app icons, demonstrates advanced React patterns including Context API and custom hooks. Perfect for SharePoint Framework environments and showcases high-performance Canvas rendering with responsive keyboard controls.

• Connects to a Copilot Studio / Power Virtual Agents agent and renders a chat UI in a SharePoint web part. - Supports both a full WebChat UI (fast setup) and a custom Studio Client UI (full control). - Uses MSAL in the browser to acquire tokens scoped to the Power Platform APIs so the client can call the Copilot Studio endpoints.

This Web Part allows you to manage events in a calendar. Uses a list of existing calendars on any website. The location and name of the list and the dates of the events to be displayed are defined in the properties of the web part.

Service Health for Microsoft 365 solution show the health status for all the Microsoft 365 services

Holiday calendar solution contains SPFx web part and Adaptive card extension for Viva connections. SPFx web part provides below functionalities

Schema Extensions Manager is a SharePoint Framework (SPFx) solution (also Microsoft Teams / Microsoft 365 host ready) that provides a full UI to Create, Read, Update and Delete (CRUD) Microsoft Graph Schema Extensions and to track the extensions you have created in your tenant. It leverages Microsoft Graph (v1.0) /schemaExtensions endpoint together with SharePoint Tenant Properties (App Catalog site) to persist the list of schema extension IDs that were created through the tool so they can be rediscovered later.

Displays SharePoint list items as colorful hanging banner cards with an optional logo, title, (optional) description and a full‑card link. Each banner can have its own background and text colors.

React-securitygrid is an SPFX web part that uses React and Office-UI-Fabric to render a grid showing which users have access to which lists/libraries/folders/files on a Web as shown here:

Shows how to use X and Y coordinate data elements in a scatter chart.

Uses a plugin to create a scrolling/real-time chart with time series X axis.

Renders a multi-dataset radar chart.

Creates a polar area chart with add/remove data functionality.

Demonstrates how to create a pie chart.

Demonstrates how to render line charts.

Renders a horizontal bar chart and demonstrates stacked bars.

Renders a chart by receiving events from a dynamic data connection.

Calls the GitHub REST APIs and shows contributors for a given repository.

Renders a donut chart with patterns instead of colors.

Shows how to implement a custom Chart.js plugin with the ChartControl.

The Copy Views solution enables a user to copy views from one list/library to another across site collections.

Demonstrates how to create combination charts with multiple datasets.

A Chart Control version of SharePoint Quick Charts with many configuration options.

Shows how to use Cascading Dropdowns in property panes. Based on the instructions found at Use cascading dropdowns in web part properties.

This web part shows how you can call Azure OpenAI API in Streaming mode

Demonstrates the use of X, Y, and R values to create a bubble chart.

Uses static data to demonstrate basic ChartControl features.

Loads data asynchronously from a (fake) service to render a bar chart.

Renders an area chart with gradient fills and configurable line styles.

Demonstrates the accessibility features of the Chart Control, including the auto-generated data table.

An SPFx Extension that displays news as a running text at the top of every modern page.

A global list customizer which adds functionality to all document libraries in SharePoint Online to convert one or more documents in-place to PDF, or download one or more documents as a PDF. When selecting multiple documents for download they will be downloaded as a zip file. The converter uses built in API’s of converting to PDF.

The sample demonstrates how to create a command that moves a document to Azure Blob Storage.

This project demonstrates a SharePoint Framework (SPFx) Application Customizer that uses webhooks to display notifications when a SharePoint list changes.

List view command set extensions with below functionalities

This SharePoint web part displays items from a SharePoint list in a modern, responsive, and styled grid layout.

This solution displays a gallery of Copilot prompts from the PnP copilot-prompts repository and allows users to easily copy prompts for reuse.

This SharePoint web part is an Objectives and Key Results (OKR) tracking system with a modern, responsive UI. It allows users to create, track, and manage organizational objectives and their associated key results. The application provides a structured way to set goals, track progress, and maintain alignment across teams. Built with React, TypeScript, and Fluent UI, it integrates seamlessly with SharePoint while providing advanced functionality for performance management.

A demonstration of how one could build SharePoints Quick Links web part

Displays a set of quick links fetched from a SharePoint list.

A SharePoint Framework web part for browsing and viewing files in the legacy ‘SharePoint Online Client Extensibility Web Application Principal’ folder using native SPFx MSGraphClientV3.

Show a list of people using react-slick

A full-stack solution for secure, user-specific settings in SharePoint using SPFx, Azure Functions, and Microsoft Graph approot.

Displays public holidays for multiple countries and years.

This SharePoint web part is a ticket management system with a modern, responsive design. It includes a dashboard, personal view, new ticket form, and a detailed ticket view. Tickets can be configured with metadata like priority and status. The system integrates with SharePoint for assignments and permissions, stores data in a SharePoint list, and provides real-time updates. Built with React, TypeScript, and Fluent UI, it maintains SharePoint’s look and feel while offering advanced functionality for managing issues or requests.

This sample web part shows the list of your applications registered in Azure AD along with their associated client secret/certificate expiration date.

An SPFx Application Customizer Extension placed in the bottom placeholder which allows users to input their feedbacks without scrolling down to the end of the page.

This web part integrates the Microsoft Copilot Agent, built via Copilot Studio, into SharePoint Online featuring Single Sign-on and a chat interface.

This SharePoint Framework (SPFx) web part provides users with an interactive calculator to estimate their monthly carbon footprint.

This SharePoint Framework (SPFx) web part introduces a contemporary carousel component leveraging Swiper, facilitating seamless traversal through content housed within a SharePoint site.

MyOneDriveInfo solution contains Adaptive card extension for Viva connection with below functionalities

This web part show images and videos in responsive grid, on click it show images and videos in a carousel view.

The Group Members Web Part provides a comprehensive solution for displaying and managing Microsoft 365 group memberships within SharePoint. This web part leverages Microsoft Graph to fetch user data and presents it in an intuitive, responsive interface that supports filtering, search, and quick actions.

This SharePoint Framework (SPFx) web part enables organizations to celebrate employee achievements and contributions through a modern recognition system. Users can easily nominate colleagues for various types of recognition and engage with these recognitions through social reactions.

Displays your organization’s structure based on a custom list, starting from the top boss down to everyone else.

A fun interactive Easter Egg Hunt Game built as a SharePoint Framework web part

The Personal Dashboard app, built using the SharePoint framework, offers a versatile solution for organizations across various platforms such as Teams, Outlook, and Office. This app enables seamless integration with both public and enterprise APIs, allowing users to effortlessly consume and leverage their desired APIs within their personalized workspace.

This solution contains an SPFx web part that shows an HTML Image Editor based on canvas and Fluent UI.

This a custom PDF viewer web part for SharePoint Online by integrating Nutrient for Web using the SharePoint Framework (SPFx).

An extention to privide a simple approach to display custom messages in SharePoint Online.

This samples showcase how to connect two web parts together.

This Web Part allows users to create content as Tabbed content using Property Field Collection Data and tinyMCE for Rich Text Editing targeted for SharePoint Online.

I created this web part to add Mermaid diagram support in SharePoint Online as part of my tutorial series. While working on it, I found this discussion thread: Displaying Mermaid Diagrams in SharePoint Online Markdown Web Parts, which highlights the need for a proper solution.

This web part is more a POC created for the SharePoint Hackathon 2025. This web part allows you to quickly add presentation mode to any page on your site. It has no UI and is not visible after publish, so not edit mode of the page. After adding it to a page and publishing it will add an additional Play in the page header.

A powerful web part that allows users to test and build CAML queries visually with a rich, intuitive interface. This enhanced version includes a visual query builder, query validation, saved queries, and more.

This project guides you through building an intelligent document chatbot using Kernel Memory and Azure services. It covers the architecture and implementation details, including using an Azure Function for backend processing, a SharePoint Framework (SPFx) web part for the user interface, and leveraging Azure AI Search and Azure OpenAI for advanced search and response generation. The project also provides step-by-step instructions and references to relevant documentation.

New Modern Calendar Web Part for SharePoint Framework

List view command set extensions with below functionalities

The Yet another FAQ Accordion Web Part is a modern SPFx solution for displaying FAQs in SharePoint Online, featuring a responsive interface with real-time search, grouping, and customizable styling.

This web part uses event feeds from various sources and renders events using a look and feel that is consistent with the SharePoint out-of-the-box Group calendar/events web part.

A robust rich text editor utilizing the latest Fluent React components to seamlessly align with SharePoint Online Modern UI standards. Full control over UI and backend code, making integration with external systems like SharePoint lists a breeze. Inspiration is drawn from the out-of-the-box Text web part.

An SPFx Application Customizer that automatically indexes SharePoint modern pages, extracting page content, web parts, and metadata into a centralized SharePoint list.

Allows users to manage and organize bookmarks in a SharePoint list.

Shows how you can load localization files and use the localized strings if you have requirements to display localized text outside the normal SPFx/SPO processing

Demonstrates Star Ratings capabilities to SharePoint News.

Shows upcoming birthdays in the company

Shows upcoming birthdays in the company in a timeline

This SPFx web part demonstrates how to use the React useReducer hook with the PnPjs library to fetch items from a SharePoint list. By using useReducer, developers can better manage complex state within their React components, making it easier to handle asynchronous data fetching, loading states, and error handling.

The Web Part My Personal Apps allows the user to define links to Applications or Sites for quick access.

Integrates the Microsoft Copilot Agent, built via Copilot Studio, into SharePoint Online modern pages

This solution integrates a chatbot within SharePoint Online using a Tenant App Catalog and Azure AD App Registration. It provides a seamless way to enhance user engagement on SharePoint sites by embedding a customizable chatbot interface. You have a per site agent by creating it in a SharePoint list or a global one by adding json to TWE

A SPFx Web Part using Graph api. It shows Channels and Tabs (with link) from a Modern Team Site connected to Microsoft Teams.

This SPFx sample shows how to integrate a Copilot retrieval API into an SPFx web part and provides a hands‑on workflow to evaluate and tune search relevance.

The Secret Santa is a fun and interactive tool designed to manage a Secret Santa gift exchange directly on your SharePoint site.

A modern, customizable web part for managing and displaying links in various layouts in SharePoint and Teams. Modern Link Presenter is a flexible SharePoint Framework (SPFx) web part that allows users to manage and present collections of links in various modern layouts. Features include: configurable link properties (title, URL, icon, description, summary, color, target, display format), multiple output formats (simple links, links with icons, inline tiles, and rich tile layouts), individual color and display customization per link, search and filter functionality, and support for opening links in new tabs, within the same tab, or in a modal dialog. The tile layout offers additional customization such as tile size, mouseover effects, and button text. The web part is fully localizable, supports accessibility, and is ideal for creating modern dashboards, resource panels, or curated link collections in SharePoint Online and Microsoft Teams.

The purpose of this web part sample is to render M365 Group Plan tasks in a timeline ordered by the task due date with tags for years and months in a vertical stack. There are filter options to filter out completed tasks and tender tasks by a plan bucket. A task’s detail can be viewed by clicking the (i) icon below the “Due Date” popping up a callout dialog with task details. It Should be noted that a M365 Group Planner can have 0 to 200 plans assigned to M365 Group. The web part needs to be configured in the web part’s property pane you must select the plan to be rendered, along with options for the plan bucket and completed task filter. These setting will be used when the web part renders on the page. The configuration of multiple web parts on hte page for different plans and buckets is supported.

This web part displays key metrics from SharePoint Lists and Libraries. It connects to any site, list, and view (or uses custom REST queries) to calculate and visualize metrics like total count, average, sum, min/max values, unique counts, and most popular values. Users can customize which metrics to display, configure visual styling, set target values for performance tracking, and choose between vertical or horizontal card layouts.

Sample web part showing how to embed a Power App that resizes, adapts to themes, and supports dynamic properties

This SharePoint Framework (SPFx) web part displays a countdown timer for upcoming events from a SharePoint list. It helps organizations keep users informed about important dates and deadlines by showing a live countdown for each event.

This application customizer lets you translate the text on a SharePoint page using the Translator Text API of Microsoft Azure.

Allows users to read SVGs from a SharePoint library, select one of them and have the code converted into a JSON format that is ready to be used in a SharePoint List in advanced formatting.

This sample shows site mega menu. Application customizer is used along with SharePoint List to store the menu items.

This sample shows how you can print list items using different templates, site admin can add, edit or remove templates and users can print items based on those templates.

An extension that displays Vote counter and button to vote or unvote.

Shows how to use PnPjs in a React web part

SPFx application search driven navigation and permission side panel.

In this sample is possible to see how to implement Google Analytics through SPFx Extensions Application Customizers

This SPFx app allows quick access to user agenda, ToDo Tasks, Files and News and Relevant People related to user.

This web part provides easy way to render SharePoint custom list in data table view with all the necessary features.

This web part allows users to import CSV files into an existing SharePoint list

Microsoft Clarity will gives you the recording of the sessions and heat maps of the user interaction with the site, this will help to find and fix the areas of your pages that are not working as you expect

This sample is based on Erik Benke and Mike Zimmerman Accordion Section FAQ Builder web part. It was extended support single FAQs list based on Category and dynamic properties selection.

This is a sample web Part that illustrates the use of React Accessible Accordion plugin for building SharePoint Framework client-side web parts to show SharePoint list data in Accordion format.

This web part allows users to create a faux page hierarchy in their pages library and use it for page-to-page navigation.

Custom Command Set that set a Page layout to use the Single App Part page Layout

React-based SPFx web part and extension that allows users to add/modify/delete custom js and css file references using SPFx application customizer extension all modern pages within SP online site.

Replicates the functionality of Page Properties with improvements

This web part used the date range picker in the SharePoint Framework (SPFx) web part

This web part show organization chart for current user, shows, managers and direct reports and there available status.

Sample SharePoint Framework application customizer extension that shows toast notifications configured from a SharePoint list. Demonstrates jQuery module loading, barrel configuration, promise chaining, and localStorage caching.

Sample SharePoint Framework application customizer showing how to create a tenant global NavBar and Footer NavBar for modern sites, reading menu items from the Term Store.

This sample shows how to inject a custom Cascading Style Sheet (CSS) on modern pages.

This sample shows how to create a breadcrumb element and append it to your site via the SharePoint Framework Application Customizer extension.

description

Demonstrates managing the list subscriptions (sharepoint webhooks) and action to renew the webhook expiration date using Rest calls.

This sample web part demonstrates managing the list subscriptions (sharepoint webhooks) and action to renew the webhook expiration date using Rest calls.

The Web Part Birthdays shows the upcoming birthdays in the company, the web part reads birthdays from a list located on the tenant’s root site with title “Birthdays.”

Coming from old classic SharePoint pages you might have existing script solutions you want to re-use on a modern page without having to repackage it as a new SharePoint Framework web part.

This web part demonstrates displaying the list of flows in different environments, ability to re-enable flows which are stopped or suspended, and the flow run history of the selected flow.

Injects a button to the command bar which shows all the lists in the site and have the ability to quickly create an item by showing the NewForm.aspx inside a panel.

This sample is the source code for the Rhythm of Business Calendar app and is intended to demonstrate patterns and practices for building enterprise apps on the SharePoint platform.

YSample web part to display a training checklist in a SharePoint page.

This is a sample web part developed using React Framework to gather events from the underlying group calendar of a Team site. This sample also demonstrates the utilization of web parts as Teams tabs and Personal tab and offering a visualization context to change behaviors based on the platform used (Getting the proper information from the team vs. SharePoint site, understanding the context of the theme on Teams, etc.).

Extends the functionality of the native button web part.

This project is an SPFx (SharePoint Framework) application designed for employee onboarding.

Enhance the potential of SharePoint by integrating it with Dataverse, a low-code data platform from Microsoft

This SPFx solution is designed to monitor and track API calls executed within any SharePoint Online (SPO) site.

This combined SharePoint Framework and Azure Function solution is to provide the potentially most secure access from SharePoint Framework to any kind of third party API or Microsoft Graph.

At the time of developing this sample, the Office 365 UI fabric does not have any control for displaying hierarchical information. This web part helps to display the hierarchical information from SharePoint list.

The React Content Query Web Part is a modern version of the good old Content by Query Web Part that was introduced in SharePoint 2007. Built for SharePoint Online, this modern version is built against the new SharePoint Framework (SPFx) and uses the latest Web Stack practices. While the original Web Part was based on a XSLT templating engine, this React Web Part is based on the well known Handlebars templating engine, which empowers users to create simple, yet powerfull HTML templates for rendering the queried content. This new version also lets the user query any site collections which resides on the same domain url, add unlimited filters, query DateTime fields to the nearest minute rather than being limited to a day, and much more.

A SPFx WebPart using PnP/PnPjs, @pnp/spfx-property-controls and ReactTourJS.

Add new poll questions and their options. End users can submit his/her response to the poll. After Submission, user can see all responses count with Bar chart.

Displays currently logged in user’s OneDrive’s file

Allows users to select tools from a predefined list and save them in their own personalized view.

This sample showcase how to handle the navigation between property pane pages.

A set of web parts that lets you set property bag settings on site collections and enable navigation using those properties.

Displays a list of Teams Webinars you are an organizer of, allows you to sync those webinars to a SharePoint list, to share within a Team and cross check pending registrants against membership of a team.

Enterprise-grade SharePoint footer with hybrid architecture, advanced link management, and modern user experience

A React-based SPFx application for monitoring user activity within SharePoint documents.

This SPFx Application Customizer empowers content authors to copy modern site pages across sites with full control over:

The AI Document Assistant is a SharePoint Framework (SPFx) Command Set extension designed to enhance document interactions in SharePoint Online. This intelligent assistant leverages the OpenAI Assistant API to allow users to ask questions about selected documents directly within a chat interface.

This sample shows how the Workbench page can be customized to display in a way that better mimics a modern SharePoint page.

A web part to help you notice those special days

This project shows how to create an Advent Calendar using SPFx and React.

Shows documents which have been (explicitly) shared within a SharePoint site or Team.

Easily swap between environments when building SPFx solutions

Shows how how to use Microsoft Graph Connector that use DB2 Database and display Sales Orders in a list.

Goes beyond the standard SharePoint Page Properties web part, offering expanded support for various metadata types and configurations

This web part allows you to protect your data, such as the username, password or even just a text note (rich text). This data is protected with a master password that you can choose yourself.

Illustrating using the SharePoint Framework List subscription capability, which allows you to get notified of changes to custom list refresh the displayed data

Embed Microsoft Teams chats within SharePoint pages to streamline collaboration and information access for users.

This web part demonstrates building a React functional component that uses data from a remote service, in this case the Microsoft Graph, using the recently introduced React Hooks feature. The example web part renders a list of the user’s Teams and, optionally, the channels in each Team.

This WebPart (App) builds and creates an input form from a given SharePoint List and defined view. The view is used to determine the fields and the order of the fields in the form. This allows the form to be flexibly integrated into all SharePoint pages. The web part uses the latest version of the Fluent UI React Components library.

This project showcases an integration of Tailwind CSS into an SPFx project.

Shows how to use the new feature of Azure OpenAI Connectors API in a SharePoint Framework web part.

This sample contains two SPFx web parts: User preferences web part and Curated news web part

An extension modernizing the version history experience in SharePoint Online.

This sample shows how Application Customizer can be hidden from tenant external users. This is often the ask from the business when a SharePoint Framework App customizer or a web part has internal links that would be broken if a guest user attempts to access any or them.

Allows you to access securely Azure storage table data using Azure API Management (APIM)

This sample empowers users to effortlessly download multiple documents as a single compressed ZIP file.

This web part allows users to add a webpage in an IFrame to a modern SharePoint page.

The SPFx web part is a SharePoint Framework web part that allows users to view recent tasks, bugs, and commits assigned to them from a specific project in Azure DevOps

Manage those tenant wide extensions

This solution implements a simple Form Customizer with a Dynamic Form with a location picker, to demonstrate the many usages of a Dynamic Form.

This sample demonstrates how to use field customizer to handle unique permissions on list items.

This sample is chatbot that provides information about Transport for London (TfL) status.

This sample is chatbot that provides information to the current logged in user.

The Dynamic Site Form solution implements a Form Customizer with a Dynamic Form with field overrides to look like the default SharePoint new site form.

SPFx Invoice Generator Web part using PnP JS allows users to create invoices for different clients or customers.

The web part allows users to insert column data from associated SharePoint lists using a split button on the toolbar

Sharing Application Insights and solution’s cost information with your stakeholders typically requires either using Azure Dashboards or using Power BI. This sample solution allows displaying this dashboards directly in a SharePoint site or a tab in MS Teams, moving it close to the users.

Build a custom form with ease

This app is an example of managing the membership of a group you own including the owners of the group as well as using FluentUI v9

This sample web part shows list of Azure apps in your tenant. A new Azure application can also be registered and can be edited using this web part.

This sample shows how to use SPFx to create a Microsoft Teams dashboard personal app.

This sample shows how to use the IFramePanel control in a SharePoint Framework web part.

This Adaptive Card Extension demonstrates displaying the number of assigned tasks of Azure DevOps.

SPFx Weather Application Customizer Extension in the top placeholder

This sample contains a SharePoint Framework web part and an Azure function that uses the Open AI API to summarize a SharePoint page in multiple languages.

Sample web part to showcase an Instagram feed.

Displays Microsoft Teams channels conversations in a simpler way which makes easy to search and filters the new conversations and its replies

This is sample web part using SPFx and MSGraph to fetch the users information based on First Name, Last Name and Email Address. web part will fetch data from directory using Graph API and display in details list.

This web part loads the GitHub profile using SPHttp client in PnP v3.

This App is a implementation of OpenAI ChatGPT-3. It runs on SharePoint, Teams as Personal or Teams App and Message Extension.

Sample web part to display Twitter timeline.

Web part pulls all Microsoft 365 Groups and Teams that the logged in user has access to view.

A SPFx extension using @pnp/sp that allow creating Modern Pages based on prefilled modern pages marked as “Page Model”, inside the Site Pages Library, and code defined pages. Users can select a Modern page as Model just setting a custom property page named “Is Model” to “Yes”. People often need to create periodically editorial pages with the same composition, sections structure and webpart configuration, in order to give users the same users experience between pages with different contents but with the same communicative purpose

This web part displays different statistics data captured in the Azure Application Insights in a graphical representation.

This web parts displays a (world) map. An editor can set custom markers directly in the map. Each marker can configured individually.

This web part displays a sidebar that allows users to provide feedback on various sections of your site.

This sample is a Teams personal Tab to act as a Microsoft 365 across application (Teams, Outlook, Office) to generate docuemnts.

This Web Part allows users to create content as Tabbed content using Property Field Collection Data and tinyMCE for Rich Text Editing targeted for SharePoint Online

This small sample illustrates how to extend the PnP React SPFx ListView control with a contextual menu.

This web part loads all lists on a site and display it in a Entity Relationship Diagram (ERD)

Take emoji-based reactions or feedback for a given news/article/post

Sample Web Part to track all flights from a selected airport, date and information type.

Using Kiota to generate a client to your AzureAd API and use it from a SPFx webpart.

Web part that will display links to all associated sites that registered to the current site. Current site should be a hub site.

A sample of an SPFx Form Customizer built with React for managing items of a custom list of customers.

This sample shows the usage of Zod to eliminate manual cast and validation of the data coming from external API.

This web part allows you to generate some images using the recently released API of DALL-E image generation.

This web part demonstrates displaying the list of approval requests of Power Automate. Power Automate provides a new workflow feature that replaces SharePoint workflows, but it is a Power Platform feature, not a Microsoft 365 feature. You can display approval requests from only Power Automate site. This web part enable to display approval requests from SharePoint site.

This sample shows how you can query Microsoft Graph from React in SharePoint Framework

This solution builds off of the solution react-async-await-sp-pnp-js submitted by Jose Quinto, and re-work of the existing class based react-pnp-js-sample by Julie Turner. This implementation refactors to take aspects out and utilize and showcase PnPjs Version 3 using React Functional Components and Hooks.

The React List Form web part is a web part for adding a list form to any page. It provides a working example of implementing generic SharePoint list forms using the SharePoint Framework (SPFx) and the React and Office UI Fabric libraries.

A React based SPFx utility web part which will help admins/user(s) to associate and remove association of the list form customizer extension to a particular list.

This web part consume an anonymous Function App from an HTTP Trigger using the templates from the Northwind Microsoft DBs

This web part shows how to use Azure Communications Services and React UI component to create a Room Chat.

This solution renders a given Termset as a Tree and incorporates files similar than a folder structure in file explorer.

This web part shows the current user’s colleagues, and allows the user to search AD directory, The user can configure the properties to show when expand the user card.

This web part is using the beta MS Graph Profile endpoint to list your awards. At the time of writing this sample (May 2022), this is a Beta endpoint, so it could change in the future. A future version of this web part could include the ability to add new awards to your profile.

Allows users to create Frequently Asked Questions using Property Field Collection Data

This sample describe a SPFX application which implement an image gallery with taxonomy base filtering and typed search. This application also implement pagination.

react-follow-document

Questionnaire meeting app provides Pre-meeting app experience for MS Teams meeting attendees to ask the questions related to meeting before the meeting starts.

Sample web parts allowing to add sections navigation to the SharePoint page.

The Cherry-Picked Content Web Part is a modern replacement for the classic Content Editor Web Part, with a twist: code snippets can only be picked from approved document libraries.

An SPFx web part that displays a Scalable Vector Graphics (SVG) image using properties to customize how it is rendered. The web part utilizes the PnP SPFx Property Controls package (specifially the SpinButton and ColorPicker) to set these properties.

Sample Todo web part demonstrating how you can utilize Vue (a progressive framework for building user interfaces) with SharePoint Framework using handy single-file components approach.

This solution creates a customizable Tiles Web part, it uses a stored collection from the PnP PropertyFieldCollectionData control and allows the user to choose the color scheme (theme or custom) and to set the size of the tiles.

This web part provides loggedin user’s outlook events with some advanced features

This web part demonstrates displaying the list of flow button of Power Automate.

Used to update the membership of a team based on the contents of a CSV file, can be hosted in a SharePoint site where a list can be defined for logging purposes or run inside teams as a personal app.

The React-PPP-PnP-Controls sample showcases the use of the Property Pane Portal to display the PnP SPFx React controls in the SPFx Property Pane.

This component is developed for the users who really need to create a Poll within a minute and with less maintenance.

This web part allows you to add images to a SharePoint List, and renders them with a UX very similar to Instagram Stories (or Twitter Reels, or [Place your Social network here]). It is a way to engage employees, showing relevant content in a well-known visual appearance.

This solution creates a customisable Hero web part, it uses a stored collection from the PnP PropertyFieldCollectionData control

This web part provides an example of how to use the AdaptiveCardHost component present in the PnP React Controls library.

Shows how to use the Microsoft Graph APIs (beta) for Taxonomy to get the data.

SPFx Web part to Hide/UnHide lists in a Site Collection’s Site Contents Page.

This solution shows how to manage data stored in user application’s personal folder in OneDrive which is one of many good methods to store application data/configuration which may be easily used in apps added to SharePoint page or Teams.

Showcases the use of the Property Pane Wrap to embed HTML controls in the SPFx Property Pane

This very simple sample demonstrates three different approaches to display the version number of your SharePoint solution in your web part.

This sample shows how to abstract batching graph requests

This web part provides mui datatable features for your lists.

Sample custom property pane controls built in React for use with SharePoint Framework client-side web parts.

This web part is a good example (starting point) for a solution to implement alternative view for user followed sites (or any kind of links). The web part uses Microsoft Graph so it presents how to define needed web api permissions in package-solution and use MS Graph API endpoints.

This webpart displays a quote of the day by querying a third-party api or can display a quote entered manually into the webpart property pane.

This sample uses Microsoft Graph to list the Teams the current user is a member of. When the user clicks on one of the teams, the web part retrieves information about the default channel (General) and opens it. The web part can be configured to open the team on the web browser or client app.

This SPFx web part (or Teams Tab) enables a user to upload a supported file type via drag and drop while the uploaded file will be converted as PDF

Allows user create a navigation menu , grouped by any column of document library. When the user clicks on the header it dynamically load documents.

This web part is a simple find object game.

Listview command extension that is available only for the Site Pages library to change the layout type. If the page is Article, it can be changed to Home which will remove the page title placeholder and vice versa.

This sample shows a web part to show the first few sentences of an article in a SharePoint site, so that the article can be looked at a glance.

This SPFx Outlook Add-In lets users save any email attachments to a OneDrive folder.

This web part uses the Chart.js library to visualize SharePoint list data.

This web part allows user create a accordion with documents links grouped by any column of document library.

Displays an animated progress bar component

Application extension that allows the user to check list of flows and their current status and details.

This sample uses the popular React Router library to create tab, multi-screen or single page app (spa) experience in React SPFx web part. This is useful when the web part is more complex and to simplify the user experience multiple screens or tabs are needed. The same approach can be taken when a single page app (SPA) has to be migrated to modern SharePoint sites.

Search for groups in your tenant and allow you to view the details of the selected group as well as view a list of group members and export the list of members to a CSV file

Sample Web Parts illustrating performing SharePoint CRUD operations in React, Angular, JavaScript without any framework and using the @pnp/sp library.

Displays a command button named Copy/Move Item(s) in all the custom lists

Share to teams helps us to share files along with folders in document library it also alows us to share pages in the site pages library and last but not the least it allows sharing list items to teams channels or group.

An example of how to apply a custom theme or a variation of the current SharePoint theme directly to the web part

Provides an example of how to create a dynamic template system (configurable via Web Part properties) that can not only render HTML but also React controls, such as Fluent UI, without the need to use Handlebars.js + Web Components

This solution demonstrates how to use the OneDrive special folder Apps in order to save user’s preferencies cross-device.

This sample shows how to implement iFrame-based web parts with a dynamic responsive behavior on the example of Facebook Page Social Plugin.

This application extension alows user receive notifications from selected lists or libraries

Displays page contributors in reverse chronological order.

This sample provides a webpart that can be used to manage Document Libraries with Secured Subfolders.

This list view command set, helps in copying the settings of the PnP search results web part present on a page to the settings of the PnP search results web part present on the selected pages.

Lets you add and delete remote event receivers to lists

Adds footer to launch a Power Virtual Agents chatbot window from any page.

This extension provides real-time monitoring of Microsoft 365 service health directly within your SharePoint environment. It enables users to quickly check the availability status of core M365 services, helping organizations stay informed about outages or incidents.

This sample access drives from OneDrive and navigate between his content using Graph OneDrive and Site API and Microsoft Graph Toolkit React controls with the addition of new FileList control.

Shows news information as a Banner, this information come from a list defined in any site.

Allows user create a navigation menu , grouped by any column of document library. When the user clicks on the header it dynamically load documents.

This is a sample web part developed using React Framework that showcases how to use the latest microsoft-graph-client in order to do advanced configuration of the Microsoft Graph client.

This Command Set allows to create an adaptive card based on list data and send to microsoft teams chanel, The user can select the list fields that will show on the card.

React FAQ Document Card Web Part

Use this Web Part to add a video banner with a text on top of it to your pages.

SPFx Webpart to display News from SharePoint site(s)

This is an application that supports Questions & Answers through a web part that can be used directly on a Modern SharePoint Site without the need for Yammer or a backing Microsoft Team site. It relies on a backing SharePoint list that is hidden and a provisioned Site Page that hosts a pre-configured version of the questions web part.

Sample solution that facilitates navigation between large collections of SharePoint library folders.

The web part lets you manage your Azure AD applications that have the Sites Selected Api permission. With this web part you’ll get an UI for managing what app can connect to which site.

This is an application that supports Feedback through a web part that can be used directly on a Modern SharePoint Site page. This web part can be added to any site page or article. This allows users to send categorized feedback via email to users in the “Feedback Owners” group.

Sample that shows how to send a message to Microsoft Teams using a SharePoint framework solution using Microsoft Graph.

Sample SharePoint Framework list view command set extension to demote a previously promoted News page.

This sample shows how to create Command View Set working with single and multiple files selection. Once selected some files, it will show file sizes representation using a React D3 TreeMap component. This sample also shows how to integrate D3.js third party components within SharePoint Framework.

Sample SharePoint Framework list view command set extension to create folders that can be all at the current location (parallel) or nested (one after another).

Sample SharePoint Framework list view command set extension that copies the classic link (path) of a selected item. Uses copy-to-clipboard library, toastr and sweet alert for notifications.

This is a sample project that contains a web part which makes use of the PnP SPFx Controls

This web part allows you to send MS Teams feed notifications to a selected user

This sample shows how to use Microsoft Graph Toolkit in SPFx and custom with Fluent UI Fabric Controls

Sample SharePoint Framework application customizer extension that shows favourite links using office ui fabric panel. Fabric UI React components used include - panel, dialog, list and spinner.

This sample will show you how to embed a Bot Framework bot into a SharePoint web site with SSO.

This sample will show you how to embed a Bot Framework bot into a SharePoint web site with security consideration.

This web part will allow users to view/update application customizers properties across any web where the current user has access to.

The web parts embeds the login bot by using a webchat. As the user has already login in the SharePoint website, we could use SSO to authorize the bot.

This sample shows how to secure your conversation including the use of a Direct Line token instead of secret, for user id, generate it inside client side and detect if the client has changed the user ID and reject the change.

This web part will allow SPFx developers to test PnPjs methods and it displays response in JSON viewer to identify properties/attributes returned by method/API

This react web part sample displays Soccer Highlights from a public Soccer API.

Allows users to create Frequently Asked Questions(Faq App) in modern and classic SharePoint pages.

This web part allows tenant administrators to manage tenant properties through a graphical interface. We can create, edit or delete tenant properties.

The web part pulls in the current user’s name and displays it on the page. The greeting text before the name is customizable through the property pane. Additionally the position of the greeting and color of the text can be adjusted through the property pane as well.

This project shows how to integrate Tailwind CSS framework into a SPFx React project.

This web part allows us to create a new To Do task using the new ToDo MS Graph endpoint. If deployed as an Outlook Add In, the Task title comes from email subject. Let´s say this is similar to the OOTB “Flag” action, but here you can select the ToDo List where to store the Task, and you can modify the Title before adding it.

This web part allows tenant administrators to manage profile card properties.

In this web part you can full customize the background and foreground color, font size, width and height of links.

This web part allows to search and view the Youtube videos, across the Youtube API, directly on a SharePoint page, furthermore the property panel offers the possibility to specify the api key, the number of items to display and it is also possible specify a Youtube Channel Id.

This field customizer shows how to use PnP FieldFileTypeRenderer controls.

This sample is extension of the single World time clock sample that was provided in SP Starter Kit.

This application customizer will track the pageviews using Azure App Insights. The customizer will track the react routing which is used in SPA, in SharePoint Online it tracks the navigation between the news post which is not the actual post back.

This web part will help the administrators to synchronize the User Profile Photos from Azure AD or from the local file system to SharePoint User Profile Store.

This field customizer shows how to use PnP FieldRendererHelper utility.

This web part allows user to manage planner tasks in SharePoint Site. The UI was inspired on Planner UI, it is full implemented with Office-UI-Fabric Components. Use MSGraph API’s and PnPjs to data access. The user can search task by name, can filter by progress status, all data are dynamic updated on change..

Looks up the SharePoint site user/group ids related to a user. Azure AD groups that the user belongs to, and which are known to the SharePoint site, are also displayed.

This sample shows how we can provision Document Library, Custom List, Web and List PropertyBag properties, Site Columns, Content Types, Images, Site Page with the SFPx Client side web part and even prepopulated list and library items along with the SPFx solution package. All of the components can be deployed at once with the SPFx web part when the app is added to a SharePoint site. It also contains custom list and document library xml schemas.

This web part shows a Restaurant Menu, the user can select the options to show in Menu.

Adds a collapsible accordion section to an Office 365 SharePoint page or Teams Tab. Ideal for creating FAQs.

This web part shows sites that user has permissions to access. It includes Office 365 Groups, OneDrive Sites, SharePoint Sites and App Sites created by SharePoint Add-ins.

This simplistic sample Web Part demonstrates the use of JavaScript in a SharePoint Framework web part. The properties pane for this web part display a drop down list of lists in the current web. Once the user selects one of the lists, the web part display the contents of the list.

Use this web part to test the CLI for Microsoft 365 SPFx Project Upgrade.

This sample shows how the Visio JavaScript APIs can be used within a web part. For sample purposes, this web part will display the name and the hyperlinks of a Visio shape when the user selects it.

A version of react-adaptivecards using React Hooks.

Uses Azure Cognitive Services to analyze and approve or reject user-submitted photos.

Show and search users from your organization, through Microsoft Graph. Search results show as a nice People Card, and display the Live Persona Card on hover.

This sample shows how to consume Dynamics CRM API using AadTokenProvider class.

This sample displays list of events in chronological order. It is typically a graphic design showing a long bar labelled with dates paralleling it, and coexisting events. This web part helps to draw the timeline based from SharePoint list with pre-defined schema.

Using Microsoft Graph, this web part grabs the Office 365 groups the current user is a member of with links to the groups SharePoint site.

This application customizer will display the alert message based on the items from the list.

Sample web parts illustrating using the SharePoint Framework Dynamic data capability.

This web part is the classic game Minesweeper, put in a Fluent UI powered SPFx web part!.

This is Greeting web part which shows greeting to the current logged in user.

This command set allows quick edit images located in Document Library.

This sample demonstrates the capability of using Adaptive Cards with SharePoint Framework. Adaptive cards are great fit for Bot, however they can be effectively used with SPFx to render the content. This web part helps to display the image gallery from SharePoint list.

The web part illustrates how to get all the web part present in the current page, bind them in a multi-select dropdown.

Sample SharePoint Framework application customizer extension that shows current user followed sites across tenant using office ui fabric panel.

A fun game where you unscramble the words before the time runs out. It stores everyone’s high scores in a SharePoint List on the Site.

This is a sample web part that displays currently logged in user’s Microsoft Teams(user is member of), its channels and will allow sending messages to any Team’s channel.

Sample SharePoint Framework application customizer adds a festival animation to the pages. At the moment this extension has capability of display 2 festivals (Christmas and Diwali) however, more can be added very easily.

Sample SPFx React web part which allows sending emails using Microsoft Graph.

This web part provides you the ability to display a list of site administrator defined number of sites that a given user is following, with paging as well as inline filtering of sites by keyword or phrase. Currently the list of followed sites includes classic as well as modern communication sites but does not include group enabled (modern) team sites.

This sample shows how to build web parts that display documents in accordance with the SharePoint Online modern experience. The code uses Office UI Fabric components on the top of SharePoint framework. The web parts implement filtering and sorting. Two data source approaches are demonstrated items retrieved from the search index and real-time query to a document library.

This command-set can be used to hide other ‘out-of-the-box’ commands on list views.

Demonstrates how you can store Teams Personal App Web Part’s properties in user’s OneDrive.

The web part demonstrates the usage of “CSS in JS” pattern with SharePoint Framework. “CSS in JS” is implemented using TypeStyle library.

This component will help the administrators who are currently maintaining the user profiles in their organization.

A web part that uses the botframework-webchat module to create implement a React component to render the Bot Framework v4 webchat component. This web part is able to render Text and richt attachments (Images, Cards, Adaptive Cards, …) and has settings for branding purposes.

This sample shows how to use SPFx to consume data from the Project Online REST API.

This SPFx Outlook Add-In lets you browse your OneDrive, joined Teams or Groups and select a folder to save your complete mail in there.

This field customizer will display the attachment related information for a listitem.

This web part displays info about the COVID-19 virus for a given country.

This web part is designed to help developers understand how to use the Context API and useContext() React Hook to share global data between a hierarchy of nested React components.

This sample shows how to post a praise to Yammer using aadTokenProvider (without Yammer JavaScript SDK).

This web part allows you to add custom CSS on a page to enhance list formatting.

Coming from old classic SharePoint pages you might have existing script solutions you want to re-use on a modern page without having to repackage it as a new SharePoint Framework web part. This web part is similar to the classic Script Editor Web Part, and allows you do drop arbitrary script or html on a modern page.

Sample web part to display PnP ListView control with column rendering using PnP Field Controls.

This web part acts as a centralized place where admin can manage SPFx solutions present in their tenant using Application lifecycle Management(ALM) APIs and perform activities like Add, Deploy, Install, Retract, Uninstall & Remove apps.

This web part finds all the Office 365 or AAD Security groups a user is a member of or all the members present in such a group. It can be used as an admin utility to quickly check the membership of any user or group from within a SharePoint page itself. The retrieved results can also be exported to a CSV file.

This sample shows how to use the Text Analytics API (Cognitive Services) to render a rating icon based on the different comments in page.

The web part Use PnPjs library and Axios

This web part will allow a user to select a text file contatining zpl which is used to generate an image using the labelary web service to render the zpl and return the image.

Sample web part which uses a Generic React Component which enables it to have Target Audience functionality like what was available in classic web parts. Targets SharePoint Groups only within the site.

A web part showcasing how to call the Microsoft Graph Thumbnails API to generate a preview image for files and pages in SharePoint. The sample illustrates how to craft the preview URL both from a search result as well as from a SharePoint item object.

This web part makes a modern SharePoint page into a Teams tab configuration page for use in a Teams application. This allows low-code developers to create Teams applications containing configurable tabs without the need to code a custom configuration page. Using this tool, along with Microsoft Teams App Studio, low-code developers can build Teams applications entirely from modern SharePoint pages.

This extension creates a callout with a dropdown that allows users to select from a list of top level folders in a document library. After selecting the folder they can use the button to navigate to that folder.

Office 365 Groups is the foundational membership service, that drives all teamwork across Microsoft 365. Once in a group, we can get the benefits of the group-connected services like shared Outlook inbox, shared calendar, SharePoint site, Planner, Power BI, Yammer, and Teams.

Redirect from URL based on mapping from a list on the site. Can be used to automatically redirect from pages to other locations.

This application customizer provides you the ability to show notifications on the pages in the top / header area.

This sample shows how to get the members of a specific group, including their presence information (using the new Presence endpoint in the MS Graph API).

This sample shows how to use SPFx to consume data from the Project Online REST API using a custom module for PnPjs. The web part is currently logging the data returned from the API to the browser console as a simple proof of concept.

A SPFx Web Part using @pnp/sp/appcatalog and @pnp/spfx-controls-react. It allows to see in a single view all the SiteCollection catalogs and the Apps installed with some useful metadata. It needs Globlal Administrator or SharePoint Online Administrator permissions in order to access Site collection App Catalogs hidden list and each Site Collection App Catalog.

This SPFx React web part sample demonstrates mobile touch slide swiper. By default the swiper web part is responsive, has cross device and browser touch support and uses paging, but additional features like navigation, autoplay, loop of the slides and more can be enabled from the web part properties panel. The swiper web part can be used as carousel as well. The slides or cards template can easily be customized. The SPFx React swiper client side solution can easly be extended with more swiper, carousel like features because it is based on a popular feature rich JavaScript library called Swiper.

A SPFx Web Part using @pnp/graph/teams. It shows Channels and Tabs (with link) from a Modern Team Site connected to Microsoft Teams.

This Command Set uses Microsoft Graph API to get the Thumbnail URL, of selected size (small, medium, large), for any file stored in a SharePoint Document Library.

This sample shows how to use the Bing Search API (Cognitive Services) to get news article related with the current page. That relation is set using the value of a specific Managed metadata field in the page.

This sample shows how to managed Microsoft Graph Open Extension in SPFX. This application uses User Resource to create Open Extension.

SPFx application extension that uses the Bot Framework React Webchat Component to render a Bot Framework chat window

Sample SharePoint Framework field customizer extension that enables reordering of list items through intuitive drag and drop directly in your list view. Demonstrates the use of jQuery and jQuery UI, custom property JSON, and PnPJS Batching.

This is sample web part which showcase how to implement Google reCaptcha v2 in SPFx. CAPTCHA is used to prevent bots from automatically submitting forms with SPAM or other unwanted content. If we are building a custom input form to get feedback, newsletter subscription or contact us form using SPFx web part. We might have to implement SPAM protection using some CAPTCHA resolving technique. This sample can come in handy to extend it for your business requirement if you need to implement CAPTCHA in SPFx web part.

SharePoint Application customizer that allow you to display a message to your External users.

This application customizer adds a toggle button on all the Modern Pages which will toggle (show/hide) the Site Header, pulling the content to the top and giving more reading space for the users.

This is sample web part to showcase how to open webcam and take photo in SPFx web part.

Custom Command Set that gets metadata information from MS Cognitive Services Vision API for the selected Image

Generates a printable QR code which links to a SharePoint list item.

This sample shows how to create Custom Dialogs using @microsoft/sp-dialog package in the context of Command View Set. You can use also custom dialogs with client-side web parts or with any SharePoint Framework component types.

Sample SharePoint Framework extension project injecting Javascript code to enable Azure App Insights monitoring and statistics.

The React Hooks web part is an example of how to implement Hooks in Spfx. Hooks is a new feature included in React version 16.8, with the new version of SharePoint Framework (SPFx) version 1.9.1 we can use them in our developments. In this example we are going to see the different types of hooks that are available and with the comparison of how this implementation can be done without the Hooks to be able to observe the benefits of using it.

This sample shows how you can manage site provisioning by calling Azure functions.

Manage current user flows in SharePoint or Teams Tab, this web part use the msflowsdk-1.1.js

This sample shows how you can redirect default SharePoint list forms (New,Edit,Display) to different pages.

This sample uses the popular Jest Testing Framework with a SPFx client side solution. It is a SPFx-Jest-Enzyme-Sinon starter kit so you can start writing and debugging unit tests in typescript for your SPFx solution. The setup includes unit tests examples, code coverage reports in different formats, visual studio code unit test debug configurations for typescript, setting a coverage threshold (gates) for continuous integration and continuous deployment scenarios.

This sample web part provides a user interface for applying a Modern Experience theme in SharePoint 2019 on-premises.

A simple Organisation Chart web part using Office UI Fabric, VueJS, REST API.

Displays information about a GitHub user.

This web part demonstrates building a React functional component that includes state, using the recently introduced React Hooks feature. The example web part renders a number to Roman numerals conversion tool.

This web part is intended to be easier to understand for new developers building their first SPFx web part. It is a refactoring of the HelloWorld web part that is created by the @microsoft/generator-sharepoint Yeoman generator, and introduces React Functional Components.

Sample SharePoint Framework listview command set extension that allows users to clone one or more list items. Demonstrates conditional visibility, PnPJS requests, PnPJS Batching, and field specific formats for rest operations.

A sample web part that uses the Mobx library with multiple stores to keep track of the applications state.

This demonstrates how to use an SPFx Application Customiser to inject an additional search box into the header of each page, which uses the “Search Settings” (at either the Site Collection or Sub-Site level) to determine the redirect page.

A web part for use in Microsoft Teams that displays a mashup of information partaining to customer visits.

This sample shows how read and update a custom Schema extension in MS Graph to Tag a Team using metadata from a specific TermSet in SharePoint.