Samples by SPFx version
You can use the filters below to find samples by SharePoint Framework versions.
To learn more about SPFx compatibility, visit the SharePoint Framework development tools and libraries compatibility on Microsoft Documentation.
To learn more about how to use these samples, please refer to our getting started section.
Samples
Angular & ngOfficeUIFabric Client-Side Web Part
Illustrates the use of Angular and ngOfficeUIFabric with the SharePoint Framework.
JQuery, Photopile.JS & Office UI Fabric Client-Side Web Part
This is a sample web part that illustrated the use of JQuery and Photopile.Js with the SharePoint Framework.
Embed a PowerBI report in a Client-Side Web Part
This sample SharePoint Framework client-side web part embedding a PowerBI report using PowerBI Embedded without any server-side code.
Using jQuery loaded from CDN
This is a sample web Part that illustrates the use of jQuery and its plugins loaded from CDN for building SharePoint Framework client-side web parts.
Call custom Web API secured with AAD from SharePoint Framework client-side web part
Sample SharePoint Framework client-side web part illustrating communication with a custom Web API secured with Azure Active Directory.
Migrating existing Angular applications to SharePoint Framework sample
This is a sample Angular application before and after it has been migrated to a SharePoint Framework client-side web part.
Angular multi-page client-side web part
This is a sample SharePoint Framework client-side web part built using Angular, illustrating building multi-page web parts.
Using React and Mobx
Sample web part implementation that uses Mobx to keep track of its state.
Multi-list Grid
React-multilist-grid is an SPFX web part that uses React, Office-UI-Fabric, and Redux to let users edit list data from lists that reside in multiple webs and multiple sites in a single grid, similar to Quick Edit mode. The lists do not to be of the same type – you just need to create column mappings to tell the web part which fields to show in which columns of the grid.
Angular2 Web Part Prototype
Sample To Do Web Part built with Angular2. This sample illustrates how you can use Angular2 with the SharePoint Framework.
Integrating custom gulp tasks to SharePoint Framwork toolchain
SharePoint client-side development tools use gulp as the build process task runner to...
Extending webpack in the SharePoint Framework toolchain
This sample shows how to use the webpack markdown-loader to preprocess markdown files to HTML string.
Search Client-Side Web Part Built with Angular v1.x
This is a sample search web part that illustrates how you can use Angular within the new SharePoint Framework
Deployment of SharePoint assets as part of SPFx package
Simplistic solution demonstrating how to provision SharePoint assets using Feature Framework elements when SharePoint Framework solution is being deployed to a SharePoint site.
Angular client-side web part
Sample Web Part illustrating using Angular with the SharePoint Framework.
Azure Active Directory implicit flow authentication samples
Sample SharePoint Framework web parts built using React illustrating different scenarios using implicit OAuth flow with Azure Active Directory.
Microsoft Authentication Library (MSAL JS) authentication sample
Call custom Web API secured with AAD from SharePoint Framework client-side web part using Angular v1.x
Sample SharePoint Framework client-side web part illustrating communication with a custom Web API secured with Azue Active Directory using Angular v1.x
Angular MS Graph Web Part Built with Angular v1.x
This is a sample MS Graph web part that connects to Microsoft Graph and pulls SharePoint information from your tenant. It will first pull the root site collection (currently a limitation by Microsoft Graph), then it will display all the lists associated with the site followed by all the items inside the list.
Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x
Sample bootstrap slider which pulls the slides from a list inside the SharePoint site. The list is automatically deployed once the app is installed in the SharePoint site.
Multi-page client-side web part
Sample SharePoint Framework client-side web parts built using React illustrating building multi-page web parts.
Call custom APIs secured with Azure Active Directory without ADAL JS
Sample SharePoint Framework client-side web part showing how to access a custom API secured with Azure Active Directory (AAD) without using ADAL JS.
Taxonomy Web Part
Sample Web Part illustrating Reading taxonomy term stores' hierarchy from SharePoint, Loading JavaScript Object Model scripts, creating Knockout components
Knockout Dependent Properties
Sample Web Part illustrating...
Office Graph Web Part samples
Offline First Web part built using LocalForage, Whatwg-Fetch, ES6-Promise
Sample SharePoint Framework Client-Side Web Parts built using React showing interacting with the Office Graph.
Display Employee Spotlight JavaScript Client-Side Web Part
Simple Web Part that demonstrates the use of SharePoint Framework for showcasing Employee Spotlight. The web part pulls data from a configured list and User Profile service. The properties pane for this web part has 5 cascading dropdowns.
File Upload using AngularJs
File Update/Delete web part using AngularJs and ngOfficeUIFabric with the SharePoint Framework.
Organisation Chart
A simple Organisation Chart web part using Office UI Fabric, React, REST API batching and ServiceScope plumbing.
Handling Multiple Editions of SPFx Solution
This sample shows possible approach of handling multiple editions (e.g. trial, lite, full) of SharePoint Framework solution.
Image Magnifier
This web part allow to magnify an image, displaying a resolution more detailed through a lens.
Azure Active Directory invitation manager Graph API samples
Sample SharePoint Framework web parts built using React illustrating the possibility to use Graph API to invite external users into the Azure Active Directory.
People Picker
SharePoint Framework solution with the Office UI Fabric People Picker, the client web part across the SharePoint Rest API is able to retrieve people and groups.
File Upload Web Part
The file upload web part allowing users to upload multiple files to a document library or as item attachments.
Consuming Third Party APIs secured with Azure Active Directory within SharePoint Framework
This sub folders contains a client-side project that shows how to consume a 3rd party API within SharePoint Framework.
Sample with Handlebars.js
This sample demonstrate how to set up SPFX to use Handlebars through webpack loader.
Web part showing Url validation for SharePoint using Office Graph
This sample contains a class that evaluates the url input of a text field against the Microsoft Graph.
Banner Web Part
This web part provides you the ability to add a variable height image banner with a linkable title.
Links web part
This web part provides you the ability to add a per instance listing of links with the ability to group sets of links. Links are stored as a collection of links within the web part's properties, removing the need for link storage within SharePoint lists, tenant properties, or other external link storage requirements.
LOB Integration web part
This web part allows you to learn how to consume 3rd party APIs, secured with Azure Active Directory, in the context of SharePoint Framework.
People Directory
This web part provides you the ability to add a searchable people directory. A people search box and alphabet list are provided to enable both searching by name as well as selecting a specific letter. This web part requires no configuration and utilizes the people search API to surface people results.
Personal Calendar
This web part provides you the ability to add a particular user's personal calendar on a web page. The web part may be configured to automatically refresh, as well as display up to seven days of events and a pre-defined number of events at a time. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
Personal Contacts
This web part provides you the ability to add a particular user's personal contacts on a web page. The web part may be configured to display a pre-defined number of contacts at a time. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
Personal Email
This web part provides you the ability to add a particular user's personal email on a web page. The web part may be configured to display a pre-defined number of emails at a time and includes a link to the user's Outlook to view all email. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
Personal Tasks
This web part provides you the ability to add a particular user's personal tasks on a web page. The web part may be configured to show all tasks or to exclude completed tasks. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
Design Patterns applied to Sharepoint Framework
In software engineering, a design pattern is a general repeatable solution to a commonly occurring problem in software design. A design pattern isn't a finished design that can be transformed directly into code. It is a description or template for how to solve a problem that can be used in many different situations.
Content Query Web Part (On-Premises SharePoint)
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 2016 and Office 365, 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.
Angular Elements in SharePoint Framework
Set of sample web parts illustrating how to use Angular Elements in the SharePoint Framework.
Item History
This listview command is used to show the past versions of the selected list item in a grid.
Read / update MS Graph Custom Schema Extensions
This sample shows how read and update a custom Schema extension in MS Graph. It shows how to create a custom Schema extension in Graph to store custom data related to an Office 365 Group, and how we can read and update that data using an spfx web part.
Aggregated Calendar Web part
This is a sample web part developed using React Framework to gather the aggregated events from the multiple calendars from multiple sites using Full Calendar from fullcalendar.io
Using @pnp/js with Async / Await
This web part demonstrates how to use PnPJS with Async functions into the SharePoint Framework as well as integrating PnP JS and SPFx Logging systems. Real example querying SharePoint library to show document sizes.
Local Azure Function and SPFx Web Part Development to consume third party APIs
This sample shows how to consume third-party APIs through an Azure Functions by a Web Part.
Personal e-mail
Sample React web part showing how to retrieve and display personal e-mail retrieved using the Microsoft Graph.
Code Splitting in SharePoint Framework
Load React components and third party packages on demand in SPFx
Sample showing the use of @pnp/sp library with Knockoutjs
This web part demonstrates how to integrate the @pnp/sp library into the SharePoint Framework as well as including mock data and simple list I/O.
Event Aggregator Sample (DEPRECATED)
This sample shows how we can use the SPFx Event Aggregator to communicate between web parts through broadcasting events utilizing the Publish–subscribe pattern. It enables a web part or component to raise event (broadcast message) through the SPFx event aggregator and that event is received by other web parts or components that have been subscribed to receive it.
Dynamic Bundling & Loading of SPFx Packages
This sample illustrates how SPFx functionality and packages can be bundled in multiple '.js' files then be dynamically & asynchronously loaded into the page at execution time, such as with a button click.
Angular Elements with HTML Template File in SharePoint Framework
A sample web part illustrating how to use Angular Elements in the SharePoint Framework with the help of separate template HTML File.
Using PnPJS with MS Graph
This web part demonstrates how to use PnPJS with SharePoint Framework and how to query Microsoft Graph with PnPJS. It requests a list of Azure AD groups at your tenant and shows them using Office UI Fabric React list.
Web part displaying Google Fit information
This sample demonstrates integration of Google Fit information with SharePoint Framework. The Google Fitness REST APIs allows developers to extend it further and create their own dashboards. Google Fitness REST APIs are useful if you have fitness app and you want to integrate your data with google fit or if you just want to collect Fitness data and display some information to the users. This web part helps to display the key fitness information (activity time spent, distance travelled, calories burned, step count) from the Google fit data source.
Comparer with File Picker
Allows users to compare Before and After pictures, with a draggable slider. Implements a custom file picker.
Public teams I'm not a member of
This web part lists all the public teams the current user is not yet a member of. They can then join any of those teams by clicking the button right next to the team name. This web part can also be added to Teams as a tab (built with the 1.7.1 plusbeta/preview version).
Image Slider from Photo Gallery using Taxonomy Filter
This web part display the image in slider based on the filter of Taxonomy from Property panel. Images are stored in PhotoGallery and tagged with Taxonomy.
App settings web part
This sample shows how AppSettings.ts file can be added and used within SharePoint Framewrok webparts similar to the Web.config / App.config key value app settings in .NET Framework projects. That allows better DevOps and continuous integration (CI/CD) automation. The AppSettings.ts is transpiled/compiled with your SPFx solution which differs from the way the web.config. With .Net web.config file we would be able to update independently without the need of compiling DLLs. If that behavior is required, you can store your app settings in a SharePoint list and change them from there. However, that will have performance degradation over if the setting was part of the SPFx code where the logic can get a setting value in milliseconds.
React Inversion Of Control Web Part with Unit Tests using Jest and Enzyme
This web part is provided as an example of implementing an IoC (Inversion of Control) pattern in the context of a SharePoint Framework web part.
Material UI
This sample shows how you can use Material UI components in your SharePoint Framework solution. In this sample you will find some of the Material UI components like Table, Dialog, Text Field and Icon. This sample also includes RXJS DebounceTime, this feature allows you to wait for a certain amount of time before make requests to the server while user is typing to prevent to make requests for each character.
JavaScript Skype Status Web Part
This sample demonstrates how to use the UCWA JS Sdk for skype in the SharePoint Framework. It shows how to subscribe to status change of the different people of the organization but you can get much more information, checkout the documentation
Site Designs Manager
This web part allows tenant administrators to manage site designs through a graphical interface.
Graph Usage Reports
This sample describe a SPFX application which retrieves an office 365 usage reports using Microsoft Graph API. This application also use chartjs library to generate graph.
GitHub Badge
Using multiple stores with React and Mobx
A sample web part that uses the Mobx library with multiple stores to keep track of the applications state.
React Functional Component web part
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.
React Functional Stateful Component web part
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.
GitHub Badge (React)
Displays information about a GitHub user.
Modern Experience Theme Manager 2019
This sample web part provides a user interface for applying a Modern Experience theme in SharePoint 2019 on-premises.
React Jest Testing sample
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.
My Flows Web Part
Manage current user flows in SharePoint or Teams Tab, this web part use the msflowsdk-1.1.js
React Hooks Form Web Part
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.
Check Flows
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.
Manage Microsoft Graph Open Extension in SPFx
This sample shows how to managed Microsoft Graph Open Extension in SPFX. This application uses User Resource to create Open Extension.
Site Collection App Catalogs
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.
Group members list with Presence information
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).
Manage Office 365 Groups with SPFx
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.
Thumbnail/preview of pages and files
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.
Dev-Radar for SharePoint Online
The web part Use PnPjs library and Axios
Check User Group
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.
Manage SPFx solution using ALM APIs
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.
Enhanced List Formatting
This web part allows you to add custom CSS on a page to enhance list formatting.
COVID 19 information web part
This web part displays info about the COVID-19 virus for a given country.
Consuming SPFX Service Scopes using React Hooks
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.
Outlook to Teams
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.
Global News
This web part show a world news from various sources, it uses the API available on https://newsapi.org this collect information from news and blog sites around the world.
Microsoft Bot Framework Web Chat
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.
CSS in JS with SharePoint Framework and TypeStyle
The web part demonstrates the usage of "CSS in JS" pattern with SharePoint Framework. "CSS in JS" is implemented using TypeStyle library.
Documents Web Part
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.
My Personal Apps
The Web Part My Personal Apps allows the user to define links to Applications or Sites for quick access.
Followed Sites
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.
Feedback Form
Sample SPFx React web part which allows sending emails using Microsoft Graph.
Modern Experience Theme Manager
This sample web part provides a user interface for creating, updating, deleting and applying a Modern Experience SharePoint theme in SharePoint Online.
Carousel Web Part
This web part show images and videos in carousel
Image Gallery Web Part Built with Adaptive Cards
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.
Greeting client-side web part
This is Greeting web part which shows greeting to the current logged in user.
Minesweeper
This web part is the classic game Minesweeper, put in a Fluent UI powered SPFx web part!.
Kanban Board Web part
This solution contains an SPFx web part which shows a Kanban board using jqxKanban ReactJS component (from JQWidgets). The web part uses the default columns of the SharePoint Tasks list for showing the board's columns and the tasks.
Date range picker in SPFx
This web part used the date range picker in the SharePoint Framework (SPFx) web part
Dynamic data
Sample web parts illustrating using the SharePoint Framework Dynamic data capability.
Modern Organization Chart
This web part show organization chart for current user, shows, managers and direct reports and there available status.
My Groups
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.
Using Dynamics CRM API
This sample shows how to consume Dynamics CRM API using AadTokenProvider class.
Image Gallery
This web part show images and videos in responsive grid, on click it show images and videos in a carousel view.
Microsoft Graph People Search Web Part
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.
Adaptive Cards Viewer using Hooks
A version of react-adaptivecards using React Hooks.
Display List JavaScript Client-Side Web Part
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.
My Sites
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.
Accordion Section FAQ Builder
Adds a collapsible accordion section to an Office 365 SharePoint page or Teams Tab. Ideal for creating FAQs.
My Tasks Web Part
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..
SPUPS Photo Sync
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.
Custom Links
In this web part you can full customize the background and foreground color, font size, width and height of links.
Manage Profile Card Properties
This web part allows tenant administrators to manage profile card properties.
Create To Do Task from Email (Outlook Add in)
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.
Personal Greeting
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.
Frequently Asked Questions
Allows users to create Frequently Asked Questions(Faq App) in modern and classic SharePoint pages.
Secure Bot Framework
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.
Single-Sign On Bot Framework
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.
Graph Calendar Web Part
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.).
Edit Application Customizers
This web part will allow users to view/update application customizers properties across any web where the current user has access to.
Web part displaying hierarchical information from SharePoint list
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.
MGT Events
This sample shows how to use Microsoft Graph Toolkit in SPFx and custom with Fluent UI Fabric Controls
Chart Control Samples
This sample contains several web parts that demonstrate how to use the ChartControl from @pnp/spfx-controls-react.
Feedback
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.
Image Editor
This solution contains an SPFx web part that shows an HTML Image Editor based on canvas and Office UI Fabric
News
SPFx Webpart to display News from SharePoint site(s)
Document Card FAQ
React FAQ Document Card Web Part
Graph MGT Client
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.
List Items Menu (SP2019 Version)
Allows user create a navigation menu , grouped by any column of document library. When the user clicks on the header it dynamically load documents.
News Banner
Shows news information as a Banner, this information come from a list defined in any site.
OneDrive Finder
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.
Global News
This web part show a world news from various sources, it uses the API available on https://newsapi.org this collect information from news and blog sites around the world.
Page Contributors Web Part
Displays page contributors in reverse chronological order.
SharePoint Framework Facebook Page Social Plugin web part sample
This sample shows how to implement iFrame-based web parts with a dynamic responsive behavior on the example of Facebook Page Social Plugin.
Cross-Device Data
This solution demonstrates how to use the OneDrive special folder Apps in order to save user's preferencies cross-device.
Adaptive Cards Host
This sample creates an Adaptive Cards Host web part that you can use to display Adaptive Cards in your SharePoint applications.
HTM (Hyperscript Tagged Markup) Templating
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
Dynamic Accordion - FAQ Builder web part
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.
Fluent UI Theme Variant
An example of how to apply a custom theme or a variation of the current SharePoint theme directly to the web part
Graph Group Viewer
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
Accordion Web Part
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.
Multi screen web part sample
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.
Documents Links Accordion
This web part allows user create a accordion with documents links grouped by any column of document library.
Modern Charts
This web part uses the Chart.js library to visualize SharePoint list data.
At a Glance
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.
Modern Calendar
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.
Find Parker
This webpart is a simple find object game.
List Items Menu
Allows user create a navigation menu , grouped by any column of document library. When the user clicks on the header it dynamically load documents.
My Teams
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.
Followed Drag and Drop Grid
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.
Custom property pane controls
Sample custom property pane controls built in React for use with SharePoint Framework client-side web parts.
DataTable Using MUI table
This web part provides mui datatable features for your lists.
Graph auto batching
This sample shows how to abstract batching graph requests
Hide Lists
SPFx Web part to Hide/UnHide lists in a Site Collection's Site Contents Page.
Cascading managed metadata using Graph API
Shows how to use the Microsoft Graph APIs (beta) for Taxonomy to get the data.
Adaptive Card Host control
This web part provides an example of how to use the AdaptiveCardHost component present in the PnP React Controls library.
Hero Web Part
This solution creates a customisable Hero web part, it uses a stored collection from the PnP PropertyFieldCollectionData control
Company Stories
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.
Flow Button
This web part demonstrates displaying the list of flow button of Power Automate.
My Events
This web part provides loggedin user's outlook events with some advanced features
JS Property Controls SVG
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.
Cherry picked content
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.
Page Sections Navigation
Sample web parts allowing to add sections navigation to the SharePoint page.
react-follow-document
react-follow-document
Filterable Image Gallery Web Part
This sample describe a SPFX application which implement an image gallery with taxonomy base filtering and typed search. This application also implement pagination.
Frequently Asked Questions
Allows users to create Frequently Asked Questions using Property Field Collection Data
My Awards
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.
List Search
This list search web part allows the user to show data from lists or libraries.
Palette Picker
Custom Property Pane pain resolved (whew), color palette generator inspired by [Jhey](https://codepen.io/jh3y/pen/rNjbmBQ?editors=0011).
Consume Northwind Microsoft database from Azure using a Function App
This web part consume an anonymous Function App from an HTTP Trigger using the templates from the Northwind Microsoft DBs
Add Form Customizer to List
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.
List Form Web Part
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.
Calendar Feed Web Part
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.
Add JS and CSS reference on Modern Pages
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.
Data Table
This web part provides easy way to render SharePoint custom list in data table view with all the necessary features.
My Approvals
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.
Image generation using DALL-E API
This web part allows you to generate some images using the recently released API of DALL-E image generation.
Associated Sites Links
Web part that will display links to all associated sites that registered to the current site. Current site should be a hub site.
React Kiota Custom API Client
Using Kiota to generate a client to your AzureAd API and use it from a SPFx webpart.
Flight Tracker
Sample Web Part to track all flights from a selected airport, date and information type.
SPFx Avatar
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.
Emoji Ratings
Take emoji-based reactions or feedback for a given news/article/post
CAML to Table
Let's the user test CAML queries at ease.
Birthdays Per Month
Display employees birthday per month in an accordion.
Employee ListView Contextual Menu
This small sample illustrates how to extend the PnP React SPFx ListView control with a contextual menu.
Tab Accordion
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
SharePoint document generator - Offer Creation (SPFx)
This sample is a Teams personal Tab to act as a Microsoft 365 across application (Teams, Outlook, Office) to generate docuemnts.
Feedback Sidebar
This web part displays a sidebar that allows users to provide feedback on various sections of your site.
Interactive Map
This web parts displays a (world) map. An editor can set custom markers directly in the map. Each marker can configured individually.
Birthdays Timeline
Shows upcoming birthdays in the company in a timeline
Birthdays
Shows upcoming birthdays in the company
My OneDrive Info
MyOneDriveInfo solution contains Adaptive card extension for Viva connection with below functionalities
Chat GPT inside SPFx
This webpart 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.
React AppInsights Dashboard
This web part displays different statistics data captured in the Azure Application Insights in a graphical representation.
Copy Views
The Copy Views solution enables a user to copy views from one list/library to another across site collections.
All Microsoft 365 Groups and Teams
Web part pulls all Microsoft 365 Groups and Teams that the logged in user has access to view.
Chat GPT App
This App is a implementation of OpenAI ChatGPT-3. It runs on SharePoint, Teams as Personal or Teams App and Message Extension.
Advanced Page Properties
Replicates the functionality of Page Properties with improvements
Birthdays Web Part
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."
Applications Secrets Expiration
This sample web part shows the list of your applications registered in Azure AD along with their associated client secret/certificate expiration date.
Telephone Directory using React, Ms Graph and SPFx
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.
Instagram Feed
Sample web part to showcase an Instagram feed.
Multilingual SharePoint Page Summarization with Open AI API and Microsoft Graph Pages API
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.
Azure DevOps Tasks
This Adaptive Card Extension demonstrates displaying the number of assigned tasks of Azure DevOps.
Content Query Web Part (SharePoint Online)
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.
Azure Apps
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.
Group Membership Manager
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
JSON form builder
Build a custom form with ease
Page Navigator
This web part fetches all the automatically added Header anchor tags in a SharePoint page and displays them in a Navigation component.
Application Insights and Cost Management Dashboards
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.
Invoice Generator
SPFx Invoice Generator Web part using PnP JS allows users to create invoices for different clients or customers.
Organization Directory Web Part
Search People from Organization Directory and show live persona card on hover.
My Dashboard
This SPFx app allows quick access to user agenda, ToDo Tasks, Files and News and Relevant People related to user.
Enhanced Power Apps
Adds dynamic resizing, theme awareness, and dynamic data to embedded Power Apps
Tenant wide extension manager
Manage those tenant wide extensions
Web Part Report
This sample web part shows a report of the web parts used on the current site.
OpenAI Azure DevOps Bot
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
Flow Dashboard
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.
Advanced IFrame
This web part allows users to add a webpage in an IFrame to a modern SharePoint page.
Subscription Manager
This sample web part demonstrates managing the list subscriptions (sharepoint webhooks) and action to renew the webhook expiration date using Rest calls.
Download Multiple Documents
This sample empowers users to effortlessly download multiple documents as a single compressed ZIP file.
Accessing Azure table storage data using Azure API Management
Allows you to access securely Azure storage table data using Azure API Management (APIM)
Cascading Dropdowns
Shows how to use Cascading Dropdowns in property panes.
Targeted News using Microsoft Graph Open Extension
This sample contains two SPFx web parts: User preferences web part and Curated news web part
Using Azure OpenAI Connectors API
Shows how to use the new feature of Azure OpenAI Connectors API in a SharePoint Framework web part.
React Functional Component web part with data fetch
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.
Password Vault
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.
Enhanced Page Properties
Goes beyond the standard SharePoint Page Properties web part, offering expanded support for various metadata types and configurations
SPFx environment settings management
Easily swap between environments when building SPFx solutions
Governor Sharing
Shows documents which have been (explicitly) shared within a SharePoint site or Team.
Holiday calendar
Holiday calendar solution contains SPFx web part and Adaptive card extension for Viva connections.
Advent Calendar
This project shows how to create an Advent Calendar using SPFx and React.
Personal Anniversary
A web part to help you notice those special days
Workbench customizer
This sample shows how the Workbench page can be customized to display in a way that better mimics a modern SharePoint page.
Calendar
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.
Using Fluent UI 9 in SPFx web part
description
Page Hierarchy
This web part allows users to create a faux page hierarchy in their pages library and use it for page-to-page navigation.
Calling Azure OpenAI API in streaming mode
This web part shows how you can call Azure OpenAI API in Streaming mode
Service Health for Microsoft 365
Service Health for Microsoft 365 solution show the health status for all the Microsoft 365 services
Organization Chart (SP2019 and Online)
Shows an organization chart based on specified user, and user can navigate to show company organization
My OneDrive
Displays currently logged in user's OneDrive's file
Advanced Comments Box
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.
Connected web parts
This samples showcase how to connect two web parts together.
Communicate using elevated privileges with SharePoint
Sample SharePoint Framework client-side web part illustrating communication with SharePoint using elevated privileges through a custom Web API.
Using React and Redux
Sample web part implementation that uses Redux to keep track of its state.
Real Time News Feed using Azure Logic Apps, Node.js and socket.io
This sample shows you how to implement real time web parts using the SPFx, Azure Logic Apps, Node.js and socket.io.
Search Client-Side Web Part built with React and Flux
Sample Search Web Part with internal and external template support. This sample illustrates how you can use React and Flux within the SharePoint Framework.
Taxonomy Picker
A Taxonomy Picker control built with React based on react-taxonomypicker for use with SharePoint Framework client-side web parts (SPFx).
Side Panel Client-Side Web Part
The web part illustrates creation and usage of Side Panel (Sidebar) control.
Using PnP JS Core custom objects with @select and @expand decorators
This web part demonstrates how to use PnP JS Core Custom Objects with @select and @expand TypeScript decorators.
Using React, Redux and ImmutableJS
SharePoint Framework web part which uses Redux to maintain a single state for the entire application and ImmutableJS to create performant state trees.
Sitepages Metadata
Solution provides an enhancement to SitePages library that enables updating existing items with metadata, and a rollup Web Part to display them.
Recent Contacts
This web part provides you the ability to display list of a particular user's recent contacts on a web page. The web part may be configured to display a pre-defined number of contacts at a time. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
Recently Used Documents
This web part provides you the ability to display a list of a particular user's recently used documents on a web page. The web part may be configured to display a pre-defined number of documents at a time. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
Recently Visited Sites
This web part provides you the ability to display a list of a particular user's recently visited sites on a web page. The web part will display up to the first 30 (thirty) recently visited sites at a time. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
Site Information
This web part provides you the ability to collect and present additional metadata on a web page for group associated team sites. The web part may be configured to display site title, a site contacts powered by a people picker, and a term from the term store, often used to provide classification for the site.
Stock Information
This web part provides you the ability to display basic stock information for one publicly traded stock on a web page. The web part may be configured to display a stock based on stock symbol as well as be set to automatically refresh the stock information every 60 (sixty) seconds.
Using Redux-Form library and React
Sample web part to demonstrate the use of Redux-Form library with SPFx, React and Typescript. Demonstrates how to easily build a dynamic grid using redux-form.
Taxonomy picker using Office UI Fabric Panel
Sample web part with Single and Multi-select taxonomy pickers using Office UI Fabric panel. The web part uses the Taxonomy API support available in the @pnp/taxonomy.
List subscription
Sample web part illustrating using the SharePoint Framework List subscription capability, which allows you to get notified of changes to documents in a SharePoint Document Library and refresh the displayed data.
Teams Creator Web Part
The web part illustrates usage of MS Graph beta APIs to work with Teams
ReactiveX (RxJs) Event Emitter Sample
This sample shows how we can use the ReactiveX (RxJs) library with the SharePoint Framework to communicate between web parts through broadcasting events utilizing the Publish–subscribe pattern. It enables a web part or component to emit event (broadcast message) and that event is received by other web parts or components that have been subscribed to receive it. Please note this is custom implementation of the Publish–subscribe pattern by using the ReactiveX (RxJs) library. The SPFx will nativelly support this in future without the need of custom implementation through new SPFx api called Event Aggregator, but it is still in Alpha.
Skype Status Web Part
This sample demonstrates how to use the UCWA JS SDK for skype with the SharePoint Framework. It shows how to subscribe to status change of the different people of the organization but you can get much more information, checkout the documentation
Site Provisioning Manager Web Part
This sample shows how you can manage site provisioning by calling Azure functions.
Google reCaptcha Sample
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.
Slide Swiper
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.
PnPjs Project Online
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.
Teams Configuration Tab
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.
Target audience
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.
PnP ListView with PnP Field Controls Web Part
Sample web part to display PnP ListView control with column rendering using PnP Field Controls.
Script editor web part for modern pages
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.
SPUPS Property Sync
This component will help the administrators who are currently maintaining the user profiles in their organization.
React Teams Messages
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.
Smart Profile Photo Editor
Uses Azure Cognitive Services to analyze and approve or reject user-submitted photos.
Restaurant Menu
This web part shows a Restaurant Menu, the user can select the options to show in Menu.
Site User and Group Information
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.
Tailwind CSS
This project shows how to integrate Tailwind CSS framework into a SPFx React project.
SPFx web part to Test PnpJS SharePoint Methods
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
Soccer Highlights
This react web part sample displays Soccer Highlights from a public Soccer API.
SharePoint Framework PnP Controls Sample
This is a sample project that contains a web part which makes use of the PnP SPFx Controls
Message Teams User
Sample that shows how to send a message to Microsoft Teams using a SharePoint framework solution using Microsoft Graph.
Security Grid
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
Sites Selected Admin
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.
Remote Event Receiver Manager
Lets you add and delete remote event receivers to lists
Save Attachments
This SPFx Outlook Add-In lets users save any email attachments to a OneDrive folder.
Teams Graph Upload as PDF
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
Save to User Application Personal Folder in OneDrive
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.
Teams Membership Updater
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.
Tab Accordion Web Part with Property Field Collection Data and tinyMCE for Rich Text Editing
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.
Questionnaire Teams Meeting App
Questionnaire meeting app provides Pre-meeting app experience for MS Teams meeting attendees to ask the questions related to meeting before the meeting starts.
Staff Directory
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.
Taxonomy File Explorer
This solution renders a given Termset as a Tree and incorporates files similar than a folder structure in file explorer.
Room Chat
This web part shows how to use Azure Communications Services and React UI component to create a Room Chat.
pnp/js and ReactJS Functional Components
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.
React Query Microsoft Graph
This sample shows how you can query Microsoft Graph from React in SharePoint Framework
Rhythm of Business Calendar
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.
SP Site ER Diagram
This web part loads all lists on a site and display it in a Entity Relationship Diagram (ERD)
Using @pnp/js and ReactJS
Shows how to use PnPjs in a React web part
GitHub Profile display via API
This web part loads the GitHub profile using SPHttp client in PnP v3.
Project Online
This sample shows how to use SPFx to consume data from the Project Online REST API.
Provision SharePoint Assets with the SPFx solution package
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.
React Questions and Answers
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.
Private Library/Folder Manager
This sample provides a webpart that can be used to manage Document Libraries with Secured Subfolders.
Quote of the Day
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.
Property Pane Wrapper for HTML Controls
Showcases the use of the Property Pane Wrap to embed HTML controls in the SPFx Property Pane
Quick Poll
This component is developed for the users who really need to create a Poll within a minute and with less maintenance.
Property Pane Portal PnP Controls
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.
Quick Links
A demonstration of how one could build SharePoints Quick Links web part
Teams Tab Conversation View
Displays Microsoft Teams channels conversations in a simpler way which makes easy to search and filters the new conversations and its replies
IFramePanel sample
This sample shows how to use the IFramePanel control in a SharePoint Framework web part.
Lead Dashboard
This sample shows how to use SPFx to create a Microsoft Teams dashboard personal app.
Script editor web part
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.
List Integration with TinyMCE Editor
The web part allows users to insert column data from associated SharePoint lists using a split button on the toolbar
SharePoint Framework RSS Reader
A RSS Reader original based on work completed by Olivier Carpentier's
Tailwind 3
This project showcases an integration of Tailwind CSS into an SPFx project.
List notifications + Microsoft Teams Integrations
Illustrating using the SharePoint Framework List subscription capability, which allows you to get notified of changes to custom list refresh the displayed data
Sales Orders
Shows how how to use Microsoft Graph Connector that use DB2 Database and display Sales Orders in a list.
Star Ratings
Demonstrates Star Ratings capabilities to SharePoint News.
Property Bag Navigation Web parts
A set of web parts that lets you set property bag settings on site collections and enable navigation using those properties.
Video Library
A set of 3 SPFX webparts that use different open-source carousels (react-3d-carousel, reactjs-coverface, and react-slick) to display videos stored on an Office 365 Video Channel
QnA Chatbot
SPFx application extension that uses Azure QnA cognitive services to efficiently answer FAQs.
Yammer REST API web part
This sample shows how Yammer REST APIs can be consumed by using SharePoint Framework React web part and the Yammer JavaScript SDK. The SPFx web part contains wrapper around the Yammer JavaScript SDK that can be extended for fluent typescript api experience.
List RiotJS Client-Side Web Part
Simplistic sample Web Part that demonstrates the use of RiotJS in creating a SharePoint Framework web part.
Todo Basic
A simple todo web part built using react to showcase some of the SharePoint Framework developer features, utilities and best practices in building react based web parts.
SharePoint Themes Client Side Web Part
This web part illustrates how to use SharePoint Theme variables in custom web parts.
GraphClient from Modern Teamsite
Simple example to call the Graph via the new GraphHttpClient (No ADAL) for getting the group title, mail, and description.
Conditional formatting SharePoint Framework field customizer
Sample SharePoint Framework field customizer that applies Excel-like conditional formatting to numeric fields based on their values.
Directions SharePoint Framework list view command set
Sample SharePoint Framework list view command set showing travel directions to the given location using Google Maps.
Announcements SharePoint Framework application customizer
Sample SharePoint Framework application customizer showing urgent organizational announcements.
Priority Field SharePoint Framework field customizer
Sample SharePoint Framework field customizer that shows how to apply conditional color formatting to the values in a Priority field based on their value.
Slider Field Customizer
The sample illustrates how to use Office UI Fabric React Slider in Field Customizer with permissions-base inline editing
List-Driven Placeholders
This solution deploys a list that allows end users to manage content that will appear in placeholders, via a SharePoint Framework application customizer extension.
Custom Command Bar Command Set Customizer
The sample illustrates how to display custom Command Bar when Command Set Button is pressed.
Regions Footer Application Customizer
Sample SharePoint Framework application customizer showing how to create a custom footer for modern pages, in order to show data about an area manager for a specific region.
Tenant Global NavBar Application Customizer
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.
Toggle Field Customizer
In this sample is possible to see how to implement Office UI Fabric React Toggle for the field yes/no through SPFx Extensions Field Customizers to modify in a quick way (inline editing) a list without opening the list item.
Run Once SharePoint Framework application customizer
Sample SharePoint Framework application customizer showing how you can run code once, and then remove the customizer at the end. The code as-is expects to be installed as a site scoped custom action.
Unique Item Permissions Command Set Customizer
The sample illustrates creation of a shortcut command to redirect user to selected item's permission page.
Webhooks Realtime
This web part demonstrates how to leverage the capabilities of SharePoint Webhooks. The libraries used by this web part are Socket.io, sp pnp js, moment.
Webhooks Notification Application Customizer
Sample SharePoint Framework application customizer showing how to leverage the SharePoint webhooks capabilities, in order to show toast notifications. The libraries used by this solution are Socket.io, sp pnp js, moment.
Lock Item Command Set Customizer
The sample illustrates the ability to lock/unlock selected item/document for the current user. The lock is implemented as item's unique permissions set to Full Control for current user only. The lock is available only for items that inherit permissions from the parent. Items with unique permissions can't be locked as we can't unlock them correctly later on. All other permissions are deleted. The Command is available only for users who have "Manage Permissions" permissions for the list/document library.
Overdue Tasks Application Customizer
The sample illustrates how to display a warning message that current user has overdue tasks.
Field Customiser sample using Text Analytics API
This sample shows how to use the Text Analytics API (Cognitive Services) to render a sentiment icon based on the text of a field in the List. The language is also auto-detected using the API, so it works with text based in any language supported by the API.
Weather SharePoint Framework field customizer
Sample SharePoint Framework field customizer showing weather conditions for the given location.
TinyMCE Editor Web Part Integration with SharePoint
React TinyMCE is one of the worlds most popular editors for the web. It has many features out of the box and many more plugins that can be added when needed. You can create your own plugins if you want, the editor is powered by the communitiy.
Toastr Application Customizer
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.
Export Selected Items to Excel
Exports selected items to excel spreadsheet in xlsx format, with the columns from the current modern list view.
Groups external links
This sample shows how to render a header navbar with some external links related to the Group the site is in, i.e Group calendar, Notebook, Inbox, People...
Modern Team Sites (Office Groups) Navigation
The sample illustrates how to use AadHttpClient to request Groups information from Microsoft Graph
CSS Injection
This sample shows how to inject a custom Cascading Style Sheet (CSS) on modern pages.
Menu Footer Classic Modern
This is a sample showing how to create custom headers and footers that work on classic pages using JavaScript injection, and on modern pages using a SharePoint Framework Application Customizer extension.
Sites in Hub site switcher
This sample shows how to get the sites that are part of a Hub Site, and renders a drop down to jump directly into a site. The customiser only renders if the site is a Hub site.
Tiles
This web part provides you the ability to add a per instance listing of tiled links. Tiles are stored as a collection of tiles within the web part's properties, removing the need for link storage within SharePoint lists, tenant properties, or other external link storage requirements.
Weather Information
This web part provides you the ability to display basic weather information for one location on a web page. The web part depends on a service provided by Yahoo Weather API.
World Time
This web part provides you the ability to display basic clock for a given time zone on a web page. The clock is based on the user's workstation time with an offset from UTC to the selected time zone.
Item History
This listview command is used to show the past versions of the selected list item in a grid.
Connecting SPFx Extensions with Web Parts using Dynamic Data
This example shows how to connect Spfx extensions with Spfx Webparts using Dynamic Data Feature
Discuss Now Command Set
Sample SharePoint Framework command set showing how to create a new meeting to discuss about a document selected in the current list view of a document library.
MSAL Bot Extension
This sample demonstrates how to integrate a bot within a SharePoint Online portal supporting authentication to access Azure AD protected APIs like Microsoft graph resources. Behind the scenes, this sample implements the OAuth2 implicit grant flow using the MSAL JavaScript library.
Tenant Global NavBar
Sample SharePoint Framework application customizer to display the core metadata of a Site Page such as Author,Editor, Created date and Modified date in the footer of the page.
Multishare Command Extension with PnPJs
The sample is an custom action only active when multiple items are selected.
Displaying the current user permission with PNPJs
This sample shows how to use PNPJs to get the current users permission on the specific list item. Then a corresponding icon and text is shown in the field. For this sample I'm using simplified roles, so the code is is only checking for edit or read permissions.
Convert documents to PDF using Azure function
Sample SPFx list view command set extension that converts the selected documents to PDF using Microsoft Graph.
AAD Token Provider Bot Extension
This sample demonstrates how to integrate a bot within a SharePoint Online portal supporting authentication to access Azure AD protected APIs like Microsoft graph resources. Behind the scenes, this sample uses the AADTokenProvider utility class provided with SPFx > 1.6.0 to seamlessly get an access token for the current user and send it to the bot. This way, the user is not prompted anymore for login to interact with the bot, improving overall experience.
Mail Current View as Image
Sample SharePoint Framework list view command set extension that emails the current view to selected (external or internal user) and also saves the same image in SharePoint. Uses html2canvas library, pnp spfx controls, pnp js and office fabric ui react.
Group members suggestion
This web part uses Graph API to suggest you members to add to a group (based on People endpoint), so you can easily add those members to the Group / Teams. It can be used as a SharePoint web part or Teams tab
Print List Item Command View Set
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.
Mega Menu Application Customizer Extension
This sample shows site mega menu. Application customizer is used along with SharePoint List to store the menu items.
Displaying notification if a team is set as archived
This sample demonstrates how to check is current team linked to team site set as archived from Microsoft Graph API. If team is archived, notification is diplayed to end-user on header placeholder.
Get a direct link to a document or folder
Sample SharePoint Framework (SPFx) solution which gives the end-user the ability to just get a regular, simple link to a document or folder in the modern SharePoint document libraries. This is done using a CommandSet.
Portal Footer Application Customizers
This application customizer provides you the ability to include a footer designed for communication sites.
Optimize CSS/SCSS Style Bundling and Dynamic Loading of Styles
This example illustrates how style files can be dynamically bundled into multiple .js bundle files and then be individually imported at runtime.
Send Document With E-Mail
This sample shows how to create Custom Dialogs using @microsoft/sp-dialog package in the context of Command View Set and send selected document with e-mail.
Supporting section backgrounds in your web parts
These samples show how to implement support for section backgrounds in your web parts.
Logo Festoon
This simple SPFx extension can be used to decorate you SPO site logo with a festoon image of your choice. Keep users engaged by adding a personal touch to your site.
Tag Teams using a TermSet in SharePoint
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.
Teams Tab - Field Visit Demo (Mashup)
A web part for use in Microsoft Teams that displays a mashup of information partaining to customer visits.
Intranet Search Box
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.
Clone ListView Command Set
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.
VueJS Org Chart
A simple Organisation Chart web part using Office UI Fabric, VueJS, REST API.
Form Settings Command View Set
This sample shows how you can redirect default SharePoint list forms (New,Edit,Display) to different pages.
Injecting Javascript with Sharepoint Framework Extensions - Azure Application Insights
Sample SharePoint Framework extension project injecting Javascript code to enable Azure App Insights monitoring and statistics.
Custom Dialog Sample with Command View Set
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.
Generate QR Code List Item Command View Set
Generates a printable QR code which links to a SharePoint list item.
Image Metadata from Cognitive Services Vision API List View Command Set
Custom Command Set that gets metadata information from MS Cognitive Services Vision API for the selected Image
Web/Mobile Camera Demo
This is sample web part to showcase how to open webcam and take photo in SPFx web part.
Site Header Toggler
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.
Guest Message
SharePoint Application customizer that allow you to display a message to your External users.
Item Order
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.
Bot Framework Chat App Customizer
SPFx application extension that uses the Bot Framework React Webchat Component to render a Bot Framework chat window
Application Customiser sample using Bing Search API
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.
Get Thumbnail List Item Command View Set
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.
MS Teams Channels and Tabs from Modern Team site
A SPFx Web Part using @pnp/graph/teams. It shows Channels and Tabs (with link) from a Modern Team Site connected to Microsoft Teams.
Alerts Application Customizers
This application customizer provides you the ability to show notifications on the pages in the top / header area.
Redirect Application Customizers
Redirect from URL based on mapping from a list on the site. Can be used to automatically redirect from pages to other locations.
Collaboration Footer Application Customizers
This application customizer provides you the ability to include a footer designed for normal and group associated teams sites.
Folder Selection
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.
ZPL Viewer
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.
Application Customiser sample using Text Analytics API
This sample shows how to use the Text Analytics API (Cognitive Services) to render a rating icon based on the different comments in page.
Yammer Praise using aadTokenProvider
This sample shows how to post a praise to Yammer using aadTokenProvider (without Yammer JavaScript SDK).
Field Attachment Info
This field customizer will display the attachment related information for a listitem.
Teams Personal App Settings Web Part
Demonstrates how you can store Teams Personal App Web Part's properties in user's OneDrive.
Hide Commands
This command-set can be used to hide other 'out-of-the-box' commands on list views.
Festivals Extension
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.
Word Game
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.
My Followed Sites Application Customizer
Sample SharePoint Framework application customizer extension that shows current user followed sites across tenant using office ui fabric panel.
Web Part Details
The web part illustrates how to get all the web part present in the current page, bind them in a multi-select dropdown.
Image Editor Command Set
This command set allows quick edit images located in Document Library.
Announcements SharePoint Framework Application Customizer
SharePoint Framework application customizer displaying an information banner using office-fabric-ui MessageBar.
Application Alert Message
This application customizer will display the alert message based on the items from the list.
Timeline
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.
Visio Embed
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.
Upgrade Me
Use this web part to test the CLI for Microsoft 365 SPFx Project Upgrade.
PnP Field Renderer Helper
This field customizer shows how to use PnP FieldRendererHelper utility.
JS Application AppInsights Advanced
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.
React World Clocks
This sample is extension of the single World time clock sample that was provided in SP Starter Kit.
Youtube Web Part
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.
PnP File Type Renderer
This field customizer shows how to use PnP FieldFileTypeRenderer controls.
Breadcrumb application customizer
This sample shows how to create a breadcrumb element and append it to your site via the SharePoint Framework Application Customizer extension.
Tenant Properties Web Part
This web part allows tenant administrators to manage tenant properties through a graphical interface. We can create, edit or delete tenant properties.
Bot Framework Secure
This sample will show you how to embed a Bot Framework bot into a SharePoint web site with security consideration.
Bot Framework SSO
This sample will show you how to embed a Bot Framework bot into a SharePoint web site with SSO.
My Favourites Application Customizer
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.
Send Notifications in Teams
This web part allows you to send MS Teams feed notifications to a selected user
Copy Classic Link Extension
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.
Add Folders Command
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).
File Size Viewer sample with Command View Set
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.
Demote News to Page
Sample SharePoint Framework list view command set extension to demote a previously promoted News page.
Jump to folder extension
Sample solution that facilitates navigation between large collections of SharePoint library folders.
Video Banner
Use this Web Part to add a video banner with a text on top of it to your pages.
Send-To-Teams - Command Set
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.
Power Virtual Agents Bot Host
Adds footer to launch a Power Virtual Agents chatbot window from any page.
Google Analytics Application Customizer
In this sample is possible to see how to implement Google Analytics through SPFx Extensions Application Customizers
Copy PnP search results webpart settings
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.
My Lists Notifications
This application extension alows user receive notifications from selected lists or libraries
Machine Translations
This application customizer lets you translate the text on a SharePoint page using the Translator Text API of Microsoft Azure.
Share to Teams
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.
Copy/Move Item(s)
Displays a command button named **Copy/Move Item(s)** in all the custom lists
SharePoint CRUD operations
Sample Web Parts illustrating performing SharePoint CRUD operations in React, Angular, JavaScript without any framework and using the @pnp/sp library.
My Flows List
Application extension that allows the user to check list of flows and their current status and details.
Animated Progress Field
Displays an animated progress bar component
Change Page Layout Command Extension
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.
Tree Organization Web Part
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.
Save and convert as PDF by PnP
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.
Microsoft Clarity for modern SharePoint
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
configure a Page as Single App Part page
Custom Command Set that set a Page layout to use the Single App Part page Layout
Displaying the version number in a web part
This very simple sample demonstrates three different approaches to display the version number of your SharePoint solution in your web part.
Tiles V2
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.
Todo Client Web Part built with Vue.js and Vue's single-file components
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.
Tour Sample
A SPFx WebPart using PnP/PnPjs, @pnp/spfx-property-controls and ReactTourJS.
Zod
This sample shows the usage of Zod to eliminate manual cast and validation of the data coming from external API.
React Form Customizer (Customers)
A sample of an SPFx Form Customizer built with React for managing items of a custom list of customers.
News Ticker
An SPFx Extension that displays news as a running text at the top of every modern page.
Associated Sites Links
Web part that will display links to all associated sites that registered to the current site. Current site should be a hub site.
Modern Page Model with PnP/PnPjs
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
Twitter Timeline
Sample web part to display Twitter timeline.
Weather Application Customizer Extension
SPFx Weather Application Customizer Extension in the top placeholder
Dynamic Site Form
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.
Personal Assistant - OpenAI Function Calling with Microsoft Graph
This sample is chatbot that provides information to the current logged in user.
Transport for London (TfL) Status
This sample is chatbot that provides information about Transport for London (TfL) status.
Unique permissions on list items
This sample demonstrates how to use field customizer to handle unique permissions on list items.
Dynamic Form with location picker
This solution implements a simple Form Customizer with a Dynamic Form with a location picker, to demonstrate the many usages of a Dynamic Form.
Sticky Feedback Widget Application Customizer
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.
React-Manage-List-Subscriptions
Demonstrates managing the list subscriptions (sharepoint webhooks) and action to renew the webhook expiration date using Rest calls.
Application Customizer Extension that is hidden from tenant guest users
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.
Modern Version History
An extension modernizing the version history experience in SharePoint Online.
Copy Path and Copy Name List view command set extensions
List view command set extensions with below functionalities: Copy Path and Copy Name.
Field Votes
An extension that displays Vote counter and button to vote or unvote.
Embed Microsoft Teams chats in SharePoint pages
Embed Microsoft Teams chats within SharePoint pages to streamline collaboration and information access for users.
React Message Banner
A react Message Banner sample, allows to add a custom banner message to your SharePoint Online modern sites.
Search driven navigation
SPFx application search driven navigation and permission side panel.
React Property Pane Navigation
This sample showcase how to handle the navigation between property pane pages.