{ "schemaVersion": 1, "generatedAt": "2026-11-13T12:16:07.417Z", "refreshedAt": "2026-11-13T12:14:40.690Z", "sources": [ { "repository": "pnp/sp-dev-fx-webparts", "commit": "52e10a165aeaaacd73bd25ebdf0028d047843dc7", "samples": 495, "missingMetadata": 0, "errors": 32, "warnings": 605 }, { "repository": "pnp/sp-dev-fx-extensions", "commit": "b3df920173cd6ad726b11367d754d1d846034252", "samples": 147, "missingMetadata": 0, "errors": 6, "warnings": 282 }, { "repository": "pnp/spfx-copilot-components", "commit": "8c89400277408b9640a32b7d08d4f81501e92b19", "samples": 48, "missingMetadata": 0, "errors": 0, "warnings": 0 }, { "repository": "pnp/spfx-reference-scenarios", "commit": "746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "samples": 21, "missingMetadata": 0, "errors": 2, "warnings": 14 }, { "repository": "pnp/sp-dev-fx-aces", "commit": "714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "samples": 84, "missingMetadata": 1, "errors": 67, "warnings": 197 } ], "samples": [ { "id": "pnp/sp-dev-fx-aces:samples/BasicCard-CardComposition/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-cardcomp", "title": "Card Composition", "description": "Viva Connection Adaptive Card Extension (ACE) that shows how to dynamically include dynamic cards pragmatically.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.15.0", "versionGroup": "1.15", "created": "2022-06-07", "updated": "2022-06-07", "authors": [ { "name": "Marcin Wojciechowski", "account": "mgwojciech", "avatar": "https://github.com/mgwojciech.png" } ], "preview": { "src": "/images/previews/68962d8814b76a55448d73b8729be31248345651c1c81893f13326f7b45ce642.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-CardComposition", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-CardComposition/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FBasicCard-CardComposition", "descriptionParagraphs": [ "This sample tackles a scenario in which you want to reuse part of your Adaptive Card in multiple places or you need to divide your ACE QuickView into smaller ones for readability and maintainability. In a real world scenario your ACE can grow quite a lot making handling hundreds lines of JSON quite difficult." ], "previews": [ { "src": "/images/previews/68962d8814b76a55448d73b8729be31248345651c1c81893f13326f7b45ce642.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/BasicCard-Graph-UpcomingEvents/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-ace-upcoming-events", "title": "Upcoming Events Viewer", "description": "Loads upcoming events from the users calendar.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2021-09-29", "updated": "2021-11-29", "authors": [ { "name": "Zach Roberts", "account": "zachroberts8668", "avatar": "https://github.com/zachroberts8668.png" } ], "preview": { "src": "/images/previews/42dd21724627606bebfa728ddffb0d49c19826adc2fd74a2af9cb587dd01ba03.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-Graph-UpcomingEvents", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-Graph-UpcomingEvents/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FBasicCard-Graph-UpcomingEvents", "descriptionParagraphs": [ "This adaptive card extension sample will load the calendar events from the logged in users Outlook Calendar. It leverages the Microsoft Graph to pull that data into the ACE. Requires Microsoft Graph Directory.Read.All and Calendars.Read permissions." ], "previews": [ { "src": "/images/previews/42dd21724627606bebfa728ddffb0d49c19826adc2fd74a2af9cb587dd01ba03.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Office" ], "supportedHosts": [ "Dashboard", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/BasicCard-HTML-QuickView/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-basiccard-html-quickview", "title": "HTML QuickView basic demo", "description": "This is a baseline solution to demonstrate the HTML powered Quick Views for Adaptive Card Extensions which can be used in Microsoft Viva Connections and in SharePoint.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [], "version": "1.20", "versionGroup": "1.20", "created": "2024-08-20", "updated": "2024-08-20", "authors": [ { "name": "Vesa Juvonen", "account": "VesaJuvonen", "avatar": "https://github.com/vesajuvonen.png" } ], "preview": { "src": "/images/previews/ff12d56f7569ce0e175ca032e8ebeda43d0498c2f70b1073c44dd45e19f919d1.webp", "alt": "Desktop Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-HTML-QuickView", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-HTML-QuickView/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FBasicCard-HTML-QuickView", "descriptionParagraphs": [ "This is a baseline solution to demonstrate the HTML powered Quick Views for Adaptive Card Extensions which can be used in Microsoft Viva Connections and in SharePoint.", "To be able to use SCSS definitions with your solutions, @microsoft/sp-office-ui-fabric-core package has been included in the solution." ], "previews": [ { "src": "/images/previews/ff12d56f7569ce0e175ca032e8ebeda43d0498c2f70b1073c44dd45e19f919d1.webp", "alt": "Desktop Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-HTML-QuickView/assets/mobile-preview.png", "alt": "Mobile Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "technology.missing", "field": "metadata.CLIENT-SIDE-DEV", "message": "Technology filter metadata is missing.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/BasicCard-HTML-React-QuickView/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-react-html-quickview", "title": "React HTML Quickview", "description": "TThis project demonstrates how to leverage the new features introduced in SPFx 1.20, which allow developers to utilize React components within the **Quick View** of an Adaptive Card Extension (ACE).", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2024-10-05", "updated": "2024-10-05", "authors": [ { "name": "Ahmad Jad Alhak", "account": "ahmad-jad-alhak", "avatar": "https://github.com/ahmad-jad-alhak.png" } ], "preview": { "src": "/images/previews/3b302b6d08ae321790fa83deaea82851b30faa41e990af6c4b780bd1c2bf7f3a.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-HTML-React-QuickView", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-HTML-React-QuickView/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FBasicCard-HTML-React-QuickView", "descriptionParagraphs": [ "This project demonstrates how to leverage the new features introduced in SPFx 1.20, which allow developers to utilize React components within the Quick View of an Adaptive Card Extension (ACE). The main purpose of this web part is to showcase how to create dynamic, interactive, and reusable components in Quick View using React, enhancing the capabilities of SPFx Adaptive Card Extensions." ], "previews": [ { "src": "/images/previews/3b302b6d08ae321790fa83deaea82851b30faa41e990af6c4b780bd1c2bf7f3a.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/BasicCard-HelpDesk/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-basiccard-helpdesk", "title": "Basic Card Help Desk", "description": "This solution uses a help desk scenaio to demonstrate how to use the geolocation features and image upload functionality in Adaptive Card Extensions.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.18", "versionGroup": "1.18", "created": "2024-01-25", "updated": "2024-01-25", "authors": [ { "name": "Derek Cash-Peterson", "account": "dcashpeterson", "avatar": "https://github.com/dcashpeterson.png" } ], "preview": { "src": "/images/previews/577c2513c96174061c2a89bf241afa609da596774e2069a9ae8ac82bc678e72a.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-HelpDesk", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-HelpDesk/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FBasicCard-HelpDesk", "descriptionParagraphs": [ "This solution uses a help desk scenaio to demonstrate how to use the geolocation features and image upload functionality in Adaptive Card Extensions. The sample creates a list to hold the help desk tickets and stores the images in the site assets library. It also leverages BingMaps api to get the street address." ], "previews": [ { "src": "/images/previews/577c2513c96174061c2a89bf241afa609da596774e2069a9ae8ac82bc678e72a.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-HelpDesk/assets/demo2.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-HelpDesk/assets/demo3.png", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[1].order", "message": "Preview order is duplicated.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[2].order", "message": "Preview order is duplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 7 } }, { "id": "pnp/sp-dev-fx-aces:samples/BasicCard-MonitorSecurity/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-monitorsecurity", "title": "Monitor Security ACE", "description": "This solution provides a security monitoring feature using identity protection graph endpoint and ACE.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.13.1", "versionGroup": "1.13", "created": "2022-02-05", "updated": "2022-02-05", "authors": [ { "name": "Arijit Mondal", "account": "ArijitCloud", "avatar": "https://github.com/ArijitCloud.png" } ], "preview": { "src": "/images/previews/72b324bb0cdb125a865e9fbbc1f502e0129dd02e0040af04f61274fac7379e12.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-MonitorSecurity", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-MonitorSecurity/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FBasicCard-MonitorSecurity", "descriptionParagraphs": [ "This solution provides a security monitoring feature using identity protection graph endpoint and ACE." ], "previews": [ { "src": "/images/previews/72b324bb0cdb125a865e9fbbc1f502e0129dd02e0040af04f61274fac7379e12.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/BasicCard-Multiple-Forms-Apps/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-multi-forms", "title": "Multiple Forms", "description": "This Adaptive Card Extension shows how to have a single ACE card to display multiple Microsoft Forms or Multiple Power Apps that opens in the Stage View on Teams.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2023-04-13", "updated": "2023-04-13", "authors": [ { "name": "Marcus Castro", "account": "marcus-castro-sp", "avatar": "https://github.com/marcus-castro-sp.png" } ], "preview": { "src": "/images/previews/688738dfc24c6fa63415f54fd2fe89ba5b5283b40a4acece9153efc9420df4c0.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-Multiple-Forms-Apps", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-Multiple-Forms-Apps/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FBasicCard-Multiple-Forms-Apps", "descriptionParagraphs": [ "This Adaptive Card Extension shows how to have a single ACE card to display multiple Microsoft Forms or Multiple Power Apps that opens in the Stage View on Teams." ], "previews": [ { "src": "/images/previews/688738dfc24c6fa63415f54fd2fe89ba5b5283b40a4acece9153efc9420df4c0.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/BasicCard-My-OneDrive-Info/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-myonedriveinfo", "title": "My OneDrive Info", "description": "This ACE demonstrates how to use the Graph API endpoints to access information about the current users OneDrive.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.16.0", "versionGroup": "1.16", "created": "2023-02-21", "updated": "2023-02-21", "authors": [ { "name": "Harminder Singh", "account": "HarminderSethi", "avatar": "https://github.com/HarminderSethi.png" } ], "preview": { "src": "/images/previews/0f2b96ec799d8111f96a4c2b61af174b225efba86e40712727de7af44ddc3939.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-My-OneDrive-Info", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-My-OneDrive-Info/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FBasicCard-My-OneDrive-Info", "descriptionParagraphs": [ "This ACE demonstrates how to use the Graph API endpoints to access information about the current users OneDrive." ], "previews": [ { "src": "/images/previews/0f2b96ec799d8111f96a4c2b61af174b225efba86e40712727de7af44ddc3939.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/BasicCard-OneDriveCarousel/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-onedriveimageonlycarousel", "title": "OneDrive Carousel", "description": "This solution provides a carousel that takes images from a OneDrive folder using microsoft graph and ACE and display only the current image.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2022-04-11", "updated": "2022-04-11", "authors": [ { "name": "Guido Zambarda", "account": "GuidoZam", "avatar": "https://github.com/GuidoZam.png" } ], "preview": { "src": "/images/previews/b0f3c811b15b95a3c7776050da7c15b389f4b5952bd5324e7b7fe67110cecaa1.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-OneDriveCarousel", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-OneDriveCarousel/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FBasicCard-OneDriveCarousel", "descriptionParagraphs": [ "This solution provides a carousel that takes images from a OneDrive folder using microsoft graph and ACE and display only the current image." ], "previews": [ { "src": "/images/previews/b0f3c811b15b95a3c7776050da7c15b389f4b5952bd5324e7b7fe67110cecaa1.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/BasicCard-PeopleSearch/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-people-search", "title": "People Search Adaptive Card Extension", "description": "This sample shows how to build an ACE with a card view and quick view to display users in a tenant and search users.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2023-01-08", "updated": "2023-01-08", "authors": [ { "name": "Kunj Sangani", "account": "kunj-sangani", "avatar": "https://github.com/kunj-sangani.png" } ], "preview": { "src": "/images/previews/c05d55d07c0468092b01120e0acf49a448ee87098467e59d0825ea3185f1a89a.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-PeopleSearch", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-PeopleSearch/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FBasicCard-PeopleSearch", "descriptionParagraphs": [ "This sample shows how to build an ACE with a card view and quick view to display users in a tenant and search users." ], "previews": [ { "src": "/images/previews/c05d55d07c0468092b01120e0acf49a448ee87098467e59d0825ea3185f1a89a.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/BasicCard-ShareGraphClient/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-sharedgraphclient", "title": "Using Shared Graph Client in ACEs", "description": "This solution shows how to use a shared Microsoft Graph client between ACEs.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension", "Library component" ], "technologies": [ "React" ], "version": "1.15.0", "versionGroup": "1.15", "created": "2022-09-17", "updated": "2022-09-17", "authors": [ { "name": "Marcin Wojciechowski", "account": "mgwojciech", "avatar": "https://github.com/mgwojciech.png" } ], "preview": { "src": "/images/previews/c8c8b08e4f97dd05b9e77186e9836e00f6ead3f477c0247526a708538acae5f8.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-ShareGraphClient", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-ShareGraphClient/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FBasicCard-ShareGraphClient", "descriptionParagraphs": [ "This solution shows how to use a shared Microsoft Graph client between ACEs." ], "previews": [ { "src": "/images/previews/c8c8b08e4f97dd05b9e77186e9836e00f6ead3f477c0247526a708538acae5f8.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-ShareGraphClient/assets/quickview.png", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.15.0-rc.0.", "severity": "error" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[1].order", "message": "Preview order is duplicated.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 6 } }, { "id": "pnp/sp-dev-fx-aces:samples/BasicCard-SharePoint-CRUD/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-sharepoint-crud", "title": "SharePoint CRUD Example", "description": "This Adaptive Card Extension shows how to work with form elements and form data in an Adaptive Card. It is an example of how to use an ACE to interact with SharePoint List data using PnPJS.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2022-01-13", "updated": "2022-01-13", "authors": [ { "name": "Derek Cash-Peterson", "account": "dcashpeterson", "avatar": "https://github.com/dcashpeterson.png" } ], "preview": { "src": "/images/previews/d92d9c49cb109f766c57e4154c7a0f3017d2dade3b014e572c40095c19439c9c.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-SharePoint-CRUD", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-SharePoint-CRUD/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FBasicCard-SharePoint-CRUD", "descriptionParagraphs": [ "This ACE shows how to work with different form elements to collect and display data from an Adaptive Card and store that data in a SharePoint list. A sample list is provisioned when the ACE is loaded for the first time. It also shows how to navigate from one view to another with multiple cards." ], "previews": [ { "src": "/images/previews/d92d9c49cb109f766c57e4154c7a0f3017d2dade3b014e572c40095c19439c9c.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/BasicCard-StatusMessage/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-statusmessage", "title": "Teams Status ACE Example", "description": "This ACE demonstrates how to use the Presence Graph API endpoints (beta) to set and retrieve a presence status message for a user.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.16.0", "versionGroup": "1.16", "created": "2022-12-21", "updated": "2023-01-22", "authors": [ { "name": "Yves Habersaat", "account": "yhabersaat", "avatar": "https://github.com/yhabersaat.png" } ], "preview": { "src": "/images/previews/e6ab95a47a7e63fa55b84610cf5e09a1abc30944e5bee4fca445259a2c0cc884.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-StatusMessage", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-StatusMessage/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FBasicCard-StatusMessage", "descriptionParagraphs": [ "This ACE demonstrates how to use the Presence Graph API endpoints (beta) to set and retrieve a presence status message for a user." ], "previews": [ { "src": "/images/previews/e6ab95a47a7e63fa55b84610cf5e09a1abc30944e5bee4fca445259a2c0cc884.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-StatusMessage/assets/quick_view.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BasicCard-StatusMessage/assets/quick_view_success.png", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-aces:samples/BotPowered-BasicAce-CollectFeedback/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-botpowered-basicace-collect-feedback", "title": "Bot-Powered-ACE Collect Feedback", "description": "Viva Connection Adaptive Card Extension (ACE) that shows how to collect feedback from users using a Bot-Powered-ACE implemented with .NET.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [], "version": null, "versionGroup": "Not applicable", "created": "2023-12-14", "updated": "2023-12-14", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/paolopia.png" } ], "preview": { "src": "/images/previews/4331968e97e91625f3373c31b1c4e83f682ae9ce28643d4528f0c7bce4290df1.webp", "alt": "Preview of the main CardView to collect feedback from user", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BotPowered-BasicAce-CollectFeedback", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BotPowered-BasicAce-CollectFeedback/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FBotPowered-BasicAce-CollectFeedback", "descriptionParagraphs": [ "Viva Connection Adaptive Card Extension (ACE) that shows how to collect feedback from users using a Bot-Powered-ACE implemented with .NET." ], "previews": [ { "src": "/images/previews/4331968e97e91625f3373c31b1c4e83f682ae9ce28643d4528f0c7bce4290df1.webp", "alt": "Preview of the main CardView to collect feedback from user", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BotPowered-BasicAce-CollectFeedback/assets/feedback-ace-02.png", "alt": "Preview of the CardView showing the feedback collected from user", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BotPowered-BasicAce-CollectFeedback/assets/feedback-ace-03.png", "alt": "Preview of the main QuickView to show additional information to the user", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [], "framework": "Bot Framework", "frameworkVersion": "bot40", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "technology.missing", "field": "metadata.CLIENT-SIDE-DEV", "message": "Technology filter metadata is missing.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/BotPowered-BasicAce-Tasks/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-botpowered-basicace-tasks", "title": "Bot-Powered-ACE Tasks", "description": "Viva Connection Adaptive Card Extension (ACE) that shows how to show hypothetical tasks for the current user using a Bot-Powered-ACE implemented with .NET.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [], "version": null, "versionGroup": "Not applicable", "created": "2023-12-14", "updated": "2023-12-14", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/paolopia.png" } ], "preview": { "src": "/images/previews/2ca13b17e9dda8c632e0dcb7f9aa1dadcb47a062acede91e889762418c0f4d14.webp", "alt": "Preview of the main CardView to show a recap of the active tasks", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BotPowered-BasicAce-Tasks", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BotPowered-BasicAce-Tasks/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FBotPowered-BasicAce-Tasks", "descriptionParagraphs": [ "Viva Connection Adaptive Card Extension (ACE) that shows how to show hypothetical tasks for the current user using a Bot-Powered-ACE implemented with .NET." ], "previews": [ { "src": "/images/previews/2ca13b17e9dda8c632e0dcb7f9aa1dadcb47a062acede91e889762418c0f4d14.webp", "alt": "Preview of the main CardView to show a recap of the active tasks", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BotPowered-BasicAce-Tasks/assets/tasks-ace-02.png", "alt": "Preview of the CardView showing a single task", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/BotPowered-BasicAce-Tasks/assets/tasks-ace-03.png", "alt": "Preview of the main QuickView to show a detailed list of tasks", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [], "framework": "Bot Framework", "frameworkVersion": "bot40", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "technology.missing", "field": "metadata.CLIENT-SIDE-DEV", "message": "Technology filter metadata is missing.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/ChartCard-DataVisualizationOptions/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-chartcard-datavisualizationoptions", "title": "Data Visualization options for ACE cards", "description": "This is a baseline solution demonstrating the different data visualization options for the Viva Connections Cards.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "JavaScript" ], "version": "1.20", "versionGroup": "1.20", "created": "2024-08-20", "updated": "2024-08-20", "authors": [ { "name": "Vesa Juvonen", "account": "VesaJuvonen", "avatar": "https://github.com/VesaJuvonen.png" } ], "preview": { "src": "/images/previews/1fcf79871110d1ba8c5d0e3e08e2ea53d28331aa4eecc85f10c9d502d5574cff.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ChartCard-DataVisualizationOptions", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ChartCard-DataVisualizationOptions/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FChartCard-DataVisualizationOptions", "descriptionParagraphs": [ "This is a baseline solution demonstrating the different data visualization options for the Viva Connections Cards. Line chart support was released as part of the SharePoint Framework 1.19 release and additional bar chart, pie chart and donut charts were introduced with the SharePoint Framework 1.20 release. Data visualization cards can be used to surface relevant business metrics directly in the Viva Connections dashboard, which can be easily accessed using desktop, tablet or mobile experiences." ], "previews": [ { "src": "/images/previews/1fcf79871110d1ba8c5d0e3e08e2ea53d28331aa4eecc85f10c9d502d5574cff.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ChartCard-DataVisualizationOptions/assets/full-screen-preview.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ChartCard-DataVisualizationOptions/assets/mobile-preview.png", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[1].order", "message": "Preview order is duplicated.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[2].order", "message": "Preview order is duplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 7 } }, { "id": "pnp/sp-dev-fx-aces:samples/ChartCard-FilesByContentType/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-chartcard-filesbycontenttype", "title": "Chart Card Files By Content Type", "description": "This Adaptive Card Extension displays a pie chart showing documents of a selected document library by content type.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.20.0-beta.0", "versionGroup": "1.20", "created": "2024-09-13", "updated": "2024-09-13", "authors": [ { "name": "Aimery Thomas", "account": "a1mery", "avatar": "https://github.com/a1mery.png" } ], "preview": { "src": "/images/previews/46cb672f365219b1803ef6810386b5f76a7873bc572de658df8b8508a0f613a3.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ChartCard-FilesByContentType", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ChartCard-FilesByContentType/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FChartCard-FilesByContentType", "descriptionParagraphs": [ "This Adaptive Card Extension displays a pie chart showing documents of a selected document library by content type. The sample uses the Microsoft Graph API to get the document library items and their content types." ], "previews": [ { "src": "/images/previews/46cb672f365219b1803ef6810386b5f76a7873bc572de658df8b8508a0f613a3.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ChartCard-FilesByContentType/assets/Medium.png", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0-beta.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[1].order", "message": "Preview order is duplicated.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-aces:samples/ChartCard-PageCreation/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-page-creation", "title": "Bot-Powered-ACE Tasks", "description": "Viva Connection Adaptive Card Extension (ACE) that shows how to show hypothetical tasks for the current user using a Bot-Powered-ACE implemented with .NET.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.19.0", "versionGroup": "1.19", "created": "2024-03-29", "updated": "2024-03-29", "authors": [ { "name": "Aimery Thomas", "account": "a1mery", "avatar": "https://github.com/a1mery.png" } ], "preview": { "src": "/images/previews/647b53f40e6400d9e851970037228160ee275fe95be8b29b6792e8acfaea3423.webp", "alt": "Preview of the main CardView to show a recap of the active tasks", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ChartCard-PageCreation", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ChartCard-PageCreation/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FChartCard-PageCreation", "descriptionParagraphs": [ "Viva Connection Adaptive Card Extension (ACE) that shows how to show hypothetical tasks for the current user using a Bot-Powered-ACE implemented with .NET." ], "previews": [ { "src": "/images/previews/647b53f40e6400d9e851970037228160ee275fe95be8b29b6792e8acfaea3423.webp", "alt": "Preview of the main CardView to show a recap of the active tasks", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.19.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/ChartCard-Plan-Tracker/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-plan-tracker", "title": "Plan Tracker", "description": "SharePoint Framework (SPFx) Adaptive Card Extension (ACE) that provides a visually engaging and interactive dashboard for Microsoft Planner with bucket views, task management, and team insights.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-07-10", "updated": "2025-07-10", "authors": [ { "name": "Ahmad Jad Alhak", "account": "ahmad-jad-alhak", "avatar": "https://github.com/ahmad-jad-alhak.png" } ], "preview": { "src": "/images/previews/fbe10508242eb03448cef0d99e82beaca8721d295ac55d5f4c21edde31963b91.webp", "alt": "Plan Tracker main dashboard showing Planner buckets and tasks", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ChartCard-Plan-Tracker", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ChartCard-Plan-Tracker/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FChartCard-Plan-Tracker", "descriptionParagraphs": [ "Plan Tracker is a SharePoint Framework (SPFx) Adaptive Card Extension (ACE) that provides a visually engaging and interactive dashboard for Microsoft Planner. It allows users to view buckets, tasks, project members, and personal assignments in an organized and customizable interface. Tasks can be sorted by priority or due date, and include visual status indicators, inline navigation, and plan-level insights." ], "previews": [ { "src": "/images/previews/fbe10508242eb03448cef0d99e82beaca8721d295ac55d5f4c21edde31963b91.webp", "alt": "Plan Tracker main dashboard showing Planner buckets and tasks", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ChartCard-Plan-Tracker/assets/plan-tracker-screenshot-02.png", "alt": "Plan Tracker showing task details and status indicators", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ChartCard-Plan-Tracker/assets/plan-tracker-screenshot-03.png", "alt": "Plan Tracker My Tasks view for current user", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ChartCard-Plan-Tracker/assets/plan-tracker-screenshot-04.png", "alt": "Plan Tracker Project Members view", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva", "Microsoft Planner" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-aces:samples/ChartCard-ThreeSeries/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-chartcard-threeseries", "title": "Chart Card with Three Series", "description": "Baseline example of the chart card rendering options which was introduced as part of the SPFx 1.19 release.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "JavaScript" ], "version": null, "versionGroup": null, "created": "2024-03-27", "updated": "2024-03-27", "authors": [ { "name": "Vesa Juvonen", "account": "VesaJuvonen", "avatar": "https://github.com/VesaJuvonen.png" } ], "preview": { "src": "/images/previews/b553cc0eb2ad4f464084207e5bb4e1bc8b71c2a958d0e75685f4ff4a88984983.webp", "alt": "Preview of medium and larger rendering", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ChartCard-ThreeSeries", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ChartCard-ThreeSeries/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FChartCard-ThreeSeries", "descriptionParagraphs": [ "Baseline example of the chart card rendering options which was introduced as part of the SPFx 1.19 release.", "Chart card can be used to render simple charts directly in the card view, so that you can include graphical details on your business situation directly in the Viva Connections dashboard." ], "previews": [ { "src": "/images/previews/b553cc0eb2ad4f464084207e5bb4e1bc8b71c2a958d0e75685f4ff4a88984983.webp", "alt": "Preview of medium and larger rendering", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ChartCard-ThreeSeries/assets/chart-card-dashboard.png", "alt": "Preview in dashboard", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": null, "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.invalid", "field": "metadata.SPFX-VERSION", "message": "Expected an SPFx version, optionally with prerelease/build suffix.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/GenericCard-Graph-UserManager/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-user-manager", "title": "User Manager ACE", "description": "This Adaptive Card Extension (ACE) shows the manager of the currently logged in user.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.18.2", "versionGroup": "1.18", "created": "2024-03-09", "updated": "2024-03-09", "authors": [ { "name": "Guido Zambarda", "account": "GuidoZam", "avatar": "https://github.com/guidozam.png" } ], "preview": { "src": "/images/previews/a55cbc3d8351805e5a5b10c6ecda165256386e8a2635c40341eb55c1b8464bd4.webp", "alt": "Image of the card with all the manager information", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/GenericCard-Graph-UserManager", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/GenericCard-Graph-UserManager/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FGenericCard-Graph-UserManager", "descriptionParagraphs": [ "This Adaptive Card Extension (ACE) shows the manager of the currently logged in user. It uses the Microsoft Graph to get the manager of the user and then displays it." ], "previews": [ { "src": "/images/previews/a55cbc3d8351805e5a5b10c6ecda165256386e8a2635c40341eb55c1b8464bd4.webp", "alt": "Image of the card with all the manager information", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/GenericCard-Graph-UserManager/assets/CardWithoutPicture.png", "alt": "Image of the card with some information and no picture", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/GenericCard-Graph-UserManager/assets/ErrorCard.png", "alt": "Image of the card when an error occurs", "isFallback": false } ], "references": [ { "title": "Getting started with SharePoint Framework", "description": "Learn how to start developing SharePoint Framework solutions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant" }, { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Designing Viva Connections custom cards for your dashboard", "description": "Official guidelines about how to design the Card Views of a SharePoint Framework Adaptive Card Extension (ACE).", "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/designing-card" }, { "title": "Microsoft 365 Patterns and Practices", "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.", "url": "https://aka.ms/m365pnp" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-At-a-glance/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-ace-articlecontent", "title": "Article Content at a glance", "description": "Adaptive Card displays of Article Content", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2021-10-06", "updated": "2021-10-06", "authors": [ { "name": "Anoop Tatti", "account": "anoopt", "avatar": "https://github.com/anoopt.png" } ], "preview": { "src": "/images/previews/1adb4d752c168175d0969be4f548a9b6fa16f01957b1fa4efe4a28b070aecf4c.webp", "alt": "London Transport", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-At-a-glance", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-At-a-glance/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-At-a-glance", "descriptionParagraphs": [ "ACE with multiple card views to show the first few sentences of an article in a SharePoint site" ], "previews": [ { "src": "/images/previews/1adb4d752c168175d0969be4f548a9b6fa16f01957b1fa4efe4a28b070aecf4c.webp", "alt": "London Transport", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-BookingSpaces/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-bookingspace", "title": "Booking Spaces ACE", "description": "This sample shows how to build an ACE with a card view and quick view to search spaces in the campus and be able to quickly check previous/upcoming reservations.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.16.0", "versionGroup": "1.16", "created": "2023-05-16", "updated": "2023-05-16", "authors": [ { "name": "Jethro Seghers", "account": "jesegher", "avatar": "https://github.com/jesegher.png" } ], "preview": { "src": "/images/previews/001283c1b95f34f02e371f2d53ddec5e541f960ce9e02a1adf59c2fb0a56ae3b.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-BookingSpaces", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-BookingSpaces/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-BookingSpaces", "descriptionParagraphs": [ "This sample shows how to build an ACE with a card view and quick view to search spaces in the campus and be able to quickly check previous/upcoming reservations." ], "previews": [ { "src": "/images/previews/001283c1b95f34f02e371f2d53ddec5e541f960ce9e02a1adf59c2fb0a56ae3b.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-DynamicContentCard/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-dynamiccontentcard", "title": "Dynamic Content Card", "description": "Dynamic Content Card (aka DCC) is a SPFx ACE Card that displays dynamic content hosted on a Sharepoint list and filtered by the user's usageLocation property.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.18.2", "versionGroup": "1.18", "created": "2024-03-20", "updated": "2024-03-20", "authors": [ { "name": "Eric Scherlinger", "account": "ericsche", "avatar": "https://github.com/ericsche.png" } ], "preview": { "src": "/images/previews/35686eaae73518e074c86320d546c9a8fe8077a2538bc5adcf57277748822238.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-DynamicContentCard", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-DynamicContentCard/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-DynamicContentCard", "descriptionParagraphs": [ "Dynamic Content Card (aka DCC) is a SPFx ACE Card that displays dynamic content hosted on a Sharepoint list and filtered by the user's usageLocation property. Enabling you to display content based on the user's location and delegate the management of the content to the business users thanks to the Sharepoint list." ], "previews": [ { "src": "/images/previews/35686eaae73518e074c86320d546c9a8fe8077a2538bc5adcf57277748822238.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-HTML-OfficeLocator/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-imagecard-html-officelocator", "title": "Office Locator - Adaptive Card Extension", "description": "This Adaptive Card Extension (ACE) sample shows how to use HTML and React in an ACEs which was introduced in SPFx 1.20.0. This ACE allows you to display office locations in a map using Azure Maps. The office locations can be configured in the ACE property pane.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2024-10-10", "updated": "2024-10-10", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/b0c996e6464a23e70bb99cc4e4a93d63012a5223f1e57909626813c8894f3a04.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-HTML-OfficeLocator", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-HTML-OfficeLocator/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-HTML-OfficeLocator", "descriptionParagraphs": [ "This Adaptive Card extension (ACE) sample shows how to use HTML and React in an ACEs which was introduced in SPFx 1.20.0. This ACE allows you to display office locations in a map using Azure Maps. The office locations can be configured in the ACE property pane." ], "previews": [ { "src": "/images/previews/b0c996e6464a23e70bb99cc4e4a93d63012a5223f1e57909626813c8894f3a04.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-HTML-OfficeLocator/assets/demo-2.png", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.not-image", "field": "thumbnails[0].url", "message": "The declared repository asset does not have an image extension.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-HTML-React-FAQs/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-imagecard-html-react-faqs", "title": "Frequently Asked Questions - Adaptive Card Extension", "description": "This Adaptive Card Extension (ACE) sample shows how to use HTML and React in an ACEs which was introduced in SPFx 1.20.0. This ACE allows you to display a list of FAQs. The FAQs are stored in the properties of ACE and are displayed as an accordion in the QuickView.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.20.0-rc1", "versionGroup": "1.20", "created": "2024-09-13", "updated": "2024-09-13", "authors": [ { "name": "Anoop Tatti", "account": "anoopt", "avatar": "https://github.com/anoopt.png" } ], "preview": { "src": "/images/previews/efa9bab52f89ef886cabeab540a8bc0a4f19089e034edd7dc97cc15164b72e86.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-HTML-React-FAQs", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-HTML-React-FAQs/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-HTML-React-FAQs", "descriptionParagraphs": [ "This Adaptive Card extension (ACE) sample shows how to use HTML and React in an ACEs which was introduced in SPFx 1.20.0. This ACE allows you to display a list of FAQs. The FAQs are stored in the properties of ACE and are displayed as an accordion in the QuickView." ], "previews": [ { "src": "/images/previews/efa9bab52f89ef886cabeab540a8bc0a4f19089e034edd7dc97cc15164b72e86.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-HTML-React-FAQs/assets/medium.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-HTML-React-FAQs/assets/large.png", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0-rc1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-HTML-React-Search-FAQs/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-react-seach-faq", "title": "FAQ Search Adaptive Card Extension", "description": "The FAQ Search Adaptive Card Extension for SharePoint Framework (SPFx) is designed to display and manage frequently asked questions (FAQs) in a user-friendly interface.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.18.0", "versionGroup": "1.18", "created": "2024-10-08", "updated": "2024-10-08", "authors": [ { "name": "Ahmad Jad Alhak", "account": "ahmad-jad-alhak", "avatar": "https://github.com/ahmad-jad-alhak.png" } ], "preview": { "src": "/images/previews/8320aae4198dad1e2ff303efe56367680c95ff87fc27ee5743f622cb81faf3e9.webp", "alt": "Search FAQ", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-HTML-React-Search-FAQs", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-HTML-React-Search-FAQs/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-HTML-React-Search-FAQs", "descriptionParagraphs": [ "The FAQ Search Adaptive Card Extension for SharePoint Framework (SPFx) is designed to display and manage frequently asked questions (FAQs) in a user-friendly interface." ], "previews": [ { "src": "/images/previews/8320aae4198dad1e2ff303efe56367680c95ff87fc27ee5743f622cb81faf3e9.webp", "alt": "Search FAQ", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.20.0.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-HTML-React-Service-Health/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-imagecard-html-react-service-health", "title": "Service health - Adaptive Card Extension", "description": "SPFx ACE Service Health is a SharePoint Framework (SPFx) extension designed to monitor and display the health status of various services within your Microsoft 365 environment.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-05-31", "updated": "2025-05-31", "authors": [ { "name": "João José Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/11e8c46f50f8ad1cb6c151512290cf4d92245258d6cb3a6f3bb86ca0251dba29.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-HTML-React-Service-Health", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-HTML-React-Service-Health/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-HTML-React-Service-Health", "descriptionParagraphs": [ "SPFx ACE Service Health is a SharePoint Framework (SPFx) extension designed to monitor and display the health status of various services within your Microsoft 365 environment." ], "previews": [ { "src": "/images/previews/11e8c46f50f8ad1cb6c151512290cf4d92245258d6cb3a6f3bb86ca0251dba29.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-HTML-React-Service-Health/src/assets/serviceHealth02.PNG", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-HTML-React-Service-Health/src/assets/serviceHealth03.PNG", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-HTML-React-Stock-Price-Chart/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-imagecard-html-react-stock-price-chart", "title": "Stock Price Chart - Adaptive Card Extension", "description": "This Adaptive Card Extension (ACE) sample shows how to use HTML and React in an ACEs which was introduced in SPFx 1.20.0. This ACE allows you to see the stock price chart of a company. The stock price chart is displayed using the TradingView widget.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.20.0-rc1", "versionGroup": "1.20", "created": "2025-02-17", "updated": "2025-02-17", "authors": [ { "name": "Anoop Tatti", "account": "anoopt", "avatar": "https://github.com/anoopt.png" } ], "preview": { "src": "/images/previews/c72683c85852dc7b413196b380647218dad24f649bf7d6ccae1bd8869bdf1e8b.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-HTML-React-Stock-Price-Chart", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-HTML-React-Stock-Price-Chart/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-HTML-React-Stock-Price-Chart", "descriptionParagraphs": [ "This Adaptive Card extension (ACE) sample shows how to use HTML and React in an ACEs which was introduced in SPFx 1.20.0. This ACE allows you to see the stock price chart of a company. The stock price chart is displayed using the TradingView widget. The stock symbol, company name and currency are stored in the properties of ACE and are used by the widget in the QuickView." ], "previews": [ { "src": "/images/previews/c72683c85852dc7b413196b380647218dad24f649bf7d6ccae1bd8869bdf1e8b.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0-rc1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-HideACE/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-hidable-ace", "title": "Hidable ACE", "description": "This solution shows an example of how to hide an ACE based on a user action such as a button click.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2022-03-24", "updated": "2022-03-24", "authors": [ { "name": "Derek Cash-Peterson", "account": "dcashpeterson", "avatar": "https://github.com/dcashpeterson.png" } ], "preview": { "src": "/images/previews/4cc235a1a90bdc5cbd360be89aa318238368ea3895c2c497880d814b4a40738c.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-HideACE", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-HideACE/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-HideACE", "descriptionParagraphs": [ "This solution shows an example of how to hide an ACE based on a user action such as a button click. This specific example stored the click data in local storage and checks a data time interval but can be updated to include any logic." ], "previews": [ { "src": "/images/previews/4cc235a1a90bdc5cbd360be89aa318238368ea3895c2c497880d814b4a40738c.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-HybridWork-Checkin/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-hybridwork-checkin", "title": "Hybrid Work Employee Check-in Adaptive Card Extension", "description": "Adaptive Card Extension that allows users to check in to the office.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2021-11-08", "updated": "2021-11-08", "authors": [ { "name": "Arijit Mondal", "account": "ArijitCloud", "avatar": "https://github.com/ArijitCloud.png" } ], "preview": { "src": "/images/previews/0937f78df4210003b454ec52139e962a4aef19692ffb3184dfb2c8e52b08d2f3.webp", "alt": "Hybrid Work Employee Check-In", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-HybridWork-Checkin", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-HybridWork-Checkin/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-HybridWork-Checkin", "descriptionParagraphs": [ "Adaptive Card Extension that allows users to check in for a desk in an office building. Stores data in a SharePoint list." ], "previews": [ { "src": "/images/previews/0937f78df4210003b454ec52139e962a4aef19692ffb3184dfb2c8e52b08d2f3.webp", "alt": "Hybrid Work Employee Check-In", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-Internships/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-internship-c82aa80eeb17a834", "title": "Internship", "description": "This education sample shows how to build an ACE with a card view and quick view to display new and recent internships available to gain work experience.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.16.0", "versionGroup": "1.16", "created": "2023-04-15", "updated": "2023-04-15", "authors": [ { "name": "Jethro Seghers", "account": "jesegher", "avatar": "https://github.com/jesegher.png" } ], "preview": { "src": "/images/previews/37e1431ddad3d2e62d2ece453d492825bfd335dc80e2a1d4c29c210009e01e45.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-Internships", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-Internships/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-Internships", "descriptionParagraphs": [ "This education sample shows how to build an ACE with a card view and quick view to display new and recent internships available to gain work experience." ], "previews": [ { "src": "/images/previews/37e1431ddad3d2e62d2ece453d492825bfd335dc80e2a1d4c29c210009e01e45.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-LibraryLoans/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-internship-c8c980cc27f0ffb0", "title": "Library Loans ACE", "description": "This sample shows how to build an ACE with a card view and quick view to check pending library loans and their due dates.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.16.0", "versionGroup": "1.16", "created": "2023-05-03", "updated": "2023-05-03", "authors": [ { "name": "Jethro Seghers", "account": "jesegher", "avatar": "https://github.com/jesegher.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-LibraryLoans", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-LibraryLoans/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-LibraryLoans", "descriptionParagraphs": [ "This sample shows how to build an ACE with a card view and quick view to check pending library loans and their due dates." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "name.duplicate", "field": "name", "message": "Also used by pnp/sp-dev-fx-aces/samples/ImageCard-Internships/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-MostLikedPages/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-most-lifed-pages", "title": "Most Liked Pages Adaptive Card Extension", "description": "This Adaptive Card Extension shows the most liked pages of selected SharePoint sites.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2023-03-15", "updated": "2023-03-15", "authors": [ { "name": "Aimery Thomas", "account": "a1mery", "avatar": "https://github.com/a1mery.png" } ], "preview": { "src": "/images/previews/2f9ce4c3a7bdaffa4609de6062985ece9f28b4caba09721c9790ee53948dbb66.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-MostLikedPages", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-MostLikedPages/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-MostLikedPages", "descriptionParagraphs": [ "This Adaptive Card Extension shows the most liked pages of selected SharePoint sites." ], "previews": [ { "src": "/images/previews/2f9ce4c3a7bdaffa4609de6062985ece9f28b4caba09721c9790ee53948dbb66.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-MyLocation/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-imagecard-mylocation", "title": "My Location - Adaptive Card Extension", "description": "This Adaptive Card Extension (ACE) creates a dynamic link based on the user officeLocation or group membership and shows a dynamic image + text.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.21.0", "versionGroup": "1.21", "created": "2025-06-02", "updated": "2025-06-02", "authors": [ { "name": "Lukas Bänsch", "account": "7l0uk", "avatar": "https://github.com/7l0uk.png" } ], "preview": { "src": "/images/previews/ac6950efb437f6c425ca9a84653d1f4eb0ecad75d044f609a7f73dbda2999271.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-MyLocation", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-MyLocation/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-MyLocation", "descriptionParagraphs": [ "This Adaptive Card Extension (ACE) creates a dynamic link based on the user officeLocation or group membership and shows a dynamic image + text." ], "previews": [ { "src": "/images/previews/ac6950efb437f6c425ca9a84653d1f4eb0ecad75d044f609a7f73dbda2999271.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-OfficeLocations/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-officelocations", "title": "Office Locations", "description": "This sample shows how to build an ACE with multiple card views to show the details of the offices in an organization.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.14.0", "versionGroup": "1.14", "created": "2022-02-15", "updated": "2022-06-01", "authors": [ { "name": "Anoop Tatti", "account": "anoopt", "avatar": "https://github.com/anoopt.png" } ], "preview": { "src": "/images/previews/072200d261ab1ebe2c1f2f358994c748fa9c498b38b153d4800da63959f636ca.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-OfficeLocations", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-OfficeLocations/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-OfficeLocations", "descriptionParagraphs": [ "This sample shows how to build an ACE with a PrimaryText card view and a quick view to display current logged in user's immediate upcoming shift in card view and all upcoming shifts in Quick view." ], "previews": [ { "src": "/images/previews/072200d261ab1ebe2c1f2f358994c748fa9c498b38b153d4800da63959f636ca.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-OneDriveCarousel/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-onedrivecarousel", "title": "OneDrive Carousel", "description": "This solution provides a carousel that takes images from a OneDrive folder using Microsoft Graph and ACE.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2022-04-11", "updated": "2022-04-11", "authors": [ { "name": "Guido Zambarda", "account": "GuidoZam", "avatar": "https://github.com/GuidoZam.png" } ], "preview": { "src": "/images/previews/1feb0a50cc968027d1dbacd13b85c3136f8249b11ab0a80aabef5978e4db0741.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-OneDriveCarousel", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-OneDriveCarousel/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-OneDriveCarousel", "descriptionParagraphs": [ "This solution provides a carousel that takes images from a OneDrive folder using Microsoft Graph and ACE." ], "previews": [ { "src": "/images/previews/1feb0a50cc968027d1dbacd13b85c3136f8249b11ab0a80aabef5978e4db0741.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-PromotePages/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-promote-pages", "title": "Promote Pages ACE", "description": "This Adaptive Card Extension shows the most recent pages on selected SharePoint sites and allows you to promote a page as a news post.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.17.4", "versionGroup": "1.17", "created": "2023-08-22", "updated": "2023-08-22", "authors": [ { "name": "Aimery Thomas", "account": "a1mery", "avatar": "https://github.com/a1mery.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-PromotePages", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-PromotePages/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-PromotePages", "descriptionParagraphs": [ "This Adaptive Card Extension shows the most recent pages on selected SharePoint sites and allows you to promote a page as a news post." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.17.4", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "asset.missing", "field": "thumbnails[0].url", "message": "Asset not found in collected repository tree: samples/ImageCard-PropotePage/assets/card-preview.png", "severity": "error" }, { "code": "preview.unavailable", "field": "thumbnails", "message": "No usable declared image is available; a labelled fallback is shown.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-PublicHolidays/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-publicholidays", "title": "Public Holiday Listing", "description": "This sample provides a listing of holidays set in a SharePoint list.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.15.0", "versionGroup": "1.15", "created": "2022-08-03", "updated": "2022-08-03", "authors": [ { "name": "Nanddeep Nachan", "account": "nanddeepn", "avatar": "https://github.com/nanddeepn.png" }, { "name": "Ravi Kulkarni", "account": "ravi16a87", "avatar": "https://github.com/ravi16a87.png" }, { "name": "Smita Nachan", "account": "SmitaNachan", "avatar": "https://github.com/SmitaNachan.png" } ], "preview": { "src": "/images/previews/abc61325b789681a35faa9ebb3ef2f4aa22847fd6e9775d0d519cc10d31096af.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-PublicHolidays", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-PublicHolidays/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-PublicHolidays", "descriptionParagraphs": [ "This sample shows how to build an ACE with a card view and multiple quick views to display the public holidays for user based on their office location. Users can also use this ACE solution to update their office location." ], "previews": [ { "src": "/images/previews/abc61325b789681a35faa9ebb3ef2f4aa22847fd6e9775d0d519cc10d31096af.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-Rss/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-rss", "title": "Adaptive Card Extension PnP Weekly Feed", "description": "This ACE displays the PnP Weekly video recording RSS feed.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2022-01-27", "updated": "2022-01-27", "authors": [ { "name": "André Lage", "account": "aaclage", "avatar": "https://github.com/aaclage.png" } ], "preview": { "src": "/images/previews/7f8b65f8e4edadf14fb7ae80294be6f9e64e24e7ff65f87723364cdc02a7746e.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-Rss", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-Rss/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-Rss", "descriptionParagraphs": [ "This ACEs accesses the RSS feed from PnP Weekly and display episodes, audio and description as slider with search capability of description." ], "previews": [ { "src": "/images/previews/7f8b65f8e4edadf14fb7ae80294be6f9e64e24e7ff65f87723364cdc02a7746e.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "text.whitespace", "field": "shortDescription", "message": "Trim leading and trailing whitespace.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-Scholarships/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-scholarship", "title": "Scholarship ACE", "description": "This sample shows how to build an ACE with a card view and quick view to display new, recent and applied scholarships available to user.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.16.0", "versionGroup": "1.16", "created": "2023-05-03", "updated": "2023-05-03", "authors": [ { "name": "Jethro Seghers", "account": "jesegher", "avatar": "https://github.com/jesegher.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-Scholarships", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-Scholarships/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-Scholarships", "descriptionParagraphs": [ "This sample shows how to build an ACE with a card view and quick view to display new, recent and applied scholarships available to user." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-TodaysLunch/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-todays-lunch", "title": "Today's Lunch Adaptive Card Extension", "description": "Adaptive Card Extension that shows today's lunch.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2021-10-28", "updated": "2021-12-13", "authors": [ { "name": "Luis Manez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-TodaysLunch", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-TodaysLunch/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-TodaysLunch", "descriptionParagraphs": [ "Adaptive Card Extension that shows the lunch menu for the current day using a SharePoint List and PnPJs" ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[0].url", "message": "Asset not found in collected repository tree: samples/ImaceCard-TodaysLunch/assets/preview.gif", "severity": "error" }, { "code": "preview.unavailable", "field": "thumbnails", "message": "No usable declared image is available; a labelled fallback is shown.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-Tuitions/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-tuitions", "title": "Tuitions", "description": "This sample shows how to build an ACE with a card view to display outstanding payment for Tuitions and payment breakage.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.16.0", "versionGroup": "1.16", "created": "2023-04-15", "updated": "2023-04-15", "authors": [ { "name": "Jethro Seghers", "account": "jesegher", "avatar": "https://github.com/jesegher.png" } ], "preview": { "src": "/images/previews/350966ccebe200b6ffdf3fa03b5a31f3368f7f707ad8ad70537115fe14f3243d.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-Tuitions", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-Tuitions/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-Tuitions", "descriptionParagraphs": [ "This sample shows how to build an ACE with a card view to display outstanding payment for Tuitions and payment breakage." ], "previews": [ { "src": "/images/previews/350966ccebe200b6ffdf3fa03b5a31f3368f7f707ad8ad70537115fe14f3243d.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-Weather/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-weather-ace", "title": "Weather Adaptive Card Extension", "description": "This Adaptive Card Extension allows users to display information about the weather in a specific location.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2022-03-24", "updated": "2022-03-24", "authors": [ { "name": "Aakash Bhardwaj", "account": "aakashbhardwaj619", "avatar": "https://github.com/aakashbhardwaj619.png" } ], "preview": { "src": "/images/previews/fa37884947ba50ef8dd930e05661d226805fa719a8dc4a17fd7f9e4af2b8a1ff.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-Weather", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-Weather/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-Weather", "descriptionParagraphs": [ "This Adaptive Card Extension allows users to search for and select a location to get information about its weather conditions, air quality, and health indices." ], "previews": [ { "src": "/images/previews/fa37884947ba50ef8dd930e05661d226805fa719a8dc4a17fd7f9e4af2b8a1ff.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-WorldClock/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-imagecard-worldclock", "title": "Image Card World Clock", "description": "An Adaptive Card Extension that shows the current time for different timezones.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.18", "versionGroup": "1.18", "created": "2024-02-03", "updated": "2024-01-21", "authors": [ { "name": "Matteo Serpi", "account": "srpmtt", "avatar": "https://github.com/srpmtt.png" } ], "preview": { "src": "/images/previews/2b7c4524287d172e3877a7f6d87164378c430999143863f3f3b584827c91103e.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-WorldClock", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-WorldClock/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-WorldClock", "descriptionParagraphs": [ "This solution shows how to show the current time for different timezones using an Adaptive Card Extension. The ACE shows the local time in the card and shows the current time in different timezones (America, Europe, Asia and Australia) in the quick view." ], "previews": [ { "src": "/images/previews/2b7c4524287d172e3877a7f6d87164378c430999143863f3f3b584827c91103e.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-WorldClock/assets/Screen02.png", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[1].order", "message": "Preview order is duplicated.", "severity": "warning" }, { "code": "date.order", "field": "updateDateTime", "message": "Update date is earlier than creation date.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 6 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-my-recent-files/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-my-recent-files", "title": "My Recent Files", "description": "This Adaptive Card Extension allows user quick access recent files", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.14.0", "versionGroup": "1.14", "created": "2022-04-12", "updated": "2022-04-12", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/9597f29fe7d3c9b04fb953fab98d0a9e6d2ee1e1fa4570a8d4ace2e168bef2b1.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-my-recent-files", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-my-recent-files/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-my-recent-files", "descriptionParagraphs": [ "This Adaptive Card Extension allows user quick access recent files" ], "previews": [ { "src": "/images/previews/9597f29fe7d3c9b04fb953fab98d0a9e6d2ee1e1fa4570a8d4ace2e168bef2b1.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/ImageCard-sales-orders/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-sales-orders", "title": "Adaptive Card Extension Sales Order Example", "description": "This Adaptive Card Extension allows user list and Search Data (Sales Orders) using Microsoft Graph Connector.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.18.1", "versionGroup": "1.18", "created": "2023-11-01", "updated": "2023-11-01", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-sales-orders", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ImageCard-sales-orders/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FImageCard-sales-orders", "descriptionParagraphs": [ "This ACE, uses Microsoft Graph Connector to get data of Sales Order, To run this sample you need to create a Microsoft Graph Connector with IBMDB2." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "asset.case-mismatch", "field": "thumbnails[0].url", "message": "Filename casing differs from samples/ImageCard-sales-orders/assets/SalesOrders.png.", "severity": "error" }, { "code": "url.source-mismatch", "field": "url", "message": "Expected the sample directory in pnp/sp-dev-fx-aces: samples/ImageCard-sales-orders", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[0].url", "message": "Preview is not a non-empty asset in the exact pinned source tree.", "severity": "error" }, { "code": "preview.unavailable", "field": "thumbnails", "message": "No usable declared image is available; a labelled fallback is shown.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 7 } }, { "id": "pnp/sp-dev-fx-aces:samples/InputCard-Generic-NewItem/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-new-item", "title": "New Item Adaptive Card Extension", "description": "This Adaptive Card Extension shows how to create a new list item.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.18.0", "versionGroup": "1.18", "created": "2023-10-15", "updated": "2023-10-31", "authors": [ { "name": "Aimery Thomas", "account": "a1mery", "avatar": "https://github.com/a1mery.png" } ], "preview": { "src": "/images/previews/58d2573d183483e2947316f29bbd10ed6f738f99b2a8fe3e6cbe7d03bf899ad0.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/InputCard-Generic-NewItem", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/InputCard-Generic-NewItem/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FInputCard-Generic-NewItem", "descriptionParagraphs": [ "This Adaptive Card Extension shows how to create a new list item." ], "previews": [ { "src": "/images/previews/58d2573d183483e2947316f29bbd10ed6f738f99b2a8fe3e6cbe7d03bf899ad0.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/InputCard-PeopleSearch/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-people-search-input-card", "title": "People Search Text Box Card", "description": "People Search card sample to showcase complex Viva Connections card extensibility.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.18", "versionGroup": "1.18", "created": "2023-06-28", "updated": "2023-06-28", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?v=4" } ], "preview": { "src": "/images/previews/000e7e280ddd74f2e0d290bcf2ef219f903ffd584f0b7d4c67dff7ebcdc33d86.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/InputCard-PeopleSearch", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/InputCard-PeopleSearch/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FInputCard-PeopleSearch", "descriptionParagraphs": [ "People Search card sample to showcase complex Viva Connections card extensibility with SPFx 1.18." ], "previews": [ { "src": "/images/previews/000e7e280ddd74f2e0d290bcf2ef219f903ffd584f0b7d4c67dff7ebcdc33d86.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/InputCard-PeopleSearch/assets/qv-suggested.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/InputCard-PeopleSearch/assets/search-results.png", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "text.whitespace", "field": "title", "message": "Trim leading and trailing whitespace.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 6 } }, { "id": "pnp/sp-dev-fx-aces:samples/InputCard-Prompt-Survey/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-start-survey-input-card", "title": "Text box Survey Card", "description": "Input Text Box ACE with start a survey scenario.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.18", "versionGroup": "1.18", "created": "2023-06-28", "updated": "2023-06-28", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?v=4" } ], "preview": { "src": "/images/previews/efea512b3c64a95216f3313d651a3af956592ad696b4c28fa646dee7911ca549.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/InputCard-Prompt-Survey", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/InputCard-Prompt-Survey/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FInputCard-Prompt-Survey", "descriptionParagraphs": [ "Input Text Box ACE with start a survey scenario." ], "previews": [ { "src": "/images/previews/efea512b3c64a95216f3313d651a3af956592ad696b4c28fa646dee7911ca549.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/InputCard-Prompt-Survey/assets/ace-survey-thanks.png", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-aces:samples/InputCard-Start-Chat/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-start-chat-input-card", "title": "Start a Chat card", "description": "Input Text Box ACE with a start a chat with a person scenario.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.18", "versionGroup": "1.18", "created": "2023-06-28", "updated": "2023-06-28", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?v=4" } ], "preview": { "src": "/images/previews/51fae6256838e5acd8904ec38de220e545d6f7dfa3184ae6910f7d93e0aff906.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/InputCard-Start-Chat", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/InputCard-Start-Chat/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FInputCard-Start-Chat", "descriptionParagraphs": [ "Input Text Box ACE with a start a chat with a person scenario." ], "previews": [ { "src": "/images/previews/51fae6256838e5acd8904ec38de220e545d6f7dfa3184ae6910f7d93e0aff906.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/InputCard-StatusMessage/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-status-message", "title": "Status Message Adaptive Card Extension", "description": "This sample shows how to build an ACE with a card view to let users to set their presence status message.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2023-10-10", "updated": "2024-12-20", "authors": [ { "name": "Aimery Thomas", "account": "a1mery", "avatar": "https://github.com/a1mery.png" } ], "preview": { "src": "/images/previews/9cef7078aa6010475670bb0b92f59d0162e258be2a6f76861da0efe1f09ffa74.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/InputCard-StatusMessage", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/InputCard-StatusMessage/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FInputCard-StatusMessage", "descriptionParagraphs": [ "This sample shows how to build an ACE with a card view to let users to set their presence status message." ], "previews": [ { "src": "/images/previews/9cef7078aa6010475670bb0b92f59d0162e258be2a6f76861da0efe1f09ffa74.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-ChatGPTDailyInsights/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-chatgptdailyinsights", "title": "ChatGPT Daily Insights Adaptive Card Extension", "description": "ACE to display Daily Insights based on ChatGPT OpenAI API.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2023-02-18", "updated": "2023-02-18", "authors": [ { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png" }, { "name": "Kunj Sangani", "account": "kunj-sangani", "avatar": "https://github.com/kunj-sangani.png" } ], "preview": { "src": "/images/previews/733386f830454b8474eb9490e9666b5e5c1d0bfd9ddcbb62a1596ac35b1b30a1.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-ChatGPTDailyInsights", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-ChatGPTDailyInsights/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-ChatGPTDailyInsights", "descriptionParagraphs": [ "ACE to display Daily Insights based on ChatGPT OpenAI API. This sample shows how to build an ACE with a PrimaryText card view and a quick view and use ChatGPT OpenAI API. Use this Card on Viva Connections to provide user with some quotes, tip, grammar tip, coding tip etc." ], "previews": [ { "src": "/images/previews/733386f830454b8474eb9490e9666b5e5c1d0bfd9ddcbb62a1596ac35b1b30a1.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-ChatGPTDailyInsights/assets/2.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-ChatGPTDailyInsights/assets/4.png", "alt": "Configuration options", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-Covid-Indicator/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-covid-indicator", "title": "COVID-19 Indicator", "description": "This Adaptive Card Extension displays COVID-19 data from the specified country.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Teams", "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension", "Teams tab" ], "technologies": [ "React" ], "version": "1.13.1", "versionGroup": "1.13", "created": "2021-12-12", "updated": "2021-12-12", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/eb299ae61c26270a7294fbf601b3060fb90eaa192f4a5af98aff7154eebd5966.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-Covid-Indicator", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-Covid-Indicator/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-Covid-Indicator", "descriptionParagraphs": [ "This Adaptive Card Extension allows the user to select a country and display real-time COVID-19 related data in the card. In the QuickView it displays additional data such as total population, severity of cases, and deaths." ], "previews": [ { "src": "/images/previews/eb299ae61c26270a7294fbf601b3060fb90eaa192f4a5af98aff7154eebd5966.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-CreateTeam/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-ace-createteam", "title": "Create a new Team", "description": "Provision a Team based on default templates using Graph API", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Teams", "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension", "Teams tab" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2021-10-06", "updated": "2021-10-06", "authors": [ { "name": "Dipen Shah", "account": "dips365", "avatar": "https://github.com/dips365.png" } ], "preview": { "src": "/images/previews/216fffe1ed149aa81a61d4e80fa209f01320a624c0c3ea4ce86946862ea90c6d.webp", "alt": "Create a Team", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-CreateTeam", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-CreateTeam/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-CreateTeam", "descriptionParagraphs": [ "ACE that provisions a Microsoft Teams team baed on templates using the Microsoft Graph API." ], "previews": [ { "src": "/images/previews/216fffe1ed149aa81a61d4e80fa209f01320a624c0c3ea4ce86946862ea90c6d.webp", "alt": "Create a Team", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard", "SharePointWebPart", "TeamsPersonalApp" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-Dynamic-Announcements/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-ace-dynamic-announcements", "title": "Dynamic Announcements", "description": "This ACE card would be useful for an organization use it to make Announcements driven from SharePoint List.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.14.0", "versionGroup": "1.14", "created": "2022-03-12", "updated": "2022-03-12", "authors": [ { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png" } ], "preview": { "src": "/images/previews/67f8d2af40c8d0a51b22db43e9bc3ec47711a8658f253f22a17b9961d66e2ecb.webp", "alt": "Dynamic Announcement Card in Action", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-Dynamic-Announcements", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-Dynamic-Announcements/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-Dynamic-Announcements", "descriptionParagraphs": [ "This ACE card would be useful for an organization use it to make Announcements driven from SharePoint List. This dynamic ACE component can be used to add to the Viva Connections dashboard and drive the CardView and QuickView from a SharePoint list. It filters the data from a SharePoint list based on the start date and end date for each row." ], "previews": [ { "src": "/images/previews/67f8d2af40c8d0a51b22db43e9bc3ec47711a8658f253f22a17b9961d66e2ecb.webp", "alt": "Dynamic Announcement Card in Action", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-EmailSummary/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-primarytextcard-emailsummary", "title": "Email Summary", "description": "This Adaptive Card Extension displays the user's latest received email on the Viva Connections dashboard and shows the Copilot-generated summary of that email in the quick view.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "JavaScript" ], "version": "1.23.0", "versionGroup": "1.23", "created": "2026-08-05", "updated": "2026-08-05", "authors": [ { "name": "Aimery Thomas", "account": "a1mery", "avatar": "https://github.com/a1mery.png" } ], "preview": { "src": "/images/previews/0662d1c7c8b56e5141c553a2a96a765a9dca6e4ffa2395b02498b6a3e3456727.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-EmailSummary", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-EmailSummary/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-EmailSummary", "descriptionParagraphs": [ "This Adaptive Card Extension displays the user's latest received email on the Viva Connections dashboard and shows the Copilot-generated summary of that email in the quick view." ], "previews": [ { "src": "/images/previews/0662d1c7c8b56e5141c553a2a96a765a9dca6e4ffa2395b02498b6a3e3456727.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-EmailSummary/assets/LatestEmailQuickView.png", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Office", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.23.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[1].order", "message": "Preview order is duplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-FlightTracker/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-flight-tracker", "title": "Flight Tracker", "description": "This Adaptive Card Extension allows user to follow in real time a flight.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.16", "versionGroup": "1.16", "created": "2022-11-08", "updated": "2022-11-08", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/a7189693c283447e6389168c2700bede0cc1940e4f907f93cbe3a1246b721a72.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-FlightTracker", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-FlightTracker/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-FlightTracker", "descriptionParagraphs": [ "This Adaptive Card Extension allows user to follow in real time a flight. This ACE, uses the external API( < https: //aerodatabox.p.rapidapi.com/flights/number/>) to get data of flight, please see to get more information." ], "previews": [ { "src": "/images/previews/a7189693c283447e6389168c2700bede0cc1940e4f907f93cbe3a1246b721a72.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-FlightTracker/assets/mobile02.PNG", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-Follow-Documents/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-ace-followdocument", "title": "Follow Documents", "description": "Adaptive Card showing Followed Documents", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2021-12-01", "updated": "2021-12-01", "authors": [ { "name": "André Lage", "account": "aaclage", "avatar": "https://github.com/aaclage.png" } ], "preview": { "src": "/images/previews/a3a04c692db908b410bd91be941e77dbab548bb65a75361fba14a5f920bd2dd3.webp", "alt": "Follow Document demo", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-Follow-Documents", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-Follow-Documents/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-Follow-Documents", "descriptionParagraphs": [ "ACE showing documents the current user follows. Allows the user to see a preview, view document metadata, share via Teams, and download the document." ], "previews": [ { "src": "/images/previews/a3a04c692db908b410bd91be941e77dbab548bb65a75361fba14a5f920bd2dd3.webp", "alt": "Follow Document demo", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-FootballStats/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-football-stats", "title": "Football Stats", "description": "This Adaptive Card Extension allows user to choose one of the top five European Football League to get information about current team standing. The data is retrieved using REST API provided by - https://api.football-data.org", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.13.1", "versionGroup": "1.13", "created": "2022-01-25", "updated": "2022-01-25", "authors": [ { "name": "Soumit Mukherjee", "account": "msoumit", "avatar": "https://github.com/msoumit.png" }, { "name": "Sourav Paul", "account": "XLR8-0", "avatar": "https://github.com/XLR8-0.png" }, { "name": "Soumyadeep Mukherjee", "account": "soumyadeep2207", "avatar": "https://github.com/soumyadeep2207.png" } ], "preview": { "src": "/images/previews/e42f06d32c2df072f28c9372766b09e2174f63227301673e8462aa72485972da.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-FootballStats", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-FootballStats/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-FootballStats", "descriptionParagraphs": [ "This Adaptive Card Extension allows user to choose one of the top five European Football League to get information about current team standing. The data is retrieved using REST API provided by - https://api.football-data.org" ], "previews": [ { "src": "/images/previews/e42f06d32c2df072f28c9372766b09e2174f63227301673e8462aa72485972da.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-Graph-JoinNewTeams/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-joinnewteam", "title": "Join New Team", "description": "This Adaptive Card Extension shows public Teams the user is not a member of and allows them to join the Team.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2022-02-28", "updated": "2023-03-06", "authors": [ { "name": "Aimery Thomas", "account": "a1mery", "avatar": "https://github.com/a1mery.png" } ], "preview": { "src": "/images/previews/2f1986ddcf7016b1bdf29372c0f1954b1d0de5c426e15911c1ffecdff7c4db14.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-Graph-JoinNewTeams", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-Graph-JoinNewTeams/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-Graph-JoinNewTeams", "descriptionParagraphs": [ "This Adaptive Card Extension shows how to us the Microsoft Graph to pull the list of teams for a tenant and how to programmatically add a user to the team." ], "previews": [ { "src": "/images/previews/2f1986ddcf7016b1bdf29372c0f1954b1d0de5c426e15911c1ffecdff7c4db14.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-Graph-UnreadEmails/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-graph-unreademails", "title": "Unread Emails Viewer", "description": "Checks the users inbox for unread emails", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.14.0", "versionGroup": "1.14", "created": "2021-12-06", "updated": "2022-05-04", "authors": [ { "name": "Nick Brown", "account": "techienickb", "avatar": "https://github.com/techienickb.png" } ], "preview": { "src": "/images/previews/72c0b254447f9ab426665b308163f8aec427d825a1c04eb2517bb06fbb0f98ee.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-Graph-UnreadEmails", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-Graph-UnreadEmails/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-Graph-UnreadEmails", "descriptionParagraphs": [ "This Adaptive Card Extension uses the Microsoft Graph to get unread emails in your inbox and displays that as a ACE" ], "previews": [ { "src": "/images/previews/72c0b254447f9ab426665b308163f8aec427d825a1c04eb2517bb06fbb0f98ee.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-ManageTeam/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-primarytextcard-manageteam", "title": "Display and Manage Team", "description": "Display all team members who directly reports to current viewing user.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2021-10-06", "updated": "2021-10-06", "authors": [ { "name": "Dipen Shah", "account": "dips365", "avatar": "https://github.com/dips365.png" } ], "preview": { "src": "/images/previews/44d572e01c992ae3173e4777ee212cdbe119934d42388aa62cc039fb078a24bf.webp", "alt": "Manage my Team", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-ManageTeam", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-ManageTeam/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-ManageTeam", "descriptionParagraphs": [ "Display all team members who directly reports to me using Graph API in ACEs card View with two button." ], "previews": [ { "src": "/images/previews/44d572e01c992ae3173e4777ee212cdbe119934d42388aa62cc039fb078a24bf.webp", "alt": "Manage my Team", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-ManageTeam/assets/ACEs2.gif", "alt": "Manage my Team", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-ManageTeam/assets/ACEs3.gif", "alt": "Manage my Team", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-ManageTeam/assets/ACEs4.gif", "alt": "Manage my Team", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-My-M365-Groups/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-my-m365-groups", "title": "My M365 Groups", "description": "Adaptive Card Extension that shows logged-in user M365 Unified Groups", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.14.0", "versionGroup": "1.14", "created": "2022-01-07", "updated": "2022-06-12", "authors": [ { "name": "Nanddeep Nachan", "account": "nanddeepn", "avatar": "https://github.com/nanddeepn.png" }, { "name": "Smita Nachan", "account": "SmitaNachan", "avatar": "https://github.com/SmitaNachan.png" } ], "preview": { "src": "/images/previews/234e5a48193072839bfe3c67991c1eb854a33fc6d1a396632c562bb35bf24f2c.webp", "alt": "My M365 Groups", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-My-M365-Groups", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-My-M365-Groups/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-My-M365-Groups", "descriptionParagraphs": [ "ACE with a PrimaryText card view and multiple quick views to display the logged-in user M365 Unified Groups." ], "previews": [ { "src": "/images/previews/234e5a48193072839bfe3c67991c1eb854a33fc6d1a396632c562bb35bf24f2c.webp", "alt": "My M365 Groups", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-My-Notifications/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-my-notifications", "title": "My Notifications", "description": "This Adaptive Card Extension shows real time notifications for Lists and Libraries", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.13.1", "versionGroup": "1.13", "created": "2021-11-25", "updated": "2021-11-25", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/fc70fa264697b80b41f6023694855fe68c1c13ec650a1a647e217ad5a37bacc0.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-My-Notifications", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-My-Notifications/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-My-Notifications", "descriptionParagraphs": [ "This Adaptive Card Extension allow user select any library or list to receive real time notifications when data changes. Create, Edit, Delete, Renamed... This ACE, use Microsoft Graph endpoint, SocketIO Client, connect to SocketIO List Server to get all the notifications." ], "previews": [ { "src": "/images/previews/fc70fa264697b80b41f6023694855fe68c1c13ec650a1a647e217ad5a37bacc0.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-MyEmails/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-myemails", "title": "My Notifications", "description": "This Adaptive Card Extension shows current users email using Microsoft Graph.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.13.1", "versionGroup": "1.13", "created": "2022-01-03", "updated": "2022-01-03", "authors": [ { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png" } ], "preview": { "src": "/images/previews/ce7bf725222c63985671300d17926b31338ae31986ff50cf009250d53f08a261.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-MyEmails", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-MyEmails/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-MyEmails", "descriptionParagraphs": [ "This sample shows how to build an ACE with a PrimaryText card view and a quick view to display current logged in user's emails." ], "previews": [ { "src": "/images/previews/ce7bf725222c63985671300d17926b31338ae31986ff50cf009250d53f08a261.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-MyShifts/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-myshifts", "title": "My SHifts", "description": "This sample shows how to build an ACE with a PrimaryText card view and a quick view to display current logged in user's immediate upcoming shifts.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.14.0", "versionGroup": "1.14", "created": "2022-02-07", "updated": "2022-02-07", "authors": [ { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png" } ], "preview": { "src": "/images/previews/dfd46d29dcd2b20aecf19231227622a81d65e080ac4c70af94f636ed3386a6a3.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-MyShifts", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-MyShifts/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-MyShifts", "descriptionParagraphs": [ "This sample shows how to build an ACE with a PrimaryText card view and a quick view to display current logged in user's immediate upcoming shift in card view and all upcoming shifts in Quick view." ], "previews": [ { "src": "/images/previews/dfd46d29dcd2b20aecf19231227622a81d65e080ac4c70af94f636ed3386a6a3.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-PeopleDetails/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-peopledetails", "title": "People Details", "description": "This Adaptive Card Extension shows general CRUD operations for people details using SharePoint list and Adaptive Card which involves multiple QuickViews and pnp js", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.13.1", "versionGroup": "1.13", "created": "2022-01-03", "updated": "2022-01-03", "authors": [ { "name": "Soumyadeep Mukherjee", "account": "soumyadeep2207", "avatar": "https://github.com/soumyadeep2207.png" }, { "name": "Soumit Mukherjee", "account": "msoumit", "avatar": "https://github.com/msoumit.png" }, { "name": "Sourav Paul", "account": "XLR8-0", "avatar": "https://github.com/XLR8-0.png" } ], "preview": { "src": "/images/previews/ba12be63c77d48cf3b4eb1581e6b710f465bf2084d026206516536598d34da7a.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-PeopleDetails", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-PeopleDetails/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-PeopleDetails", "descriptionParagraphs": [ "This Adaptive Card Extension shows general CRUD operations for people details using SharePoint list and Adaptive Card which involves multiple QuickViews and pnp js." ], "previews": [ { "src": "/images/previews/ba12be63c77d48cf3b4eb1581e6b710f465bf2084d026206516536598d34da7a.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-PlannerTasks/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-ace-plannertasks", "title": "Planner Tasks", "description": "Adaptive Card displays of Planner Tasks", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2021-10-06", "updated": "2021-10-06", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/bb9c713a1688b9019d1cdd7c7851d0183b27e71d0d64ab4901f36eb6eb9a78bd.webp", "alt": "London Transport", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-PlannerTasks", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-PlannerTasks/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-PlannerTasks", "descriptionParagraphs": [ "ACE with a PrimaryText card view and multiple quick views to display the logged-in user Planner Tasks from all associated plans." ], "previews": [ { "src": "/images/previews/bb9c713a1688b9019d1cdd7c7851d0183b27e71d0d64ab4901f36eb6eb9a78bd.webp", "alt": "London Transport", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.13.0-beta.20.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-RecentFiles/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-recentfiles", "title": "Recent files", "description": "Viva Connection Adaptive Card Extension (ACE) that shows the recent files for the current user.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.14.0", "versionGroup": "1.14", "created": "2022-04-11", "updated": "2022-04-11", "authors": [ { "name": "Guido Zambarda", "account": "GuidoZam", "avatar": "https://github.com/GuidoZam.png" } ], "preview": { "src": "/images/previews/dee3fc6b3ab1f4335e6e9031b3a2f38ff1b844f46a785eea0442e664f60fd809.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-RecentFiles", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-RecentFiles/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-RecentFiles", "descriptionParagraphs": [ "Viva Connection Adaptive Card Extension (ACE) that shows the recent files for the current user." ], "previews": [ { "src": "/images/previews/dee3fc6b3ab1f4335e6e9031b3a2f38ff1b844f46a785eea0442e664f60fd809.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-Search/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-search", "title": "Search", "description": "Viva Connection Adaptive Card Extension (ACE) that allows for search.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.16.0", "versionGroup": "1.16", "created": "2022-12-09", "updated": "2022-12-09", "authors": [ { "name": "Marcin Wojciechowski", "account": "mgwojciech", "avatar": "https://github.com/mgwojciech.png" } ], "preview": { "src": "/images/previews/72164cab3f35524f44288c52024e79047e64ac2735387999353fbc1e5e2e00a2.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-Search", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-Search/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-Search", "descriptionParagraphs": [ "Simple search client in Adaptive Card. Thanks to Joao Mendes for the template! In ACE properties You can configure initial query.Value from the input will be appended with AND keyword.Thanks to that you can have multiple ACEs with different results" ], "previews": [ { "src": "/images/previews/72164cab3f35524f44288c52024e79047e64ac2735387999353fbc1e5e2e00a2.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-Service-Health/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-ace-servicehealth", "title": "Status of Tenant Service Health", "description": "Adaptive Card displays of Microsoft 365 Service Health", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2021-10-06", "updated": "2021-10-28", "authors": [ { "name": "Anoop Tatti", "account": "anoopt", "avatar": "https://github.com/anoopt.png" } ], "preview": { "src": "/images/previews/9f87ee16062d79efe66d01cf2f803d3680a4c604015d923e8f8a91e841c45096.webp", "alt": "London Transport", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-Service-Health", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-Service-Health/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-Service-Health", "descriptionParagraphs": [ "ACE with a card view and multiple quick views to display the status of the affected services in a Microsft 365 tenant." ], "previews": [ { "src": "/images/previews/9f87ee16062d79efe66d01cf2f803d3680a4c604015d923e8f8a91e841c45096.webp", "alt": "London Transport", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-SkillsOverview/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-primarytextcard-skillsoverview", "title": "Skills Overview", "description": "This Adaptive Card Extension gives an overview of the SharePoint skills in the current SharePoint site.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "JavaScript" ], "version": "1.23.0", "versionGroup": "1.23", "created": "2026-08-05", "updated": "2026-08-05", "authors": [ { "name": "Aimery Thomas", "account": "a1mery", "avatar": "https://github.com/a1mery.png" } ], "preview": { "src": "/images/previews/331078fa36980f03d54ba6e58e117ea14fbfddd2c1eeb753040598c5417e5b75.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-SkillsOverview", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-SkillsOverview/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-SkillsOverview", "descriptionParagraphs": [ "This Adaptive Card Extension gives an overview of the SharePoint skills in the current SharePoint site. The card displays the total number of skills found in the site. From the card, users can open a quick view that lists the latest skills, and drill into a detail view to read the description of a selected skill." ], "previews": [ { "src": "/images/previews/331078fa36980f03d54ba6e58e117ea14fbfddd2c1eeb753040598c5417e5b75.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-SkillsOverview/assets/SkillsOverview-quickView-1.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-SkillsOverview/assets/SkillsOverview-quickView-2.png", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Office", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.23.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[1].order", "message": "Preview order is duplicated.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[2].order", "message": "Preview order is duplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 6 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-StockBitcoinFeed/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-stockbitcoinfeed", "title": "Price updates on stocks, rex and crypto", "description": "Display the last price udpates of US stocks, forex and crypto with the help of finnhub APIs.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2022-09-11", "updated": "2022-09-11", "authors": [ { "name": "Kunj Balkrishna Sangani", "account": "kunj-sangani", "avatar": "https://avatars.githubusercontent.com/u/25693207?v=4" } ], "preview": { "src": "/images/previews/f6a5557a1dc7d52912c4f54cefbf7fd09ff623c60f6de4b0055f425f5226a268.webp", "alt": "Demo on the ACE experience", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-StockBitcoinFeed", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-StockBitcoinFeed/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-StockBitcoinFeed", "descriptionParagraphs": [ "Adaptive card extension to display the last price udpates of US stocks, forex and crypto with the help of finnhub APIs." ], "previews": [ { "src": "/images/previews/f6a5557a1dc7d52912c4f54cefbf7fd09ff623c60f6de4b0055f425f5226a268.webp", "alt": "Demo on the ACE experience", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-StockBitcoinFeed/assets/stock-bitcoin-configuration.jpeg", "alt": "Configuration options", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-TfL-Status/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-ace-londonservices", "title": "Status of London Transport Services", "description": "Adaptive Card displays of London Train services and status", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.17.2", "versionGroup": "1.17", "created": "2021-10-06", "updated": "2023-06-16", "authors": [ { "name": "Anoop Tatti", "account": "anoopt", "avatar": "https://github.com/anoopt.png" } ], "preview": { "src": "/images/previews/9c11e4f64a38abcf5e3fc79e8768f6feceb698b059f77ad110e0fa948207efc3.webp", "alt": "London Transport", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-TfL-Status", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-TfL-Status/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-TfL-Status", "descriptionParagraphs": [ "ACE with multiple card and quick views to display the status of London Train services and allows the user to mark a train line as their favourite with that data using Microsoft Graph." ], "previews": [ { "src": "/images/previews/9c11e4f64a38abcf5e3fc79e8768f6feceb698b059f77ad110e0fa948207efc3.webp", "alt": "London Transport", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.17.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-WordOfTheDay/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-wordoftheday", "title": "Word Of The Day", "description": "Viva Connection Adaptive Card Extension (ACE) that shows the word of the day.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2022-04-14", "updated": "2022-04-14", "authors": [ { "name": "Guido Zambarda", "account": "GuidoZam", "avatar": "https://github.com/GuidoZam.png" } ], "preview": { "src": "/images/previews/33c25e8ddc2ae36d4f9d8f25e060d979d17934b147ac56ff70a74806e9494b48.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-WordOfTheDay", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-WordOfTheDay/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-WordOfTheDay", "descriptionParagraphs": [ "Viva Connection Adaptive Card Extension (ACE) that shows the word of the day." ], "previews": [ { "src": "/images/previews/33c25e8ddc2ae36d4f9d8f25e060d979d17934b147ac56ff70a74806e9494b48.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-WorkIQ-TodaySummary/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-primarytextcard-workiq-todaysummary", "title": "Today with Work IQ (PrimaryTextCard-WorkIQ-TodaySummary)", "description": "Viva Connections card showing a Work IQ-generated 'what's relevant today' summary, via a C# Azure Function OBO proxy.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "TypeScript" ], "version": "1.23.2", "versionGroup": "1.23", "created": "2026-07-10", "updated": "2026-07-10", "authors": [ { "name": "Ramin Ahmadi", "account": "AhmadiRamin", "avatar": "https://github.com/AhmadiRamin.png" } ], "preview": { "src": "/images/previews/8af1dd9fa68e00e28524bda23a33edecf7debe0aa96b17844262081d8e1553e8.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-WorkIQ-TodaySummary", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-WorkIQ-TodaySummary/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-WorkIQ-TodaySummary", "descriptionParagraphs": [ "A Primary Text Card ACE for the Viva Connections dashboard that shows a short, Work IQ-generated 'what's relevant to you today' summary for the signed-in user, pulled from their files, meetings, and messages. The Quick View expands into the underlying referenced items. Calls the Work IQ REST Chat API through a C# Azure Function proxy that performs an On-Behalf-Of token exchange and caches responses to control Copilot Credits spend." ], "previews": [ { "src": "/images/previews/8af1dd9fa68e00e28524bda23a33edecf7debe0aa96b17844262081d8e1553e8.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Work IQ overview", "description": "Learn about the Work IQ API for building AI applications that securely reason over workplace intelligence data.", "url": "https://learn.microsoft.com/en-us/microsoft-365/copilot/extensibility/work-iq/" }, { "title": "Work IQ REST API overview", "description": "Programmatically engage in multiturn conversations with Microsoft 365 Copilot using the Work IQ Chat API.", "url": "https://learn.microsoft.com/en-us/microsoft-365/copilot/extensibility/work-iq/rest/overview" }, { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Microsoft identity platform: On-Behalf-Of flow", "description": "How a confidential client exchanges a user's token for a token to a downstream API.", "url": "https://learn.microsoft.com/en-us/entra/identity-platform/v2-oauth2-on-behalf-of-flow" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.23.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/PrimaryTextCard-my-calendar-plan/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-my-calendar", "title": "My Calendar Plan", "description": "This ACE show user events for specific day.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.13.1", "versionGroup": "1.13", "created": "2022-02-25", "updated": "2022-02-25", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/40f7fa2872717d52a1d404793b7624fe2bc481e27697efe1cad884c36c325feb.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-my-calendar-plan", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/PrimaryTextCard-my-calendar-plan/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FPrimaryTextCard-my-calendar-plan", "descriptionParagraphs": [ "This ACE show user events for specific day." ], "previews": [ { "src": "/images/previews/40f7fa2872717d52a1d404793b7624fe2bc481e27697efe1cad884c36c325feb.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.14.0.", "severity": "error" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-aces:samples/SearchCard-SamplesGallerySearch/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-searchcard-samples-gallery", "title": "Search Samples Gallery ACE", "description": "Viva Connection Adaptive Card Extension (ACE) that shows how to create a search card.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.18.0", "versionGroup": "1.18", "created": "2023-10-31", "updated": "2023-10-31", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/paolopia.png" } ], "preview": { "src": "/images/previews/57d75bde83e49f415be82e1c04989b3b3c2a6e5e4475a45bd4c9a8fb1d9c2f10.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/SearchCard-SamplesGallerySearch", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/SearchCard-SamplesGallerySearch/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2FSearchCard-SamplesGallerySearch", "descriptionParagraphs": [ "Viva Connection Adaptive Card Extension (ACE) that shows how to create a search card." ], "previews": [ { "src": "/images/previews/57d75bde83e49f415be82e1c04989b3b3c2a6e5e4475a45bd4c9a8fb1d9c2f10.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/SearchCard-SamplesGallerySearch/assets/search-quickview.png", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" }, { "title": "New Search Card Template for Adaptive Card Extensions", "description": "Introduction to new Search Card Template for Adaptive Card Extensions.", "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/release-1.18#new-search-card-template-for-adaptive-card-extensions" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-aces:samples/ace-cardgallery/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-ace-cardgallery", "title": "Adaptive Cards Sample Gallery", "description": "11 Adaptive Card Extension Samples", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2021-09-28", "updated": "2021-09-28", "authors": [ { "name": "Derek Cash-Peterson", "account": "dcashpeterson", "avatar": "https://github.com/dcashpeterson.png" } ], "preview": { "src": "/images/previews/25879226b74107ad2e692609997e079d6c6da57892a2bea11ea1317c4ab48716.webp", "alt": "Gallery of 11 samples", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ace-cardgallery", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/ace-cardgallery/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2Face-cardgallery", "descriptionParagraphs": [ "This solution provides a set of eleven (11) Adaptive Card Extensions to demonstrate the various features that can be implemented roughly based on the samples provided by the Adaptive Card documentation." ], "previews": [ { "src": "/images/previews/25879226b74107ad2e692609997e079d6c6da57892a2bea11ea1317c4ab48716.webp", "alt": "Gallery of 11 samples", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:samples/design-card/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-design-card", "title": "Designing Card Templates", "description": "This sample application shows how to implement all of the layout options that are available in the component base model of the SharePoint Framework (SPFx) Adaptive Card Extensions (ACEs) Card Views, accordingly to the documentation available.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.18.2", "versionGroup": "1.18", "created": "2024-01-24", "updated": "2024-01-24", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/paolopia.png" } ], "preview": { "src": "/images/previews/55f5c7826ba68bb330d86ecf618490890a0a8ec168c95637f87dbceaccd84c3f.webp", "alt": "Image large Card View with a title and an action button", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/design-card", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/design-card/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fsamples%2Fdesign-card", "descriptionParagraphs": [ "This sample application shows how to implement all of the layout options that are available in the component base model of the SharePoint Framework (SPFx) Adaptive Card Extensions (ACEs) Card Views, accordingly to the documentation available." ], "previews": [ { "src": "/images/previews/55f5c7826ba68bb330d86ecf618490890a0a8ec168c95637f87dbceaccd84c3f.webp", "alt": "Image large Card View with a title and an action button", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/design-card/assets/Viva-Insights.png", "alt": "Image large Card View with a title", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/design-card/assets/Feedback-Survey.png", "alt": "Image large Card View with a title, a text input, and a submission button", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/design-card/assets/Location-Tracker.png", "alt": "Image large Card View with a title, a text input, and an action button", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/design-card/assets/App-Name.png", "alt": "Image large Card View with a title, and a text input", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/design-card/assets/Approvals.png", "alt": "Basic medium Card View with title and action button", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/design-card/assets/Viva-Topics.png", "alt": "Basic medium Card View with title", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/design-card/assets/Help-Desk.png", "alt": "Basic large Card View with title, input text, and submission button", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/design-card/assets/Poll.png", "alt": "Primary Text medium Card View with title, body, and action button", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/design-card/assets/Shifts.png", "alt": "Primary Text medium Card View with title, and body", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/design-card/assets/Training.png", "alt": "Primary Text large Card View with title, body, input text, and submission button", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/design-card/assets/Chat-GPT.png", "alt": "Input Text large Card View with title, input text, and submission button", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/design-card/assets/App-Name-2.png", "alt": "Input Text large Card View with title and input text", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/samples/design-card/assets/Search-Box.png", "alt": "Search Box Card View with title, search box, and search results preview", "isFallback": false } ], "references": [ { "title": "Getting started with SharePoint Framework", "description": "Learn how to start developing SharePoint Framework solutions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant" }, { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Designing Viva Connections custom cards for your dashboard", "description": "Official guidelines about how to design the Card Views of a SharePoint Framework Adaptive Card Extension (ACE).", "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/designing-card" }, { "title": "Microsoft 365 Patterns and Practices", "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.", "url": "https://aka.ms/m365pnp" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.package-mismatch", "field": "metadata.SPFX-VERSION", "message": "Package dependencies declare 1.23.0.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-aces:scenarios/ace-data-api-builder/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-scenarios-ace-data-api-builder", "title": "Exposing business data in Microsoft 365 using Azure Data API builder", "description": "This is a sample application that shows you how to expose business data in Microsoft Viva Connections consuming a back-end API implemented with the preview version of Azure Data API builder.", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Teams", "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React", "TypeScript" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2023-04-04", "updated": "2023-04-04", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/paolopia.png" }, { "name": "Davide Mauri", "account": "yorek", "avatar": "https://github.com/yorek.png" } ], "preview": { "src": "/images/previews/87d457a91fc9139a603c797fe6c8979e7186f997acf697e0d25f793de5a1c081.webp", "alt": "The Adaptive Card Extension UI", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/scenarios/ace-data-api-builder", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/scenarios/ace-data-api-builder/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fscenarios%2Face-data-api-builder", "descriptionParagraphs": [ "This is a sample application that shows you how to expose business data in Microsoft Viva Connections consuming a back-end API implemented with the preview version of Azure Data API builder." ], "previews": [ { "src": "/images/previews/87d457a91fc9139a603c797fe6c8979e7186f997acf697e0d25f793de5a1c081.webp", "alt": "The Adaptive Card Extension UI", "isFallback": false } ], "references": [ { "title": "Getting started with SharePoint Framework", "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant" }, { "title": "Build your first SharePoint Adaptive Card Extension", "description": "Learn how to develop your first Adaptive Card Extension (ACE) using SharePoint Framework (SPFx).", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension" }, { "title": "Building for Microsoft teams", "description": "Learn how to develop for Microsoft Teams using SharePoint Framework.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview" }, { "title": "Use Microsoft Graph in your solution", "description": "Learn how to consume Microsoft Graph using SharePoint Framework (SPFx).", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis" }, { "title": "Connect to Azure AD-secured APIs in SharePoint Framework solutions", "description": "Learn how to consume Azure AD-secured APIs using SharePoint Framework (SPFx).", "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/use-aadhttpclient" }, { "title": "Data API builder for Azure Databases", "description": "Learn about Data API builder for Azure Databases.", "url": "https://aka.ms/dab" }, { "title": "Data API builder sample for Microsoft 365", "description": "Here you can find the DAB model and settings used in this sample.", "url": "https://github.com/yorek/dab-microsoft365-demo" }, { "title": "Microsoft 365 Patterns and Practices", "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.", "url": "https://aka.ms/m365pnp" } ], "products": [ "SharePoint", "Viva", "Microsoft Teams", "AzureAD", "Microsoft Graph" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-aces:scenarios/ace-lob/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-scenario-ace-lob", "title": "LOB integration - ACE scenario", "description": "Starting point on building LOB API connected ACE extension for Microsoft Viva", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.16.0", "versionGroup": "1.16", "created": "2021-06-10", "updated": "2022-12-09", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/582bf4e6ff95cfece553dbe9a05067150bebd03d89f3817628e227067824eccc.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/scenarios/ace-lob", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/scenarios/ace-lob/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fscenarios%2Face-lob", "descriptionParagraphs": [], "previews": [ { "src": "/images/previews/582bf4e6ff95cfece553dbe9a05067150bebd03d89f3817628e227067824eccc.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "array.invalid", "field": "longDescription", "message": "Expected an array of non-empty strings.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "array.entry-invalid", "field": "longDescription[0]", "message": "Invalid array entry was omitted; the original finding remains available.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-aces:scenarios/ace-microsoftgraph/assets/sample.json:0", "slug": "pnp-sp-dev-fx-aces-pnp-sp-fx-aces-scenario-ace-microsoftgraph", "title": "Microsoft Graph - ACE Scenario", "description": "Starting point on building Microsoft Graph connected ACE extension for Microsoft Viva", "repository": "pnp/sp-dev-fx-aces", "family": "Adaptive Card Extensions", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.16.0", "versionGroup": "1.16", "created": "2021-06-10", "updated": "2022-12-09", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/dbed9a56cb2cecff8c8de51717bd450c05c25b02512bdfc8927459d3e2f401f3.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-aces/tree/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/scenarios/ace-microsoftgraph", "revisionUrl": "https://github.com/pnp/sp-dev-fx-aces/commit/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624", "metadataUrl": "https://github.com/pnp/sp-dev-fx-aces/blob/714a3eb9a0cb53a4c3973d10ad8f3c2608fca624/scenarios/ace-microsoftgraph/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-aces%2Ftree%2Fmain%2Fscenarios%2Face-microsoftgraph", "descriptionParagraphs": [], "previews": [ { "src": "/images/previews/dbed9a56cb2cecff8c8de51717bd450c05c25b02512bdfc8927459d3e2f401f3.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "array.invalid", "field": "longDescription", "message": "Expected an array of non-empty strings.", "severity": "error" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "array.entry-invalid", "field": "longDescription[0]", "message": "Invalid array entry was omitted; the original finding remains available.", "severity": "error" } ], "quality": { "needsReview": true, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-extensions:samples/jquery-application-toastr/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-jquery-application-toastr", "title": "Toastr Application Customizer", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "jQuery" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2018-02-01", "updated": "2024-10-05", "authors": [ { "name": "Chris Kent", "account": "thechriskent", "avatar": "https://avatars.githubusercontent.com/u/8364109?s=460&v=4" } ], "preview": { "src": "/images/previews/776c605f579e1f414ba77b3eff0a66fa4cd627203afb951eb90210b82bb497fc.webp", "alt": "Toastr Application Customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/jquery-application-toastr", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/jquery-application-toastr/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjquery-application-toastr", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/776c605f579e1f414ba77b3eff0a66fa4cd627203afb951eb90210b82bb497fc.webp", "alt": "Toastr Application Customizer", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/jquery-application-toastr/assets/DeployToCatalog.png", "alt": "Toastr Application Customizer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/jquery-field-itemorder/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-jquery-field-itemorder", "title": "Item Order", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Field customizer" ], "technologies": [ "jQuery" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2019-10-10", "updated": "2019-10-10", "authors": [ { "name": "Chris Kent", "account": "thechriskent", "avatar": "https://avatars.githubusercontent.com/u/8364109?s=460&v=4" } ], "preview": { "src": "/images/previews/60d884fee3c7d89287515a97779529880349e9f1d3d9852bdf89b37af618f103.webp", "alt": "Item Order", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/jquery-field-itemorder", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/jquery-field-itemorder/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjquery-field-itemorder", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/60d884fee3c7d89287515a97779529880349e9f1d3d9852bdf89b37af618f103.webp", "alt": "Item Order", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/jquery-field-itemorder/assets/DeployToCatalog.png", "alt": "Item Order", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/jquery-field-itemorder/assets/OrderableView.PNG", "alt": "Item Order", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/jquery-field-itemorder/assets/PlaceholderField.PNG", "alt": "Item Order", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/jquery-field-itemorder/assets/spfxItemOrder-NoPermissions.png", "alt": "Item Order", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/jquery-field-itemorder/assets/spfxItemOrder-Preview.png", "alt": "Item Order", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first Field Customizer extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-application-alert-message/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-application-alert-message", "title": "Application Alert Message", "description": "This application customizer will display the alert message based on the items from the list.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "JavaScript" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-07-09", "updated": "2020-07-09", "authors": [ { "name": "Sudharsan Kesavanarayanan", "account": "sudharsank", "avatar": "https://github.com/sudharsank.png" } ], "preview": { "src": "/images/previews/1e6e73a3f4e97c0c3c9b3fab7e5ec621354894370ef60ab37883eca80acf04fa.webp", "alt": "Application Alert Message", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-alert-message", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-alert-message/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-application-alert-message", "descriptionParagraphs": [ "This application customizer will display the alert message based on the items from the list." ], "previews": [ { "src": "/images/previews/1e6e73a3f4e97c0c3c9b3fab7e5ec621354894370ef60ab37883eca80acf04fa.webp", "alt": "Application Alert Message", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-application-analytics/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-application-analytics", "title": "Google Analytics Application Customizer", "description": "In this sample is possible to see how to implement Google Analytics through SPFx Extensions Application Customizers", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "JavaScript" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2020-10-07", "updated": "2024-10-23", "authors": [ { "name": "Giuliano De Luca", "account": "giuleon", "avatar": "https://github.com/giuleon.png" }, { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" } ], "preview": { "src": "/images/previews/9ae6194c4ec09d5119ec41bbaf589a3b071794b8cfc711647848ef52d8b1d1e1.webp", "alt": "Google Analytics Application Customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-analytics", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-analytics/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-application-analytics", "descriptionParagraphs": [ "In this sample is possible to see how to implement Google Analytics through SPFx Extensions Application Customizers" ], "previews": [ { "src": "/images/previews/9ae6194c4ec09d5119ec41bbaf589a3b071794b8cfc711647848ef52d8b1d1e1.webp", "alt": "Google Analytics Application Customizer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-application-appinsights-advanced/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-application-appinsights-advanced", "title": "JS Application AppInsights Advanced", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "JavaScript" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-09-23", "updated": "2020-09-23", "authors": [ { "name": "Sudharsan Kesavanarayanan", "account": "sudharsank", "avatar": "https://github.com/sudharsank.png" }, { "name": "Xiao Li", "account": "xiao-lix", "avatar": "https://github.com/xiao-lix.png" } ], "preview": { "src": "/images/previews/f330c620ee30e700794e265d75da9c866232ebb56a84a4125fe4e5222de0c493.webp", "alt": "JS Application AppInsights Advanced", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-appinsights-advanced", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-appinsights-advanced/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-application-appinsights-advanced", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/f330c620ee30e700794e265d75da9c866232ebb56a84a4125fe4e5222de0c493.webp", "alt": "JS Application AppInsights Advanced", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-appinsights-advanced/assets/AppInsights.png", "alt": "JS Application AppInsights Advanced", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-appinsights-advanced/assets/PageViewAnalysis.png", "alt": "JS Application AppInsights Advanced", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-appinsights-advanced/assets/Retention.png", "alt": "JS Application AppInsights Advanced", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-appinsights-advanced/assets/UserFlows.png", "alt": "JS Application AppInsights Advanced", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-appinsights-advanced/assets/UsersChart.png", "alt": "JS Application AppInsights Advanced", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-application-appinsights/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-application-appinsights", "title": "Injecting Javascript with Sharepoint Framework Extensions - Azure Application Insights", "description": "Sample SharePoint Framework extension project injecting Javascript code to enable Azure App Insights monitoring and statistics.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "JavaScript" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2019-08-29", "updated": "2019-08-29", "authors": [ { "name": "Guillaume Sellier", "account": "GSellier", "avatar": "https://github.com/GSellier.png" }, { "name": "Luis Valencia", "account": "levalencia", "avatar": "https://github.com/levalencia.png" }, { "name": "Xiao Li", "account": "xiao-lix", "avatar": "https://github.com/xiao-lix.png" } ], "preview": { "src": "/images/previews/86c284470a1c4930cdfd2d509e9ab99cb89cec5e145512d1ee20e2fbc411c3a6.webp", "alt": "Injecting Javascript with Sharepoint Framework Extensions - Azure Application Insights", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-appinsights", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-appinsights/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-application-appinsights", "descriptionParagraphs": [ "Sample SharePoint Framework extension project injecting Javascript code to enable Azure App Insights monitoring and statistics." ], "previews": [ { "src": "/images/previews/86c284470a1c4930cdfd2d509e9ab99cb89cec5e145512d1ee20e2fbc411c3a6.webp", "alt": "Injecting Javascript with Sharepoint Framework Extensions - Azure Application Insights", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-application-dynamically-importing-styles/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-application-dynamically-importing-styles", "title": "Optimize CSS/SCSS Style Bundling and Dynamic Loading of Styles", "description": "This example illustrates how style files can be dynamically bundled into multiple .js bundle files and then be individually imported at runtime.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "JavaScript" ], "version": "1.7.1", "versionGroup": "1.7", "created": "2019-01-21", "updated": "2019-01-21", "authors": [ { "name": "David Warner II", "account": "PopWarner", "avatar": "https://avatars.githubusercontent.com/u/10676147?s=460&u=9e4e74223c4ffb430fb77c97892a84b286df1921&v=4" } ], "preview": { "src": "/images/previews/94182c0acab0e5b6809d89d4933b411e04dbd72cb67ad7ac815955f0cd8be3e5.webp", "alt": "Optimize CSS/SCSS Style Bundling and Dynamic Loading of Styles", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-dynamically-importing-styles", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-dynamically-importing-styles/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-application-dynamically-importing-styles", "descriptionParagraphs": [ "This example illustrates how style files can be dynamically bundled into multiple .js bundle files and then be individually imported at runtime." ], "previews": [ { "src": "/images/previews/94182c0acab0e5b6809d89d4933b411e04dbd72cb67ad7ac815955f0cd8be3e5.webp", "alt": "Optimize CSS/SCSS Style Bundling and Dynamic Loading of Styles", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-dynamically-importing-styles/assets/PostBundling.png", "alt": "Optimize CSS/SCSS Style Bundling and Dynamic Loading of Styles", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-dynamically-importing-styles/assets/PreBundling.png", "alt": "Optimize CSS/SCSS Style Bundling and Dynamic Loading of Styles", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.7.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-application-graph-client/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-application-graph-client", "title": "GraphClient from Modern Teamsite", "description": "Simple example to call the Graph via the new GraphHttpClient (No ADAL) for getting the group title, mail, and description.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "JavaScript" ], "version": "1.1.0", "versionGroup": "1.1", "created": "2017-06-09", "updated": "2017-06-09", "authors": [ { "name": "Simon Ågren", "account": "simonagren", "avatar": "https://github.com/simonagren.png" } ], "preview": { "src": "/images/previews/b55191f045643e197dafc5927a94594f408bd7243b2a4b5ca122421e0e433c27.webp", "alt": "GraphClient from Modern Teamsite", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-graph-client", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-graph-client/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-application-graph-client", "descriptionParagraphs": [ "Simple example to call the Graph via the new GraphHttpClient (No ADAL) for getting the group title, mail, and description." ], "previews": [ { "src": "/images/previews/b55191f045643e197dafc5927a94594f408bd7243b2a4b5ca122421e0e433c27.webp", "alt": "GraphClient from Modern Teamsite", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.1.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-application-gtm-injector/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-application-gtm-injector", "title": "Google Tag Manager Injector", "description": "This SharePoint Framework (SPFx) Application Customizer injects Google Tag Manager (GTM) into SharePoint Modern pages, enabling analytics and tag management across your tenant. It initializes the standard GTM dataLayer, loads the GTM script via SPComponentLoader, and hooks into SharePoint's navigation events to track Single Page Application (SPA) route changes — ensuring every page view is captured without a full browser reload.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "JavaScript" ], "version": "1.22.2", "versionGroup": "1.22", "created": "2026-04-01", "updated": "2026-04-01", "authors": [ { "name": "@saiiiiiii", "account": "saiiiiiii", "avatar": "https://github.com/saiiiiiii.png" } ], "preview": { "src": "/images/previews/957014352a202371f1bbf66da422e3b59a20880622f1dd8176b11cd7bd9bcae9.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-gtm-injector", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-gtm-injector/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-application-gtm-injector", "descriptionParagraphs": [ "This SharePoint Framework (SPFx) Application Customizer injects Google Tag Manager (GTM) into SharePoint Modern pages, enabling analytics and tag management across your tenant. It initializes the standard GTM dataLayer, loads the GTM script via SPComponentLoader, and hooks into SharePoint's navigation events to track Single Page Application (SPA) route changes — ensuring every page view is captured without a full browser reload." ], "previews": [ { "src": "/images/previews/957014352a202371f1bbf66da422e3b59a20880622f1dd8176b11cd7bd9bcae9.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.22.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-application-header-toggler/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-application-header-toggler", "title": "Site Header Toggler", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "JavaScript" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2019-09-19", "updated": "2019-09-19", "authors": [ { "name": "Ram Prasad Meenavalli", "account": "RamPrasadMeenavalli", "avatar": "https://github.com/RamPrasadMeenavalli.png" } ], "preview": { "src": "/images/previews/f7ac099a4c29cb8653a93f6b1b7dcf9b0283053c9722481df101c148f81c61e6.webp", "alt": "Site Header Toggler", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-header-toggler", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-header-toggler/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-application-header-toggler", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/f7ac099a4c29cb8653a93f6b1b7dcf9b0283053c9722481df101c148f81c61e6.webp", "alt": "Site Header Toggler", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-application-intranet-searchbox/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-application-intranet-searchbox", "title": "Intranet Search Box", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "JavaScript" ], "version": "1.8.0", "versionGroup": "1.8", "created": "2019-05-16", "updated": "2019-05-16", "authors": [ { "name": "Martin Hatch", "account": "MartinHatch", "avatar": "https://github.com/MartinHatch.png" } ], "preview": { "src": "/images/previews/7c186a7e7a11ca5e9afe5f6c94dcadf9d34882351600cff6821feb91979aa6b6.webp", "alt": "Intranet Search Box", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-intranet-searchbox", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-intranet-searchbox/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-application-intranet-searchbox", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/7c186a7e7a11ca5e9afe5f6c94dcadf9d34882351600cff6821feb91979aa6b6.webp", "alt": "Intranet Search Box", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-intranet-searchbox/assets/Theme_Blue.png", "alt": "Intranet Search Box", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-intranet-searchbox/assets/Theme_Dark.png", "alt": "Intranet Search Box", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-intranet-searchbox/assets/Theme_Orange.png", "alt": "Intranet Search Box", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-intranet-searchbox/assets/Theme_Purple.png", "alt": "Intranet Search Box", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.8.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-application-layout-customizer/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-application-layout-customizer", "title": "SharePoint Page Indexer", "description": "A SharePoint Framework (SPFx) Application Customizer that applies a responsive 3-column grid layout to SharePoint Modern pages. Provides a Fluent-styled floating toolbar and modal panel for live column-width configuration, persisted via localStorage.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "TypeScript" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2026-03-11", "updated": "2026-03-11", "authors": [ { "name": "Sai Siva Ram Bandaru", "account": "saiiiiiii", "avatar": "https://avatars.githubusercontent.com/u/46020510?v=4" } ], "preview": { "src": "/images/previews/82751df16e559a8b8e9caa2ae1e4e3c5e0a277643922623dc7152e454cb56554.webp", "alt": "SharePoint Page Layout Customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-layout-customizer", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-layout-customizer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-application-layout-customizer", "descriptionParagraphs": [ "A SharePoint Framework (SPFx) Application Customizer that applies a responsive 3-column grid layout to SharePoint Modern pages. Provides a Fluent-styled floating toolbar and modal panel for live column-width configuration, persisted via localStorage." ], "previews": [ { "src": "/images/previews/82751df16e559a8b8e9caa2ae1e4e3c5e0a277643922623dc7152e454cb56554.webp", "alt": "SharePoint Page Layout Customizer", "isFallback": false } ], "references": [ { "title": "Getting started with SharePoint Framework", "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant" }, { "title": "Build your first SharePoint Framework Extension", "description": "Learn how to build your first SharePoint Framework Application Customizer.", "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension" }, { "title": "Microsoft 365 Patterns and Practices", "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.", "url": "https://aka.ms/m365pnp" }, { "title": "PnPjs Documentation", "description": "PnPjs is a collection of fluent libraries for consuming SharePoint, Graph, and Office 365 REST APIs.", "url": "https://pnp.github.io/pnpjs/" } ], "products": [ "SharePoint", "Office" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-application-listdrivenplaceholders/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-application-listdrivenplaceholders", "title": "List-Driven Placeholders", "description": "This solution deploys a list that allows end users to manage content that will appear in placeholders, via a SharePoint Framework application customizer extension.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "JavaScript" ], "version": "1.2.0", "versionGroup": "1.2", "created": "2017-09-05", "updated": "2017-09-05", "authors": [ { "name": "Matt Jimison", "account": "mjimison", "avatar": "https://github.com/mjimison.png" } ], "preview": { "src": "/images/previews/c7e20a337f0f3f5f8210e4e37a2552f66cbc63ed00df0fb0172a6ed72532918e.webp", "alt": "List-Driven Placeholders", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-listdrivenplaceholders", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-listdrivenplaceholders/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-application-listdrivenplaceholders", "descriptionParagraphs": [ "This solution deploys a list that allows end users to manage content that will appear in placeholders, via a SharePoint Framework application customizer extension." ], "previews": [ { "src": "/images/previews/c7e20a337f0f3f5f8210e4e37a2552f66cbc63ed00df0fb0172a6ed72532918e.webp", "alt": "List-Driven Placeholders", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.2.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-application-microsoft-clarity/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-application-microsoft-clarity", "title": "Microsoft Clarity for modern SharePoint", "description": "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", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2021-11-23", "updated": "2024-10-19", "authors": [ { "name": "João Ferreira", "account": "joaoferreira", "avatar": "https://github.com/joaoferreira.png" }, { "name": "NIshkalank Bezawada (MVP)", "account": "NishkalankBezawada", "avatar": "https://github.com/NishkalankBezawada.png" } ], "preview": { "src": "/images/previews/152d3a3b9074b3122d707b45b73e1a0b1605b19b841eb947e575e614373facac.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-microsoft-clarity", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-microsoft-clarity/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-application-microsoft-clarity", "descriptionParagraphs": [ "Creating engagement and measuring the success of any intranet is always a challenge, tools like Azure Application Insights and Google Analytics give you the usage metrics and now you can complement this information with Microsoft Clarity the new user behavior analytics tool.", "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." ], "previews": [ { "src": "/images/previews/152d3a3b9074b3122d707b45b73e1a0b1605b19b841eb947e575e614373facac.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-application-redirect/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-application-redirect", "title": "Redirect Application Customizers", "description": "Redirect from URL based on mapping from a list on the site. Can be used to automatically redirect from pages to other locations.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Extension (unclassified)" ], "technologies": [ "JavaScript" ], "version": "1.4.0", "versionGroup": "1.4", "created": "2019-12-29", "updated": "2019-12-29", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/PaoloPia.png" }, { "name": "Sébastien Levert", "account": "sebastienlevert", "avatar": "https://github.com/sebastienlevert.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-redirect", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-redirect/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-application-redirect", "descriptionParagraphs": [ "Redirect from URL based on mapping from a list on the site. Can be used to automatically redirect from pages to other locations." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "component.unclassified", "field": "gallery.componentTypes", "message": "Extension subtype requires source metadata/manifest correction.", "severity": "warning" }, { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "asset.missing", "field": "thumbnails[0].url", "message": "Asset not found in collected repository tree: samples/js-application-redirect/ext-redirects.png", "severity": "error" }, { "code": "preview.unavailable", "field": "thumbnails", "message": "No usable declared image is available; a labelled fallback is shown.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 6 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-application-run-once/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-application-run-once", "title": "Run Once SharePoint Framework application customizer", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "JavaScript" ], "version": "1.3.0", "versionGroup": "1.3", "created": "2017-10-10", "updated": "2017-10-10", "authors": [ { "name": "Mikael Svenson", "account": "wobba", "avatar": "https://github.com/wobba.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-run-once", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-application-run-once/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-application-run-once", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.3.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" }, { "code": "preview.missing", "field": "thumbnails", "message": "At least one image preview is required.", "severity": "error" }, { "code": "preview.unavailable", "field": "thumbnails", "message": "No usable declared image is available; a labelled fallback is shown.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-command-clone/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-command-clone", "title": "Clone ListView Command Set", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "JavaScript" ], "version": "1.4.0", "versionGroup": "1.4", "created": "2019-05-27", "updated": "2019-05-27", "authors": [ { "name": "Chris Kent", "account": "thechriskent", "avatar": "https://avatars.githubusercontent.com/u/8364109?s=460&v=4" } ], "preview": { "src": "/images/previews/c6cc827dfb28f6987ebee6175a935c30eb2b66fbacb43e3cebf4a701a6828def.webp", "alt": "Clone ListView Command Set", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-command-clone", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-command-clone/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-command-clone", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/c6cc827dfb28f6987ebee6175a935c30eb2b66fbacb43e3cebf4a701a6828def.webp", "alt": "Clone ListView Command Set", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-command-clone/assets/CommandIcon.png", "alt": "Clone ListView Command Set", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-command-clone/assets/DeployToCatalog.png", "alt": "Clone ListView Command Set", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-command-clone/assets/Dolly.png", "alt": "Clone ListView Command Set", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-command-clone/assets/spfxClone-Preview.png", "alt": "Clone ListView Command Set", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-command-convert-to-pdf/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-command-convert-to-pdf", "title": "Convert documents to PDF using Azure function", "description": "Sample SPFx list view command set extension that converts the selected documents to PDF using Microsoft Graph.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "JavaScript" ], "version": "1.6.0", "versionGroup": "1.6", "created": "2018-10-29", "updated": "2018-10-29", "authors": [ { "name": "Anoop Tatti", "account": "anoopt", "avatar": "https://avatars.githubusercontent.com/u/9694225?s=460&u=fbb4b27ed944935800d5f6dbc91e71911ce0d4ec&v=4" } ], "preview": { "src": "/images/previews/ec5568e607ace4d33e34b347d3963f10b8dae5f580750a3876ffba08442bc87b.webp", "alt": "Convert documents to PDF using Azure function", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-command-convert-to-pdf", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-command-convert-to-pdf/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-command-convert-to-pdf", "descriptionParagraphs": [ "Sample SPFx list view command set extension that converts the selected documents to PDF using Microsoft Graph." ], "previews": [ { "src": "/images/previews/ec5568e607ace4d33e34b347d3963f10b8dae5f580750a3876ffba08442bc87b.webp", "alt": "Convert documents to PDF using Azure function", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.6.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-command-copy-classic-link/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-command-copy-classic-link", "title": "Copy Classic Link Extension", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "JavaScript" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2021-01-03", "updated": "2021-01-03", "authors": [ { "name": "Anoop Tatti", "account": "anoopt", "avatar": "https://avatars.githubusercontent.com/u/9694225?s=460&u=fbb4b27ed944935800d5f6dbc91e71911ce0d4ec&v=4" }, { "name": "Aakash Bhardwaj", "account": "aakashbhardwaj619", "avatar": "https://avatars.githubusercontent.com/u/33526902?s=460&u=e780f4ef1da922c84f2c5c66c59cecbff2300581&v=4" } ], "preview": { "src": "/images/previews/87d5858e91fd478e3447c4f0f4ea90d510399cb750bec20551488ba03fade908.webp", "alt": "Copy Classic Link Extension", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-command-copy-classic-link", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-command-copy-classic-link/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-command-copy-classic-link", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/87d5858e91fd478e3447c4f0f4ea90d510399cb750bec20551488ba03fade908.webp", "alt": "Copy Classic Link Extension", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-command-hide-commands/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-command-hide-commands", "title": "Hide Commands", "description": "This command-set can be used to hide other 'out-of-the-box' commands on list views.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "JavaScript" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-04-27", "updated": "2020-04-27", "authors": [ { "name": "Russell Gove", "account": "russgove", "avatar": "https://github.com/russgove.png" } ], "preview": { "src": "/images/previews/5ab8a466b6a3d4fdad292dd4412fc4a255d33d07571c530181ce931aa6190d03.webp", "alt": "Hide Commands", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-command-hide-commands", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-command-hide-commands/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-command-hide-commands", "descriptionParagraphs": [ "This command-set can be used to hide other 'out-of-the-box' commands on list views." ], "previews": [ { "src": "/images/previews/5ab8a466b6a3d4fdad292dd4412fc4a255d33d07571c530181ce931aa6190d03.webp", "alt": "Hide Commands", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-command-item-permissions/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-command-item-permissions", "title": "Unique Item Permissions Command Set Customizer", "description": "The sample illustrates creation of a shortcut command to redirect user to selected item's permission page.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "JavaScript" ], "version": "1.3.0", "versionGroup": "1.3", "created": "2017-10-15", "updated": "2017-10-15", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" } ], "preview": { "src": "/images/previews/c3d4667fa2742d5a8cdb36be2aa99f3287a4895f77e525f5a025545c3f7489fc.webp", "alt": "Unique Item Permissions Command Set Customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-command-item-permissions", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-command-item-permissions/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-command-item-permissions", "descriptionParagraphs": [ "The sample illustrates creation of a shortcut command to redirect user to selected item's permission page." ], "previews": [ { "src": "/images/previews/c3d4667fa2742d5a8cdb36be2aa99f3287a4895f77e525f5a025545c3f7489fc.webp", "alt": "Unique Item Permissions Command Set Customizer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.3.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-command-lock-item/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-command-lock-item", "title": "Lock Item Command Set Customizer", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "JavaScript" ], "version": "1.4.0", "versionGroup": "1.4", "created": "2017-12-20", "updated": "2017-12-20", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" } ], "preview": { "src": "/images/previews/bba64f699d4c09a8254bcbe635a9b3d5d36154777a36c39941b5b07f12518f26.webp", "alt": "Lock Item Command Set Customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-command-lock-item", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-command-lock-item/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-command-lock-item", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/bba64f699d4c09a8254bcbe635a9b3d5d36154777a36c39941b5b07f12518f26.webp", "alt": "Lock Item Command Set Customizer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-command-selecteditems-export/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-command-selecteditems-export", "title": "Export Selected Items to Excel", "description": "Exports selected items to excel spreadsheet in xlsx format, with the columns from the current modern list view.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "JavaScript" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-02-16", "updated": "2018-02-16", "authors": [ { "name": "Rajesh Sitaraman", "account": "rjesh-git", "avatar": "https://github.com/rjesh-git.png" } ], "preview": { "src": "/images/previews/4dbc9d57be25611261012328800b364baf7de93321935b50d5e1404bf8416b20.webp", "alt": "Export Selected Items to Excel", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-command-selecteditems-export", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-command-selecteditems-export/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-command-selecteditems-export", "descriptionParagraphs": [ "Exports selected items to excel spreadsheet in xlsx format, with the columns from the current modern list view." ], "previews": [ { "src": "/images/previews/4dbc9d57be25611261012328800b364baf7de93321935b50d5e1404bf8416b20.webp", "alt": "Export Selected Items to Excel", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-field-animated-progress/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-field-animated-progress", "title": "Animated Progress Field", "description": "Displays an animated progress bar component", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Field customizer" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2021-10-10", "updated": "2021-10-10", "authors": [ { "name": "Ari Gunawan", "account": "AriGunawan", "avatar": "https://github.com/AriGunawan.png" } ], "preview": { "src": "/images/previews/c7653e57e2485bd1807294f01e049d9197df4a61d5924c93e54b271523467c46.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-field-animated-progress", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-field-animated-progress/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-field-animated-progress", "descriptionParagraphs": [ "Displays an animated progress bar component." ], "previews": [ { "src": "/images/previews/c7653e57e2485bd1807294f01e049d9197df4a61d5924c93e54b271523467c46.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-field-animated-progress/assets/preview.gif", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-field-conditionalformatting/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-field-conditionalformatting", "title": "Conditional formatting SharePoint Framework field customizer", "description": "Sample SharePoint Framework field customizer that applies Excel-like conditional formatting to numeric fields based on their values.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Field customizer" ], "technologies": [ "JavaScript" ], "version": "1.1.1", "versionGroup": "1.1", "created": "2017-06-29", "updated": "2017-06-29", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/f2550673cb5f0dcfb39a17a4d68c8d6fcce1915986ffe5de953d43f422dd2af0.webp", "alt": "Conditional formatting SharePoint Framework field customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-field-conditionalformatting", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-field-conditionalformatting/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-field-conditionalformatting", "descriptionParagraphs": [ "Sample SharePoint Framework field customizer that applies Excel-like conditional formatting to numeric fields based on their values." ], "previews": [ { "src": "/images/previews/f2550673cb5f0dcfb39a17a4d68c8d6fcce1915986ffe5de953d43f422dd2af0.webp", "alt": "Conditional formatting SharePoint Framework field customizer", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-field-conditionalformatting/assets/conditionalformatting-25-95.png", "alt": "Conditional formatting SharePoint Framework field customizer", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-field-conditionalformatting/assets/conditionalformatting-log-level.png", "alt": "Conditional formatting SharePoint Framework field customizer", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-field-conditionalformatting/assets/conditionalformatting-verbose-logging.png", "alt": "Conditional formatting SharePoint Framework field customizer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first Field Customizer extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.1.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-field-taskpriority/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-field-taskpriority", "title": "Priority Field SharePoint Framework field customizer", "description": "Sample SharePoint Framework field customizer that shows how to apply conditional color formatting to the values in a Priority field based on their value.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Field customizer" ], "technologies": [ "JavaScript" ], "version": "1.1.1", "versionGroup": "1.1", "created": "2017-08-24", "updated": "2017-08-24", "authors": [ { "name": "Todd Baginski", "account": "TBag", "avatar": "https://github.com/TBag.png" } ], "preview": { "src": "/images/previews/62a54e93c4ae1f224fc85bb94d5d1a4e26ee81ded7782a303fdd68261cc62ada.webp", "alt": "Priority Field SharePoint Framework field customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-field-taskpriority", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-field-taskpriority/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-field-taskpriority", "descriptionParagraphs": [ "Sample SharePoint Framework field customizer that shows how to apply conditional color formatting to the values in a Priority field based on their value." ], "previews": [ { "src": "/images/previews/62a54e93c4ae1f224fc85bb94d5d1a4e26ee81ded7782a303fdd68261cc62ada.webp", "alt": "Priority Field SharePoint Framework field customizer", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-field-taskpriority/assets/CSS.jpg", "alt": "Priority Field SharePoint Framework field customizer", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-field-taskpriority/assets/Querystring-Parameters.jpg", "alt": "Priority Field SharePoint Framework field customizer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first Field Customizer extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.1.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-field-weather/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-field-weather", "title": "Weather SharePoint Framework field customizer", "description": "Sample SharePoint Framework field customizer showing weather conditions for the given location.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Field customizer" ], "technologies": [ "JavaScript" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-01-20", "updated": "2018-01-20", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/9c3aff223ca5479ea77230afbd1fc0b03c4121419aa0cf3e928abcbdb6953273.webp", "alt": "Weather SharePoint Framework field customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-field-weather", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-field-weather/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-field-weather", "descriptionParagraphs": [ "Sample SharePoint Framework field customizer showing weather conditions for the given location." ], "previews": [ { "src": "/images/previews/9c3aff223ca5479ea77230afbd1fc0b03c4121419aa0cf3e928abcbdb6953273.webp", "alt": "Weather SharePoint Framework field customizer", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-field-weather/assets/weather-location-f.png", "alt": "Weather SharePoint Framework field customizer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first Field Customizer extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-guest-message/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-js-guest-message", "title": "Guest Message", "description": "SharePoint Application customizer that allow you to display a message to your External users.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "JavaScript" ], "version": "1.8.2", "versionGroup": "1.8", "created": "2019-09-22", "updated": "2019-09-22", "authors": [ { "name": "David Ramalho", "account": "DRamalho92", "avatar": "https://github.com/DRamalho92.png" } ], "preview": { "src": "/images/previews/c4ce7b7f21cd63d9f17fbf82757f5366970ee79e30a1efb8a0c7ed3b2336b30b.webp", "alt": "Guest Message", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-guest-message", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-guest-message/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-guest-message", "descriptionParagraphs": [ "SharePoint Application customizer that allow you to display a message to your External users." ], "previews": [ { "src": "/images/previews/c4ce7b7f21cd63d9f17fbf82757f5366970ee79e30a1efb8a0c7ed3b2336b30b.webp", "alt": "Guest Message", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-guest-message/assets/tenantwide.png", "alt": "Guest Message", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.8.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/js-share-to-teams/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-js-share-to-teams", "title": "Share to Teams", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2021-08-14", "updated": "2021-08-14", "authors": [ { "name": "Kunj Sangani", "account": "kunj-sangani", "avatar": "https://github.com/kunj-sangani.png" } ], "preview": { "src": "/images/previews/8d7ff871482f796cdc129c7e0fef0cae3f12e4f6f73b53324e524c5dce52ad5b.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/js-share-to-teams", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/js-share-to-teams/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Fjs-share-to-teams", "descriptionParagraphs": [ "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.", "To achieve this we have taken help of the js file provided by microsoft for creating share to teams button for third-party websites" ], "previews": [ { "src": "/images/previews/8d7ff871482f796cdc129c7e0fef0cae3f12e4f6f73b53324e524c5dce52ad5b.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-share-to-teams/assets/sendToTeams1.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-share-to-teams/assets/sendToTeams2.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-share-to-teams/assets/sendToTeams3.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/js-share-to-teams/assets/sendToTeams4.png", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[1].order", "message": "Preview order is duplicated.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[2].order", "message": "Preview order is duplicated.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[3].order", "message": "Preview order is duplicated.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[4].order", "message": "Preview order is duplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 10 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-aadtokenprovider-bot/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-aadtokenprovider-bot", "title": "AAD Token Provider Bot Extension", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.6.0", "versionGroup": "1.6", "created": "2018-11-05", "updated": "2018-11-05", "authors": [ { "name": "Franck Cornu", "account": "FranckyC", "avatar": "https://github.com/FranckyC.png" } ], "preview": { "src": "/images/previews/2ff5521f082298deb54c9bcef768ae04d7e1b827cb53c39e95b966de1ab43755.webp", "alt": "AAD Token Provider Bot Extension", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-aadtokenprovider-bot", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-aadtokenprovider-bot/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-aadtokenprovider-bot", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/2ff5521f082298deb54c9bcef768ae04d7e1b827cb53c39e95b966de1ab43755.webp", "alt": "AAD Token Provider Bot Extension", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.6.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-access-lens/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-access-lens", "title": "Access Lens", "description": "Inspect SharePoint document library permissions from the command bar.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.23.0", "versionGroup": "1.23", "created": "2026-06-15", "updated": "2026-06-16", "authors": [ { "name": "Rick Wenz", "account": "rwenz02", "avatar": "https://github.com/rwenz02.png" } ], "preview": { "src": "/images/previews/d708058b6df3ec4a80af5a1929e74ff5a83563b536f74667905d0e339d02fdfe.webp", "alt": "Access Lens permission overview panel", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-access-lens", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-access-lens/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-access-lens", "descriptionParagraphs": [ "Access Lens is a read-only SharePoint Framework ListView Command Set for modern SharePoint Online document libraries.", "It adds an Inspect Access command to the document library command bar and opens a right-side panel with permission inheritance, effective permission source, web and library role assignments, visible SharePoint group members, risk indicators, and export options.", "The sample runs entirely in the browser, uses the current SharePoint context and PnPjs, and does not require Microsoft Graph permissions, admin consent, a backend service, external storage, or telemetry." ], "previews": [ { "src": "/images/previews/d708058b6df3ec4a80af5a1929e74ff5a83563b536f74667905d0e339d02fdfe.webp", "alt": "Access Lens permission overview panel", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "Use SharePoint Framework Extensions to extend the SharePoint user experience, including toolbars and list views.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Learn how to create a SharePoint Framework ListView Command Set extension.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" }, { "title": "PnPjs documentation", "description": "PnPjs provides fluent APIs for working with SharePoint and Microsoft 365.", "url": "https://pnp.github.io/pnpjs/" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.23.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-adal-bot/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-adal-bot", "title": "SPFx ADAL Bot Extension", "description": "Integrate an authenticated bot into SharePoint using ADAL and the Bot Framework Web Chat control.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.5.1", "versionGroup": "1.5", "created": "2018-08-04", "updated": "2026-04-02", "authors": [ { "name": "Franck Cornu", "account": "FranckyC", "avatar": "https://github.com/FranckyC.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-adal-bot", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-adal-bot/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-adal-bot", "descriptionParagraphs": [ "A SharePoint Framework application customizer that hosts a React bot chat control and demonstrates authentication to Azure AD-protected APIs using the OAuth2 authorization code flow. The sample includes a separate Node.js bot project." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "Documentation for extending the SharePoint user experience with SharePoint Framework extensions.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.5.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-app-announcements/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-app-announcements", "title": "Announcements SharePoint Framework application customizer", "description": "Sample SharePoint Framework application customizer showing urgent organizational announcements.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.1.1", "versionGroup": "1.1", "created": "2017-06-30", "updated": "2017-06-30", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/f06a38faaaea67b98db7f8a171b8571c7f2d1eb9f02f0663d41c6f9c83c9eab5.webp", "alt": "Announcements SharePoint Framework application customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-app-announcements", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-app-announcements/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-app-announcements", "descriptionParagraphs": [ "Sample SharePoint Framework application customizer showing urgent organizational announcements." ], "previews": [ { "src": "/images/previews/f06a38faaaea67b98db7f8a171b8571c7f2d1eb9f02f0663d41c6f9c83c9eab5.webp", "alt": "Announcements SharePoint Framework application customizer", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-app-announcements/assets/announcements-announcements.png", "alt": "Announcements SharePoint Framework application customizer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.1.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-alert-banner/Assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-alert-banner", "title": "Alert Banner SPFx Extension", "description": "The Alert Banner SPFx Extension is a custom SharePoint Framework (SPFx) extension designed to display alert notifications prominently in the Banner of Modern SharePoint sites. These alerts are dynamically retrieved from a SharePoint list using the Microsoft Graph API, ensuring users receive important updates and information seamlessly integrated with Microsoft 365 services.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2023-12-25", "updated": "2025-09-03", "authors": [ { "name": "Nicolas Kheirallah", "account": "NicolasKheirallah", "avatar": "https://github.com/NicolasKheirallah.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-alert-banner", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-alert-banner/Assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-alert-banner", "descriptionParagraphs": [ "The Alert Banner SPFx Extension is a custom SharePoint Framework (SPFx) extension designed to display alert notifications prominently in the Banner of Modern SharePoint sites. These alerts are dynamically retrieved from a SharePoint list using the Microsoft Graph API, ensuring users receive important updates and information seamlessly integrated with Microsoft 365 services." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.location", "field": "$", "message": "Use the canonical assets/sample.json path and casing.", "severity": "warning" }, { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "asset.missing", "field": "thumbnails[0].url", "message": "Asset not found in collected repository tree: samples/react-application-alert-banner/assets/preview.gif", "severity": "error" }, { "code": "preview.unavailable", "field": "thumbnails", "message": "No usable declared image is available; a labelled fallback is shown.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-alerts/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-alerts", "title": "Alerts Application Customizers", "description": "This application customizer provides you the ability to show notifications on the pages in the top / header area.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Extension (unclassified)" ], "technologies": [ "React" ], "version": "1.4.0", "versionGroup": "1.4", "created": "2019-12-25", "updated": "2019-12-25", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" }, { "name": "Robert Schouten", "account": "rfjschouten", "avatar": "https://github.com/rfjschouten.png" } ], "preview": { "src": "/images/previews/31eca0184075b621615b64bc7c7e8697731c80a0ccc8186f8ff442267820b27c.webp", "alt": "Alerts Application Customizers", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-alerts", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-alerts/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-alerts", "descriptionParagraphs": [ "This application customizer provides you the ability to show notifications on the pages in the top / header area." ], "previews": [ { "src": "/images/previews/31eca0184075b621615b64bc7c7e8697731c80a0ccc8186f8ff442267820b27c.webp", "alt": "Alerts Application Customizers", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "component.unclassified", "field": "gallery.componentTypes", "message": "Extension subtype requires source metadata/manifest correction.", "severity": "warning" }, { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-announcements/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-announcements", "title": "Announcements SharePoint Framework Application Customizer", "description": "SharePoint Framework application customizer displaying an information banner using office-fabric-ui MessageBar.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-06-18", "updated": "2025-10-20", "authors": [ { "name": "Mike Myers", "account": "thespooler", "avatar": "https://github.com/thespooler.png" }, { "name": "Sandeep P S", "account": "Sandeep-FED", "avatar": "https://github.com/sandeep-fed.png" } ], "preview": { "src": "/images/previews/c614408feee39af175b02950e9230bd96c09dcfc892a94c9abe276cdcf1a21be.webp", "alt": "Announcements SharePoint Framework Application Customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-announcements", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-announcements/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-announcements", "descriptionParagraphs": [ "SharePoint Framework application customizer displaying an information banner using office-fabric-ui MessageBar." ], "previews": [ { "src": "/images/previews/c614408feee39af175b02950e9230bd96c09dcfc892a94c9abe276cdcf1a21be.webp", "alt": "Announcements SharePoint Framework Application Customizer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-botframework-chat/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-botframework-chat", "title": "Bot Framework Chat App Customizer", "description": "SPFx application extension that uses the Bot Framework React Webchat Component to render a Bot Framework chat window", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2019-10-19", "updated": "2019-10-19", "authors": [ { "name": "Stephan Bisser", "account": "stephanbisser", "avatar": "https://github.com/stephanbisser.png" } ], "preview": { "src": "/images/previews/e005d776e3d9ed7563a8b1eb4da3a56fdd4bd737c113269bf79b4a6972850837.webp", "alt": "Bot Framework Chat App Customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-botframework-chat", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-botframework-chat/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-botframework-chat", "descriptionParagraphs": [ "SPFx application extension that uses the Bot Framework React Webchat Component to render a Bot Framework chat window" ], "previews": [ { "src": "/images/previews/e005d776e3d9ed7563a8b1eb4da3a56fdd4bd737c113269bf79b4a6972850837.webp", "alt": "Bot Framework Chat App Customizer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-breadcrumb/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-breadcrumb", "title": "Breadcrumb application customizer", "description": "This sample shows how to create a breadcrumb element and append it to your site via the SharePoint Framework Application Customizer extension.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2020-10-03", "updated": "2024-10-05", "authors": [ { "name": "Elio Struyf", "account": "estruyf", "avatar": "https://github.com/estruyf.png" }, { "name": "Swaminathan Sriram", "account": "Swaminathan-Sriram", "avatar": "https://github.com/Swaminathan-Sriram.png" } ], "preview": { "src": "/images/previews/fa26a18f0557de0256886ae04576037147de3e410b531273e78842a2f8a4f38a.webp", "alt": "Breadcrumb application customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-breadcrumb", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-breadcrumb/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-breadcrumb", "descriptionParagraphs": [ "This sample shows how to create a breadcrumb element and append it to your site via the SharePoint Framework Application Customizer extension." ], "previews": [ { "src": "/images/previews/fa26a18f0557de0256886ae04576037147de3e410b531273e78842a2f8a4f38a.webp", "alt": "Breadcrumb application customizer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-chatbubble-copilot/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-chatbubble-copilot", "title": "Chatbot Integration for SharePoint Online", "description": "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", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-01-08", "updated": "2025-01-08", "authors": [ { "name": "Nicolas Kheirallah", "account": "NicolasKheirallah", "avatar": "https://github.com/NicolasKheirallah.png" } ], "preview": { "src": "/images/previews/a1e78c419d8b37347ce05b8959c3694291e08e277be1ee25063d4d6e84f390f5.webp", "alt": "Chatbot Integration for SharePoint Online", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-chatbubble-copilot", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-chatbubble-copilot/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-chatbubble-copilot", "descriptionParagraphs": [ "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" ], "previews": [ { "src": "/images/previews/a1e78c419d8b37347ce05b8959c3694291e08e277be1ee25063d4d6e84f390f5.webp", "alt": "Chatbot Integration for SharePoint Online", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-collab-footer/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-collab-footer", "title": "SharePoint Collaboration Footer v8.0.0", "description": "Enterprise-grade SharePoint footer with hybrid architecture, advanced link management, and modern user experience", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2023-12-25", "updated": "2023-12-31", "authors": [ { "name": "Nico", "account": "NicolasKheirallah", "avatar": "https://github.com/NicolasKheirallah.png" } ], "preview": { "src": "/images/previews/aad70edab0ef5a111c85847ce0bba2e9f1dca4c415fedcba3526afc2d79b9551.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-collab-footer", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-collab-footer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-collab-footer", "descriptionParagraphs": [ "Enterprise-grade SharePoint footer with hybrid architecture, advanced link management, and modern user experience" ], "previews": [ { "src": "/images/previews/aad70edab0ef5a111c85847ce0bba2e9f1dca4c415fedcba3526afc2d79b9551.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-collab-footer/assets/1.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-collab-footer/assets/2.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-collab-footer/assets/3.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-collab-footer/assets/4.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-collab-footer/assets/5.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-collab-footer/assets/6.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-collab-footer/assets/7.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-collab-footer/assets/8.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-collab-footer/assets/9.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[5].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[6].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[7].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[8].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[9].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 11 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-copy-page/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-copy-page", "title": "Copy Page SPFx Application Customizer", "description": "This SPFx Application Customizer empowers content authors to copy modern site pages across sites with full control over:", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2023-12-25", "updated": "2023-12-31", "authors": [ { "name": "Ahmad Jad Alhak", "account": "ahmad-jad-alhak", "avatar": "https://github.com/ahmad-jad-alhak.png" } ], "preview": { "src": "/images/previews/af19473242ce2793a7b50b931777b3d0c0619b190e63ebf815985b757b4aafa0.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-copy-page", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-copy-page/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-copy-page", "descriptionParagraphs": [ "This SPFx Application Customizer empowers content authors to copy modern site pages across sites with full control over:" ], "previews": [ { "src": "/images/previews/af19473242ce2793a7b50b931777b3d0c0619b190e63ebf815985b757b4aafa0.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-copy-page/assets/preview-02.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-copy-page/assets/preview-03.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-copy-page/assets/preview-04.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-customizer-feedback-widget/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-customizer-feedback-widget", "title": "Sticky Feedback Widget Application Customizer", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2023-07-02", "updated": "2025-05-25", "authors": [ { "name": "Sandeep P S", "account": "Sandeep-FED", "avatar": "https://github.com/Sandeep-FED.png" } ], "preview": { "src": "/images/previews/1bbe1bbb64311516b8b8e6e3ba421ccbf368f75b7593322255137b3d097fe84c.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-customizer-feedback-widget", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-customizer-feedback-widget/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-customizer-feedback-widget", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/1bbe1bbb64311516b8b8e6e3ba421ccbf368f75b7593322255137b3d097fe84c.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-customizer-notification/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-customizer-notification", "title": "Notification Application Customizer with Webhooks", "description": "This project demonstrates a SharePoint Framework (SPFx) Application Customizer that uses webhooks to display notifications when a SharePoint list changes.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-08-30", "updated": "2025-08-30", "authors": [ { "name": "Guido Zambarda", "account": "GuidoZam", "avatar": "https://avatars.githubusercontent.com/u/13046662?v=4" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-customizer-notification", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-customizer-notification/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-customizer-notification", "descriptionParagraphs": [ "This project demonstrates a SharePoint Framework (SPFx) Application Customizer that uses webhooks to display notifications when a SharePoint list changes. It leverages PnPjs, React, and the SPFx List Subscription API." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-customizer-notification/assets/Alternative%20light%20theme.gif", "alt": "Notification Application Customizer with Webhooks - Alternative light theme", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-customizer-notification/assets/Dark%20theme.gif", "alt": "Notification Application Customizer with Webhooks - Dark theme", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[0].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[1].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[2].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-duetasks/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-duetasks", "title": "Overdue Tasks Application Customizer", "description": "The sample illustrates how to display a warning message that current user has overdue tasks.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.4.0", "versionGroup": "1.4", "created": "2017-12-26", "updated": "2017-12-26", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" } ], "preview": { "src": "/images/previews/838b060e4e1af57d03cd03bbf78088d690ca1d3fdb1b438be27b8ee43b16616a.webp", "alt": "Overdue Tasks Application Customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-duetasks", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-duetasks/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-duetasks", "descriptionParagraphs": [ "The sample illustrates how to display a warning message that current user has overdue tasks." ], "previews": [ { "src": "/images/previews/838b060e4e1af57d03cd03bbf78088d690ca1d3fdb1b438be27b8ee43b16616a.webp", "alt": "Overdue Tasks Application Customizer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-festivals/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-festivals", "title": "Festivals Extension", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-05-19", "updated": "2020-05-19", "authors": [ { "name": "Arjun U Menon", "account": "arjunumenon", "avatar": "https://github.com/arjunumenon.png" } ], "preview": { "src": "/images/previews/d2c8a86934a02556ef0782c9cd644b14df52fbe422aa8653791f31fa3dd3eed0.webp", "alt": "Festivals Extension", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-festivals", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-festivals/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-festivals", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/d2c8a86934a02556ef0782c9cd644b14df52fbe422aa8653791f31fa3dd3eed0.webp", "alt": "Festivals Extension", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-grouplinks/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-grouplinks", "title": "Groups external links", "description": "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...", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-02-16", "updated": "2018-02-16", "authors": [ { "name": "Luis Mañez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/previews/ca5fabbe6b174f27c51116b176baf844858e50fdc79e5acdec9836e479a84228.webp", "alt": "Groups external links", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-grouplinks", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-grouplinks/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-grouplinks", "descriptionParagraphs": [ "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..." ], "previews": [ { "src": "/images/previews/ca5fabbe6b174f27c51116b176baf844858e50fdc79e5acdec9836e479a84228.webp", "alt": "Groups external links", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-injectcss/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-injectcss", "title": "CSS Injection", "description": "This sample shows how to inject a custom Cascading Style Sheet (CSS) on modern pages.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2018-03-28", "updated": "2024-10-05", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" } ], "preview": { "src": "/images/previews/261567bb2cf18c3ff016a51d44ab1c5c0da76385bf36f5abb8839dc0ecadc1df.webp", "alt": "CSS Injection", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-injectcss", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-injectcss/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-injectcss", "descriptionParagraphs": [ "This sample shows how to inject a custom Cascading Style Sheet (CSS) on modern pages." ], "previews": [ { "src": "/images/previews/261567bb2cf18c3ff016a51d44ab1c5c0da76385bf36f5abb8839dc0ecadc1df.webp", "alt": "CSS Injection", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-injectcss/assets/orangeisthenewfeedback.png", "alt": "CSS Injection", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-logo-festoon/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-logo-festoon", "title": "Logo Festoon", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.8.0", "versionGroup": "1.8", "created": "2019-03-17", "updated": "2019-03-17", "authors": [ { "name": "Rabia Williams", "account": "rabwill", "avatar": "https://github.com/rabwill.png" } ], "preview": { "src": "/images/previews/a90e06c4e347de5a4d197dc0caf3ceaedc376f36fa5dc6d2a6ab4a414ccee886.webp", "alt": "Logo Festoon", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-logo-festoon", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-logo-festoon/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-logo-festoon", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/a90e06c4e347de5a4d197dc0caf3ceaedc376f36fa5dc6d2a6ab4a414ccee886.webp", "alt": "Logo Festoon", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-logo-festoon/assets/festoon-list.png", "alt": "Logo Festoon", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-logo-festoon/assets/festoon-shot-christmas.png", "alt": "Logo Festoon", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.8.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-m365-service-health/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-m365-service-health", "title": "Microsoft 365 Service Health Extension", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2021-05-24", "updated": "2021-05-24", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/1fc3afaeb095458d9d0b9a214132b65a835b71a018e4ebd99e3a2c9c1e84a67b.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-m365-service-health", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-m365-service-health/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-m365-service-health", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/1fc3afaeb095458d9d0b9a214132b65a835b71a018e4ebd99e3a2c9c1e84a67b.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-m365-service-health/assets/m365ServiceHealth02.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-m365-service-health/assets/m365ServiceHealth03.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-machine-translations/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-machine-translations", "title": "Machine Translations", "description": "This application customizer lets you translate the text on a SharePoint page using the Translator Text API of Microsoft Azure.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2021-01-20", "updated": "2024-12-09", "authors": [ { "name": "Robin Agten", "account": "agtenr", "avatar": "https://github.com/agtenr.png" }, { "name": "Michał Romiszewski", "account": "mromiszewski", "avatar": "https://github.com/mromiszewski.png" }, { "name": "Nishkalank Bezawada", "account": "NishkalankBezawada", "avatar": "https://github.com/NishkalankBezawada.png" } ], "preview": { "src": "/images/previews/5134978329b5e3d31369493c60fb90531afc10bb0169730939171d1cf4f67e10.webp", "alt": "Machine Translations", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-machine-translations", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-machine-translations/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-machine-translations", "descriptionParagraphs": [ "This application customizer lets you translate the text on a SharePoint page using the Translator Text API of Microsoft Azure." ], "previews": [ { "src": "/images/previews/5134978329b5e3d31369493c60fb90531afc10bb0169730939171d1cf4f67e10.webp", "alt": "Machine Translations", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-machine-translations/assets/main_screenshot.png", "alt": "Machine Translations", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-messagebanner/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-fx-extensions-react-application-messagebanner", "title": "React Message Banner", "description": "A react Message Banner sample, allows to add a custom banner message to your SharePoint Online modern sites.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2022-11-09", "updated": "2025-10-20", "authors": [ { "name": "Paul Matthews", "account": "pmatthews05", "avatar": "https://github.com/pmatthews05.png" }, { "name": "Brad Schlintz", "account": "bschlintz", "avatar": "https://github.com/bschlintz.png" }, { "name": "Sandeep P S", "account": "Sandeep-FED", "avatar": "https://github.com/sandeep-fed.png" } ], "preview": { "src": "/images/previews/ab9495095b903d942b15ac45fc0251bfc1dc3eb16144ad4afecd47cd8851ed54.webp", "alt": "Admin View", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-messagebanner", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-messagebanner/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-messagebanner", "descriptionParagraphs": [ "A react Message Banner sample, allows to add a custom banner message to your SharePoint Online modern sites. Can target either Site or Web Scoped. Allows a site owner to modify the text, font size, colours and height of the banner. Specify a start date to control when the banner is visible to members of a site. Uses the latest v1.15.2 of SPFX framework." ], "previews": [ { "src": "/images/previews/ab9495095b903d942b15ac45fc0251bfc1dc3eb16144ad4afecd47cd8851ed54.webp", "alt": "Admin View", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-messagebanner/assets/BannerMessageAdminViewScheduled.png", "alt": "Admin View Scheduled", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-messagebanner/assets/BannerMessageUserView.png", "alt": "User View", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-messagebanner/assets/BannerSettingsPanel.png", "alt": "Banner Settings Panel", "isFallback": false } ], "references": [ { "title": "Getting started with SharePoint Framework", "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant" }, { "title": "Build your first SharePoint Framework Extension", "description": "Introduction about how to develop SharePoint Online extensions using SharePoint Framework.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension" }, { "title": "Microsoft 365 Patterns and Practices", "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.", "url": "https://aka.ms/m365pnp" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-my-flows-list/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-my-flows-list", "title": "My Flows List", "description": "Application extension that allows the user to check list of flows and their current status and details.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2021-10-03", "updated": "2021-10-03", "authors": [ { "name": "Adam Wójcik", "account": "Adam-it", "avatar": "https://github.com/Adam-it.png" } ], "preview": { "src": "/images/previews/d55886e68c24be0b8a39dd645d6baaf92d4658a2bf9456ba7600cb4118413573.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-my-flows-list", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-my-flows-list/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-my-flows-list", "descriptionParagraphs": [ "This application extension allows the user to check list of flows and their current status and details." ], "previews": [ { "src": "/images/previews/d55886e68c24be0b8a39dd645d6baaf92d4658a2bf9456ba7600cb4118413573.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-my-flows-list/assets/Details.jpg", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-my-flows-list/assets/List.jpg", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-my-flows-list/assets/optionStandard.jpg", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-my-flows-list/assets/optionNotRecomended.jpg", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint", "Office" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 6 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-my-lists-notifications/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-my-lists-notifications", "title": "My Lists Notifications", "description": "This application extension alows user receive notifications from selected lists or libraries", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2021-07-08", "updated": "2021-07-08", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-my-lists-notifications", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-my-lists-notifications/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-my-lists-notifications", "descriptionParagraphs": [ "This application extension alows user receive notifications from selected lists or libraries" ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-my-lists-notifications/assets/myListsNotifications0.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-my-lists-notifications/assets/myListsNotifications1.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-my-lists-notifications/assets/myListsNotifications2.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-my-lists-notifications/assets/myListsNotifications3.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-my-lists-notifications/assets/myListsNotifications4.png", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[4].order", "message": "Preview order is duplicated.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[5].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[6].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 9 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-myfavourites/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-myfavourites", "title": "My Favourites Application Customizer", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-04-14", "updated": "2020-11-11", "authors": [ { "name": "Anoop Tatti", "account": "anoopt", "avatar": "https://avatars.githubusercontent.com/u/9694225?s=460&u=fbb4b27ed944935800d5f6dbc91e71911ce0d4ec&v=4" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-myfavourites", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-myfavourites/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-myfavourites", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-myfollowedsites/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-myfollowedsites", "title": "My Followed Sites Application Customizer", "description": "Sample SharePoint Framework application customizer extension that shows current user followed sites across tenant using office ui fabric panel.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-06-12", "updated": "2020-06-12", "authors": [ { "name": "Rahul Suryawanshi", "account": "rahulsuryawanshi", "avatar": "https://github.com/rahulsuryawanshi.png" } ], "preview": { "src": "/images/previews/8c9d454fa37b1f28022138a375ac25a6aea8446bd6d9f672f6016de9d9cf4d0d.webp", "alt": "My Followed Sites Application Customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-myfollowedsites", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-myfollowedsites/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-myfollowedsites", "descriptionParagraphs": [ "Sample SharePoint Framework application customizer extension that shows current user followed sites across tenant using office ui fabric panel." ], "previews": [ { "src": "/images/previews/8c9d454fa37b1f28022138a375ac25a6aea8446bd6d9f672f6016de9d9cf4d0d.webp", "alt": "My Followed Sites Application Customizer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-nav-search-driven/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-nav-search-driven", "title": "Search driven navigation", "description": "SPFx application search driven navigation and permission side panel.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2023-07-27", "updated": "2024-10-23", "authors": [ { "name": "Markus Moeller", "account": "mmsharepoint", "avatar": "https://github.com/mmsharepoint.png" } ], "preview": { "src": "/images/previews/875bda32d951517fe759317785a51e69423e50848184b1f2b81d34f85c8ba1bd.webp", "alt": "Menu navigation", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-nav-search-driven", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-nav-search-driven/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-nav-search-driven", "descriptionParagraphs": [ "SPFx application extension acting as top level search driven navigation and permission checker on the right within a panel." ], "previews": [ { "src": "/images/previews/875bda32d951517fe759317785a51e69423e50848184b1f2b81d34f85c8ba1bd.webp", "alt": "Menu navigation", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-nav-search-driven/assets/05SharingLinks.png", "alt": "Side panel with permissions", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=M365-MVP-5004617" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=M365-MVP-5004617" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-navigation-header/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-navigation-header", "title": "SPFx Global Navigation Header Customizer", "description": "This extension mounts into the SharePoint Online Top placeholder to render a responsive global header with a customizable brand area, desktop mega-menu navigation, and a mobile drawer. It includes built-in tools for search, profile info, bookmarks, notifications, and accessibility controls. You can also enable an optional HTML footer in the Bottom placeholder and inject SEO metadata dynamically from your navigation terms.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.23.2", "versionGroup": "1.23", "created": "2026-06-15", "updated": "2026-07-07", "authors": [ { "name": "Nicolas Kheirallah", "account": "NicolasKheirallah", "avatar": "https://github.com/NicolasKheirallah.png" } ], "preview": { "src": "/images/previews/ac311c32d7363fb5efe2dea62bd2a206fa329df9d5d49d90a043311c9a6286c9.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-navigation-header", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-navigation-header/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-navigation-header", "descriptionParagraphs": [ "This extension mounts into the SharePoint Online Top placeholder to render a responsive global header with a customizable brand area, desktop mega-menu navigation, and a mobile drawer. It includes built-in tools for search, profile info, bookmarks, notifications, and accessibility controls. You can also enable an optional HTML footer in the Bottom placeholder and inject SEO metadata dynamically from your navigation terms." ], "previews": [ { "src": "/images/previews/ac311c32d7363fb5efe2dea62bd2a206fa329df9d5d49d90a043311c9a6286c9.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-navigation-header/assets/AdminPanel2.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-navigation-header/assets/AdminPanel3.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-navigation-header/assets/AdminPanel4.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-navigation-header/assets/AdminPanel5.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-navigation-header/assets/AdminPanel6.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-navigation-header/assets/FullscreenPanel.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-navigation-header/assets/MobileNav.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-navigation-header/assets/MobileNav2.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-navigation-header/assets/NavItems.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-navigation-header/assets/SettingsPanelUser.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.23.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[10].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[5].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[6].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[7].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[8].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[9].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 12 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-news-ticker/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-news-ticker", "title": "News Ticker", "description": "An SPFx Extension that displays news as a running text at the top of every modern page.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "JavaScript" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2021-04-19", "updated": "2025-09-08", "authors": [ { "name": "Ari Gunawan", "account": "AriGunawan", "avatar": "https://github.com/AriGunawan.png" }, { "name": "Sudharsan Kesavanarayanan", "account": "sudharsank", "avatar": "https://github.com/sudharsank.png" }, { "name": "Nicolas Kheirallah", "account": "NicolasKheirallah", "avatar": "https://github.com/NicolasKheirallah.png" } ], "preview": { "src": "/images/previews/c455c7d95a86229fe392c6074ad272e24acb0b7d96a8ff6e3bae5c0d2ccaf7e5.webp", "alt": "Extension in action", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-news-ticker", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-news-ticker/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-news-ticker", "descriptionParagraphs": [ "An SPFx Extension that displays news as a running text at the top of every modern page." ], "previews": [ { "src": "/images/previews/c455c7d95a86229fe392c6074ad272e24acb0b7d96a8ff6e3bae5c0d2ccaf7e5.webp", "alt": "Extension in action", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-news-ticker/assets/react-application-news-ticker.png", "alt": "Extension in action", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-office-groups-nav/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-office-groups-nav", "title": "Modern Team Sites (Office Groups) Navigation", "description": "The sample illustrates how to use AadHttpClient to request Groups information from Microsoft Graph", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-02-17", "updated": "2018-02-17", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" } ], "preview": { "src": "/images/previews/0df23f30a88f52929591e47d6e28dd18e93d671ca9ac9f223d6ed686547322c8.webp", "alt": "Modern Team Sites (Office Groups) Navigation", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-office-groups-nav", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-office-groups-nav/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-office-groups-nav", "descriptionParagraphs": [ "The sample illustrates how to use AadHttpClient to request Groups information from Microsoft Graph" ], "previews": [ { "src": "/images/previews/0df23f30a88f52929591e47d6e28dd18e93d671ca9ac9f223d6ed686547322c8.webp", "alt": "Modern Team Sites (Office Groups) Navigation", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-page-comments-sentiment/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-page-comments-sentiment", "title": "Application Customiser sample using Text Analytics API", "description": "This sample shows how to use the Text Analytics API (Cognitive Services) to render a rating icon based on the different comments in page.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-03-06", "updated": "2020-03-06", "authors": [ { "name": "Luis Mañez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/previews/b3a440fcd86912239959a356a0a7819e64e394b95b6714f75fb0b91d95d79bdd.webp", "alt": "Application Customiser sample using Text Analytics API", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-page-comments-sentiment", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-page-comments-sentiment/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-page-comments-sentiment", "descriptionParagraphs": [ "This sample shows how to use the Text Analytics API (Cognitive Services) to render a rating icon based on the different comments in page." ], "previews": [ { "src": "/images/previews/b3a440fcd86912239959a356a0a7819e64e394b95b6714f75fb0b91d95d79bdd.webp", "alt": "Application Customiser sample using Text Analytics API", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-page-indexer/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-page-indexer", "title": "SharePoint Page Indexer", "description": "An SPFx Application Customizer that automatically indexes SharePoint modern pages, extracting page content, web parts, and metadata into a centralized SharePoint list.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Application customizer", "Teams tab", "Web part" ], "technologies": [ "TypeScript" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-02-06", "updated": "2025-02-06", "authors": [ { "name": "Sai Siva Ram Bandaru", "account": "saiiiiiii", "avatar": "https://avatars.githubusercontent.com/u/46020510?v=4" } ], "preview": { "src": "/images/previews/e031c3c056b39e2b86a23ef75a278ceb5a5b103338c113d20efd64ad79ca4125.webp", "alt": "SharePoint Page Indexer - Automatic page content indexing", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-page-indexer", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-page-indexer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-page-indexer", "descriptionParagraphs": [ "This SPFx Application Customizer automatically indexes SharePoint Site Pages when they load. It captures complete page content including lazy-loaded sections, catalogs all SPFx web parts, calculates word counts, and stores everything in a centralized PageIndex SharePoint list. The solution includes intelligent deduplication, auto-scroll functionality for complete content capture, and debug tools for manual testing." ], "previews": [ { "src": "/images/previews/e031c3c056b39e2b86a23ef75a278ceb5a5b103338c113d20efd64ad79ca4125.webp", "alt": "SharePoint Page Indexer - Automatic page content indexing", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-page-indexer/assets/pageindex-list.png", "alt": "PageIndex SharePoint List with indexed content", "isFallback": false } ], "references": [ { "title": "Getting started with SharePoint Framework", "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant" }, { "title": "Build your first SharePoint Framework Extension", "description": "Learn how to build your first SharePoint Framework Application Customizer.", "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension" }, { "title": "Microsoft 365 Patterns and Practices", "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.", "url": "https://aka.ms/m365pnp" }, { "title": "PnPjs Documentation", "description": "PnPjs is a collection of fluent libraries for consuming SharePoint, Graph, and Office 365 REST APIs.", "url": "https://pnp.github.io/pnpjs/" } ], "products": [ "SharePoint", "Office" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-page-related-bing-news/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-page-related-bing-news", "title": "Application Customiser sample using Bing Search API", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2019-10-25", "updated": "2019-10-25", "authors": [ { "name": "Luis Mañez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/previews/3c17bea7e6dee6599f09d3685871b65fe1aabd1d17c418acb958edbe5d6b23d7.webp", "alt": "Application Customiser sample using Bing Search API", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-page-related-bing-news", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-page-related-bing-news/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-page-related-bing-news", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/3c17bea7e6dee6599f09d3685871b65fe1aabd1d17c418acb958edbe5d6b23d7.webp", "alt": "Application Customiser sample using Bing Search API", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-personal-assistant/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-personal-assistant", "title": "Personal Assistant - OpenAI Function Calling with Microsoft Graph", "description": "This sample is chatbot that provides information to the current logged in user.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.17.3", "versionGroup": "1.17", "created": "2023-06-23", "updated": "2023-06-23", "authors": [ { "name": "Anoop Tatti", "account": "anoopt", "avatar": "https://github.com/anoopt.png" } ], "preview": { "src": "/images/previews/2bc90f96cb8b596c81f289548b8e531376d0cf2018ba7105c568acb38f1eea8a.webp", "alt": "Extension preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-personal-assistant", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-personal-assistant/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-personal-assistant", "descriptionParagraphs": [ "This sample is chatbot that provides information to the current logged in user." ], "previews": [ { "src": "/images/previews/2bc90f96cb8b596c81f289548b8e531376d0cf2018ba7105c568acb38f1eea8a.webp", "alt": "Extension preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.17.3", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-portal-footer/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-portal-footer", "title": "Portal Footer Application Customizers", "description": "This application customizer provides you the ability to include a footer designed for communication sites.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Extension (unclassified)" ], "technologies": [ "React" ], "version": "1.4.0", "versionGroup": "1.4", "created": "2019-01-12", "updated": "2019-01-12", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" }, { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/PaoloPia.png" }, { "name": "David Opdendries", "account": "spdavid", "avatar": "https://github.com/spdavid.png" } ], "preview": { "src": "/images/previews/979bdb14d4be8af58fa5842d7d6b596eb9a3c9ccc6df1381a4006f7146ac600e.webp", "alt": "Portal Footer Application Customizers", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-portal-footer", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-portal-footer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-portal-footer", "descriptionParagraphs": [ "This application customizer provides you the ability to include a footer designed for communication sites." ], "previews": [ { "src": "/images/previews/979bdb14d4be8af58fa5842d7d6b596eb9a3c9ccc6df1381a4006f7146ac600e.webp", "alt": "Portal Footer Application Customizers", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "component.unclassified", "field": "gallery.componentTypes", "message": "Extension subtype requires source metadata/manifest correction.", "severity": "warning" }, { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-pva-bot/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-pva-bot", "title": "Power Virtual Agents Bot Host", "description": "Adds footer to launch a Power Virtual Agents chatbot window from any page.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2021-06-06", "updated": "2021-06-06", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Dmitry Vorobyov", "account": "DmitryVorobyov", "avatar": "https://github.com/DmitryVorobyov.png" }, { "name": "Renato Romão", "account": "renatoromao", "avatar": "https://github.com/renatoromao.png" } ], "preview": { "src": "/images/previews/22ebe97d9c7c67ef7b30cac5d9e5500af3007e01e2b2a1b1af8b1c01f2a48a7b.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-pva-bot", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-pva-bot/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-pva-bot", "descriptionParagraphs": [ "Sample SharePoint Framework application customizer showing urgent organizational announcements." ], "previews": [ { "src": "/images/previews/22ebe97d9c7c67ef7b30cac5d9e5500af3007e01e2b2a1b1af8b1c01f2a48a7b.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-pva-bot/assets/authentication.gif", "alt": "Authentication", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-pva-bot/assets/greeting.gif", "alt": "Greeting", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint", "Power Virtual Agents" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-qna-chat/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-qna-chat", "title": "QnA Chatbot", "description": "SPFx application extension that uses Azure QnA cognitive services to efficiently answer FAQs.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2017-02-23", "updated": "2017-02-23", "authors": [ { "name": "Rodrigo Silva", "account": "na", "avatar": "https://github.com/RodrigoSilva.png" } ], "preview": { "src": "/images/previews/a1786b8443a8e13c7ab4f569f18dee11eeb0adeca8b74c47f1ad8f93ee524676.webp", "alt": "QnA Chatbot", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-qna-chat", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-qna-chat/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-qna-chat", "descriptionParagraphs": [ "SPFx application extension that uses Azure QnA cognitive services to efficiently answer FAQs." ], "previews": [ { "src": "/images/previews/a1786b8443a8e13c7ab4f569f18dee11eeb0adeca8b74c47f1ad8f93ee524676.webp", "alt": "QnA Chatbot", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-quick-create/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-quick-create", "title": "Application Customizer Quick Create", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.18.2", "versionGroup": "1.18", "created": "2023-12-25", "updated": "2024-09-30", "authors": [ { "name": "Alec Tecson", "account": "alecwantstobattle", "avatar": "https://github.com/alecwantstobattle.png" } ], "preview": { "src": "/images/previews/5f7094db75944f075ba4f15c532b0bf8285ad0262206c162bbcaafa3b1bfa645.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-quick-create", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-quick-create/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-quick-create", "descriptionParagraphs": [ "SharePoint Framework Application Customizer that 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. Inspired by Quick Create functionality by popular CRMs." ], "previews": [ { "src": "/images/previews/5f7094db75944f075ba4f15c532b0bf8285ad0262206c162bbcaafa3b1bfa645.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.18.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-quick-register-to-appointment/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-quick-register-to-appointment", "title": "Quick Register to Appointment (SharePoint Event page)", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-10-17", "updated": "2025-10-17", "authors": [ { "name": "Marc André Schröder-Zhou", "account": "maschroeder-z", "avatar": "https://github.com/maschroeder-z.png" } ], "preview": { "src": "/images/previews/724bfde0c14127affa5eeaa49a2fba3ed122442e96939a68ba99fe7bd0db53b0.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-quick-register-to-appointment", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-quick-register-to-appointment/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-quick-register-to-appointment", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/724bfde0c14127affa5eeaa49a2fba3ed122442e96939a68ba99fe7bd0db53b0.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-regions-footer/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-regions-footer", "title": "Regions Footer Application Customizer", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.2.0", "versionGroup": "1.2", "created": "2017-09-28", "updated": "2017-09-28", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/PaoloPia.png" } ], "preview": { "src": "/images/previews/8af4a277eb4ac1207898c1a3d1360d9b25992552c514adb6a49c979ad2254dfa.webp", "alt": "Regions Footer Application Customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-regions-footer", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-regions-footer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-regions-footer", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/8af4a277eb4ac1207898c1a3d1360d9b25992552c514adb6a49c979ad2254dfa.webp", "alt": "Regions Footer Application Customizer", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-regions-footer/assets/Regions-Footer-Config.png", "alt": "Regions Footer Application Customizer", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-regions-footer/assets/Regions-Footer-Taxonomy-Custom-Properties.png", "alt": "Regions Footer Application Customizer", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-regions-footer/assets/Regions-Footer-Taxonomy.png", "alt": "Regions Footer Application Customizer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.2.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-search-dynamicdata/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-search-dynamicdata", "title": "Connecting SPFx Extensions with Web Parts using Dynamic Data", "description": "This example shows how to connect Spfx extensions with Spfx Webparts using Dynamic Data Feature", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer", "Web part" ], "technologies": [ "React" ], "version": "1.5.0-plusbeta", "versionGroup": "1.5", "created": "2018-07-15", "updated": "2018-07-15", "authors": [ { "name": "Adrián Díaz", "account": "AdrianDiaz81", "avatar": "https://github.com/AdrianDiaz81.png" } ], "preview": { "src": "/images/previews/b50310600541c1766542d6c727eb672357da41fe8e70fd0f6c730124fc6e8bd7.webp", "alt": "Connecting SPFx Extensions with Web Parts using Dynamic Data", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-search-dynamicdata", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-search-dynamicdata/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-search-dynamicdata", "descriptionParagraphs": [ "This example shows how to connect Spfx extensions with Spfx Webparts using Dynamic Data Feature" ], "previews": [ { "src": "/images/previews/b50310600541c1766542d6c727eb672357da41fe8e70fd0f6c730124fc6e8bd7.webp", "alt": "Connecting SPFx Extensions with Web Parts using Dynamic Data", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.5.0-plusbeta", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-sitepagecoremetadata/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-sitepagecoremetadata", "title": "Tenant Global NavBar", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.5.0", "versionGroup": "1.5", "created": "2018-08-15", "updated": "2018-08-15", "authors": [ { "name": "Vipul Kelkar", "account": "vipulkelkar", "avatar": "https://github.com/vipulkelkar.png" } ], "preview": { "src": "/images/previews/d59b128974a94d8e38307c9988d7860e2b667aa3ecf1335fa723c01f211a51b6.webp", "alt": "Tenant Global NavBar", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-sitepagecoremetadata", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-sitepagecoremetadata/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-sitepagecoremetadata", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/d59b128974a94d8e38307c9988d7860e2b667aa3ecf1335fa723c01f211a51b6.webp", "alt": "Tenant Global NavBar", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.5.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-sites-hubsite-switcher/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-sites-hubsite-switcher", "title": "Sites in Hub site switcher", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-04-24", "updated": "2018-04-24", "authors": [ { "name": "Luis Mañez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/previews/d10ba72c0755fd050d7bf1042aeae5034c296fb203e2767174c2c613d249294e.webp", "alt": "Sites in Hub site switcher", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-sites-hubsite-switcher", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-sites-hubsite-switcher/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-sites-hubsite-switcher", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/d10ba72c0755fd050d7bf1042aeae5034c296fb203e2767174c2c613d249294e.webp", "alt": "Sites in Hub site switcher", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-smart-context/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-smart-context", "title": "Smart Context - AI-Powered Page Insights", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.22.1", "versionGroup": "1.22", "created": "2026-02-01", "updated": "2026-02-01", "authors": [ { "name": "Federico Porceddu", "account": "fredupstair", "avatar": "https://github.com/fredupstair.png" } ], "preview": { "src": "/images/previews/b395dc923063ac1de5e0966a73445ed32a71c2e90e91c28a4b5862449d4d1a2f.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-smart-context", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-smart-context/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-smart-context", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/b395dc923063ac1de5e0966a73445ed32a71c2e90e91c28a4b5862449d4d1a2f.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-smart-context/assets/smart-context-preview-2.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-smart-context/assets/smart-context-preview-3.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-smart-context/assets/smart-context-preview-4.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-smart-context/assets/smart-context-preview-5.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-smart-context/assets/smart-context-preview-6.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-smart-context/assets/smart-context-preview.gif", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-smart-context/assets/smart-context-preview.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.22.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[5].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[6].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[7].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 9 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-team-archived-notification/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-team-archived-notification", "title": "Displaying notification if a team is set as archived", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Extension (unclassified)" ], "technologies": [ "React" ], "version": "1.7.1", "versionGroup": "1.7", "created": "2019-01-02", "updated": "2019-01-02", "authors": [ { "name": "Matti Paukkonen", "account": "mpaukkon", "avatar": "https://github.com/mpaukkon.png" } ], "preview": { "src": "/images/previews/f328839239751130d86c50b1cb17ed63fd213598e239e30f3461b04ee9ac4d5f.webp", "alt": "Displaying notification if a team is set as archived", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-team-archived-notification", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-team-archived-notification/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-team-archived-notification", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/f328839239751130d86c50b1cb17ed63fd213598e239e30f3461b04ee9ac4d5f.webp", "alt": "Displaying notification if a team is set as archived", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-team-archived-notification/assets/deploy.png", "alt": "Displaying notification if a team is set as archived", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-team-archived-notification/assets/tenantwide.PNG", "alt": "Displaying notification if a team is set as archived", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.7.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "component.unclassified", "field": "gallery.componentTypes", "message": "Extension subtype requires source metadata/manifest correction.", "severity": "warning" }, { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-teams-chats-sharepoint/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-teams-chats-sharepoint", "title": "Embed Microsoft Teams chats in SharePoint pages", "description": "Embed Microsoft Teams chats within SharePoint pages to streamline collaboration and information access for users.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.16.0", "versionGroup": "1.16", "created": "2023-10-19", "updated": "2023-10-19", "authors": [ { "name": "João Ferreira", "account": "joaoferreira", "avatar": "https://github.com/joaoferreira.png" } ], "preview": { "src": "/images/previews/db2cca0bb45a05d536d82a4bfb801287184bb5111f5020fa1d3823793a40d8a8.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-teams-chats-sharepoint", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-teams-chats-sharepoint/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-teams-chats-sharepoint", "descriptionParagraphs": [ "This SPFx extension was built to embed Microsoft Teams chats within SharePoint pages to streamline collaboration and information access for users. This application customizer takes advantage of a Microsoft Teams integration made by Microsoft for Edge where links shared in chats open with the conversation context next to it in the browser. Using this solution you can bring the same feature to your SharePoint pages." ], "previews": [ { "src": "/images/previews/db2cca0bb45a05d536d82a4bfb801287184bb5111f5020fa1d3823793a40d8a8.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.16.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-tenant-global-navbar/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-tenant-global-navbar", "title": "Tenant Global NavBar Application Customizer", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2017-09-28", "updated": "2024-10-05", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/PaoloPia.png" } ], "preview": { "src": "/images/previews/99828cb3b716c3051b20cc190ca86dee1acb99d748d61819f89a83c9fb096fcc.webp", "alt": "Tenant Global NavBar Application Customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-tenant-global-navbar", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-tenant-global-navbar/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-tenant-global-navbar", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/99828cb3b716c3051b20cc190ca86dee1acb99d748d61819f89a83c9fb096fcc.webp", "alt": "Tenant Global NavBar Application Customizer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-tenant-telemetry-listener/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-tenant-telemetry-listener", "title": "Tenant Telemetry Application Customizer", "description": "A tenant-wide SPFx Application Customizer that collects telemetry from all SPFx web parts and extensions using Application Insights or Azure Functions.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "JavaScript" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-11-18", "updated": "2025-11-18", "authors": [ { "name": "Valeras Narbutas", "account": "ValerasNarbutas", "avatar": "https://github.com/ValerasNarbutas.png" } ], "preview": { "src": "/images/previews/bfd7e0716289be8ceb930de00ef61ef588deca87368111fa0ac776c62e0ee674.webp", "alt": "Tenant Telemetry Application Customizer preview screenshot", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-tenant-telemetry-listener", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-tenant-telemetry-listener/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-tenant-telemetry-listener", "descriptionParagraphs": [ "This SPFx Application Customizer enables tenant-wide telemetry collection for all custom SPFx solutions.", "Web parts dispatch lightweight telemetry events using the browser CustomEvent API, and the Application Customizer enriches and forwards them to either Azure Application Insights or an Azure Function endpoint.", "This helps organizations understand usage patterns, adoption, component versions, page views, and custom events across thousands of SharePoint Online sites." ], "previews": [ { "src": "/images/previews/bfd7e0716289be8ceb930de00ef61ef588deca87368111fa0ac776c62e0ee674.webp", "alt": "Tenant Telemetry Application Customizer preview screenshot", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "SPFx Extensions allow developers to extend the SharePoint user experience. Application Customizers are ideal for tenant-wide logic such as telemetry or analytics.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages and enable tenant-wide customization scenarios.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-tfl-status/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-tfl-status", "title": "Transport for London (TfL) Status", "description": "This sample is chatbot that provides information about Transport for London (TfL) status.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.17.3", "versionGroup": "1.17", "created": "2023-06-23", "updated": "2023-06-23", "authors": [ { "name": "anoopt", "account": "anoopt", "avatar": "https://github.com/anoopt.png" } ], "preview": { "src": "/images/previews/d56466e814023bf37d5d84cf5d68c49bbf0a6e2f53d947a33e26bac6a5eeaa1e.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-tfl-status", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-tfl-status/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-tfl-status", "descriptionParagraphs": [ "This sample is chatbot that provides information about Transport for London (TfL) status." ], "previews": [ { "src": "/images/previews/d56466e814023bf37d5d84cf5d68c49bbf0a6e2f53d947a33e26bac6a5eeaa1e.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.17.3", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-weather-widget/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-weather-widget", "title": "Weather Application Customizer Extension", "description": "SPFx Weather Application Customizer Extension in the top placeholder", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2023-03-12", "updated": "2023-03-12", "authors": [ { "name": "Rishabh Shukla", "account": "rishabhshukla12", "avatar": "https://github.com/rishabhshukla12.png" } ], "preview": { "src": "/images/previews/d7251f693a70007632f2ca8be5af943ef39966066bcc34588cbe373a65340dce.webp", "alt": "Extension preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-weather-widget", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-weather-widget/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-weather-widget", "descriptionParagraphs": [ "SPFx Weather Application Customizer Extension in the top placeholder" ], "previews": [ { "src": "/images/previews/d7251f693a70007632f2ca8be5af943ef39966066bcc34588cbe373a65340dce.webp", "alt": "Extension preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-application-webhooks-notification/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-application-webhooks-notification", "title": "Webhooks Notification Application Customizer", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.3", "versionGroup": "1.3", "created": "2017-11-05", "updated": "2017-11-05", "authors": [ { "name": "Giuliano De Luca", "account": "giuleon", "avatar": "https://github.com/giuleon.png" } ], "preview": { "src": "/images/previews/5087a546d1b5396f24085b9097b24fb4ce2e054c08e48813a8460c8975c27ff1.webp", "alt": "Webhooks Notification Application Customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-webhooks-notification", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-webhooks-notification/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-application-webhooks-notification", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/5087a546d1b5396f24085b9097b24fb4ce2e054c08e48813a8460c8975c27ff1.webp", "alt": "Webhooks Notification Application Customizer", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-application-webhooks-notification/assets/Architecture.png", "alt": "Webhooks Notification Application Customizer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.3", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-bot-framework-secure/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-bot-framework-secure", "title": "Bot Framework Secure", "description": "This sample will show you how to embed a Bot Framework bot into a SharePoint web site with security consideration.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2020-11-10", "updated": "2020-11-10", "authors": [ { "name": "Qiong Wu", "account": "DingmaomaoBJTU", "avatar": "https://github.com/DingmaomaoBJTU.png" } ], "preview": { "src": "/images/previews/74522eabe7e70c1f18ccdd74123f5bd90cd34f7f7a2b3aa2c50f5b52eab6c097.webp", "alt": "Bot Framework Secure", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-bot-framework-secure", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-bot-framework-secure/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-bot-framework-secure", "descriptionParagraphs": [ "This sample will show you how to embed a Bot Framework bot into a SharePoint web site with security consideration." ], "previews": [ { "src": "/images/previews/74522eabe7e70c1f18ccdd74123f5bd90cd34f7f7a2b3aa2c50f5b52eab6c097.webp", "alt": "Bot Framework Secure", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-bot-framework-secure/assets/EnhancedAuth.png", "alt": "Bot Framework Secure", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-bot-framework-sso/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-bot-framework-sso", "title": "Bot Framework SSO", "description": "This sample will show you how to embed a Bot Framework bot into a SharePoint web site with SSO.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-11-10", "updated": "2020-11-10", "authors": [ { "name": "Qiong Wu", "account": "DingmaomaoBJTU", "avatar": "https://github.com/DingmaomaoBJTU.png" } ], "preview": { "src": "/images/previews/ad1f45657978a8e831eb5ae20923372c1fc9a4a92f8d0e91dd6d86940eb7a92b.webp", "alt": "Bot Framework SSO", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-bot-framework-sso", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-bot-framework-sso/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-bot-framework-sso", "descriptionParagraphs": [ "This sample will show you how to embed a Bot Framework bot into a SharePoint web site with SSO." ], "previews": [ { "src": "/images/previews/ad1f45657978a8e831eb5ae20923372c1fc9a4a92f8d0e91dd6d86940eb7a92b.webp", "alt": "Bot Framework SSO", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-addfolders/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-addfolders", "title": "Add Folders Command", "description": "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).", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2021-01-17", "updated": "2021-01-17", "authors": [ { "name": "Michaël Maillot", "account": "michaelmaillot", "avatar": "https://github.com/michaelmaillot.png" } ], "preview": { "src": "/images/previews/fb4d786049d2d42dcb707ee4e74601671a7ded4bd7abb7ec928766bf05939fac.webp", "alt": "Add Folders Command", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-addfolders", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-addfolders/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-addfolders", "descriptionParagraphs": [ "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)." ], "previews": [ { "src": "/images/previews/fb4d786049d2d42dcb707ee4e74601671a7ded4bd7abb7ec928766bf05939fac.webp", "alt": "Add Folders Command", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-ai-document-assistant/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-ai-document-assistant", "title": "AI Document Assistant", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2023-12-25", "updated": "2023-12-31", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/855c7370363e6f5e411156957e295556d8f33a2e0680a39a7546c9d0ea0871d1.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-ai-document-assistant", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-ai-document-assistant/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-ai-document-assistant", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/855c7370363e6f5e411156957e295556d8f33a2e0680a39a7546c9d0ea0871d1.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-authenticated-flowtrigger/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-authenticated-flowtrigger", "title": "Authenticated Power Automate Flow Trigger - SPFx CommandSet Extension", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.22.1", "versionGroup": "1.22", "created": "2026-01-26", "updated": "2026-01-26", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/9d47996952dae0cfb892cfb0873e24d9a8d6a6d362dd0b1f2b3f0afa23b5d9ad.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-authenticated-flowtrigger", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-authenticated-flowtrigger/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-authenticated-flowtrigger", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/9d47996952dae0cfb892cfb0873e24d9a8d6a6d362dd0b1f2b3f0afa23b5d9ad.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-authenticated-flowtrigger/assets/screenshot-1.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-authenticated-flowtrigger/assets/screenshot-2.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-authenticated-flowtrigger/assets/screenshot-3.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-authenticated-flowtrigger/assets/screenshot-4.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.22.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 6 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-change-page-layouttype/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-change-page-layouttype", "title": "Change Page Layout Command Extension", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2021-10-25", "updated": "2021-10-25", "authors": [ { "name": "Sudharsan K.", "account": "sudharsank", "avatar": "https://github.com/sudharsank.png" } ], "preview": { "src": "/images/previews/3739a28149dfeddb6f1dadbd5db530f0e517d8bad6718d1fe084b9aef3943c49.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-change-page-layouttype", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-change-page-layouttype/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-change-page-layouttype", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/3739a28149dfeddb6f1dadbd5db530f0e517d8bad6718d1fe084b9aef3943c49.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-change-page-layouttype/assets/ChangeLayout-Dialog.png", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-convert-to-pdf/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-convert-to-pdf", "title": "Save and convert as PDF by PnP", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2021-02-23", "updated": "2025-09-03", "authors": [ { "name": "Mikael Svenson", "account": "wobba", "avatar": "https://github.com/wobba.png" }, { "name": "Nicolas Kheirallah", "account": "NicolasKheirallah", "avatar": "https://github.com/NicolasKheirallah.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-convert-to-pdf", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-convert-to-pdf/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-convert-to-pdf", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "asset.missing", "field": "thumbnails[0].url", "message": "Asset not found in collected repository tree: samples/react-command-convert-to-pdf/screenshot.gif", "severity": "error" }, { "code": "preview.unavailable", "field": "thumbnails", "message": "No usable declared image is available; a labelled fallback is shown.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-copy-move-items/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-copy-move-items", "title": "Copy/Move Item(s)", "description": "Displays a command button named **Copy/Move Item(s)** in all the custom lists", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2021-09-13", "updated": "2021-09-13", "authors": [ { "name": "Sudharsan Kesavanarayanan", "account": "sudharsank", "avatar": "https://github.com/sudharsank.png" } ], "preview": { "src": "/images/previews/08b7147e5d6aaace773cd138ab2d66137c0facea57f9bf9b9bab4c9322709cd2.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-copy-move-items", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-copy-move-items/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-copy-move-items", "descriptionParagraphs": [ "This application customizer will display a command button named **Copy/Move Item(s)** in all the custom lists. Using this option, the items can be copied or moved from one list to another within the site." ], "previews": [ { "src": "/images/previews/08b7147e5d6aaace773cd138ab2d66137c0facea57f9bf9b9bab4c9322709cd2.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-copy-pnp-search-webpart-settings/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-copy-pnp-search-webpart-settings", "title": "Copy PnP search results webpart settings", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2021-06-11", "updated": "2021-07-02", "authors": [ { "name": "Anoop Tatti", "account": "anoopt", "avatar": "https://github.com/anoopt.png" } ], "preview": { "src": "/images/previews/3ad5705433640d0ebf4150b5b5a5390a7119d9fa0fcb4027442d4e77427c595b.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-copy-pnp-search-webpart-settings", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-copy-pnp-search-webpart-settings/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-copy-pnp-search-webpart-settings", "descriptionParagraphs": [ "LONG DESCRIPTION" ], "previews": [ { "src": "/images/previews/3ad5705433640d0ebf4150b5b5a5390a7119d9fa0fcb4027442d4e77427c595b.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-custom-command-bar/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-custom-command-bar", "title": "Custom Command Bar Command Set Customizer", "description": "The sample illustrates how to display custom Command Bar when Command Set Button is pressed.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.2.0", "versionGroup": "1.2", "created": "2017-09-27", "updated": "2017-09-27", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" } ], "preview": { "src": "/images/previews/e233211907a767de800242ed8f4079dc7586f291a767518647b2a1c09fd36c32.webp", "alt": "Custom Command Bar Command Set Customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-custom-command-bar", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-custom-command-bar/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-custom-command-bar", "descriptionParagraphs": [ "The sample illustrates how to display custom Command Bar when Command Set Button is pressed." ], "previews": [ { "src": "/images/previews/e233211907a767de800242ed8f4079dc7586f291a767518647b2a1c09fd36c32.webp", "alt": "Custom Command Bar Command Set Customizer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.2.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-demote-news/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-demote-news", "title": "Demote News to Page", "description": "Sample SharePoint Framework list view command set extension to demote a previously promoted News page.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2021-02-22", "updated": "2021-02-22", "authors": [ { "name": "Mikael Svenson", "account": "wobba", "avatar": "https://github.com/wobba.png" } ], "preview": { "src": "/images/previews/1aee897e5c9492ded147a12f3e1a7bdaf3d55ba766a36e9c9ca187af40f85cbb.webp", "alt": "Demote News to Page", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-demote-news", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-demote-news/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-demote-news", "descriptionParagraphs": [ "Sample SharePoint Framework list view command set extension to demote a previously promoted News page." ], "previews": [ { "src": "/images/previews/1aee897e5c9492ded147a12f3e1a7bdaf3d55ba766a36e9c9ca187af40f85cbb.webp", "alt": "Demote News to Page", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-dialog/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-dialog", "title": "Custom Dialog Sample with Command View Set", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.6.0", "versionGroup": "1.6", "created": "2019-09-01", "updated": "2019-09-01", "authors": [ { "name": "Malathi Sekkappan", "account": "msekkappan", "avatar": "https://github.com/msekkappan.png" } ], "preview": { "src": "/images/previews/ceacdf95e7bb6edbd4a31bb7bc93fe5ed36c149625f8404df95eba19a3bdbe39.webp", "alt": "Custom Dialog Sample with Command View Set", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-dialog", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-dialog/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-dialog", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/ceacdf95e7bb6edbd4a31bb7bc93fe5ed36c149625f8404df95eba19a3bdbe39.webp", "alt": "Custom Dialog Sample with Command View Set", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.6.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-direct-link/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-direct-link", "title": "Get a direct link to a document or folder", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.7.1", "versionGroup": "1.7", "created": "2019-01-06", "updated": "2019-01-06", "authors": [ { "name": "Jonas Bjerke Hansen", "account": "JonasBjerke89", "avatar": "https://github.com/JonasBjerke89.png" } ], "preview": { "src": "/images/previews/2c1f238bf636aed6b59c564f3e2a6a2e741faba02041111d429000adc8315f06.webp", "alt": "Get a direct link to a document or folder", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-direct-link", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-direct-link/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-direct-link", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/2c1f238bf636aed6b59c564f3e2a6a2e741faba02041111d429000adc8315f06.webp", "alt": "Get a direct link to a document or folder", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.7.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-directions/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-directions", "title": "Directions SharePoint Framework list view command set", "description": "Sample SharePoint Framework list view command set showing travel directions to the given location using Google Maps.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.1.1", "versionGroup": "1.1", "created": "2017-06-29", "updated": "2017-06-29", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/49f22a486b8a13ac97cb9e9c816c6c705013625a930276d7f0f0cc70da43a64d.webp", "alt": "Directions SharePoint Framework list view command set", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-directions", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-directions/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-directions", "descriptionParagraphs": [ "Sample SharePoint Framework list view command set showing travel directions to the given location using Google Maps." ], "previews": [ { "src": "/images/previews/49f22a486b8a13ac97cb9e9c816c6c705013625a930276d7f0f0cc70da43a64d.webp", "alt": "Directions SharePoint Framework list view command set", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-directions/assets/directions-driving-microsoft.png", "alt": "Directions SharePoint Framework list view command set", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.1.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-discuss-now/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-discuss-now", "title": "Discuss Now Command Set", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-07-18", "updated": "2018-07-18", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/PaoloPia.png" } ], "preview": { "src": "/images/previews/cf01039d05f07f884365239330b7e301e1c50c1c4bea94dcaa850bf8f1c0bef3.webp", "alt": "Discuss Now Command Set", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-discuss-now", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-discuss-now/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-discuss-now", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/cf01039d05f07f884365239330b7e301e1c50c1c4bea94dcaa850bf8f1c0bef3.webp", "alt": "Discuss Now Command Set", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-document-preview/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-document-preview", "title": "Document Preview ListView Command Set", "description": "Preview images, videos and documents in a side panel with the Smart View list command.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-03-08", "updated": "2026-04-22", "authors": [ { "name": "Sudharsan K.", "account": "sudharsank", "avatar": "https://github.com/sudharsank.png" } ], "preview": { "src": "/images/previews/c7f044a5474b411d406eb2d600b93d3401fad6022404ea86f831c57e4c9a8b18.webp", "alt": "Smart View document preview in a library side panel", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-document-preview", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-document-preview/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-document-preview", "descriptionParagraphs": [ "A SharePoint Framework ListView Command Set that adds a Smart View command for previewing supported images, videos and documents without navigating away from the library." ], "previews": [ { "src": "/images/previews/c7f044a5474b411d406eb2d600b93d3401fad6022404ea86f831c57e4c9a8b18.webp", "alt": "Smart View document preview in a library side panel", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "Documentation for extending the SharePoint user experience with SharePoint Framework extensions.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-document-translation/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-document-translation", "title": "Command Document Translation", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-11-12", "updated": "2025-11-12", "authors": [ { "name": "Ramin Ahmadi", "account": "ramin-ahmadi", "avatar": "https://github.com/ramin-ahmadi.png" } ], "preview": { "src": "/images/previews/6b2ef13c5430d5488af5bc04dd7069c0e33a68150bd9466fab0b487c9bffa58b.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-document-translation", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-document-translation/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-document-translation", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/6b2ef13c5430d5488af5bc04dd7069c0e33a68150bd9466fab0b487c9bffa58b.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-documents-redaction/Assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-documents-redaction", "title": "Azure AI Document Redaction Extension", "description": "Provides document redaction capabilities using Azure AI Language services", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-09-20", "updated": "2025-09-20", "authors": [ { "name": "Ramin Ahmadi", "account": "AhmadiRamin", "avatar": "https://github.com/AhmadiRamin.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-documents-redaction", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-documents-redaction/Assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-documents-redaction", "descriptionParagraphs": [ "This SharePoint Framework (SPFx) extension provides document redaction capabilities using Azure AI Language services. Users can select documents from SharePoint document libraries and automatically redact sensitive information such as PII (Personally Identifiable Information), PHI (Protected Health Information), and custom entity types. The solution includes both a SharePoint Framework list view command set extension and a complete Azure Functions backend for processing." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.location", "field": "$", "message": "Use the canonical assets/sample.json path and casing.", "severity": "warning" }, { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "asset.missing", "field": "thumbnails[0].url", "message": "Asset not found in collected repository tree: samples/react-command-documents-redaction/assets/preview.gif", "severity": "error" }, { "code": "preview.unavailable", "field": "thumbnails", "message": "No usable declared image is available; a labelled fallback is shown.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-file-size-viewer/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-file-size-viewer", "title": "File Size Viewer sample with Command View Set", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2021-02-21", "updated": "2021-02-21", "authors": [ { "name": "Jose Quinto", "account": "jquintozamora", "avatar": "https://github.com/jquintozamora.png" }, { "name": "Sudharsan Kesavanarayanan", "account": "sudharsank", "avatar": "https://github.com/sudharsank.png" } ], "preview": { "src": "/images/previews/f771b68230dbbe532e0946e73e6181163af4023a0a95c989705a663253b48a6f.webp", "alt": "File Size Viewer sample with Command View Set", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-file-size-viewer", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-file-size-viewer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-file-size-viewer", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/f771b68230dbbe532e0946e73e6181163af4023a0a95c989705a663253b48a6f.webp", "alt": "File Size Viewer sample with Command View Set", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-file-size-viewer/assets/CommandBar-2.png", "alt": "File Size Viewer sample with Command View Set", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-file-size-viewer/assets/CommandBar-3.png", "alt": "File Size Viewer sample with Command View Set", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-file-size-viewer/assets/CommandBar.png", "alt": "File Size Viewer sample with Command View Set", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-file-size-viewer/assets/File-Size-Viewer-SPFX-Extension-Selection.png", "alt": "File Size Viewer sample with Command View Set", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-file-size-viewer/assets/File-Size-Viewer-SPFX-Extension.png", "alt": "File Size Viewer sample with Command View Set", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-folder-select/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-folder-select", "title": "Folder Selection", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2020-01-03", "updated": "2020-01-03", "authors": [ { "name": "Zach Roberts", "account": "zachroberts8668", "avatar": "https://github.com/zachroberts8668.png" } ], "preview": { "src": "/images/previews/f415bf0a305c83ca51f802d8be68f333b826b83725687d455db411af1a9475c1.webp", "alt": "Folder Selection", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-folder-select", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-folder-select/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-folder-select", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/f415bf0a305c83ca51f802d8be68f333b826b83725687d455db411af1a9475c1.webp", "alt": "Folder Selection", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-follow-document/Assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-follow-document", "title": "Follow Document", "description": "This solution has the goal to easily identify/follow user key documents from all Tenant and easily access them in Modern Pages.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2021-06-13", "updated": "2021-11-25", "authors": [ { "name": "André Lage", "account": "aaclage", "avatar": "https://github.com/aaclage.png" } ], "preview": { "src": "/images/previews/c66f66366cde3af6754552652526235451d262d06a3e165a55cf2603f08023d9.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-follow-document", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-follow-document/Assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-follow-document", "descriptionParagraphs": [ "This solution has the goal to easily identify/follow user key documents from all Tenant and easily access them in Modern Pages.", "This solution uses the Out of Box Social feature Follow document with combination of MSGraph queries and MGT FileList/File components." ], "previews": [ { "src": "/images/previews/c66f66366cde3af6754552652526235451d262d06a3e165a55cf2603f08023d9.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [ { "code": "metadata.location", "field": "$", "message": "Use the canonical assets/sample.json path and casing.", "severity": "warning" }, { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-form-settings/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-form-settings", "title": "Form Settings Command View Set", "description": "This sample shows how you can redirect default SharePoint list forms (New,Edit,Display) to different pages.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.8.2", "versionGroup": "1.8", "created": "2019-06-30", "updated": "2019-06-30", "authors": [ { "name": "Ramin Ahmadi", "account": "AhmadiRamin", "avatar": "https://github.com/AhmadiRamin.png" } ], "preview": { "src": "/images/previews/2f282fa37181dc24f5720b3ee1b0dbe19f745aeacb7a39bc5f783ea1fb7087b6.webp", "alt": "Form Settings Command View Set", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-form-settings", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-form-settings/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-form-settings", "descriptionParagraphs": [ "This sample shows how you can redirect default SharePoint list forms (New,Edit,Display) to different pages." ], "previews": [ { "src": "/images/previews/2f282fa37181dc24f5720b3ee1b0dbe19f745aeacb7a39bc5f783ea1fb7087b6.webp", "alt": "Form Settings Command View Set", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.8.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-generate-documents/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-generate-documents", "title": "react-command-generate-documents", "description": "Generate Word and PDF documents from SharePoint templates using a list command and an Azure Function.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2019-10-09", "updated": "2023-03-26", "authors": [ { "name": "Russell Gove", "account": "russgove", "avatar": "https://github.com/russgove.png" } ], "preview": { "src": "/images/previews/0455de8bda0c5d197e3b1bf4348b340e65481d08ec1da85fa6d9dfebe98432fb.webp", "alt": "Generate documents command and generated document", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-generate-documents", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-generate-documents/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-generate-documents", "descriptionParagraphs": [ "A SharePoint Framework ListView Command Set that calls an Azure Function to populate a Word template with text, images, checkboxes and tables. The function saves generated Word or PDF documents to SharePoint using the caller's permissions." ], "previews": [ { "src": "/images/previews/0455de8bda0c5d197e3b1bf4348b340e65481d08ec1da85fa6d9dfebe98432fb.webp", "alt": "Generate documents command and generated document", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "Documentation for extending the SharePoint user experience with SharePoint Framework extensions.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-get-thumbnail/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-get-thumbnail", "title": "Get Thumbnail List Item Command View Set", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2019-10-25", "updated": "2019-10-25", "authors": [ { "name": "Aakash Bhardwaj", "account": "aakashbhardwaj619", "avatar": "https://avatars.githubusercontent.com/u/33526902?s=460&u=e780f4ef1da922c84f2c5c66c59cecbff2300581&v=4" } ], "preview": { "src": "/images/previews/eb4908af3fcbc08b24a8d2b74c6014433966705bff1aa0046fcdfed44831d875.webp", "alt": "Get Thumbnail List Item Command View Set", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-get-thumbnail", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-get-thumbnail/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-get-thumbnail", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/eb4908af3fcbc08b24a8d2b74c6014433966705bff1aa0046fcdfed44831d875.webp", "alt": "Get Thumbnail List Item Command View Set", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-image-editor/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-image-editor", "title": "Image Editor Command Set", "description": "This command set allows quick edit images located in Document Library.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-06-16", "updated": "2020-06-16", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/b3e02b0b126dc5955000b24331b9091dedcbebc251f6bb84d31001a8ad92124d.webp", "alt": "Image Editor Command Set", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-image-editor", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-image-editor/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-image-editor", "descriptionParagraphs": [ "This command set allows quick edit images located in Document Library." ], "previews": [ { "src": "/images/previews/b3e02b0b126dc5955000b24331b9091dedcbebc251f6bb84d31001a8ad92124d.webp", "alt": "Image Editor Command Set", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-image-editor/assets/Screenshot2.png", "alt": "Image Editor Command Set", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-live-dashboard-sharepoint/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-live-dashboard-sharepoint", "title": "react-command-live-dashboard-sharepoint", "description": "This solution deploys an SPFx Command Set Extension to surface a SharePoint HTML Live Dashboard created using Copilot in the context of a SharePoint list or library. It adds a \"Show Dashboard\" command to the command bar; clicking it opens the Copilot-generated dashboard's embed page in a modal iframe popup, without leaving the list view.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.24.0-beta.2", "versionGroup": "1.24", "created": "2026-08-29", "updated": "2026-08-29", "authors": [ { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png" } ], "preview": { "src": "/images/previews/925988a21b959d9ec0d03c477630ffec2b6324f56d3f9aab29b1f9d5fa7c59ec.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-live-dashboard-sharepoint", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-live-dashboard-sharepoint/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-live-dashboard-sharepoint", "descriptionParagraphs": [ "This solution deploys an SPFx Command Set Extension to surface a SharePoint HTML Live Dashboard created using Copilot in the context of a SharePoint list or library. It adds a \"Show Dashboard\" command to the command bar; clicking it opens the Copilot-generated dashboard's embed page in a modal iframe popup, without leaving the list view." ], "previews": [ { "src": "/images/previews/925988a21b959d9ec0d03c477630ffec2b6324f56d3f9aab29b1f9d5fa7c59ec.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-live-dashboard-sharepoint/assets/2.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-mail-view-as-image/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-mail-view-as-image", "title": "Mail Current View as Image", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.6.0", "versionGroup": "1.6", "created": "2018-11-13", "updated": "2018-11-13", "authors": [ { "name": "Anoop Tatti", "account": "anoopt", "avatar": "https://avatars.githubusercontent.com/u/9694225?s=460&u=fbb4b27ed944935800d5f6dbc91e71911ce0d4ec&v=4" } ], "preview": { "src": "/images/previews/276f37174f7925af6ec0413b00d00724ee75822743c27cca561c8701d98ad86e.webp", "alt": "Mail Current View as Image", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-mail-view-as-image", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-mail-view-as-image/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-mail-view-as-image", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/276f37174f7925af6ec0413b00d00724ee75822743c27cca561c8701d98ad86e.webp", "alt": "Mail Current View as Image", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.6.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-manage-list-subscriptions/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-manage-list-subscriptions", "title": "React-Manage-List-Subscriptions", "description": "Demonstrates managing the list subscriptions (sharepoint webhooks) and action to renew the webhook expiration date using Rest calls.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2023-09-12", "updated": "2024-10-03", "authors": [ { "name": "NIshkalank Bezawada", "account": "NishkalankBezawada", "avatar": "https://github.com/NishkalankBezawada.png" } ], "preview": { "src": "/images/previews/9033eba5f4fdc1484cb3277c4815bb94c482a8306a5d97b31bd68538ec2e488e.webp", "alt": "Manage Subscriptions", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-manage-list-subscriptions", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-manage-list-subscriptions/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-manage-list-subscriptions", "descriptionParagraphs": [ "With the use of Rest calls, this sample command set shows how to manage list subscriptions (SharePoint webhooks) and take action to extend the webhook expiration date. The commandset will be added to the lists and libraries and will only be shown if there are any list subscriptions available on the list. The subscriptions that are accessible are shown when you click on the Commandset. The 'Renew subscription' action can be used in accordance with the subscription's expiration date. Given that the default number of days is 180, the subscription's (webhook expiration renewal date) renewal date is set to 179 days." ], "previews": [ { "src": "/images/previews/9033eba5f4fdc1484cb3277c4815bb94c482a8306a5d97b31bd68538ec2e488e.webp", "alt": "Manage Subscriptions", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-manage-list-subscriptions/assets/SubscriptionPanel.gif", "alt": "Subscription Panel", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-manage-list-subscriptions/assets/RenewSubscription.gif", "alt": "Renewing webhook subscriptions", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Get Subscription", "description": "Get SharePoint webhook subscriptions", "url": "https://learn.microsoft.com/sharepoint/dev/apis/webhooks/lists/get-subscription" }, { "title": "Update Subscription", "description": "Update SharePoint webhook subscriptions", "url": "https://learn.microsoft.com/sharepoint/dev/apis/webhooks/lists/update-subscription" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-movedoc2blob/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-movedoc2blob", "title": "Move Document to Blob Storage Command", "description": "The sample demonstrates how to create a command that moves a document to Azure Blob Storage.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "ListView command set", "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-09-02", "updated": "2025-09-02", "authors": [ { "name": "Peter Paul Kirschner", "account": "petkir", "avatar": "https://github.com/petkir.png" } ], "preview": { "src": "/images/previews/9bdcf288514eb12f15423187bb420a0ac96ffd13cffc35ee59d1f582f7294143.webp", "alt": "Move Document to Blob Storage Command", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-movedoc2blob", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-movedoc2blob/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-movedoc2blob", "descriptionParagraphs": [ "This sample demonstrates 'on_behalf_of' authentication to securely move draft documents from SharePoint to Azure Blob Storage. It showcases delegated access and integration between SPFx, Azure Functions, and Azure Storage, while addressing the need to clean up repeated or outdated files (like Final, 'Final_Draft', etc.) in SharePoint." ], "previews": [ { "src": "/images/previews/9bdcf288514eb12f15423187bb420a0ac96ffd13cffc35ee59d1f582f7294143.webp", "alt": "Move Document to Blob Storage Command", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-movedoc2blob/assets/confirm_moving.png", "alt": "Move Document to Blob Storage Command", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-movedoc2blob/assets/document_moved.png", "alt": "Move Document to Blob Storage Command", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-movedoc2blob/assets/docs_in_recyclebin.png", "alt": "Move Document to Blob Storage Command", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-movedoc2blob/assets/docs_on_blob_wp.png", "alt": "Move Document to Blob Storage Command", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[1].order", "message": "Preview order is duplicated.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[2].order", "message": "Preview order is duplicated.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[3].order", "message": "Preview order is duplicated.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[4].order", "message": "Preview order is duplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-page-model-pnpjs/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-page-model-pnpjs", "title": "Modern Page Model with PnP/PnPjs", "description": "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", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.12.0", "versionGroup": "1.12", "created": "2019-03-23", "updated": "2023-02-15", "authors": [ { "name": "Federico Porceddu", "account": "fredupstair", "avatar": "https://github.com/fredupstair.png" }, { "name": "Mohammad Amer", "account": "mohammadamer", "avatar": "https://github.com/mohammadamer.png" } ], "preview": { "src": "/images/previews/638268aca33f0684593ddd4655f61e4b7abdb6c8be8f47f6b41ae53a8fd3c6e4.webp", "alt": "Modern Page Model with PnP/PnPjs", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-page-model-pnpjs", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-page-model-pnpjs/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-page-model-pnpjs", "descriptionParagraphs": [ "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" ], "previews": [ { "src": "/images/previews/638268aca33f0684593ddd4655f61e4b7abdb6c8be8f47f6b41ae53a8fd3c6e4.webp", "alt": "Modern Page Model with PnP/PnPjs", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-page-model-pnpjs/assets/how-to-make-a-page-template-pnp.gif", "alt": "Modern Page Model with PnP/PnPjs", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.12.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-print/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-print", "title": "Print List Item Command View Set", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2018-12-05", "updated": "2024-10-30", "authors": [ { "name": "Ramin Ahmadi", "account": "AhmadiRamin", "avatar": "https://github.com/AhmadiRamin.png" }, { "name": "Nishkalank Bezawada", "account": "NishkalankBezawada", "avatar": "https://github.com/NishkalankBezawada.png" } ], "preview": { "src": "/images/previews/45aab773042f7f14c58e5bd2e83d9da9a898d2251da175baf99ddee39c391013.webp", "alt": "Print List Item Command View Set", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-print", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-print/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-print", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/45aab773042f7f14c58e5bd2e83d9da9a898d2251da175baf99ddee39c391013.webp", "alt": "Print List Item Command View Set", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-qrcode/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-qrcode", "title": "Generate QR Code List Item Command View Set", "description": "Generates a printable QR code which links to a SharePoint list item.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2019-09-01", "updated": "2019-09-01", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" } ], "preview": { "src": "/images/previews/efffd87bd86fd365d4ba7e29f21501b0792e86b6957bc43412c1f807f30d859e.webp", "alt": "Generate QR Code List Item Command View Set", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-qrcode", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-qrcode/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-qrcode", "descriptionParagraphs": [ "Generates a printable QR code which links to a SharePoint list item." ], "previews": [ { "src": "/images/previews/efffd87bd86fd365d4ba7e29f21501b0792e86b6957bc43412c1f807f30d859e.webp", "alt": "Generate QR Code List Item Command View Set", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-share-pnpjs/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-share-pnpjs", "title": "Multishare Command Extension with PnPJs", "description": "The sample is an custom action only active when multiple items are selected.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.6.0", "versionGroup": "1.6", "created": "2018-09-19", "updated": "2018-09-19", "authors": [ { "name": "Simon Ågren", "account": "simonagren", "avatar": "https://github.com/simonagren.png" } ], "preview": { "src": "/images/previews/f2f3aa7d1ce790b5bf33e86426ad881721e12c6492dce523629f71525f7d80e8.webp", "alt": "Multishare Command Extension with PnPJs", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-share-pnpjs", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-share-pnpjs/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-share-pnpjs", "descriptionParagraphs": [ "The sample is an custom action only active when multiple items are selected." ], "previews": [ { "src": "/images/previews/f2f3aa7d1ce790b5bf33e86426ad881721e12c6492dce523629f71525f7d80e8.webp", "alt": "Multishare Command Extension with PnPJs", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-share-pnpjs/assets/shared.png", "alt": "Multishare Command Extension with PnPJs", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.6.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-share-to-teams/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-fx-extensions-react-command-share-to-teams", "title": "Associated Sites Links", "description": "Web part that will display links to all associated sites that registered to the current site. Current site should be a hub site.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "JavaScript" ], "version": "1.14.0", "versionGroup": "1.14", "created": "2021-04-19", "updated": "2022-11-11", "authors": [ { "name": "Russell Gove", "account": "russgove", "avatar": "https://github.com/russgove.png" } ], "preview": { "src": "/images/previews/132336426e35b81089fca74cd1b28c5273780ea1a17d4ecc3e9253608baaaceb.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-share-to-teams", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-share-to-teams/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-share-to-teams", "descriptionParagraphs": [ "Web part that will display links to all associated sites that registered to the current site.", "Current site should be a hub site." ], "previews": [ { "src": "/images/previews/132336426e35b81089fca74cd1b28c5273780ea1a17d4ecc3e9253608baaaceb.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-share-to-teams/assets/fileNative.PNG", "alt": "File Native", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-share-to-teams/assets/LibraryNative.PNG", "alt": "Library Native", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-share-to-teams/assets/LIbraryPage.PNG", "alt": "LIbrary Page", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-share-to-teams/assets/noPermissions.PNG", "alt": "No Permissions", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-share-to-teams/assets/filePage.PNG", "alt": "File Page", "isFallback": false } ], "references": [], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-singlepartapppage/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-singlepartapppage", "title": "configure a Page as Single App Part page", "description": "Custom Command Set that set a Page layout to use the Single App Part page Layout", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2019-01-29", "updated": "2024-10-09", "authors": [ { "name": "Luis Mañez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/previews/542c3a3000393ab96112b66840db2f1c3e49dadaad42e6404086ced3d4494be3.webp", "alt": "configure a Page as Single App Part page", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-singlepartapppage", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-singlepartapppage/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-singlepartapppage", "descriptionParagraphs": [ "Custom Command Set that set a Page layout to use the Single App Part page Layout" ], "previews": [ { "src": "/images/previews/542c3a3000393ab96112b66840db2f1c3e49dadaad42e6404086ced3d4494be3.webp", "alt": "configure a Page as Single App Part page", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-task-mgmt/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-task-mgmt", "title": "Grouped ListView Command Set - Task Management", "description": "This sample demonstrates the new Grouping support for ListView Command Sets introduced in SPFx 1.23. It adds a grouped Status command (with Approve and Reject sub-commands) to the SharePoint modern list view toolbar and context menu.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.23.0", "versionGroup": "1.23", "created": "2026-05-31", "updated": "2026-05-31", "authors": [ { "name": "Aimery Thomas", "account": "a1mery", "avatar": "https://github.com/a1mery.png" } ], "preview": { "src": "/images/previews/6ead23505b5fe5a3ac77d4dfa66354d1f632b18d10250eae0a1fff40708abec9.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-task-mgmt", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-task-mgmt/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-task-mgmt", "descriptionParagraphs": [ "This sample demonstrates the new Grouping support for ListView Command Sets introduced in SPFx 1.23. It adds a grouped Status command (with Approve and Reject sub-commands) to the SharePoint modern list view toolbar and context menu." ], "previews": [ { "src": "/images/previews/6ead23505b5fe5a3ac77d4dfa66354d1f632b18d10250eae0a1fff40708abec9.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.23.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-command-vision-api/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-command-vision-api", "title": "Image Metadata from Cognitive Services Vision API List View Command Set", "description": "Custom Command Set that gets metadata information from MS Cognitive Services Vision API for the selected Image", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2019-09-01", "updated": "2019-09-01", "authors": [ { "name": "Luis Mañez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/previews/7d15b12463ddd6145c7fdb386a953c0f0f39c0181df917156522a51aed4d9e51.webp", "alt": "Image Metadata from Cognitive Services Vision API List View Command Set", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-vision-api", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-vision-api/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-command-vision-api", "descriptionParagraphs": [ "Custom Command Set that gets metadata information from MS Cognitive Services Vision API for the selected Image" ], "previews": [ { "src": "/images/previews/7d15b12463ddd6145c7fdb386a953c0f0f39c0181df917156522a51aed4d9e51.webp", "alt": "Image Metadata from Cognitive Services Vision API List View Command Set", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-command-vision-api/assets/js-command-vision-api.png", "alt": "Image Metadata from Cognitive Services Vision API List View Command Set", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-company-templates/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-web-parts-react-company-templates", "title": "Company Templates", "description": "An extension to provide a simple approach for company wide used templates in SharePoint Online.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2023-12-22", "updated": "2025-12-08", "authors": [ { "name": "Tobias Maestrini", "account": "tmaestrini", "avatar": "https://github.com/tmaestrini.png" }, { "name": "Dan Toft (Code Reviews)", "account": "Tanddant", "avatar": "https://github.com/Tanddant.png" }, { "name": "Nicolas Kheirallah", "account": "NicolasKheirallah", "avatar": "https://github.com/NicolasKheirallah.png" } ], "preview": { "src": "/images/previews/89a37d905cd60ca567ca76de2ac58d49e0729a84d2f5d995d5c8ccd76a94c09e.webp", "alt": "Extension Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-company-templates", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-company-templates/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-company-templates", "descriptionParagraphs": [ "This is an alternative to the built-in 'New document' experience in a document library in SharePoint Online. It allows a SharePoint admin to define a repository (such as a standard document library or an org assets library) which acts as a source of templates that can be used in every document library. Any user can browse through the collection of company templates, get an instance of the desired template(s) by one single click and start using it." ], "previews": [ { "src": "/images/previews/89a37d905cd60ca567ca76de2ac58d49e0729a84d2f5d995d5c8ccd76a94c09e.webp", "alt": "Extension Preview", "isFallback": false } ], "references": [ { "title": "ListView Command Set extension", "description": "You can use SharePoint Framework (SPFx) Extensions to build list view command set extensions with the aim to extend the SharePoint command surfaces to add new actions, and provides client-side code that you can use to implement custom behaviors.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-copilot-aprils-fool/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-copilot-aprils-fool", "title": "Copilot April's Fool", "description": "An extention to privide a simple approach to display custom messages in SharePoint Online.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-03-23", "updated": "2025-03-23", "authors": [ { "name": "Valeras Narbutas", "account": "ValerasNarbutas", "avatar": "https://github.com/ValerasNarbutas.png" } ], "preview": { "src": "/images/previews/398b2f131a0fd9eed31089aa1349863c5e4f9cf123955326f9e24f40bba2906f.webp", "alt": "Extension Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-copilot-aprils-fool", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-copilot-aprils-fool/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-copilot-aprils-fool", "descriptionParagraphs": [ "An extention to privide a simple approach to display custom messages in SharePoint Online." ], "previews": [ { "src": "/images/previews/398b2f131a0fd9eed31089aa1349863c5e4f9cf123955326f9e24f40bba2906f.webp", "alt": "Extension Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-driveitem-properties/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-driveitem-properties", "title": "Drive Item Properties List view command set extension", "description": "List view command set extensions with below functionalities", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-08-30", "updated": "2025-08-30", "authors": [ { "name": "Harminder Singh", "account": "HarminderSethi", "avatar": "https://github.com/HarminderSethi.png" } ], "preview": { "src": "/images/previews/51984b24ba0c201baa1f9b4e5883530b44590f4e20694ec52fb629612ffa226b.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-driveitem-properties", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-driveitem-properties/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-driveitem-properties", "descriptionParagraphs": [ "List view command set extensions with below functionalities" ], "previews": [ { "src": "/images/previews/51984b24ba0c201baa1f9b4e5883530b44590f4e20694ec52fb629612ffa226b.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-dynamic-form-with-location-picker/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-dynamic-form-with-location-picker", "title": "Dynamic Form with location picker", "description": "This solution implements a simple Form Customizer with a Dynamic Form with a location picker, to demonstrate the many usages of a Dynamic Form.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Form customizer" ], "technologies": [ "React" ], "version": "1.17.3", "versionGroup": "1.17", "created": "2023-06-28", "updated": "2023-06-28", "authors": [ { "name": "Martin Lingstuyl", "account": "martinlingstuyl", "avatar": "https://github.com/martinlingstuyl.png" } ], "preview": { "src": "/images/previews/b1305a86a084e98b3c0a2f61a89765d5948112a600b83373efd589f845a811f5.webp", "alt": "Dynamic Form with location picker solution", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-dynamic-form-with-location-picker", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-dynamic-form-with-location-picker/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-dynamic-form-with-location-picker", "descriptionParagraphs": [ "This solution implements a simple Form Customizer with a Dynamic Form with a location picker, to demonstrate the many usages of a Dynamic Form." ], "previews": [ { "src": "/images/previews/b1305a86a084e98b3c0a2f61a89765d5948112a600b83373efd589f845a811f5.webp", "alt": "Dynamic Form with location picker solution", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-dynamic-form-with-location-picker/assets/dynamic-form-with-location-picker-screenshot.png", "alt": "Dynamic Form with location picker solution", "isFallback": false } ], "references": [ { "title": "Building a SharePoint New Site Form Look-Alike", "description": "A post on building a SPFx Form Customizer with a Dynamic Site with field overrides to create an experience that looks like the default SharePoint new site form.", "url": "https://www.blimped.nl/building-a-sharepoint-new-site-form-look-alike" }, { "title": "Getting started with SharePoint Framework", "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant" }, { "title": "Build your first Form Customizer extension", "description": "Introduction about how to develop SharePoint Online form customizers using SharePoint Framework.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-form-customizer" }, { "title": "Microsoft 365 Patterns and Practices", "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.", "url": "https://aka.ms/m365pnp" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.17.3", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-dynamic-site-form/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-dynamic-site-form", "title": "Dynamic Site Form", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Form customizer" ], "technologies": [ "React" ], "version": "1.17.3", "versionGroup": "1.17", "created": "2023-06-22", "updated": "2023-06-22", "authors": [ { "name": "Martin Lingstuyl", "account": "martinlingstuyl", "avatar": "https://github.com/martinlingstuyl.png" } ], "preview": { "src": "/images/previews/11936b064b8b54919e504e3cb8101ac958162d6388de1bd87a8833b64a8b2e96.webp", "alt": "Dynamic Site Form solution", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-dynamic-site-form", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-dynamic-site-form/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-dynamic-site-form", "descriptionParagraphs": [ "The Dynamic Site Form solution implements a Form Customizer with a SPFx Controls Dynamic Form to load the form. It has field overrides for URL and Group mailbox values to make the form look and act like the default SharePoint new site form." ], "previews": [ { "src": "/images/previews/11936b064b8b54919e504e3cb8101ac958162d6388de1bd87a8833b64a8b2e96.webp", "alt": "Dynamic Site Form solution", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-dynamic-site-form/assets/dynamic-site-form-screenshot.png", "alt": "Dynamic Site Form solution", "isFallback": false } ], "references": [ { "title": "Building a SharePoint New Site Form Look-Alike", "description": "A post on building a SPFx Form Customizer with a Dynamic Site with field overrides to create an experience that looks like the default SharePoint new site form.", "url": "https://www.blimped.nl/building-a-sharepoint-new-site-form-look-alike" }, { "title": "Getting started with SharePoint Framework", "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant" }, { "title": "Build your first Form Customizer extension", "description": "Introduction about how to develop SharePoint Online form customizers using SharePoint Framework.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-form-customizer" }, { "title": "Microsoft 365 Patterns and Practices", "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.", "url": "https://aka.ms/m365pnp" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.17.3", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-field-attachment-info/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-field-attachment-info", "title": "Field Attachment Info", "description": "This field customizer will display the attachment related information for a listitem.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Field customizer" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-04-02", "updated": "2020-04-02", "authors": [ { "name": "Sudharsan Kesavanarayanan", "account": "sudharsank", "avatar": "https://github.com/sudharsank.png" } ], "preview": { "src": "/images/previews/32051890b2ceac5049930e72e4bae866223c783b96027c577cf5e10fcf56b8cd.webp", "alt": "Field Attachment Info", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-attachment-info", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-attachment-info/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-field-attachment-info", "descriptionParagraphs": [ "This field customizer will display the attachment related information for a listitem." ], "previews": [ { "src": "/images/previews/32051890b2ceac5049930e72e4bae866223c783b96027c577cf5e10fcf56b8cd.webp", "alt": "Field Attachment Info", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first Field Customizer extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-field-pnp-field-renderer-helper/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-field-pnp-field-renderer-helper", "title": "PnP Field Renderer Helper", "description": "This field customizer shows how to use PnP FieldRendererHelper utility.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Field customizer" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-09-13", "updated": "2020-09-13", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" } ], "preview": { "src": "/images/previews/d576acc1517640e2b3614b0b6566d714cc96191257c38d0945d6cb0baaa83213.webp", "alt": "PnP Field Renderer Helper", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-pnp-field-renderer-helper", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-pnp-field-renderer-helper/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-field-pnp-field-renderer-helper", "descriptionParagraphs": [ "This field customizer shows how to use PnP FieldRendererHelper utility." ], "previews": [ { "src": "/images/previews/d576acc1517640e2b3614b0b6566d714cc96191257c38d0945d6cb0baaa83213.webp", "alt": "PnP Field Renderer Helper", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first Field Customizer extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-field-pnp-file-type-renderer/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-field-pnp-file-type-renderer", "title": "PnP File Type Renderer", "description": "This field customizer shows how to use PnP FieldFileTypeRenderer controls.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Field customizer" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-10-01", "updated": "2020-10-01", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" } ], "preview": { "src": "/images/previews/957f3d93ed3298c39538bdd9ef0aa8100aa47b4997f64e50b322361539665d3b.webp", "alt": "PnP File Type Renderer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-pnp-file-type-renderer", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-pnp-file-type-renderer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-field-pnp-file-type-renderer", "descriptionParagraphs": [ "This field customizer shows how to use PnP FieldFileTypeRenderer controls." ], "previews": [ { "src": "/images/previews/957f3d93ed3298c39538bdd9ef0aa8100aa47b4997f64e50b322361539665d3b.webp", "alt": "PnP File Type Renderer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first Field Customizer extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-field-reporting/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-field-reporting", "title": "React Document Reporting Field Customizer", "description": "A React-based SPFx application for monitoring user activity within SharePoint documents.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Field customizer", "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.18.2", "versionGroup": "1.18", "created": "2023-12-25", "updated": "2023-12-31", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/5194d86a2b3881827cc09e4be958c8f72425ffacd531a7d2cea9b4bf018bc521.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-reporting", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-reporting/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-field-reporting", "descriptionParagraphs": [ "This application logs details about who has opened a document into Application Insights and displays real-time reporting data in tabular and chart formats." ], "previews": [ { "src": "/images/previews/5194d86a2b3881827cc09e4be958c8f72425ffacd531a7d2cea9b4bf018bc521.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-reporting/assets/app-column.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-reporting/assets/app-results.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-reporting/assets/app-webpart-configs.png", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-field-slider/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-field-slider", "title": "Slider Field Customizer", "description": "The sample illustrates how to use Office UI Fabric React Slider in Field Customizer with permissions-base inline editing", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Field customizer" ], "technologies": [ "React" ], "version": "1.2.0", "versionGroup": "1.2", "created": "2017-08-30", "updated": "2017-08-30", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" } ], "preview": { "src": "/images/previews/843210ca90c0f8e3ea8f50222a232aa531bbbda4b5eaf21785c24b12198e5b47.webp", "alt": "Slider Field Customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-slider", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-slider/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-field-slider", "descriptionParagraphs": [ "The sample illustrates how to use Office UI Fabric React Slider in Field Customizer with permissions-base inline editing" ], "previews": [ { "src": "/images/previews/843210ca90c0f8e3ea8f50222a232aa531bbbda4b5eaf21785c24b12198e5b47.webp", "alt": "Slider Field Customizer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first Field Customizer extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.2.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-field-text-analytics-api/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-field-text-analytics-api", "title": "Field Customiser sample using Text Analytics API", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Field customizer" ], "technologies": [ "React" ], "version": "1.4.0", "versionGroup": "1.4", "created": "2018-01-18", "updated": "2018-01-18", "authors": [ { "name": "Luis Mañez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/previews/d36c9db18f93109e9c39d248c2dd081e5a2c1a260ff46fbd94770256cab556e3.webp", "alt": "Field Customiser sample using Text Analytics API", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-text-analytics-api", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-text-analytics-api/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-field-text-analytics-api", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/d36c9db18f93109e9c39d248c2dd081e5a2c1a260ff46fbd94770256cab556e3.webp", "alt": "Field Customiser sample using Text Analytics API", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first Field Customizer extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-field-toggle/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-field-toggle", "title": "Toggle Field Customizer", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Field customizer" ], "technologies": [ "React" ], "version": "1.3.0", "versionGroup": "1.3", "created": "2017-10-04", "updated": "2017-10-04", "authors": [ { "name": "Giuliano De Luca", "account": "giuleon", "avatar": "https://github.com/giuleon.png" } ], "preview": { "src": "/images/previews/98e3e8cb4f28136d1ec05168e869176457ecb6056d1c65af46ba039df162b751.webp", "alt": "Toggle Field Customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-toggle", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-toggle/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-field-toggle", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/98e3e8cb4f28136d1ec05168e869176457ecb6056d1c65af46ba039df162b751.webp", "alt": "Toggle Field Customizer", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first Field Customizer extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.3.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-field-unique-permissions/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-field-unique-permissions", "title": "Unique permissions on list items", "description": "This sample demonstrates how to use field customizer to handle unique permissions on list items.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Field customizer" ], "technologies": [ "JavaScript" ], "version": "1.17.2", "versionGroup": "1.17", "created": "2023-06-23", "updated": "2023-06-23", "authors": [ { "name": "Michał Kornet", "account": "mkm17", "avatar": "https://github.com/mkm17.png" } ], "preview": { "src": "/images/previews/1ea24a668564efeafa17334488a33431edbbd5755534fd411d30b7a004cfb4ab.webp", "alt": "Extension preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-unique-permissions", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-unique-permissions/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-field-unique-permissions", "descriptionParagraphs": [ "This sample demonstrates how to use field customizer to handle unique permissions on list items." ], "previews": [ { "src": "/images/previews/1ea24a668564efeafa17334488a33431edbbd5755534fd411d30b7a004cfb4ab.webp", "alt": "Extension preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.17.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-field-user-permission/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-field-user-permission", "title": "Displaying the current user permission with PNPJs", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Field customizer" ], "technologies": [ "React" ], "version": "1.6.0", "versionGroup": "1.6", "created": "2018-10-12", "updated": "2018-10-12", "authors": [ { "name": "Simon Ågren", "account": "simonagren", "avatar": "https://github.com/simonagren.png" } ], "preview": { "src": "/images/previews/a9e9f3b02fce09edcca974572318079d9ee895a7e0d7ad73cd95ef193fe0ed03.webp", "alt": "Displaying the current user permission with PNPJs", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-user-permission", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-user-permission/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-field-user-permission", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/a9e9f3b02fce09edcca974572318079d9ee895a7e0d7ad73cd95ef193fe0ed03.webp", "alt": "Displaying the current user permission with PNPJs", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first Field Customizer extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.6.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-field-votes/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-field-votes", "title": "Field Votes", "description": "An extension that displays Vote counter and button to vote or unvote.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Field customizer" ], "technologies": [ "JavaScript" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2021-04-19", "updated": "2024-10-29", "authors": [ { "name": "Ari Gunawan", "account": "AriGunawan", "avatar": "https://github.com/AriGunawan.png" } ], "preview": { "src": "/images/previews/d57b2ef774312bcb86b3d36ee6ed25452dc9dd2e4b03f1a8e70873a3b7c421b3.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-votes", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-field-votes/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-field-votes", "descriptionParagraphs": [ "An extension that displays Vote counter and button to vote or unvote.", "If the current user hasn't been voted, the button will become Vote button but if the current user has been voted, it will become Unvote button." ], "previews": [ { "src": "/images/previews/d57b2ef774312bcb86b3d36ee6ed25452dc9dd2e4b03f1a8e70873a3b7c421b3.webp", "alt": "Preview", "isFallback": false } ], "references": [], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-formcustomizer-customers/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-fx-extensions-react-formcustomizer-customers", "title": "React Form Customizer (Customers)", "description": "A sample of an SPFx Form Customizer built with React for managing items of a custom list of customers.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Form customizer" ], "technologies": [ "React" ], "version": "1.15.0", "versionGroup": "1.15", "created": "2022-11-09", "updated": "2022-11-09", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/cc5ff44d4b83ef0a2a596953b40495123a3e6922081b0dc55c0bd52957b6e84d.webp", "alt": "View Form", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-formcustomizer-customers", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-formcustomizer-customers/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-formcustomizer-customers", "descriptionParagraphs": [ "This SPFx form customizer build custom New, Edit and View list forms for a Customers List." ], "previews": [ { "src": "/images/previews/cc5ff44d4b83ef0a2a596953b40495123a3e6922081b0dc55c0bd52957b6e84d.webp", "alt": "View Form", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-formcustomizer-customers/assets/newform.png", "alt": "New Form", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-formcustomizer-customers/assets/editform.png", "alt": "Edit Form", "isFallback": false } ], "references": [ { "title": "Getting started with SharePoint Framework", "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant" }, { "title": "Build your first Form Customizer extension", "description": "Introduction about how to develop SharePoint Online form customizers using SharePoint Framework.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-form-customizer" }, { "title": "Microsoft 365 Patterns and Practices", "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.", "url": "https://aka.ms/m365pnp" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.15.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-hidefrom-externalusers/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-hidefrom-externalusers", "title": "Application Customizer Extension that is hidden from tenant guest users", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.8.2", "versionGroup": "1.8", "created": "2023-09-16", "updated": "2023-09-16", "authors": [ { "name": "Mohammad Mahyar Pourabdollah Khadar", "account": "Mahyar915", "avatar": "https://github.com/Mahyar915.png" } ], "preview": { "src": "/images/previews/1781b290f14ef5a2b7addea03a75249b1034370bbf4e8a8c798f47b7964635f4.webp", "alt": "Application Customizer Extension that is hidden from tenant guest users", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-hidefrom-externalusers", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-hidefrom-externalusers/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-hidefrom-externalusers", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/1781b290f14ef5a2b7addea03a75249b1034370bbf4e8a8c798f47b7964635f4.webp", "alt": "Application Customizer Extension that is hidden from tenant guest users", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.8.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-item-History/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-item-history", "title": "Item History", "description": "This listview command is used to show the past versions of the selected list item in a grid.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-06-15", "updated": "2018-06-15", "authors": [ { "name": "Russell Gove", "account": "russgove", "avatar": "https://github.com/russgove.png" } ], "preview": { "src": "/images/previews/4d7302b10eda783a1a29c25db2f0c35d88f030f98d90a59db3b55b8f72dce8d2.webp", "alt": "Item History", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-item-History", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-item-History/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-item-History", "descriptionParagraphs": [ "This listview command is used to show the past versions of the selected list item in a grid." ], "previews": [ { "src": "/images/previews/4d7302b10eda783a1a29c25db2f0c35d88f030f98d90a59db3b55b8f72dce8d2.webp", "alt": "Item History", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-jump-to-folder/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-jump-to-folder", "title": "Jump to folder extension", "description": "Sample solution that facilitates navigation between large collections of SharePoint library folders.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2021-03-15", "updated": "2021-03-15", "authors": [ { "name": "Joel Rodrigues", "account": "joelfmrodrigues", "avatar": "https://github.com/joelfmrodrigues.png" } ], "preview": { "src": "/images/previews/e5557675d39be7b6329dab4c701f9dcf285c8046a4843cc658ef324d54f34ef5.webp", "alt": "Jump to folder extension", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-jump-to-folder", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-jump-to-folder/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-jump-to-folder", "descriptionParagraphs": [ "Sample solution that facilitates navigation between large collections of SharePoint library folders." ], "previews": [ { "src": "/images/previews/e5557675d39be7b6329dab4c701f9dcf285c8046a4843cc658ef324d54f34ef5.webp", "alt": "Jump to folder extension", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-mega-menu/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-mega-menu", "title": "Mega Menu Application Customizer Extension", "description": "This sample shows site mega menu. Application customizer is used along with SharePoint List to store the menu items.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2018-12-10", "updated": "2024-10-31", "authors": [ { "name": "Velin Georgiev", "account": "VelinGeorgiev", "avatar": "https://github.com/VelinGeorgiev.png" } ], "preview": { "src": "/images/previews/302afc3380968e9be3a62c63879c247859c12ed71c229f8ff62ebff72560eb07.webp", "alt": "Mega Menu Application Customizer Extension", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-mega-menu", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-mega-menu/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-mega-menu", "descriptionParagraphs": [ "This sample shows site mega menu. Application customizer is used along with SharePoint List to store the menu items." ], "previews": [ { "src": "/images/previews/302afc3380968e9be3a62c63879c247859c12ed71c229f8ff62ebff72560eb07.webp", "alt": "Mega Menu Application Customizer Extension", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-mega-menu/assets/mega2.png", "alt": "Mega Menu Application Customizer Extension", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-menu-footer-classic-modern/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-menu-footer-classic-modern", "title": "Menu Footer Classic Modern", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-04-04", "updated": "2018-04-04", "authors": [ { "name": "Bob German", "account": "BobGerman", "avatar": "https://avatars.githubusercontent.com/u/4664072?s=460&u=29310fd67417ec5f81dc8881dc6eb5dc0065da2d&v=4" } ], "preview": { "src": "/images/previews/20d236920d1e0e6893355d44470102fbb99469c92dce55c3c269bb7456025999.webp", "alt": "Menu Footer Classic Modern", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-menu-footer-classic-modern", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-menu-footer-classic-modern/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-menu-footer-classic-modern", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/20d236920d1e0e6893355d44470102fbb99469c92dce55c3c269bb7456025999.webp", "alt": "Menu Footer Classic Modern", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-modern-version-history/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-modern-version-history", "title": "Modern Version History", "description": "An extension modernizing the version history experience in SharePoint Online.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.17.4", "versionGroup": "1.17", "created": "2023-09-01", "updated": "2023-10-02", "authors": [ { "name": "Dan Toft", "account": "Tanddant", "avatar": "https://github.com/Tanddant.png" }, { "name": "Emanuele Bartolesi", "account": "kasuken", "avatar": "https://github.com/kasuken.png" }, { "name": "Tobias Maestrini", "account": "tmaestrini", "avatar": "https://github.com/tmaestrini.png" } ], "preview": { "src": "/images/previews/1c3a906b3ec58204c23c7271a283e4f2f1c57d7a5c91566ef611b76c985e4e97.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-modern-version-history", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-modern-version-history/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-modern-version-history", "descriptionParagraphs": [ "This is an extension of the version history experience in SharePoint Online. It allows you to see the version history of a file in a modern experience, compare different versions, and restore a previous version." ], "previews": [ { "src": "/images/previews/1c3a906b3ec58204c23c7271a283e4f2f1c57d7a5c91566ef611b76c985e4e97.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.17.4", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-msal-bot/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-msal-bot", "title": "MSAL Bot Extension", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.5.1", "versionGroup": "1.5", "created": "2018-08-04", "updated": "2018-08-04", "authors": [ { "name": "Franck Cornu", "account": "FranckyC", "avatar": "https://github.com/FranckyC.png" } ], "preview": { "src": "/images/previews/2a1fc5b29a45756e006ef67026aec5babeddd859c02395257b0ed205dc2446de.webp", "alt": "MSAL Bot Extension", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-msal-bot", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-msal-bot/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-msal-bot", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/2a1fc5b29a45756e006ef67026aec5babeddd859c02395257b0ed205dc2446de.webp", "alt": "MSAL Bot Extension", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.5.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-my-sites-hub/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-my-sites-hub", "title": "My Sites Hub", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-10-30", "updated": "2025-10-30", "authors": [ { "name": "Sandeep P S", "account": "Sandeep-FED", "avatar": "https://github.com/Sandeep-FED.png" } ], "preview": { "src": "/images/previews/e7c7cb26463354e821c7a64b44a7fe6835c71565fba92cfa3ca5f71b5ac2d77f.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-my-sites-hub", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-my-sites-hub/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-my-sites-hub", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/e7c7cb26463354e821c7a64b44a7fe6835c71565fba92cfa3ca5f71b5ac2d77f.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-my-sites-hub/assets/screenshot2.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-send-document/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-send-document", "title": "Send Document With E-Mail", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.7.1", "versionGroup": "1.7", "created": "2019-02-10", "updated": "2019-02-10", "authors": [ { "name": "Serdar Ketenci", "account": "serdarketenci", "avatar": "https://github.com/serdarketenci.png" } ], "preview": { "src": "/images/previews/da5a91da05db20e033e6a84b334d65fb7eda7c51311754c9c59630f4473be7fa.webp", "alt": "Send Document With E-Mail", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-send-document", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-send-document/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-send-document", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/da5a91da05db20e033e6a84b334d65fb7eda7c51311754c9c59630f4473be7fa.webp", "alt": "Send Document With E-Mail", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.7.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-send-to-teams/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-send-to-teams", "title": "Send-To-Teams - Command Set", "description": "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.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.12.0", "versionGroup": "1.12", "created": "2021-04-05", "updated": "2021-04-05", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/4b429d1438a46b6c356f661c2a396aaf08e0e2f193c1b8c182eaa2036fe1941e.webp", "alt": "Send-To-Teams - Command Set", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-send-to-teams", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-send-to-teams/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-send-to-teams", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/4b429d1438a46b6c356f661c2a396aaf08e0e2f193c1b8c182eaa2036fe1941e.webp", "alt": "Send-To-Teams - Command Set", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-send-to-teams/assets/sendToTeams01.png", "alt": "Send-To-Teams - Command Set", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-send-to-teams/assets/sendToTeams02.png", "alt": "Send-To-Teams - Command Set", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-send-to-teams/assets/sendToTeams03.png", "alt": "Send-To-Teams - Command Set", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-send-to-teams/assets/sendToTeams05.png", "alt": "Send-To-Teams - Command Set", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Build your first ListView Command Set extension", "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.12.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-share-via-teams-chat-extension/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-share-via-teams-chat-extension", "title": "Share via Teams Chat", "description": "Share via Teams Chat is a SharePoint Framework list view command set that enables users to send one or more selected SharePoint list items or documents to Microsoft Teams chats and channels as a rich, formatted message with an Adaptive Card.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.23.0", "versionGroup": "1.23", "created": "2026-07-02", "updated": "2026-07-02", "authors": [ { "name": "Harminder Singh", "account": "HarminderSethi", "avatar": "https://github.com/HarminderSethi.png" } ], "preview": { "src": "/images/previews/9f01e7e18352c44983736ae81da6cc02b349e44b411a61cb11f7d6cf67af0513.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-share-via-teams-chat-extension", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-share-via-teams-chat-extension/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-share-via-teams-chat-extension", "descriptionParagraphs": [ "Share via Teams Chat is a SharePoint Framework list view command set that enables users to send one or more selected SharePoint list items or documents to Microsoft Teams chats and channels as a rich, formatted message with an Adaptive Card." ], "previews": [ { "src": "/images/previews/9f01e7e18352c44983736ae81da6cc02b349e44b411a61cb11f7d6cf67af0513.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/b3df920173cd6ad726b11367d754d1d846034252/samples/react-share-via-teams-chat-extension/assets/ShareViaTeamsChatDialog.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.23.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-site-content-ribbon-extension/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-site-content-ribbon-extension", "title": "Site Content Ribbon Extension", "description": "Site Content Ribbon Extension is a SharePoint Framework Application Customizer for SharePoint Online that adds a ribbon-style “Site content” action to the SharePoint header and opens a modern, searchable experience for browsing site content directly from the current page.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.23.0", "versionGroup": "1.23", "created": "2026-06-19", "updated": "2026-06-19", "authors": [ { "name": "Harminder Singh", "account": "HarminderSethi", "avatar": "https://github.com/HarminderSethi.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-site-content-ribbon-extension", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-site-content-ribbon-extension/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-site-content-ribbon-extension", "descriptionParagraphs": [ "Site Content Ribbon Extension is a SharePoint Framework Application Customizer for SharePoint Online that adds a ribbon-style “Site content” action to the SharePoint header and opens a modern, searchable experience for browsing site content directly from the current page." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.23.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.missing", "field": "thumbnails", "message": "At least one image preview is required.", "severity": "error" }, { "code": "preview.unavailable", "field": "thumbnails", "message": "No usable declared image is available; a labelled fallback is shown.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-teamschatNotifications/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-teamschatnotifications", "title": "Teams Chat Notifications", "description": "Show Teams chat notifications and unread-message counts in SharePoint.", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2020-03-13", "updated": "2026-07-21", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/f2df91f09c706ba404f6ef3ee8dd4d730a7fc03b5f45c59f4f0b7adfc12f2181.webp", "alt": "Teams chat notification badge and messages on a SharePoint page", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-teamschatNotifications", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-teamschatNotifications/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-teamschatNotifications", "descriptionParagraphs": [ "A React application customizer that displays an unread-message badge and a list of Teams chat notifications on SharePoint pages. Microsoft Graph subscriptions and Azure SignalR deliver messages through the companion Azure Functions project." ], "previews": [ { "src": "/images/previews/f2df91f09c706ba404f6ef3ee8dd4d730a7fc03b5f45c59f4f0b7adfc12f2181.webp", "alt": "Teams chat notification badge and messages on a SharePoint page", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "Documentation for extending the SharePoint user experience with SharePoint Framework extensions.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-extensions:samples/react-utility-extensions/assets/sample.json:0", "slug": "pnp-sp-dev-fx-extensions-pnp-sp-dev-spfx-extensions-react-utility-extensions", "title": "Copy Path and Copy Name List view command set extensions", "description": "List view command set extensions with below functionalities", "repository": "pnp/sp-dev-fx-extensions", "family": "Extensions", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2023-10-22", "updated": "2025-02-27", "authors": [ { "name": "Harminder Singh", "account": "HarminderSethi", "avatar": "https://github.com/HarminderSethi.png" } ], "preview": { "src": "/images/previews/a37548e5f337722111aac9f858365c2513fbcbf0b76eb94470bfd024939f140a.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-extensions/tree/b3df920173cd6ad726b11367d754d1d846034252/samples/react-utility-extensions", "revisionUrl": "https://github.com/pnp/sp-dev-fx-extensions/commit/b3df920173cd6ad726b11367d754d1d846034252", "metadataUrl": "https://github.com/pnp/sp-dev-fx-extensions/blob/b3df920173cd6ad726b11367d754d1d846034252/samples/react-utility-extensions/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmain%2Fsamples%2Freact-utility-extensions", "descriptionParagraphs": [ "List view command set extensions with below functionalities" ], "previews": [ { "src": "/images/previews/a37548e5f337722111aac9f858365c2513fbcbf0b76eb94470bfd024939f140a.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Framework Extensions", "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa" }, { "title": "Use page placeholders from Application Customizer", "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/aad-api-spo-cookie/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-aad-api-spo-cookie", "title": "Call custom APIs secured with Azure Active Directory without ADAL JS", "description": "Sample SharePoint Framework client-side web part showing how to access a custom API secured with Azure Active Directory (AAD) without using ADAL JS.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Angular" ], "version": "1.0.0", "versionGroup": "< 1.1", "created": "2017-05-05", "updated": "2017-05-05", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/88368dec6a28d254d07574c7aa08700b0cdf5c247afdc0e8472cb19507419fa2.webp", "alt": "Call custom APIs secured with Azure Active Directory without ADAL JS", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/aad-api-spo-cookie", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/aad-api-spo-cookie/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Faad-api-spo-cookie", "descriptionParagraphs": [ "Sample SharePoint Framework client-side web part showing how to access a custom API secured with Azure Active Directory (AAD) without using ADAL JS." ], "previews": [ { "src": "/images/previews/88368dec6a28d254d07574c7aa08700b0cdf5c247afdc0e8472cb19507419fa2.webp", "alt": "Call custom APIs secured with Azure Active Directory without ADAL JS", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/aad-api-spo-cookie/assets/orders-api-configure-authentication-dialog.png", "alt": "Call custom APIs secured with Azure Active Directory without ADAL JS", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/aad-api-spo-cookie/assets/orders-api-configure-authentication.png", "alt": "Call custom APIs secured with Azure Active Directory without ADAL JS", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/aad-api-spo-cookie/assets/orders-api-restore-packages.png", "alt": "Call custom APIs secured with Azure Active Directory without ADAL JS", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/aad-api-spo-cookie/assets/orders-fetch-error.png", "alt": "Call custom APIs secured with Azure Active Directory without ADAL JS", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/aad-api-spo-cookie/assets/orders-ie-error.png", "alt": "Call custom APIs secured with Azure Active Directory without ADAL JS", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/aad-api-spo-cookie/assets/orders-ie-zones-settings.png", "alt": "Call custom APIs secured with Azure Active Directory without ADAL JS", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.0.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/ace-strategy-pattern/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-ace-strategy-pattern", "title": "Adaptive Card Extension strategy pattern", "description": "Avoid complex conditional logic in Adaptive Card Extension quick view actions by using the strategy pattern.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "TypeScript" ], "version": "1.14.0", "versionGroup": "1.14", "created": "2022-05-27", "updated": "2022-05-27", "authors": [ { "name": "Marcin Wojciechowski", "account": "mgwojciech", "avatar": "https://github.com/mgwojciech.png" } ], "preview": { "src": "/images/previews/18e356699b3e9fcc7b120065e270d4c5e798f2b1d5e667b6dbe3755c2678c953.webp", "alt": "Quick view action handling before refactoring", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/ace-strategy-pattern", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/ace-strategy-pattern/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Face-strategy-pattern", "descriptionParagraphs": [ "This sample exposes organization news in an adaptive card and implements navigation, likes, comments, and sharing news to a Teams channel using isolated quick view actions." ], "previews": [ { "src": "/images/previews/18e356699b3e9fcc7b120065e270d4c5e798f2b1d5e667b6dbe3755c2678c953.webp", "alt": "Quick view action handling before refactoring", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/ace-strategy-pattern/doc-resources/QuickViewAfterRefactoring.PNG", "alt": "Quick view action handling after refactoring", "isFallback": false } ], "references": [ { "title": "Sample documentation", "description": "Summary, contributors, version history, and usage instructions.", "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/ace-strategy-pattern/README.md" } ], "products": [ "SharePoint", "Teams" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/angular-aad-webapi/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-angular-aad-webapi", "title": "Call custom Web API secured with AAD from SharePoint Framework client-side web part using Angular v1.x", "description": "Sample SharePoint Framework client-side web part illustrating communication with a custom Web API secured with Azue Active Directory using Angular v1.x", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Angular" ], "version": "1.0.0", "versionGroup": "< 1.1", "created": "2017-03-21", "updated": "2017-03-21", "authors": [ { "name": "David Hartman", "account": "davidhartman", "avatar": "https://avatars.githubusercontent.com/u/11304394?s=460&v=4" } ], "preview": { "src": "/images/previews/1eaed343632bf1ec608b136e0612d3f5e1d2672412410d90b74ba2ffdff8fe97.webp", "alt": "Call custom Web API secured with AAD from SharePoint Framework client-side web part using Angular v1.x", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-aad-webapi", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-aad-webapi/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fangular-aad-webapi", "descriptionParagraphs": [ "Sample SharePoint Framework client-side web part illustrating communication with a custom Web API secured with Azue Active Directory using Angular v1.x" ], "previews": [ { "src": "/images/previews/1eaed343632bf1ec608b136e0612d3f5e1d2672412410d90b74ba2ffdff8fe97.webp", "alt": "Call custom Web API secured with AAD from SharePoint Framework client-side web part using Angular v1.x", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.0.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/angular-greeting/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-angular-greeting", "title": "Greeting client-side web part", "description": "This is Greeting web part which shows greeting to the current logged in user.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Angular" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2020-02-15", "updated": "2020-06-29", "authors": [ { "name": "Gaurav Goyal", "account": "gauravgoyal5", "avatar": "https://github.com/gauravgoyal5.png" } ], "preview": { "src": "/images/previews/ba8d83598e2f2d1292df3fb236dadc6c2b688c6f65420f101b84aa94d2ddb6c0.webp", "alt": "Greeting client-side web part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-greeting", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-greeting/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fangular-greeting", "descriptionParagraphs": [ "This is Greeting web part which shows greeting to the current logged in user." ], "previews": [ { "src": "/images/previews/ba8d83598e2f2d1292df3fb236dadc6c2b688c6f65420f101b84aa94d2ddb6c0.webp", "alt": "Greeting client-side web part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-greeting/assets/preview.PNG", "alt": "Greeting client-side web part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/angular-migration/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-angular-migration", "title": "Migrating existing Angular applications to SPFx web parts", "description": "This is a sample Angular application before and after it has been migrated to a SharePoint Framework client-side web part.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Angular" ], "version": "0.2.1", "versionGroup": "< 1.1", "created": "2016-10-21", "updated": "2016-10-21", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/9121baa0daa665b743ee67b6ca97be2eaddb12388d4dd6d6aa6160f6618b3d51.webp", "alt": "Migrating existing Angular applications to SharePoint Framework sample", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-migration", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-migration/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fangular-migration", "descriptionParagraphs": [ "This is a sample Angular application before and after it has been migrated to a SharePoint Framework client-side web part." ], "previews": [ { "src": "/images/previews/9121baa0daa665b743ee67b6ca97be2eaddb12388d4dd6d6aa6160f6618b3d51.webp", "alt": "Migrating existing Angular applications to SharePoint Framework sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-migration/assets/angular-todo-preview.png", "alt": "Migrating existing Angular applications to SharePoint Framework sample", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "0.2.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/angular-msgraph/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-angular-msgraph", "title": "Angular MS Graph Web Part Built with Angular v1.x", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Angular" ], "version": "1.0.0", "versionGroup": "< 1.1", "created": "2017-04-19", "updated": "2017-04-19", "authors": [ { "name": "David Hartman", "account": "davidhartman", "avatar": "https://avatars.githubusercontent.com/u/11304394?s=460&v=4" } ], "preview": { "src": "/images/previews/fb9afde47fe1e7994e8b77fc916568ccc724c34b66d20faab3ccc9df9426e85e.webp", "alt": "Angular MS Graph Web Part Built with Angular v1.x", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-msgraph", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-msgraph/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fangular-msgraph", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/fb9afde47fe1e7994e8b77fc916568ccc724c34b66d20faab3ccc9df9426e85e.webp", "alt": "Angular MS Graph Web Part Built with Angular v1.x", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-msgraph/assets/Connected.png", "alt": "Angular MS Graph Web Part Built with Angular v1.x", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-msgraph/assets/Items.png", "alt": "Angular MS Graph Web Part Built with Angular v1.x", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-msgraph/assets/Lists.png", "alt": "Angular MS Graph Web Part Built with Angular v1.x", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-msgraph/assets/Root.png", "alt": "Angular MS Graph Web Part Built with Angular v1.x", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.0.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/angular-multipage/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-angular-multipage", "title": "Angular multi-page client-side web part", "description": "This is a sample SharePoint Framework client-side web part built using Angular, illustrating building multi-page web parts.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Angular" ], "version": "0.5.0", "versionGroup": "< 1.1", "created": "2016-11-01", "updated": "2016-11-01", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/afc23485d174bfd7d5294b9338c4aa82cad9c87fc51f7272a90e8dceb62e313d.webp", "alt": "Angular multi-page client-side web part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-multipage", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-multipage/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fangular-multipage", "descriptionParagraphs": [ "This is a sample SharePoint Framework client-side web part built using Angular, illustrating building multi-page web parts." ], "previews": [ { "src": "/images/previews/afc23485d174bfd7d5294b9338c4aa82cad9c87fc51f7272a90e8dceb62e313d.webp", "alt": "Angular multi-page client-side web part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "0.5.0", "issues": [ { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/angular-ngofficeuifabric-file-upload/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-angular-ngofficeuifabric-file-upload", "title": "File Upload web part using AngularJs", "description": "File Update/Delete web part using AngularJs and ngOfficeUIFabric with the SharePoint Framework.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Angular" ], "version": "1.0.0", "versionGroup": "< 1.1", "created": "2017-07-17", "updated": "2017-07-17", "authors": [ { "name": "Atish Kumar Dipongkor", "account": "dipongkor", "avatar": "https://github.com/dipongkor.png" }, { "name": "Gautam Sheth", "account": "gautamdsheth", "avatar": "https://github.com/gautamdsheth.png" } ], "preview": { "src": "/images/previews/b736e2ae2eb22ca17085e6a557ad02c4abbae1f9f07ee80dcacd512ce41e0b0f.webp", "alt": "File Upload using AngularJs", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-ngofficeuifabric-file-upload", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-ngofficeuifabric-file-upload/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fangular-ngofficeuifabric-file-upload", "descriptionParagraphs": [ "File Update/Delete web part using AngularJs and ngOfficeUIFabric with the SharePoint Framework." ], "previews": [ { "src": "/images/previews/b736e2ae2eb22ca17085e6a557ad02c4abbae1f9f07ee80dcacd512ce41e0b0f.webp", "alt": "File Upload using AngularJs", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.0.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/angular-ngofficeuifabric-todo/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-angular-ngofficeuifabric-todo", "title": "Angular & ngOfficeUIFabric Client-Side Web Part", "description": "Illustrates the use of Angular and ngOfficeUIFabric with the SharePoint Framework.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Angular" ], "version": "0.2.0", "versionGroup": "< 1.1", "created": "2016-09-09", "updated": "2016-09-09", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/b5a58d697c0b221e46557e5f08ff601d481e6a7e851aafc2ef8d4f8f129fd3e3.webp", "alt": "Angular & ngOfficeUIFabric Client-Side Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-ngofficeuifabric-todo", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-ngofficeuifabric-todo/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fangular-ngofficeuifabric-todo", "descriptionParagraphs": [ "This is a sample web part that illustrates the use of Angular and ngOfficeUIFabric with the SharePoint Framework.", "You can find a video recording walk-through this sample from SharePoint PnP YouTube channel." ], "previews": [ { "src": "/images/previews/b5a58d697c0b221e46557e5f08ff601d481e6a7e851aafc2ef8d4f8f129fd3e3.webp", "alt": "Angular & ngOfficeUIFabric Client-Side Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "0.2.0", "issues": [ { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External HTTPS image was not verified against a collected tree.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/angular-search/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-angular-search", "title": "Search Client-Side Web Part Built with Angular v1.x", "description": "This is a sample search web part that illustrates how you can use Angular within the new SharePoint Framework", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Angular" ], "version": "0.4.0", "versionGroup": "< 1.1", "created": "2017-02-04", "updated": "2017-02-04", "authors": [ { "name": "David Hartman", "account": "davidhartman", "avatar": "https://avatars.githubusercontent.com/u/11304394?s=460&v=4" } ], "preview": { "src": "/images/previews/d729cbdb3b85df2ef37fb047827e0cc7d482ff402f2c9c47ee4f89f4ec61c09b.webp", "alt": "Search Client-Side Web Part Built with Angular v1.x", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-search", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-search/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fangular-search", "descriptionParagraphs": [ "This is a sample search web part that illustrates how you can use Angular within the new SharePoint Framework" ], "previews": [ { "src": "/images/previews/d729cbdb3b85df2ef37fb047827e0cc7d482ff402f2c9c47ee4f89f4ec61c09b.webp", "alt": "Search Client-Side Web Part Built with Angular v1.x", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "0.4.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/angular-todo/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-angular-todo", "title": "Angular client-side web part", "description": "Sample Web Part illustrating using Angular with the SharePoint Framework.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Angular" ], "version": "1.0.0", "versionGroup": "< 1.1", "created": "2017-03-10", "updated": "2017-03-10", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/2648aa99611e6667a5e0ed46916689ce9d7927cd36799fad9b170e31f3fc2efc.webp", "alt": "Angular client-side web part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-todo", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular-todo/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fangular-todo", "descriptionParagraphs": [ "Sample Web Part illustrating using Angular with the SharePoint Framework." ], "previews": [ { "src": "/images/previews/2648aa99611e6667a5e0ed46916689ce9d7927cd36799fad9b170e31f3fc2efc.webp", "alt": "Angular client-side web part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.0.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/angular2-prototype/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-angular2-prototype", "title": "Angular2 Web Part Prototype", "description": "Sample To Do Web Part built with Angular2. This sample illustrates how you can use Angular2 with the SharePoint Framework.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Angular" ], "version": "0.4.0", "versionGroup": "< 1.1", "created": "2017-01-20", "updated": "2017-01-20", "authors": [ { "name": "Daniel Gaeta", "account": "dgaeta", "avatar": "https://avatars.githubusercontent.com/u/1770329?s=460&v=4" } ], "preview": { "src": "/images/previews/3fd031d42a2b9d126af50a382a7b2b2fb0296a6968cf528b895350a7aebe2204.webp", "alt": "Angular2 Web Part Prototype", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular2-prototype", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angular2-prototype/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fangular2-prototype", "descriptionParagraphs": [ "Sample To Do Web Part built with Angular2. This sample illustrates how you can use Angular2 with the SharePoint Framework." ], "previews": [ { "src": "/images/previews/3fd031d42a2b9d126af50a382a7b2b2fb0296a6968cf528b895350a7aebe2204.webp", "alt": "Angular2 Web Part Prototype", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "0.4.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/angularelements-helloworld/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-angularelements-helloworld", "title": "Angular Elements in SPFx web parts", "description": "Set of sample web parts illustrating how to use Angular Elements in the SharePoint Framework.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Angular" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-06-01", "updated": "2018-06-01", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" }, { "name": "Sébastien Levert", "account": "sebastienlevert", "avatar": "https://github.com/sebastienlevert.png" } ], "preview": { "src": "/images/previews/ccbde1c9c871344bc5a6948b7250270b5f6f31db898c962a225fbec33c989ccc.webp", "alt": "Angular Elements in SharePoint Framework", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angularelements-helloworld", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angularelements-helloworld/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fangularelements-helloworld", "descriptionParagraphs": [ "Set of sample web parts illustrating how to use Angular Elements in the SharePoint Framework." ], "previews": [ { "src": "/images/previews/ccbde1c9c871344bc5a6948b7250270b5f6f31db898c962a225fbec33c989ccc.webp", "alt": "Angular Elements in SharePoint Framework", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/angularelements-html-templatefile/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-angularelements-html-templatefile", "title": "Angular Elements with HTML Template File in SharePoint Framework", "description": "A sample web part illustrating how to use Angular Elements in the SharePoint Framework with the help of separate template HTML File.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Angular" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2019-01-08", "updated": "2019-01-08", "authors": [ { "name": "Jayakumar Balasubramaniam", "account": "JayakumarB", "avatar": "https://github.com/JayakumarB.png" } ], "preview": { "src": "/images/previews/ccbde1c9c871344bc5a6948b7250270b5f6f31db898c962a225fbec33c989ccc.webp", "alt": "Angular Elements with HTML Template File in SharePoint Framework", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angularelements-html-templatefile", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/angularelements-html-templatefile/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fangularelements-html-templatefile", "descriptionParagraphs": [ "A sample web part illustrating how to use Angular Elements in the SharePoint Framework with the help of separate template HTML File." ], "previews": [ { "src": "/images/previews/ccbde1c9c871344bc5a6948b7250270b5f6f31db898c962a225fbec33c989ccc.webp", "alt": "Angular Elements with HTML Template File in SharePoint Framework", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/bootstrap-slider/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-bootstrap-slider", "title": "Bootstrap Slider Web Part Built with jQuery v1.x and Boostrap v3.x", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "jQuery" ], "version": "1.0.0", "versionGroup": "< 1.1", "created": "2017-04-25", "updated": "2017-04-25", "authors": [ { "name": "David Hartman", "account": "davidhartman", "avatar": "https://avatars.githubusercontent.com/u/11304394?s=460&v=4" } ], "preview": { "src": "/images/previews/77e4126eba5e10130b3e448581d7eb1602fc97a090197d603fc2aedcb26b6904.webp", "alt": "Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/bootstrap-slider", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/bootstrap-slider/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fbootstrap-slider", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/77e4126eba5e10130b3e448581d7eb1602fc97a090197d603fc2aedcb26b6904.webp", "alt": "Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/bootstrap-slider/assets/List.png", "alt": "Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/bootstrap-slider/assets/slider_image_2.png", "alt": "Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.0.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/handlebarsjs-webpack-loader/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-handlebarsjs-webpack-loader", "title": "Web Part with Handlebars.js", "description": "This sample demonstrate how to set up SPFX to use Handlebars through webpack loader.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Other" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-03-21", "updated": "2018-03-21", "authors": [ { "name": "Stefan Bauer", "account": "StfBauer", "avatar": "https://github.com/StfBauer.png" } ], "preview": { "src": "/images/previews/47395a42fcc985809bb841f48918e3a511864c5d28c9eca5d6bb2686b10bd758.webp", "alt": "No preview available", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/handlebarsjs-webpack-loader", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/handlebarsjs-webpack-loader/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fhandlebarsjs-webpack-loader", "descriptionParagraphs": [ "This sample demonstrate how to set up SPFX to use Handlebars through webpack loader." ], "previews": [ { "src": "/images/previews/47395a42fcc985809bb841f48918e3a511864c5d28c9eca5d6bb2686b10bd758.webp", "alt": "No preview available", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/jquery-cdn/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-jquery-cdn", "title": "Web Part Using jQuery loaded from CDN", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "jQuery" ], "version": "0.2.0", "versionGroup": "< 1.1", "created": "2016-09-16", "updated": "2016-09-16", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/19d0ed308b710783ab3650eda5a4e725c760ed8e33e618fdb685c44d605d579a.webp", "alt": "Using jQuery loaded from CDN", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/jquery-cdn", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/jquery-cdn/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjquery-cdn", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/19d0ed308b710783ab3650eda5a4e725c760ed8e33e618fdb685c44d605d579a.webp", "alt": "Using jQuery loaded from CDN", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "0.2.0", "issues": [ { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/jquery-photopile/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-jquery-photopile", "title": "JQuery, Photopile.JS & Office UI Fabric Client-Side Web Part", "description": "This is a sample web part that illustrated the use of JQuery and Photopile.Js with the SharePoint Framework.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "jQuery" ], "version": "1.0.0", "versionGroup": "< 1.1", "created": "2016-09-09", "updated": "2016-09-09", "authors": [ { "name": "Olivier Carpentier", "account": "OlivierCC", "avatar": "https://github.com/OlivierCC.png" } ], "preview": { "src": "/images/previews/d11ad7707f104b5bcb2ba06ca8689c2a0437bf1b3038a5689345195159d30831.webp", "alt": "JQuery, Photopile.JS & Office UI Fabric Client-Side Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/jquery-photopile", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/jquery-photopile/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjquery-photopile", "descriptionParagraphs": [ "This is a sample web part that illustrated the use of JQuery and Photopile.Js with the SharePoint Framework." ], "previews": [ { "src": "/images/previews/d11ad7707f104b5bcb2ba06ca8689c2a0437bf1b3038a5689345195159d30831.webp", "alt": "JQuery, Photopile.JS & Office UI Fabric Client-Side Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/jquery-photopile/assets/tutorial-add-spapp-01.png", "alt": "JQuery, Photopile.JS & Office UI Fabric Client-Side Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/jquery-photopile/assets/tutorial-add-spapp-02.png", "alt": "JQuery, Photopile.JS & Office UI Fabric Client-Side Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/jquery-photopile/assets/tutorial-add-spapp-03.png", "alt": "JQuery, Photopile.JS & Office UI Fabric Client-Side Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/jquery-photopile/assets/tutorial-add-spapp-05.png", "alt": "JQuery, Photopile.JS & Office UI Fabric Client-Side Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.0.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-advanced-commenting/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-advanced-commenting", "title": "Advanced Comments Box Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "jQuery" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-02-05", "updated": "2025-10-28", "authors": [ { "name": "Sudharsan Kesavanarayanan", "account": "sudharsank", "avatar": "https://github.com/sudharsank.png" }, { "name": "Aimery Thomas", "account": "a1mery", "avatar": "https://github.com/a1mery.png" }, { "name": "Sergey Shiroky", "account": "wideserg", "avatar": "https://github.com/wideserg.png" } ], "preview": { "src": "/images/previews/35f8816ae13c6483fe7dcd2f7985cf2b2ea0a4d977bfcca37af02928fbf31f9b.webp", "alt": "Advanced Comments Box", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-advanced-commenting", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-advanced-commenting/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-advanced-commenting", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/35f8816ae13c6483fe7dcd2f7985cf2b2ea0a4d977bfcca37af02928fbf31f9b.webp", "alt": "Advanced Comments Box", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-applicationinsights-api-calls-tracking/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-applicationinsights-api-calls-tracking", "title": "External API calls tracking with Application Insights", "description": "This SPFx solution is designed to monitor and track API calls executed within any SharePoint Online (SPO) site.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer" ], "technologies": [ "JavaScript" ], "version": "1.19.0", "versionGroup": "1.19", "created": "2024-08-10", "updated": "2024-08-10", "authors": [ { "name": "Kinga Kazala", "account": "kkazala", "avatar": "https://github.com/kkazala.png" } ], "preview": { "src": "/images/previews/c3ee28ba1d1e2e65dcfca6727571aaebe180ca0134d0d3ef8f9fec29919b21f1.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-applicationinsights-api-calls-tracking", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-applicationinsights-api-calls-tracking/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-applicationinsights-api-calls-tracking", "descriptionParagraphs": [ "This SPFx solution is designed to monitor and track API calls executed within any SharePoint Online (SPO) site." ], "previews": [ { "src": "/images/previews/c3ee28ba1d1e2e65dcfca6727571aaebe180ca0134d0d3ef8f9fec29919b21f1.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-applicationinsights-api-calls-tracking/assets/ApiCalls.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-applicationinsights-api-calls-tracking/assets/kusto.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.19.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-demo-time/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-demo-time", "title": "Demo Time", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-03-16", "updated": "2025-03-16", "authors": [ { "name": "Adam Wójcik", "account": "Adam-it", "avatar": "https://github.com/Adam-it.png" } ], "preview": { "src": "/images/previews/b83ae158ff0f0a46be7cecb4c6385a5ae0c628263eeed88c167d94a17443a3a5.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-demo-time", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-demo-time/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-demo-time", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/b83ae158ff0f0a46be7cecb4c6385a5ae0c628263eeed88c167d94a17443a3a5.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-demo-time/assets/demo-time-gif2.gif", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-demo-time/assets/demo-time1.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-demo-time/assets/demo-time2.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-demo-time/assets/demo-time3.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-display-list/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-display-list", "title": "Display List JavaScript Client-Side Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "JavaScript" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-08-29", "updated": "2020-08-29", "authors": [ { "name": "Velin Georgiev", "account": "VelinGeorgiev", "avatar": "https://github.com/VelinGeorgiev.png" }, { "name": "Ryan Schouten", "account": "sharepointknight", "avatar": "https://github.com/sharepointknight.png" } ], "preview": { "src": "/images/previews/54985f6c82d8b0ede085e7c2cc2677d352d5f8201d248b0e00f1bca8846ab4f8.webp", "alt": "Display List JavaScript Client-Side Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-display-list", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-display-list/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-display-list", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/54985f6c82d8b0ede085e7c2cc2677d352d5f8201d248b0e00f1bca8846ab4f8.webp", "alt": "Display List JavaScript Client-Side Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-dynamic-bundling-libraries/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-dynamic-bundling-libraries", "title": "Dynamic Bundling Web Parts & Loading of SPFx Packages", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "JavaScript" ], "version": "1.7.0", "versionGroup": "1.7", "created": "2018-12-03", "updated": "2018-12-03", "authors": [ { "name": "David Warner II", "account": "PopWarner", "avatar": "https://avatars.githubusercontent.com/u/10676147?s=460&u=9e4e74223c4ffb430fb77c97892a84b286df1921&v=4" } ], "preview": { "src": "/images/previews/b78d1132b4ad850f52f6eb1697306c704d518e85bb7327f5231f1a7b9abf594a.webp", "alt": "Dynamic Bundling & Loading of SPFx Packages", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-dynamic-bundling-libraries", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-dynamic-bundling-libraries/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-dynamic-bundling-libraries", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/b78d1132b4ad850f52f6eb1697306c704d518e85bb7327f5231f1a7b9abf594a.webp", "alt": "Dynamic Bundling & Loading of SPFx Packages", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-dynamic-bundling-libraries/assets/WebPart-Preview-PreClick.jpg", "alt": "Dynamic Bundling & Loading of SPFx Packages", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.7.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-employee-spotlight/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-employee-spotlight", "title": "Display Employee Spotlight JavaScript Client-Side Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "JavaScript" ], "version": "1.0.0", "versionGroup": "< 1.1", "created": "2017-06-12", "updated": "2017-06-12", "authors": [ { "name": "Ravi Kumar Bomma", "account": "brk114", "avatar": "https://github.com/brk114.png" } ], "preview": { "src": "/images/previews/649c9ba05c620066e28027cd53c6945701c9c463ed090fae5483afa0efc4b3f2.webp", "alt": "Display Employee Spotlight JavaScript Client-Side Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-employee-spotlight", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-employee-spotlight/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-employee-spotlight", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/649c9ba05c620066e28027cd53c6945701c9c463ed090fae5483afa0efc4b3f2.webp", "alt": "Display Employee Spotlight JavaScript Client-Side Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-employee-spotlight/assets/Employee-spotlight-options.png", "alt": "Display Employee Spotlight JavaScript Client-Side Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.0.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-extend-gulp/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-extend-gulp", "title": "Integrating custom gulp tasks to SharePoint Framework toolchain", "description": "SharePoint client-side development tools use gulp as the build process task runner to...", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "JavaScript" ], "version": "0.4.0", "versionGroup": "< 1.1", "created": "2017-01-25", "updated": "2017-01-25", "authors": [ { "name": "Chakkaradeep Chandran", "account": "chakkaradeep", "avatar": "https://avatars.githubusercontent.com/u/7882052?s=460&u=92d546edfe1e1b374c69f0fd9315186eea700b8f&v=4" } ], "preview": { "src": "/images/previews/4e89b941bb0000e0f7c1643c235a53919c3b6ef15d5fd5c7713cfc3746ce25cb.webp", "alt": "Integrating custom gulp tasks to SharePoint Framwork toolchain", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-extend-gulp", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-extend-gulp/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-extend-gulp", "descriptionParagraphs": [ "SharePoint client-side development tools use gulp as the build process task runner to..." ], "previews": [ { "src": "/images/previews/4e89b941bb0000e0f7c1643c235a53919c3b6ef15d5fd5c7713cfc3746ce25cb.webp", "alt": "Integrating custom gulp tasks to SharePoint Framwork toolchain", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "0.4.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External HTTPS image was not verified against a collected tree.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-extend-webpack/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-extend-webpack", "title": "Extending webpack in the SharePoint Framework toolchain", "description": "This sample shows how to use the webpack markdown-loader to preprocess markdown files to HTML string.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "JavaScript" ], "version": "1.3.4", "versionGroup": "1.3", "created": "2017-01-25", "updated": "2017-01-25", "authors": [ { "name": "Velin Georgiev", "account": "VelinGeorgiev", "avatar": "https://github.com/VelinGeorgiev.png" }, { "name": "Chakkaradeep Chandran", "account": "chakkaradeep", "avatar": "https://avatars.githubusercontent.com/u/7882052?s=460&u=92d546edfe1e1b374c69f0fd9315186eea700b8f&v=4" } ], "preview": { "src": "/images/previews/ccbde1c9c871344bc5a6948b7250270b5f6f31db898c962a225fbec33c989ccc.webp", "alt": "Extending webpack in the SharePoint Framework toolchain", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-extend-webpack", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-extend-webpack/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-extend-webpack", "descriptionParagraphs": [ "This sample shows how to use the webpack markdown-loader to preprocess markdown files to HTML string." ], "previews": [ { "src": "/images/previews/ccbde1c9c871344bc5a6948b7250270b5f6f31db898c962a225fbec33c989ccc.webp", "alt": "Extending webpack in the SharePoint Framework toolchain", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.3.4", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-gitHubBadge/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-githubbadge", "title": "GitHub Badge Web Part", "description": "Displays information from GitHub for a specified user.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "JavaScript" ], "version": "1.8.0", "versionGroup": "1.8", "created": "2019-04-18", "updated": "2019-04-18", "authors": [ { "name": "Eric Skaggs", "account": "skaggej", "avatar": "https://github.com/skaggej.png" } ], "preview": { "src": "/images/previews/6eff19eb8553cd33344b8ac341adfff6d8c29c1bf58ff08c60ececdc66fe204a.webp", "alt": "GitHub Badge", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-gitHubBadge", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-gitHubBadge/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-gitHubBadge", "descriptionParagraphs": [ "Displays information from GitHub for a specified user." ], "previews": [ { "src": "/images/previews/6eff19eb8553cd33344b8ac341adfff6d8c29c1bf58ff08c60ececdc66fe204a.webp", "alt": "GitHub Badge", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.8.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-mermaid-diagram/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-mermaid-diagram", "title": "Mermaid Diagram Web Part for SharePoint Online", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-03-16", "updated": "2025-03-16", "authors": [ { "name": "Clavin Fernandes", "account": "cfernandes-muhimbi", "avatar": "https://github.com/cfernandes-muhimbi.png" } ], "preview": { "src": "/images/previews/ea3c23bd28e0e6dc0006a87fa2e1993a76c004dc741a1971c28aa43bf0772f6b.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-mermaid-diagram", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-mermaid-diagram/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-mermaid-diagram", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/ea3c23bd28e0e6dc0006a87fa2e1993a76c004dc741a1971c28aa43bf0772f6b.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-mermaid-diagram/assets/Mermaid.gif", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-modern-calendar/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-modern-calendar", "title": "Modern Calendar Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "JavaScript" ], "version": "1.22.1", "versionGroup": "1.22", "created": "2020-06-05", "updated": "2025-12-30", "authors": [ { "name": "Jeremy Coleman", "account": "jcoleman-pcprofessional", "avatar": "https://github.com/jcoleman-pcprofessional.png" }, { "name": "Nanddeep Nachan", "account": "nanddeepn", "avatar": "https://github.com/nanddeepn.png" }, { "name": "Peter Paul Kirschner", "account": "petkir", "avatar": "https://github.com/petkir.png" } ], "preview": { "src": "/images/previews/db1302dbeb111aa4990ea027c5ec03cd2eac9210ff84f8e938fc787c4b7dbd80.webp", "alt": "Modern Calendar", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-modern-calendar", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-modern-calendar/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-modern-calendar", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/db1302dbeb111aa4990ea027c5ec03cd2eac9210ff84f8e938fc787c4b7dbd80.webp", "alt": "Modern Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-modern-calendar/assets/14c3ec26-0121-11e7-8be8-65fbcca32b62.png", "alt": "Modern Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-modern-calendar/assets/14c4333e-0121-11e7-9bf1-3117651222d3.png", "alt": "Modern Calendar", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-msgraph-thumbnail/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-msgraph-thumbnail", "title": "Thumbnail/preview of pages and files web part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-01-21", "updated": "2020-01-21", "authors": [ { "name": "Mikael Svenson", "account": "wobba", "avatar": "https://github.com/wobba.png" } ], "preview": { "src": "/images/previews/99fb3a20a3b89cd49f210cfdb18463fe5ce2c83ec5c208d03c5fdacb459f83aa.webp", "alt": "Thumbnail/preview of pages and files", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-msgraph-thumbnail", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-msgraph-thumbnail/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-msgraph-thumbnail", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/99fb3a20a3b89cd49f210cfdb18463fe5ce2c83ec5c208d03c5fdacb459f83aa.webp", "alt": "Thumbnail/preview of pages and files", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-myflows/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-myflows", "title": "My Flows Web Part", "description": "Manage current user flows in SharePoint or Teams Tab, this web part use the msflowsdk-1.1.js", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "JavaScript" ], "version": "1.8.2", "versionGroup": "1.8", "created": "2019-08-13", "updated": "2019-08-13", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/1506e6943947f0d482a0d22f7f560cc959703512d31ce92821b5af1bd2917bc2.webp", "alt": "My Flows Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-myflows", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-myflows/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-myflows", "descriptionParagraphs": [ "Manage current user flows in SharePoint or Teams Tab, this web part use the msflowsdk-1.1.js" ], "previews": [ { "src": "/images/previews/1506e6943947f0d482a0d22f7f560cc959703512d31ce92821b5af1bd2917bc2.webp", "alt": "My Flows Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-myflows/assets/MyFlows.gif", "alt": "My Flows Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-myflows/assets/Screenshot1.png", "alt": "My Flows Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-myflows/assets/Screenshot2.png", "alt": "My Flows Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-myflows/assets/Screenshot3.png", "alt": "My Flows Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.8.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-pi-canvas/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-pi-canvas", "title": "PiCanvas - Tabbed Page Sections", "description": "Organize SharePoint page sections and web parts into a tabbed interface with permission-based visibility, templates, and full customization.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "jQuery" ], "version": "1.22.0", "versionGroup": "1.22", "created": "2024-11-15", "updated": "2026-01-02", "authors": [ { "name": "Anthony Hopkins", "account": "anthonyrhopkins", "avatar": "https://github.com/anthonyrhopkins.png" } ], "preview": { "src": "/images/previews/63fb4dc3d9cd809c60c43635cda154275ce9de2221780f10382e73bd48409e8d.webp", "alt": "PiCanvas web part showing tabbed interface with multiple tabs organizing page content", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-pi-canvas", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-pi-canvas/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-pi-canvas", "descriptionParagraphs": [ "PiCanvas is a SharePoint Framework web part that organizes page content into a clean tabbed interface. It supports permission-based tab visibility (Owners/Members/Visitors/Custom groups), multiple tab styles (default, pills, underline, boxed), vertical and horizontal layouts, and full color/typography customization. Features include template export/import, Mermaid diagram rendering, section grouping, theme auto-detection, and web part reuse across tabs." ], "previews": [ { "src": "/images/previews/63fb4dc3d9cd809c60c43635cda154275ce9de2221780f10382e73bd48409e8d.webp", "alt": "PiCanvas web part showing tabbed interface with multiple tabs organizing page content", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Modern Hillbilly Tabs", "description": "Original concept by Mark Rackley that PiCanvas modernizes", "url": "https://markrackley.net/2022/06/29/the-return-of-hillbilly-tabs/" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-powerbi-embedded/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-powerbi-embedded", "title": "Embed a PowerBI report in a Client-Side Web Part", "description": "This sample SharePoint Framework client-side web part embedding a PowerBI report using PowerBI Embedded without any server-side code.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "JavaScript" ], "version": "0.2.0", "versionGroup": "< 1.1", "created": "2016-09-13", "updated": "2016-09-13", "authors": [ { "name": "Roland Oldengarm", "account": "roldengarm", "avatar": "https://github.com/roldengarm.png" } ], "preview": { "src": "/images/previews/9fa24205456870e6b6ee67a43bacd6bb8252d81a0f5c287a1d46231c312af877.webp", "alt": "Embed a PowerBI report in a Client-Side Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-powerbi-embedded", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-powerbi-embedded/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-powerbi-embedded", "descriptionParagraphs": [ "This sample SharePoint Framework client-side web part embedding a PowerBI report using PowerBI Embedded without any server-side code." ], "previews": [ { "src": "/images/previews/9fa24205456870e6b6ee67a43bacd6bb8252d81a0f5c287a1d46231c312af877.webp", "alt": "Embed a PowerBI report in a Client-Side Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "0.2.0", "issues": [ { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-propertycontrols-svg/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-propertycontrols-svg", "title": "JS Property Controls SVG Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "JavaScript" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2017-11-12", "updated": "2022-04-07", "authors": [ { "name": "Chris Kent", "account": "thechriskent", "avatar": "https://avatars.githubusercontent.com/u/8364109?s=460&v=4" } ], "preview": { "src": "/images/previews/0e7aa42cb66e71a9c7764147d11bee679da8c24628b1c7afd6a2ec397d3a18a4.webp", "alt": "JS Property Controls SVG", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-propertycontrols-svg", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-propertycontrols-svg/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-propertycontrols-svg", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/0e7aa42cb66e71a9c7764147d11bee679da8c24628b1c7afd6a2ec397d3a18a4.webp", "alt": "JS Property Controls SVG", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-propertycontrols-svg/assets/js-propertycontrols-svg.PNG", "alt": "JS Property Controls SVG", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-public-unjoined-teams/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-public-unjoined-teams", "title": "Public teams I'm not a member of Web Part", "description": "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).", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "JavaScript" ], "version": "1.7.1-plusbeta", "versionGroup": "1.7", "created": "2019-02-05", "updated": "2019-02-05", "authors": [ { "name": "Laura Kokkarinen", "account": "LauraKokkarinen", "avatar": "https://github.com/LauraKokkarinen.png" } ], "preview": { "src": "/images/previews/1d24d41558e04b4191469cfa8810feed971ba7955e36747e34524d6948d89bad.webp", "alt": "Public teams I'm not a member of", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-public-unjoined-teams", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-public-unjoined-teams/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-public-unjoined-teams", "descriptionParagraphs": [ "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)." ], "previews": [ { "src": "/images/previews/1d24d41558e04b4191469cfa8810feed971ba7955e36747e34524d6948d89bad.webp", "alt": "Public teams I'm not a member of", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.7.1-plusbeta", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-skype-status/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-skype-status", "title": "JavaScript Skype Status Web Part", "description": "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", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "JavaScript" ], "version": "1.8.0", "versionGroup": "1.8", "created": "2019-03-27", "updated": "2019-03-27", "authors": [ { "name": "Vincent Biret", "account": "baywet", "avatar": "https://github.com/baywet.png" } ], "preview": { "src": "/images/previews/37592fbc4da8dc2b43e6d2dcf0dc0fca501ac899710cd6e2ccfd9949b530b66b.webp", "alt": "JavaScript Skype Status Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-skype-status", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-skype-status/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-skype-status", "descriptionParagraphs": [ "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" ], "previews": [ { "src": "/images/previews/37592fbc4da8dc2b43e6d2dcf0dc0fca501ac899710cd6e2ccfd9949b530b66b.webp", "alt": "JavaScript Skype Status Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.8.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-smart-table-of-contents/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-js-smart-table-of-contents", "title": "Smart Table of Contents", "description": "Advanced Smart Table of Contents web part for modern SharePoint pages.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [], "version": "1.20.0", "versionGroup": "1.20", "created": "2026-05-28", "updated": "2026-05-28", "authors": [ { "name": "Jonathan Adcox", "account": "blayderunner123", "avatar": "https://github.com/blayderunner123.png" } ], "preview": { "src": "/images/previews/1cd69b2bf4edbc83a935eb308a9f138a66295bf5c81e9fad1d2d1e9181eb9b03.webp", "alt": "Smart Table of Contents floating drawer mode", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-smart-table-of-contents", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-smart-table-of-contents/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-smart-table-of-contents", "descriptionParagraphs": [ "A lightweight non-React SPFx web part that generates a smart table of contents from modern SharePoint page headings.", "Supports ScrollSpy active heading tracking, smooth scrolling, floating drawer mode, inline mode, nested heading expansion, heading search, configurable heading depth, section numbering, and reading time estimation." ], "previews": [ { "src": "/images/previews/1cd69b2bf4edbc83a935eb308a9f138a66295bf5c81e9fad1d2d1e9181eb9b03.webp", "alt": "Smart Table of Contents floating drawer mode", "isFallback": false } ], "references": [ { "title": "SharePoint Framework", "description": "SharePoint Framework documentation", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" } ], "products": [ "SharePoint", "SharePoint Online" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "technology.missing", "field": "metadata.CLIENT-SIDE-DEV", "message": "Technology filter metadata is missing.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-solution-editions/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-solution-editions", "title": "Handling Multiple Editions of SPFx Solution", "description": "This sample shows possible approach of handling multiple editions (e.g. trial, lite, full) of SharePoint Framework solution.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "JavaScript" ], "version": "1.18.0", "versionGroup": "1.18", "created": "2017-08-23", "updated": "2017-08-23", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" } ], "preview": { "src": "/images/previews/490b787db971ab8606cda04dd25759265c5452e299971ee75ed73e5a2aa96f9c.webp", "alt": "Handling Multiple Editions of SPFx Solution", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-solution-editions", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-solution-editions/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-solution-editions", "descriptionParagraphs": [ "This sample shows possible approach of handling multiple editions (e.g. trial, lite, full) of SharePoint Framework solution." ], "previews": [ { "src": "/images/previews/490b787db971ab8606cda04dd25759265c5452e299971ee75ed73e5a2aa96f9c.webp", "alt": "Handling Multiple Editions of SPFx Solution", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.18.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External HTTPS image was not verified against a collected tree.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-teams-meeting-app/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-teams-meeting-app", "title": "SPFx web part in Teams Meetings App", "description": "A minimal SharePoint Framework web part demonstrating use as a Microsoft Teams meetings app.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "TypeScript" ], "version": "1.12.1-rc.3", "versionGroup": "1.12", "created": "2021-04-27", "updated": "2021-04-27", "authors": [ { "name": "Andrew Connell", "account": "andrewconnell", "avatar": "https://github.com/andrewconnell.png" } ], "preview": { "src": "/images/previews/fcfd92c04a94b1c870ce851d796504a28588946d305603ff227e3c883ed9f415.webp", "alt": "SPFx web part used as a Microsoft Teams meetings app", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-teams-meeting-app", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-teams-meeting-app/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-teams-meeting-app", "descriptionParagraphs": [ "A minimal SharePoint Framework web part demonstrating use as a Microsoft Teams meetings app." ], "previews": [ { "src": "/images/previews/fcfd92c04a94b1c870ce851d796504a28588946d305603ff227e3c883ed9f415.webp", "alt": "SPFx web part used as a Microsoft Teams meetings app", "isFallback": false } ], "references": [ { "title": "Sample documentation", "description": "Summary, contributors, version history, and usage instructions.", "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-teams-meeting-app/README.md" } ], "products": [ "SharePoint", "Teams" ], "supportedHosts": [ "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1-rc.3", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-theme-manager-2019/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-theme-manager-2019", "title": "Modern Experience Theme Manager 2019 Web Part", "description": "This sample web part provides a user interface for applying a Modern Experience theme in SharePoint 2019 on-premises.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "JavaScript" ], "version": "1.8.2", "versionGroup": "1.8", "created": "2019-06-17", "updated": "2019-06-17", "authors": [ { "name": "David Warner II", "account": "PopWarner", "avatar": "https://avatars.githubusercontent.com/u/10676147?s=460&u=9e4e74223c4ffb430fb77c97892a84b286df1921&v=4" }, { "name": "Beau Cameron", "account": "bcameron1231", "avatar": "https://avatars.githubusercontent.com/u/7944457?s=460&u=cbea276e0125f71a183f8ad94475dbd1984c6afa&v=4" }, { "name": "Eric Skaggs", "account": "skaggej", "avatar": "https://github.com/skaggej.png" } ], "preview": { "src": "/images/previews/a72ca8cf5f538cbf82478b354952ebbf56aa699670a2769aec3c36647c473ddd.webp", "alt": "Modern Experience Theme Manager 2019", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-theme-manager-2019", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-theme-manager-2019/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-theme-manager-2019", "descriptionParagraphs": [ "This sample web part provides a user interface for applying a Modern Experience theme in SharePoint 2019 on-premises." ], "previews": [ { "src": "/images/previews/a72ca8cf5f538cbf82478b354952ebbf56aa699670a2769aec3c36647c473ddd.webp", "alt": "Modern Experience Theme Manager 2019", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-theme-manager-2019/assets/create-a-theme.png", "alt": "Modern Experience Theme Manager 2019", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-theme-manager-2019/assets/delete-a-theme.png", "alt": "Modern Experience Theme Manager 2019", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-theme-manager-2019/assets/theme-manager.png", "alt": "Modern Experience Theme Manager 2019", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-theme-manager-2019/assets/update-a-theme.png", "alt": "Modern Experience Theme Manager 2019", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.8.2", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-theme-manager/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-theme-manager", "title": "Modern Experience Theme Manager Web Part", "description": "This sample web part provides a user interface for creating, updating, deleting and applying a Modern Experience SharePoint theme in SharePoint Online.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "JavaScript" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-06-01", "updated": "2025-10-28", "authors": [ { "name": "David Warner II", "account": "PopWarner", "avatar": "https://github.com/PopWarner.png" }, { "name": "Beau Cameron", "account": "bcameron1231", "avatar": "https://github.com/bcameron1231.png" }, { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" } ], "preview": { "src": "/images/previews/bb4dea37aa0b3770d8c629591bf513e43dbb89633ef35e8a45152e3a42387ce4.webp", "alt": "Modern Experience Theme Manager", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-theme-manager", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-theme-manager/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-theme-manager", "descriptionParagraphs": [ "This sample web part provides a user interface for creating, updating, deleting and applying a Modern Experience SharePoint theme in SharePoint Online." ], "previews": [ { "src": "/images/previews/bb4dea37aa0b3770d8c629591bf513e43dbb89633ef35e8a45152e3a42387ce4.webp", "alt": "Modern Experience Theme Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-theme-manager/assets/apply-a-theme.png", "alt": "Modern Experience Theme Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-theme-manager/assets/delete-a-theme.png", "alt": "Modern Experience Theme Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-theme-manager/assets/themeManager.png", "alt": "Modern Experience Theme Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-theme-manager/assets/update-a-theme.png", "alt": "Modern Experience Theme Manager", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/js-workbench-customizer/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-js-workbench-customizer", "title": "Workbench customizer Web Part", "description": "This sample shows how the Workbench page can be customized to display in a way that better mimics a modern SharePoint page.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "JavaScript" ], "version": "1.18.2", "versionGroup": "1.18", "created": "2020-11-02", "updated": "2023-12-21", "authors": [ { "name": "Joel Rodrigues", "account": "joelfmrodrigues", "avatar": "https://github.com/joelfmrodrigues.png" } ], "preview": { "src": "/images/previews/625180a4efc6919a5a60df8cf43ba333c287c80411b02383cb44ee7abbdcb66f.webp", "alt": "Workbench customizer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-workbench-customizer", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/js-workbench-customizer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fjs-workbench-customizer", "descriptionParagraphs": [ "This sample shows how the Workbench page can be customized to display in a way that better mimics a modern SharePoint page." ], "previews": [ { "src": "/images/previews/625180a4efc6919a5a60df8cf43ba333c287c80411b02383cb44ee7abbdcb66f.webp", "alt": "Workbench customizer", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/knockout-dependent-properties/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-knockout-dependent-properties", "title": "Knockout Dependent Properties", "description": "Sample Web Part illustrating...", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Knockout" ], "version": "1.0.0", "versionGroup": "< 1.1", "created": "2017-05-20", "updated": "2017-05-20", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" } ], "preview": { "src": "/images/previews/99b0779c727e4a882f12dabc820c2959b688d67593f25ae205441c28bee56a31.webp", "alt": "Knockout Dependent Properties", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/knockout-dependent-properties", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/knockout-dependent-properties/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fknockout-dependent-properties", "descriptionParagraphs": [ "Sample Web Part illustrating..." ], "previews": [ { "src": "/images/previews/99b0779c727e4a882f12dabc820c2959b688d67593f25ae205441c28bee56a31.webp", "alt": "Knockout Dependent Properties", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.0.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/knockout-sp-pnp-js/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-knockout-sp-pnp-js", "title": "Sample web part showing the use of @pnp/sp library with Knockoutjs", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Knockout" ], "version": "1.7.0", "versionGroup": "1.7", "created": "2018-11-14", "updated": "2018-11-14", "authors": [ { "name": "Patrick Rodgers", "account": "patrick-rodgers", "avatar": "https://github.com/patrick-rodgers.png" } ], "preview": { "src": "/images/previews/60c675719f94ce5783b1237ca47fa2606b1c8152c8464828b80972fcb6302cb9.webp", "alt": "Sample showing the use of @pnp/sp library with Knockoutjs", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/knockout-sp-pnp-js", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/knockout-sp-pnp-js/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fknockout-sp-pnp-js", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/60c675719f94ce5783b1237ca47fa2606b1c8152c8464828b80972fcb6302cb9.webp", "alt": "Sample showing the use of @pnp/sp library with Knockoutjs", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.7.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/knockout-taxonomy/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-knockout-taxonomy", "title": "Taxonomy Web Part", "description": "Sample Web Part illustrating Reading taxonomy term stores' hierarchy from SharePoint, Loading JavaScript Object Model scripts, creating Knockout components", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Knockout" ], "version": "1.0.0", "versionGroup": "< 1.1", "created": "2017-05-05", "updated": "2017-05-05", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" } ], "preview": { "src": "/images/previews/53fd6592a128c89edd0861695a4239152780db6842e619aedd6d1ab2f4dcf9e5.webp", "alt": "Taxonomy Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/knockout-taxonomy", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/knockout-taxonomy/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fknockout-taxonomy", "descriptionParagraphs": [ "Sample Web Part illustrating Reading taxonomy term stores' hierarchy from SharePoint, Loading JavaScript Object Model scripts, creating Knockout components" ], "previews": [ { "src": "/images/previews/53fd6592a128c89edd0861695a4239152780db6842e619aedd6d1ab2f4dcf9e5.webp", "alt": "Taxonomy Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.0.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-3rd-party-api/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-3rd-party-api", "title": "Consuming Third Party APIs secured with Azure Active Directory within SharePoint Framework Web Part", "description": "This sub folders contains a client-side project that shows how to consume a 3rd party API within SharePoint Framework.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-02-19", "updated": "2018-02-19", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/PaoloPia.png" } ], "preview": { "src": "/images/previews/f7c31db98d1f4b1c16a1f33c7093adc53bc7e386fd5944bda505f16ab6cd1a25.webp", "alt": "Consuming Third Party APIs secured with Azure Active Directory within SharePoint Framework", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-3rd-party-api", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-3rd-party-api/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-3rd-party-api", "descriptionParagraphs": [ "This sub folders contains a client-side project that shows how to consume a 3rd party API within SharePoint Framework." ], "previews": [ { "src": "/images/previews/f7c31db98d1f4b1c16a1f33c7093adc53bc7e386fd5944bda505f16ab6cd1a25.webp", "alt": "Consuming Third Party APIs secured with Azure Active Directory within SharePoint Framework", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-M365-Planner-Timeline/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-m365-planner-timeline", "title": "M365 Planner Timeline Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2024-12-25", "updated": "2024-12-31", "authors": [ { "name": "Bill Brockbank", "account": "billbrockbank", "avatar": "https://github.com/billbrockbank.png" } ], "preview": { "src": "/images/previews/27abc96402ae3af96c1d72c57d5953557d9a37a585e7a828654a66f01f622962.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-M365-Planner-Timeline", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-M365-Planner-Timeline/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-M365-Planner-Timeline", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/27abc96402ae3af96c1d72c57d5953557d9a37a585e7a828654a66f01f622962.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-aad-implicitflow/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-aad-implicitflow", "title": "Azure Active Directory implicit flow authentication sample web parts", "description": "Sample SharePoint Framework web parts built using React illustrating different scenarios using implicit OAuth flow with Azure Active Directory.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.0.0", "versionGroup": "< 1.1", "created": "2017-03-17", "updated": "2017-03-17", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/4c4ef075c50ac6d7986019a337db1c136103b49bba343b89b219fac0c820b42c.webp", "alt": "Azure Active Directory implicit flow authentication samples", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-aad-implicitflow", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-aad-implicitflow/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-aad-implicitflow", "descriptionParagraphs": [ "Sample SharePoint Framework web parts built using React illustrating different scenarios using implicit OAuth flow with Azure Active Directory." ], "previews": [ { "src": "/images/previews/4c4ef075c50ac6d7986019a337db1c136103b49bba343b89b219fac0c820b42c.webp", "alt": "Azure Active Directory implicit flow authentication samples", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.0.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-aad-webapi/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-aad-webapi", "title": "Call custom Web API secured with AAD from SharePoint Framework client-side web part", "description": "Sample SharePoint Framework client-side web part illustrating communication with a custom Web API secured with Azure Active Directory.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "0.4.0", "versionGroup": "< 1.1", "created": "2016-10-10", "updated": "2016-10-10", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/c88a5731adfaed8b204f14071b002fab75209019dc8be8f8be11b42e53227657.webp", "alt": "Call custom Web API secured with AAD from SharePoint Framework client-side web part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-aad-webapi", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-aad-webapi/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-aad-webapi", "descriptionParagraphs": [ "Sample SharePoint Framework client-side web part illustrating communication with a custom Web API secured with Azure Active Directory." ], "previews": [ { "src": "/images/previews/c88a5731adfaed8b204f14071b002fab75209019dc8be8f8be11b42e53227657.webp", "alt": "Call custom Web API secured with AAD from SharePoint Framework client-side web part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "0.4.0", "issues": [ { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-accordion-dynamic-section/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-accordion-dynamic-section", "title": "Dynamic Accordion - FAQ Builder web part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2021-01-05", "updated": "2024-10-19", "authors": [ { "name": "Jerry Yasir", "account": "jerryyasir", "avatar": "https://github.com/jerryyasir.png" }, { "name": "Jack Vinitsky", "account": "jack-vinitsky", "avatar": "https://github.com/jack-vinitsky.png" }, { "name": "Ravi Chandra", "account": "Ravikadri", "avatar": "https://github.com/Ravikadri.png" } ], "preview": { "src": "/images/previews/9a73f707c2307e844e9637a1501fc5f4feb3fcc74276e4bf9ccb09a95a3787f0.webp", "alt": "Dynamic Accordion - FAQ Builder web part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-accordion-dynamic-section", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-accordion-dynamic-section/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-accordion-dynamic-section", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/9a73f707c2307e844e9637a1501fc5f4feb3fcc74276e4bf9ccb09a95a3787f0.webp", "alt": "Dynamic Accordion - FAQ Builder web part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-accordion-dynamic-section/assets/AccordionSettings1.png", "alt": "Dynamic Accordion - FAQ Builder web part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-accordion-dynamic-section/assets/AccordionSettings2.png", "alt": "Dynamic Accordion - FAQ Builder web part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-accordion-dynamic-section/assets/FAQsList.png", "alt": "Dynamic Accordion - FAQ Builder web part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-accordion-section/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-accordion-section", "title": "Accordion Section FAQ Builder Web Part", "description": "Adds a collapsible accordion section to an Office 365 SharePoint page or Teams Tab. Ideal for creating FAQs.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-09-02", "updated": "2020-09-02", "authors": [ { "name": "Erik Benke", "account": "ejbenke", "avatar": "https://github.com/ejbenke.png" }, { "name": "Mike Zimmerman", "account": "mikezimm", "avatar": "https://github.com/mikezimm.png" } ], "preview": { "src": "/images/previews/7d5e7c9dc1adf01eee8debfbedd534a07ce3fdbe7779e5fda9bd241625d85772.webp", "alt": "Accordion Section FAQ Builder", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-accordion-section", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-accordion-section/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-accordion-section", "descriptionParagraphs": [ "Adds a collapsible accordion section to an Office 365 SharePoint page or Teams Tab. Ideal for creating FAQs." ], "previews": [ { "src": "/images/previews/7d5e7c9dc1adf01eee8debfbedd534a07ce3fdbe7779e5fda9bd241625d85772.webp", "alt": "Accordion Section FAQ Builder", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-accordion-section/assets/AccordionSettings.png", "alt": "Accordion Section FAQ Builder", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-accordion-section/assets/ListForAccordion.png", "alt": "Accordion Section FAQ Builder", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-accordion-with-richtext/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-accordion-with-richtext", "title": "Tab Accordion Web Part", "description": "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", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2022-03-30", "updated": "2023-01-03", "authors": [ { "name": "Arun Kumar Perumal", "account": "arunkumarperumal", "avatar": "https://github.com/arunkumarperumal.png" } ], "preview": { "src": "/images/previews/1fc46717c2e9719f1afef1def4fdf5bc26093befcb8d7d3cc5b4be7413c8a670.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-accordion-with-richtext", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-accordion-with-richtext/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-accordion-with-richtext", "descriptionParagraphs": [ "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" ], "previews": [ { "src": "/images/previews/1fc46717c2e9719f1afef1def4fdf5bc26093befcb8d7d3cc5b4be7413c8a670.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-accordion/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-accordion", "title": "Accordion Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2020-06-22", "updated": "2024-10-13", "authors": [ { "name": "Gautam Sheth", "account": "gautamdsheth", "avatar": "https://github.com/gautamdsheth.png" }, { "name": "Abhishek Garg", "account": "AbhishekGarg", "avatar": "https://avatars.githubusercontent.com/u/5449154?s=400&v=4" }, { "name": "Sandeep P S", "account": "Sandeep-FED", "avatar": "https://avatars.githubusercontent.com/u/36669540?s=400&u=26832fbf77fdad041d47c05811d45ceea59e7531&v=4" } ], "preview": { "src": "/images/previews/fb10e74577d9274a5eab6cfca0eeefc086fcdaed9bf7c1433b129416b03932b0.webp", "alt": "Accordion Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-accordion", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-accordion/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-accordion", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/fb10e74577d9274a5eab6cfca0eeefc086fcdaed9bf7c1433b129416b03932b0.webp", "alt": "Accordion Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-adaptive-card-host-control/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-adaptive-card-host-control", "title": "Adaptive Card Host control web part", "description": "This web part provides an example of how to use the AdaptiveCardHost component present in the PnP React Controls library.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.14", "versionGroup": "1.14", "created": "2022-03-09", "updated": "2022-03-09", "authors": [ { "name": "Fabio Franzini", "account": "fabiofranzini", "avatar": "https://github.com/fabiofranzini.png" } ], "preview": { "src": "/images/previews/81a26717ccfae1e8b573ca1ec179b1fcf0b9da48abfd5c1543b2c61f1faf2212.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptive-card-host-control", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptive-card-host-control/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-adaptive-card-host-control", "descriptionParagraphs": [ "This web part provides an example of how to use the AdaptiveCardHost component present in the PnP React Controls library." ], "previews": [ { "src": "/images/previews/81a26717ccfae1e8b573ca1ec179b1fcf0b9da48abfd5c1543b2c61f1faf2212.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptive-card-host-control/assets/AdaptiveCardHostTeams.gif", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14", "issues": [ { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-adaptive-cards-image-gallery/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-adaptive-cards-image-gallery", "title": "Image Gallery Web Part Built with Adaptive Cards", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-06-15", "updated": "2020-06-15", "authors": [ { "name": "Nanddeep Nachan", "account": "nanddeepn", "avatar": "https://github.com/nanddeepn.png" }, { "name": "Ravi Kulkarni", "account": "ravi16a87", "avatar": "https://github.com/ravi16a87.png" } ], "preview": { "src": "/images/previews/6f0b8244f907725716a0fc543d1c9ed1d153854ebb5afaeff5bedf19cb8ece62.webp", "alt": "Image Gallery Web Part Built with Adaptive Cards", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptive-cards-image-gallery", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptive-cards-image-gallery/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-adaptive-cards-image-gallery", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/6f0b8244f907725716a0fc543d1c9ed1d153854ebb5afaeff5bedf19cb8ece62.webp", "alt": "Image Gallery Web Part Built with Adaptive Cards", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptive-cards-image-gallery/assets/list-sample-data.png", "alt": "Image Gallery Web Part Built with Adaptive Cards", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptive-cards-image-gallery/assets/list-schema.png", "alt": "Image Gallery Web Part Built with Adaptive Cards", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptive-cards-image-gallery/assets/webpart-preview.png", "alt": "Image Gallery Web Part Built with Adaptive Cards", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-adaptivecards-hooks/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-adaptivecards-hooks", "title": "Adaptive Cards Viewer Web Parts using Hooks", "description": "A version of react-adaptivecards using React Hooks.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-08-25", "updated": "2020-08-25", "authors": [ { "name": "Paul Schaeflein", "account": "pschaeflein", "avatar": "https://github.com/pschaeflein.png" } ], "preview": { "src": "/images/previews/65916758a1866af4c7dd605e358cbe0aa61ac8509c40063cce9cd5e1ad4f8647.webp", "alt": "Adaptive Cards Viewer using Hooks", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards-hooks", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards-hooks/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-adaptivecards-hooks", "descriptionParagraphs": [ "A version of react-adaptivecards using React Hooks." ], "previews": [ { "src": "/images/previews/65916758a1866af4c7dd605e358cbe0aa61ac8509c40063cce9cd5e1ad4f8647.webp", "alt": "Adaptive Cards Viewer using Hooks", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-adaptivecards/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-adaptivecards", "title": "Adaptive Cards Host Web Part", "description": "This sample creates an Adaptive Cards Host web part that you can use to display Adaptive Cards in your SharePoint applications.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2021-02-23", "updated": "2026-02-26", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" } ], "preview": { "src": "/images/previews/006a08f56d76f2e1f1b7dc315b7b3b5793ca27de7cd369e5637c408b249a91ca.webp", "alt": "Adaptive Cards Host", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-adaptivecards", "descriptionParagraphs": [ "This sample creates an Adaptive Cards Host web part that you can use to display Adaptive Cards in your SharePoint applications." ], "previews": [ { "src": "/images/previews/006a08f56d76f2e1f1b7dc315b7b3b5793ca27de7cd369e5637c408b249a91ca.webp", "alt": "Adaptive Cards Host", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards/assets/AdaptiveCardHostRendering.gif", "alt": "Adaptive Cards Host", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards/assets/AdaptiveCardsHost.gif", "alt": "Adaptive Cards Host", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards/assets/BackgroundColors.gif", "alt": "Adaptive Cards Host", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards/assets/DataContext.png", "alt": "Adaptive Cards Host", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards/assets/DependentControls.gif", "alt": "Adaptive Cards Host", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards/assets/DevTools.png", "alt": "Adaptive Cards Host", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards/assets/EnableTemplating.gif", "alt": "Adaptive Cards Host", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards/assets/ErrorHandling.png", "alt": "Adaptive Cards Host", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards/assets/SampleDataEditor.png", "alt": "Adaptive Cards Host", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards/assets/SelectLibrary.gif", "alt": "Adaptive Cards Host", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards/assets/SharePointHost.gif", "alt": "Adaptive Cards Host", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards/assets/Templating.gif", "alt": "Adaptive Cards Host", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards/assets/TemplatingDetection.png", "alt": "Adaptive Cards Host", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards/assets/TemplatingSamples.gif", "alt": "Adaptive Cards Host", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards/assets/UIFabric.png", "alt": "Adaptive Cards Host", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-adaptivecards/assets/YouNeedData.png", "alt": "Adaptive Cards Host", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-add-formcustomizer-to-list/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-add-formcustomizer-to-list", "title": "Add Form Customizer to List Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.15", "versionGroup": "1.15", "created": "2022-09-05", "updated": "2022-09-05", "authors": [ { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png" } ], "preview": { "src": "/images/previews/a9884084fe4ac5a844872e319a25c4ad6b6fdddb341ade135d59d8475a42df5c.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-add-formcustomizer-to-list", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-add-formcustomizer-to-list/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-add-formcustomizer-to-list", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/a9884084fe4ac5a844872e319a25c4ad6b6fdddb341ade135d59d8475a42df5c.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15", "issues": [ { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-add-js-css-ref/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-add-js-css-ref", "title": "Add JS and CSS reference on Modern Pages Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Application customizer", "Web part" ], "technologies": [ "React" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2020-06-11", "updated": "2024-10-09", "authors": [ { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png" } ], "preview": { "src": "/images/previews/dfb542edf07a80a2f60eeead6efbebe7f9ef1c00a71d3af472db26d0c1199039.webp", "alt": "Add JS and CSS reference on Modern Pages", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-add-js-css-ref", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-add-js-css-ref/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-add-js-css-ref", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/dfb542edf07a80a2f60eeead6efbebe7f9ef1c00a71d3af472db26d0c1199039.webp", "alt": "Add JS and CSS reference on Modern Pages", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-admin-sc-catalog-pnpjs/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-admin-sc-catalog-pnpjs", "title": "Site Collection App Catalogs Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2019-11-07", "updated": "2019-11-07", "authors": [ { "name": "Federico Porceddu", "account": "fredupstair", "avatar": "https://github.com/fredupstair.png" } ], "preview": { "src": "/images/previews/38db2a8528fc2ce86563ea08b613571443d77089049fec1cab9c4b15158083e2.webp", "alt": "Site Collection App Catalogs", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-admin-sc-catalog-pnpjs", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-admin-sc-catalog-pnpjs/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-admin-sc-catalog-pnpjs", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/38db2a8528fc2ce86563ea08b613571443d77089049fec1cab9c4b15158083e2.webp", "alt": "Site Collection App Catalogs", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-advanced-iframe/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-advanced-iframe", "title": "Advanced IFrame", "description": "This web part allows users to add a webpage in an IFrame to a modern SharePoint page.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "JavaScript" ], "version": "1.13.1", "versionGroup": "1.13", "created": "2023-08-27", "updated": "2023-08-27", "authors": [ { "name": "Sven Sieverding", "account": "365knoten", "avatar": "https://github.com/365knoten.png" } ], "preview": { "src": "/images/previews/30a0ed5efefb8e2041955652b9afe4d2eb50d34e41c23973cf09db8abb18d0c6.webp", "alt": "Advanced IFrame Web part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-advanced-iframe", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-advanced-iframe/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-advanced-iframe", "descriptionParagraphs": [ "This web part demonstrates the following features: Adding a web part to a 'Full-Width' section, resizing the web part to fit the given space of the page, fetching dynamic parameters like the current theme or querystring and passing them to the IFrame." ], "previews": [ { "src": "/images/previews/30a0ed5efefb8e2041955652b9afe4d2eb50d34e41c23973cf09db8abb18d0c6.webp", "alt": "Advanced IFrame Web part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-advanced-page-properties/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-advanced-page-properties", "title": "Advanced Page Properties Web Part", "description": "Replicates the functionality of Page Properties with improvements", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2021-03-30", "updated": "2024-10-08", "authors": [ { "name": "Valeras Narbutas", "account": "ValerasNarbutas", "avatar": "https://avatars.githubusercontent.com/u/16476453?v=4" }, { "name": "Mike Homol", "account": "mhomol", "avatar": "https://github.com/mhomol.png" }, { "name": "Abderahman Moujahid", "account": "Abderahman88", "avatar": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4" }, { "name": "Nishkalank Bezawada", "account": "NishkalankBezawada", "avatar": "https://avatars.githubusercontent.com/u/47456098?v=4" } ], "preview": { "src": "/images/previews/01934ecb6602e091a6de7448be14775634b48e9fb99d669fbb60b65afb1d7e3e.webp", "alt": "Web part in action", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-advanced-page-properties", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-advanced-page-properties/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-advanced-page-properties", "descriptionParagraphs": [ "Attempts to replicate the functionality of Page Properties with the following improvements:", "- Support for theme variants", "- Updated to standard capsule look for list options", "- Support for image fields", "- Support for hyperlink fields", "- Support for currency", "- Improved support for dates", "- Support for Multiline text fields" ], "previews": [ { "src": "/images/previews/01934ecb6602e091a6de7448be14775634b48e9fb99d669fbb60b65afb1d7e3e.webp", "alt": "Web part in action", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-advanced-page-properties/assets/props.gif", "alt": "Web part in action", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-advanced-page-properties/assets/add-to-page.png", "alt": "Adding to a page", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-advent-calendar/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-advent-calendar-796644334676afa8", "title": "Advent Calendar Web Part", "description": "This project shows how to create an Advent Calendar using SPFx and React.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [], "version": "1.17.3", "versionGroup": "1.17", "created": "2023-12-01", "updated": "2023-12-01", "authors": [ { "name": "Valeras Narbutas", "account": "ValerasNarbutas", "avatar": "https://github.com/valerasnarbutas.png" } ], "preview": { "src": "/images/previews/1a0260c75aab7377e429f803b7c9e5b6bcbae7cd6b7948e16ff96864568d9354.webp", "alt": "Tailwind CSS", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-advent-calendar", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-advent-calendar/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-advent-calendar", "descriptionParagraphs": [ "This project shows how to create an Advent Calendar using SPFx and React." ], "previews": [ { "src": "/images/previews/1a0260c75aab7377e429f803b7c9e5b6bcbae7cd6b7948e16ff96864568d9354.webp", "alt": "Tailwind CSS", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.17.3", "issues": [ { "code": "technology.missing", "field": "metadata.CLIENT-SIDE-DEV", "message": "Technology filter metadata is missing.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-advent-calendar/assets/sample.json:1", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-advent-calendar-9fd21151e16a88e2", "title": "Advent Calendar Web Part", "description": "This project shows how to create an Advent Calendar using SPFx and React.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [], "version": "1.17.3", "versionGroup": "1.17", "created": "2023-12-01", "updated": "2023-12-01", "authors": [ { "name": "Valeras Narbutas", "account": "ValerasNarbutas", "avatar": "https://github.com/valerasnarbutas.png" } ], "preview": { "src": "/images/previews/1a0260c75aab7377e429f803b7c9e5b6bcbae7cd6b7948e16ff96864568d9354.webp", "alt": "Tailwind CSS", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-advent-calendar", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-advent-calendar/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-advent-calendar", "descriptionParagraphs": [ "This project shows how to create an Advent Calendar using SPFx and React." ], "previews": [ { "src": "/images/previews/1a0260c75aab7377e429f803b7c9e5b6bcbae7cd6b7948e16ff96864568d9354.webp", "alt": "Tailwind CSS", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.17.3", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "technology.missing", "field": "metadata.CLIENT-SIDE-DEV", "message": "Technology filter metadata is missing.", "severity": "warning" }, { "code": "name.duplicate", "field": "name", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-advent-calendar/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-advent-calendar/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-aggregated-calendar/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-aggregated-calendar", "title": "Aggregated Calendar Web part", "description": "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", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-07-16", "updated": "2018-07-16", "authors": [ { "name": "Dhaval Shah", "account": "dhavalshah01", "avatar": "https://avatars.githubusercontent.com/u/13947393?s=460&u=38d18e840d22f5567d508027515c728025bae8cb&v=4" } ], "preview": { "src": "/images/previews/1216185ea7687c754a8a6fc79dea48b758a6becb58e8194bffe398e4962033ac.webp", "alt": "Aggregated Calendar Web part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-aggregated-calendar", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-aggregated-calendar/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-aggregated-calendar", "descriptionParagraphs": [ "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" ], "previews": [ { "src": "/images/previews/1216185ea7687c754a8a6fc79dea48b758a6becb58e8194bffe398e4962033ac.webp", "alt": "Aggregated Calendar Web part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-animpage/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-animpage", "title": "AnimPage Motion - Page Scroll Animations for Web Parts", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.22.1", "versionGroup": "1.22", "created": "2026-02-17", "updated": "2026-02-17", "authors": [ { "name": "dhiabedoui", "account": "dhiabedoui", "avatar": "https://github.com/dhiabedoui.png" } ], "preview": { "src": "/images/previews/cc53caa6c675bca7be38126f87cd512cccf4c37816b8cd7230daddd0c1f354ad.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-animpage", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-animpage/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-animpage", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/cc53caa6c675bca7be38126f87cd512cccf4c37816b8cd7230daddd0c1f354ad.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-animpage/assets/ScreenShot1.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-animpage/assets/ScreenShot2.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-apim-tablestorage/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-apim-tablestorage", "title": "Accessing Azure table storage data using Azure API Management Web Part", "description": "Allows you to access securely Azure storage table data using Azure API Management (APIM)", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.17.4", "versionGroup": "1.17", "created": "2023-09-11", "updated": "2023-09-11", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/9b999d46b814f3b976658d7e85220a7634dc346448027faf71b3dd9bcb15e07a.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-apim-tablestorage", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-apim-tablestorage/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-apim-tablestorage", "descriptionParagraphs": [ "This SharePoint Framework (SPFx) web part allows you to access securely Azure storage table data directly from a SharePoint Framework (SPFx) web part using Azure API Management (APIM). This scenario is useful when you want to provide a seamless user experience for your application without exposing your backend services or credentials. This is a great way to simplify and secure your web app’s communication with the cloud." ], "previews": [ { "src": "/images/previews/9b999d46b814f3b976658d7e85220a7634dc346448027faf71b3dd9bcb15e07a.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.17.4", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-app-settings/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-app-settings", "title": "App settings web part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.7.1", "versionGroup": "1.7", "created": "2019-03-03", "updated": "2019-03-03", "authors": [ { "name": "Velin Georgiev", "account": "VelinGeorgiev", "avatar": "https://github.com/VelinGeorgiev.png" } ], "preview": { "src": "/images/previews/e90adcfd149e93aeedd680e5ad450a8dfae84c171501e32eaa8992ea947b7ff8.webp", "alt": "App settings web part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-app-settings", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-app-settings/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-app-settings", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/e90adcfd149e93aeedd680e5ad450a8dfae84c171501e32eaa8992ea947b7ff8.webp", "alt": "App settings web part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-app-settings/assets/spfx-appSettings-json.PNG", "alt": "App settings web part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Using single part app pages in SharePoint Online", "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.7.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-appinsights-dashboard/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-appinsights-dashboard", "title": "React AppInsights Dashboard Web Part", "description": "This web part displays different statistics data captured in the Azure Application Insights in a graphical representation.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2020-06-17", "updated": "2023-02-06", "authors": [ { "name": "Sudharsan Kesavanarayanan", "account": "sudharsank", "avatar": "https://github.com/sudharsank.png" } ], "preview": { "src": "/images/previews/74f5147428696b5bb7543181cd8a7bdf287b64ac051c811aa28522a62e629f65.webp", "alt": "React AppInsights Dashboard", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-appinsights-dashboard", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-appinsights-dashboard/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-appinsights-dashboard", "descriptionParagraphs": [ "This web part displays different statistics data captured in the Azure Application Insights in a graphical representation." ], "previews": [ { "src": "/images/previews/74f5147428696b5bb7543181cd8a7bdf287b64ac051c811aa28522a62e629f65.webp", "alt": "React AppInsights Dashboard", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-appinsights-dashboard/assets/AppInsights_APIAccess.png", "alt": "React AppInsights Dashboard", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-appinsights-dashboard/assets/AppInsights_APIKey.png", "alt": "React AppInsights Dashboard", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-appinsights-dashboard/assets/PageStatistics.png", "alt": "React AppInsights Dashboard", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-appinsights-dashboard/assets/PerformanceStatistics.png", "alt": "React AppInsights Dashboard", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-appinsights-dashboard/assets/UserStatistics.png", "alt": "React AppInsights Dashboard", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Using single part app pages in SharePoint Online", "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-appinsights-usage/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-appinsights-usage", "title": "React AppInsights Usage WebParts", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2024-05-26", "updated": "2025-10-25", "authors": [ { "name": "Peter Paul Kirschner", "account": "petkir", "avatar": "https://github.com/petkir.png" } ], "preview": { "src": "/images/previews/37f8377408ddd3f79c28bb6c478170fafa7c9d0c197ddf32bc2e27d852295941.webp", "alt": "All three Application Insights web parts in action showing real-time event tracking", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-appinsights-usage", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-appinsights-usage/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-appinsights-usage", "descriptionParagraphs": [ "Three educational web parts demonstrating different Application Insights scenarios: AB Testing with event tracking, Page Navigation with user flow analysis, and PnPJS Logger integration. Each web part provides real-time visual feedback showing tracked events, logs, and page views as they're sent to Azure Application Insights.", "Key Features: Easy property pane configuration (no code changes needed), instant visual feedback with success/warning banners, real-time displays of tracked data within the web part, color-coded severity levels for logs, and comprehensive Azure Portal query examples.", "Perfect for learning Application Insights, testing telemetry scenarios, demonstrating analytics capabilities, and understanding event tracking implementation." ], "previews": [ { "src": "/images/previews/37f8377408ddd3f79c28bb6c478170fafa7c9d0c197ddf32bc2e27d852295941.webp", "alt": "All three Application Insights web parts in action showing real-time event tracking", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-appinsights-usage/assets/ABEvaluation.png", "alt": "AppInsights AB Test Chart", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-appinsights-usage/assets/ABTextUI.png", "alt": "AppInsights AB Test UI", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-appinsights-usage/assets/PNPJSLogger.png", "alt": "Logger in Terminal", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-appinsights-usage/assets/SampleRouterDurationEvaluation.png", "alt": "AppInsights Page visit average duration Chart", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-appinsights-usage/assets/SampleRouterEvaluation.png", "alt": "AppInsights Page visit count Chart", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-appinsights-usage/assets/SampleRouterUserFlow.png", "alt": "AppInsights User Flow", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Using single part app pages in SharePoint Online", "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh" }, { "title": "PNPJS Understanding the Logging Framework", "description": "The logging framework is centered on the Logger class to which any number of listeners can be subscribed. Each of these listeners will receive each of the messages logged. Each listener must implement the ILogListener interface", "url": "https://pnp.github.io/pnpjs/logging/" }, { "title": "Application Insights", "description": "Application Insights provides many experiences to enhance the performance, reliability, and quality of your applications.", "url": "https://learn.microsoft.com/azure/azure-monitor/app/app-insights-overview" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-associated-sites-links/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-associated-sites-links", "title": "Associated Sites Links", "description": "Web part that will display links to all associated sites that registered to the current site. Current site should be a hub site.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2021-04-19", "updated": "2025-10-25", "authors": [ { "name": "Ari Gunawan", "account": "AriGunawan", "avatar": "https://github.com/AriGunawan.png" } ], "preview": { "src": "/images/previews/14d9e6e1b3e2a7558d8a1ba8f45d7fd7c9c078f0de744bab1364be1c86d9df0b.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-associated-sites-links", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-associated-sites-links/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-associated-sites-links", "descriptionParagraphs": [ "Web part that will display links to all associated sites that registered to the current site. Current site should be a hub site." ], "previews": [ { "src": "/images/previews/14d9e6e1b3e2a7558d8a1ba8f45d7fd7c9c078f0de744bab1364be1c86d9df0b.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-async-await-sp-pnp-js/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-async-await-sp-pnp-js", "title": "Using @pnp/js with Async / Await", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.14.0-beta.4", "versionGroup": "1.14", "created": "2018-07-20", "updated": "2018-07-20", "authors": [ { "name": "Jose Quinto", "account": "jquintozamora", "avatar": "https://github.com/jquintozamora.png" } ], "preview": { "src": "/images/previews/da1fbc7dbffe085be30575cf03a2fa03278690ad3501c4b55f06ae8d1beabc20.webp", "alt": "Using @pnp/js with Async / Await", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-async-await-sp-pnp-js", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-async-await-sp-pnp-js/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-async-await-sp-pnp-js", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/da1fbc7dbffe085be30575cf03a2fa03278690ad3501c4b55f06ae8d1beabc20.webp", "alt": "Using @pnp/js with Async / Await", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-async-await-sp-pnp-js/assets/async-await-sp-pnp-js-2.png", "alt": "Using @pnp/js with Async / Await", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-async-await-sp-pnp-js/assets/pnp-js-logging-spfx.png", "alt": "Using @pnp/js with Async / Await", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0-beta.4", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-at-a-glance/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-at-a-glance", "title": "At a Glance Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2021-09-07", "updated": "2021-10-20", "authors": [ { "name": "Anoop Tatti", "account": "anoopt", "avatar": "https://github.com/anoopt.png" } ], "preview": { "src": "/images/previews/768dd409aa1f0ac7c33a3df0fa5f0b725a0c731052390d0b2a2f8eb605d13364.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-at-a-glance", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-at-a-glance/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-at-a-glance", "descriptionParagraphs": [ "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.", "The idea is based of the At a glance section of a news in the BBC news app." ], "previews": [ { "src": "/images/previews/768dd409aa1f0ac7c33a3df0fa5f0b725a0c731052390d0b2a2f8eb605d13364.webp", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-at-a-glance/assets/article-content-desktop.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-at-a-glance/assets/article-content-mobile.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-at-a-glance/assets/article-content.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-at-a-glance/assets/at_a_glance_large.png", "alt": "Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-at-a-glance/assets/custom_props.png", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[1].order", "message": "Preview order is duplicated.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[2].order", "message": "Preview order is duplicated.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[3].order", "message": "Preview order is duplicated.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[4].order", "message": "Preview order is duplicated.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[5].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[5].order", "message": "Preview order is duplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 11 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-avatar/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-avatar", "title": "SPFx Avatar Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-08-01", "updated": "2025-10-25", "authors": [ { "name": "Kunj Sangani", "account": "kunj-sangani", "avatar": "https://github.com/kunj-sangani.png" }, { "name": "Joel Rodrigues", "account": "joelfmrodrigues", "avatar": "https://github.com/joelfmrodrigues.png" } ], "preview": { "src": "/images/previews/6b80115a7b5420738fd5071b2d7ada67ccbe98195fe337e224d589ebd9b79a6b.webp", "alt": "SPFx Avatar", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-avatar", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-avatar/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-avatar", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/6b80115a7b5420738fd5071b2d7ada67ccbe98195fe337e224d589ebd9b79a6b.webp", "alt": "SPFx Avatar", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-azfunc-vimeo/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-azfunc-vimeo", "title": "Local Azure Function and SPFx Web Part Development to consume third party APIs", "description": "This sample shows how to consume third-party APIs through an Azure Functions by a Web Part.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-07-24", "updated": "2018-07-24", "authors": [ { "name": "Stefan Bauer", "account": "StfBauer", "avatar": "https://github.com/StfBauer.png" } ], "preview": { "src": "/images/previews/dd3c2b25419d9a59bbaead048fada986067cf53691e1b747629b19503d5c1813.webp", "alt": "No preview available", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-azfunc-vimeo", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-azfunc-vimeo/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-azfunc-vimeo", "descriptionParagraphs": [ "This sample shows how to consume third-party APIs through an Azure Functions by a Web Part." ], "previews": [ { "src": "/images/previews/dd3c2b25419d9a59bbaead048fada986067cf53691e1b747629b19503d5c1813.webp", "alt": "No preview available", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-azure-devops-tasks/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-azure-devops-tasks", "title": "Azure DevOps Tasks Adaptive Card Extension", "description": "This Adaptive Card Extension demonstrates displaying the number of assigned tasks of Azure DevOps.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2023-03-19", "updated": "2023-03-19", "authors": [ { "name": "Takashi Shinohara", "account": "karamem0", "avatar": "https://github.com/karamem0.png" } ], "preview": { "src": "/images/previews/2f781c077b260ee6f668d7c0fb36d02d66e953386e02720c6c76434bcfda9689.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-azure-devops-tasks", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-azure-devops-tasks/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-azure-devops-tasks", "descriptionParagraphs": [ "This Adaptive Card Extension demonstrates displaying the number of assigned tasks of Azure DevOps." ], "previews": [ { "src": "/images/previews/2f781c077b260ee6f668d7c0fb36d02d66e953386e02720c6c76434bcfda9689.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-azure-openai-api-stream/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-azure-openai-api-stream", "title": "Calling Azure OpenAI API in streaming mode web part", "description": "This web part shows how you can call Azure OpenAI API in Streaming mode", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2024-01-02", "updated": "2025-09-12", "authors": [ { "name": "Luis Mañez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" }, { "name": "Chris Kent", "account": "thechriskent", "avatar": "https://github.com/thechriskent.png" } ], "preview": { "src": "/images/previews/95206bf7a021b9710f02a456a9cf5eaf3a5a91430027ad90e8200d8b2e5bde26.webp", "alt": "Sample in action", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-azure-openai-api-stream", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-azure-openai-api-stream/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-azure-openai-api-stream", "descriptionParagraphs": [ "This web part shows how you can call Azure OpenAI API in Streaming mode. The web part will show the data coming from the API in chunks, giving a much better user experience, so you are not waiting for the entire response. It also shows how you can cancel the streaming response at any point, which is useful to save some tokens (hence money), if the generating response does not look good to you (like when getting AI hallucinations). AI responses render Markdown but there is a toggle to disable so you can compare Markdown rendering of responses with Streaming and without." ], "previews": [ { "src": "/images/previews/95206bf7a021b9710f02a456a9cf5eaf3a5a91430027ad90e8200d8b2e5bde26.webp", "alt": "Sample in action", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-azure-openai-api-stream/assets/screenshot.gif", "alt": "Screenshot", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-azure-openai-connector/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-azure-openai-connector", "title": "Using Azure OpenAI Connectors API web part", "description": "Shows how to use the new feature of Azure OpenAI Connectors API in a SharePoint Framework web part.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.17.4", "versionGroup": "1.17", "created": "2023-07-26", "updated": "2023-10-06", "authors": [ { "name": "Luis Mañez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/previews/dae78671482e35a7415f56f5e0360e9f971e1e03b783d53c3172b45de2d7645f.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-azure-openai-connector", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-azure-openai-connector/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-azure-openai-connector", "descriptionParagraphs": [ "Shows how to use the new feature of Azure OpenAI Connectors API in a SharePoint Framework web part." ], "previews": [ { "src": "/images/previews/dae78671482e35a7415f56f5e0360e9f971e1e03b783d53c3172b45de2d7645f.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.17.4", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-azurefunction-northwind2/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-azurefunction-northwind2", "title": "Consume Northwind Microsoft database from Azure using a Function App", "description": "This web part consume an anonymous Function App from an HTTP Trigger using the templates from the Northwind Microsoft DBs", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2022-08-15", "updated": "2022-08-15", "authors": [ { "name": "Joao Livio", "account": "jtlivio", "avatar": "https://github.com/jtlivio.png" } ], "preview": { "src": "/images/previews/0d454e626c67f0dfd733b9d9d33adcbf0fbb0d31794502434d1c7bbf5c8bd5a0.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-azurefunction-northwind2", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-azurefunction-northwind2/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-azurefunction-northwind2", "descriptionParagraphs": [ "This web part consume an anonymous Function App from an HTTP Trigger using the templates from the Northwind Microsoft DBs" ], "previews": [ { "src": "/images/previews/0d454e626c67f0dfd733b9d9d33adcbf0fbb0d31794502434d1c7bbf5c8bd5a0.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "text.whitespace", "field": "title", "message": "Trim leading and trailing whitespace.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-banner/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-banner", "title": "Banner Web Part", "description": "This web part provides you the ability to add a variable height image banner with a linkable title.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10", "versionGroup": "1.10", "created": "2018-05-01", "updated": "2018-05-01", "authors": [ { "name": "Eric Overfield", "account": "eoverfield", "avatar": "https://github.com/eoverfield.png" } ], "preview": { "src": "/images/previews/0b4b890cbc3e3d08db5303b43fbdcd16cfa62809530ddbe91e6198685927cb01.webp", "alt": "Banner Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-banner", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-banner/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-banner", "descriptionParagraphs": [ "This web part provides you the ability to add a variable height image banner with a linkable title." ], "previews": [ { "src": "/images/previews/0b4b890cbc3e3d08db5303b43fbdcd16cfa62809530ddbe91e6198685927cb01.webp", "alt": "Banner Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10", "issues": [ { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-birthday-calendar/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-birthday-calendar", "title": "Birthday Calendar View", "description": "Shows team birthdays from a SharePoint list on a month calendar, with person cards showing department, job title and office, and one-click email or Teams greetings. No Microsoft Graph permissions required.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.23.2", "versionGroup": "1.23", "created": "2026-09-06", "updated": "2026-09-06", "authors": [ { "name": "Alexandr Abdulca", "account": "Niacrisss", "avatar": "https://github.com/Niacrisss.png" } ], "preview": { "src": "/images/previews/07044144a99d940782d51ff4ef3c144302fa41e0c94604a88e47efd7f079e5e6.webp", "alt": "Birthday Calendar View showing a month grid with birthday pills, a 'Coming up' strip and today highlighted", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-birthday-calendar", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-birthday-calendar/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-birthday-calendar", "descriptionParagraphs": [ "A SharePoint Framework web part that shows your team's birthdays on a month calendar. Each birthday is a pill in its day cell; selecting one opens a person card with department, job title, office and phone from the SharePoint user profile, plus one-click Email and Teams buttons to send a greeting. A 'Coming up' strip lists the next birthdays. The web part reads a plain SharePoint list that people opt into - the list title and every column's internal name are configurable in the property pane - and needs no Microsoft Graph permissions, no tenant-admin API approval and no Azure Function." ], "previews": [ { "src": "/images/previews/07044144a99d940782d51ff4ef3c144302fa41e0c94604a88e47efd7f079e5e6.webp", "alt": "Birthday Calendar View showing a month grid with birthday pills, a 'Coming up' strip and today highlighted", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Connect to SharePoint APIs", "description": "Access SharePoint data from a client-side web part using SPHttpClient.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/connect-to-sharepoint" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.23.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-birthdays-per-month/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-birthdays-per-month", "title": "Birthdays Per Month", "description": "Display employees birthday per month in an accordion.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2022-12-03", "updated": "2025-10-25", "authors": [ { "name": "Ari Gunawan", "account": "AriGunawan", "avatar": "https://github.com/AriGunawan.png" } ], "preview": { "src": "/images/previews/4353e51cb1880bda21f07a2da37a75efc9447c30ff9f782a380df6e83c1b5c89.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-birthdays-per-month", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-birthdays-per-month/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-birthdays-per-month", "descriptionParagraphs": [ "Display employees birthday per month in an accordion." ], "previews": [ { "src": "/images/previews/4353e51cb1880bda21f07a2da37a75efc9447c30ff9f782a380df6e83c1b5c89.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-birthdays/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-birthdays-44ac8bcab096c2d1", "title": "Birthdays Web Part", "description": "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.\"", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2019-07-23", "updated": "2025-01-13", "authors": [ { "name": "Valeras Narbutas", "account": "ValerasNarbutas", "avatar": "https://github.com/ValerasNarbutas.png" }, { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" }, { "name": "Sajal Maity", "account": "smaity", "avatar": "https://github.com/smaity.png" }, { "name": "Azores", "account": "gretchunkim", "avatar": "https://github.com/gretchunkim.png" } ], "preview": { "src": "/images/previews/5f7afd1989128d9cc110fa875b574dfe19bb8c25441973f335fff0b79d7a022e.webp", "alt": "Birthdays Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-birthdays", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-birthdays/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-birthdays", "descriptionParagraphs": [ "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.\"" ], "previews": [ { "src": "/images/previews/5f7afd1989128d9cc110fa875b574dfe19bb8c25441973f335fff0b79d7a022e.webp", "alt": "Birthdays Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-birthdays/assets/birthdays.png", "alt": "Birthdays Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-birthdays/assets/sample.json:1", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-birthdays-161def496ef73572", "title": "Birthdays Web Part", "description": "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.\"", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2019-07-23", "updated": "2024-10-02", "authors": [ { "name": "Valeras Narbutas", "account": "ValerasNarbutas", "avatar": "https://github.com/ValerasNarbutas.png" }, { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" }, { "name": "Sajal Maity", "account": "smaity", "avatar": "https://github.com/smaity.png" } ], "preview": { "src": "/images/previews/5f7afd1989128d9cc110fa875b574dfe19bb8c25441973f335fff0b79d7a022e.webp", "alt": "Birthdays Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-birthdays", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-birthdays/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-birthdays", "descriptionParagraphs": [ "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.\"" ], "previews": [ { "src": "/images/previews/5f7afd1989128d9cc110fa875b574dfe19bb8c25441973f335fff0b79d7a022e.webp", "alt": "Birthdays Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-birthdays/assets/birthdays.png", "alt": "Birthdays Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" }, { "code": "name.duplicate", "field": "name", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-birthdays/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" }, { "code": "asset.missing", "field": "thumbnails[1].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/ballonsBackgroud.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[10].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof14.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[11].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof14_1.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[12].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof17.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[13].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof18.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[14].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof181.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[15].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof19.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[16].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof2.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[17].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof20.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[18].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof21.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[19].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof22.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[2].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/baloons.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[20].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof24.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[21].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof28.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[22].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof29.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[23].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof3.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[24].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof30.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[25].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof4.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[26].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof5.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[27].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof6.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[28].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof7.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[29].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof8.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[30].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof9.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[4].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/birthdays2.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[5].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[6].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof1.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[7].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof10.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[8].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof11.png", "severity": "error" }, { "code": "asset.missing", "field": "thumbnails[9].url", "message": "Asset not found in collected repository tree: samples/react-birthdays/assets/cof12.png", "severity": "error" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-birthdays/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 32 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-bookmark-hub/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-bookmark-hub", "title": "React Bookmark Hub Web Part", "description": "A SharePoint Framework (SPFx) web part that allows users to manage and organize their bookmarks within SharePoint. Built with React, PnPjs and Fluent UI.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.22.1", "versionGroup": "1.22", "created": "2026-03-13", "updated": "2026-03-13", "authors": [ { "name": "Adam Wójcik", "account": "Adam-it", "avatar": "https://github.com/Adam-it.png" }, { "name": "Saurabh Tripathi", "account": "Saurabh7019", "avatar": "https://github.com/Saurabh7019.png" }, { "name": "Nico De Cleyre", "account": "nicodecleyre", "avatar": "https://github.com/nicodecleyre.png" } ], "preview": { "src": "/images/previews/f91a8ea705a4287533a11d56bab881d21e146ae436a9b9d8361ce54e346dafee.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-bookmark-hub", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-bookmark-hub/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-bookmark-hub", "descriptionParagraphs": [ "A SharePoint Framework (SPFx) web part that allows users to manage and organize their bookmarks within SharePoint. Built with React, PnPjs and Fluent UI." ], "previews": [ { "src": "/images/previews/f91a8ea705a4287533a11d56bab881d21e146ae436a9b9d8361ce54e346dafee.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-bookmark-hub/assets/aiCapabilities.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[1].order", "message": "Preview order is duplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-bot-framework-secure/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-bot-framework-secure", "title": "Secure Bot Framework Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-11-06", "updated": "2020-11-06", "authors": [ { "name": "Qiong Wu", "account": "DingmaomaoBJTU", "avatar": "https://github.com/DingmaomaoBJTU.png" } ], "preview": { "src": "/images/previews/4273d2537f7bc4167082bacb85e53a4bc65d5ee46a1cf98317247d8a17f82d56.webp", "alt": "Secure Bot Framework", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-bot-framework-secure", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-bot-framework-secure/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-bot-framework-secure", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/4273d2537f7bc4167082bacb85e53a4bc65d5ee46a1cf98317247d8a17f82d56.webp", "alt": "Secure Bot Framework", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-bot-framework-secure/assets/EnhancedAuth.png", "alt": "Secure Bot Framework", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-bot-framework-sso/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-bot-framework-sso", "title": "Single-Sign On Bot Framework Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-11-06", "updated": "2020-11-06", "authors": [ { "name": "Qiong Wu", "account": "DingmaomaoBJTU", "avatar": "https://github.com/DingmaomaoBJTU.png" } ], "preview": { "src": "/images/previews/4273d2537f7bc4167082bacb85e53a4bc65d5ee46a1cf98317247d8a17f82d56.webp", "alt": "Single-Sign On Bot Framework", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-bot-framework-sso", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-bot-framework-sso/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-bot-framework-sso", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/4273d2537f7bc4167082bacb85e53a4bc65d5ee46a1cf98317247d8a17f82d56.webp", "alt": "Single-Sign On Bot Framework", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-bot-framework-sso/assets/EnhancedAuth.png", "alt": "Single-Sign On Bot Framework", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-bot-framework-sso/assets/sp-wp-sso.gif", "alt": "Single-Sign On Bot Framework", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-bot-framework/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-bot-framework", "title": "Microsoft Bot Framework Web Chat Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-04-15", "updated": "2020-04-15", "authors": [ { "name": "Gary Pretty", "account": "garypretty", "avatar": "https://github.com/garypretty.png" }, { "name": "Stephan Bisser", "account": "stephanbisser", "avatar": "https://github.com/stephanbisser.png" }, { "name": "Harsha Vardhini", "account": "Harshagracy", "avatar": "https://github.com/Harshagracy.png" } ], "preview": { "src": "/images/previews/8d637f6f62a0d7da9af786a49fb8dcb54e077cff0cdee5fba04990c00d5f40bc.webp", "alt": "Microsoft Bot Framework Web Chat", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-bot-framework", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-bot-framework/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-bot-framework", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/8d637f6f62a0d7da9af786a49fb8dcb54e077cff0cdee5fba04990c00d5f40bc.webp", "alt": "Microsoft Bot Framework Web Chat", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-bot-framework/assets/add-another-channel.png", "alt": "Microsoft Bot Framework Web Chat", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-bot-framework/assets/bf-add-directline-channel.png", "alt": "Microsoft Bot Framework Web Chat", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-bot-framework/assets/bf-configure-directline-secret.png", "alt": "Microsoft Bot Framework Web Chat", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-bot-framework/assets/bot-framework-configure-direct-line-secret.png", "alt": "Microsoft Bot Framework Web Chat", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-bot-framework/assets/bot-framework-webpart-preview.png", "alt": "Microsoft Bot Framework Web Chat", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-bubble-template/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-bubble-template", "title": "React Bubble Template", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-10-12", "updated": "2025-10-12", "authors": [ { "name": "sudeepghatak", "account": "sudeepghatak", "avatar": "https://github.com/sudeepghatak.png" } ], "preview": { "src": "/images/previews/4b135016d4a78a0d6bd436a4a6cf4790aa2487affc380c4e546989d48a5e48cd.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-bubble-template", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-bubble-template/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-bubble-template", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/4b135016d4a78a0d6bd436a4a6cf4790aa2487affc380c4e546989d48a5e48cd.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-calendar-feed/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-calendar-feed", "title": "Calendar Feed Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2020-07-16", "updated": "2025-02-21", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Peter Paul Kirschner", "account": "petkir", "avatar": "https://github.com/petkir.png" } ], "preview": { "src": "/images/previews/67d6d792a5354ed996adfb386c90243abd81cb31a3f0651927631bbf60931785.webp", "alt": "Calendar Feed Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar-feed", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar-feed/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-calendar-feed", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/67d6d792a5354ed996adfb386c90243abd81cb31a3f0651927631bbf60931785.webp", "alt": "Calendar Feed Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-calendar/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-calendar", "title": "Calendar Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2020-12-04", "updated": "2025-10-07", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" }, { "name": "Mohamed Derhalli", "account": "derhallim", "avatar": "https://github.com/derhallim.png" }, { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Nanddeep Nachan", "account": "nanddeepn", "avatar": "https://github.com/nanddeepn.png" }, { "name": "Abderahman Moujahid", "account": "Abderahman88", "avatar": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4" }, { "name": "Mohammed Amer", "account": "mohammadamer", "avatar": "https://avatars.githubusercontent.com/u/19314043?s=460&u=79acb7fd0ad466e1040ddd8a739fa93385018b81&v=4" }, { "name": "Eli H. Schei", "account": "Eli-Schei", "avatar": "https://github.com/Eli-Schei.png" }, { "name": "Dhananjay Pant", "account": "Dhananjay-12", "avatar": "https://github.com/Dhananjay-12.png" } ], "preview": { "src": "/images/previews/bf1e0fcc3260d3210ef22efddcb9e7da9ea1b1781b60fda51b17cc59d0d3c7c4.webp", "alt": "Calendar", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-calendar", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/bf1e0fcc3260d3210ef22efddcb9e7da9ea1b1781b60fda51b17cc59d0d3c7c4.webp", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/animatevideo.gif", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/calendar_teams.jpg", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/calendar_teams2.jpg", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/modercalendar_monthly.gif", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/moderncalendar_yearly.gif", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/screen1.0.jpg", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/screen1.0.png", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/screen1.1.png", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/screen1.2.png", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/screen1.3.png", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/screen1.4.png", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/screen1.png", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/screen2.png", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/screen3.png", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/screen4.png", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/screen5.png", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/screen6.png", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/screen7.png", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/screen8.png", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/screen9.png", "alt": "Calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-calendar/assets/weekly_moderncalendar.gif", "alt": "Calendar", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-caml2table/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-caml2table", "title": "CAML to Table", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2022-11-26", "updated": "2025-03-11", "authors": [ { "name": "Dan Toft", "account": "Tanddant", "avatar": "https://github.com/Tanddant.png" }, { "name": "Nicolas Kheirallah", "account": "NicolasKheirallah", "avatar": "https://github.com/NicolasKheirallah.png" } ], "preview": { "src": "/images/previews/073dae54309f80f12893be08b7c2a2d9d40fb9a87a17fda2c3a1a5fb92a924ea.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-caml2table", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-caml2table/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-caml2table", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/073dae54309f80f12893be08b7c2a2d9d40fb9a87a17fda2c3a1a5fb92a924ea.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-carbon-footprint-calculator/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-carbon-footprint-calculator", "title": "Carbon Footprint Calculator", "description": "This SharePoint Framework (SPFx) web part provides users with an interactive calculator to estimate their monthly carbon footprint.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-05-08", "updated": "2026-07-28", "authors": [ { "name": "João LIVIO", "account": "jtlivio", "avatar": "https://github.com/jtlivio.png" } ], "preview": { "src": "/images/previews/c76b5c051cdae94fe30cc8ba223e0862727106ce87d922f15ca583bc218835ea.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-carbon-footprint-calculator", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-carbon-footprint-calculator/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-carbon-footprint-calculator", "descriptionParagraphs": [ "This SharePoint Framework (SPFx) web part provides users with an interactive calculator to estimate their monthly carbon footprint." ], "previews": [ { "src": "/images/previews/c76b5c051cdae94fe30cc8ba223e0862727106ce87d922f15ca583bc218835ea.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-carousel/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-carousel", "title": "Carousel Web Part", "description": "This web part show images and videos in carousel", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-10-31", "updated": "2025-10-25", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" }, { "name": "Rahul Suryawanshi", "account": "rahulsuryawanshi", "avatar": "https://github.com/rahulsuryawanshi.png" }, { "name": "Harsha Vardhini", "account": "Harshagracy", "avatar": "https://github.com/Harshagracy.png" }, { "name": "Don Kirkham", "account": "DonKirkham", "avatar": "https://avatars.githubusercontent.com/u/8630351?s=460&u=669abb2aac55f383a318d3ca6b1cb13467cada59&v=4" }, { "name": "Giuliano De Luca", "account": "giuleon", "avatar": "https://github.com/giuleon.png" } ], "preview": { "src": "/images/previews/d9f4ab56f0116be6de045123b7f4203d5ad982feebb54b2814dca28fcd998670.webp", "alt": "Carousel Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-carousel", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-carousel/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-carousel", "descriptionParagraphs": [ "This web part show images and videos in carousel" ], "previews": [ { "src": "/images/previews/d9f4ab56f0116be6de045123b7f4203d5ad982feebb54b2814dca28fcd998670.webp", "alt": "Carousel Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-cascadingdropdowns/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-cascadingdropdowns", "title": "Cascading Dropdowns", "description": "Shows how to use Cascading Dropdowns in property panes. Based on the instructions found at Use cascading dropdowns in web part properties.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2024-12-25", "updated": "2025-09-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" } ], "preview": { "src": "/images/previews/b6d7ca4bfe43001b7741ee0eb5717b25d19fe89535f1b98b4955ce60fd7a4456.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-cascadingdropdowns", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-cascadingdropdowns/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-cascadingdropdowns", "descriptionParagraphs": [ "Shows how to use Cascading Dropdowns in property panes. Based on the instructions found at Use cascading dropdowns in web part properties." ], "previews": [ { "src": "/images/previews/b6d7ca4bfe43001b7741ee0eb5717b25d19fe89535f1b98b4955ce60fd7a4456.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-cascadingdropdowns/assets/propertypaneloading.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-cascadingdropdowns/assets/webpartpreview.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Use cascading dropdowns in web part properties", "description": "When designing the property pane for your SharePoint client-side web parts, you may have one web part property that displays its options based on the value selected in another property.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/use-cascading-dropdowns-in-web-part-properties" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chartcontrol/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-accessible-chart", "title": "Accessible Chart", "description": "Demonstrates the accessibility features of the Chart Control, including the auto-generated data table.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-12-13", "updated": "2025-09-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/97db825d67a83f5e3cba5752c186c308c6f9a1e2790dfbb46798b09fd0eadbdc.webp", "alt": "Accessible Chart", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chartcontrol", "descriptionParagraphs": [ "This sample shows the table that is automatically generated by the Chart Control for accessibility." ], "previews": [ { "src": "/images/previews/97db825d67a83f5e3cba5752c186c308c6f9a1e2790dfbb46798b09fd0eadbdc.webp", "alt": "Accessible Chart", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.duplicate-key", "field": "metadata[4]", "message": "Repeated metadata key: PNPCONTROLS", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chartcontrol/assets/sample.json:1", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-area-chart", "title": "Area Chart", "description": "Renders an area chart with gradient fills and configurable line styles.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-12-13", "updated": "2025-09-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/a351607f6af2367da4565ca005f3882c83f91ac298ecc985255c9c05df17fbca.webp", "alt": "Area Chart", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chartcontrol", "descriptionParagraphs": [ "This sample shows how you can render an area chart and configure the chart to use the fill option, as well as whether to use straight lines or curves. It also shows how to render gradient fills." ], "previews": [ { "src": "/images/previews/a351607f6af2367da4565ca005f3882c83f91ac298ecc985255c9c05df17fbca.webp", "alt": "Area Chart", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.duplicate-key", "field": "metadata[4]", "message": "Repeated metadata key: PNPCONTROLS", "severity": "warning" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-chartcontrol/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chartcontrol/assets/sample.json:10", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-dynamic-data-consumer", "title": "Dynamic Data Consumer", "description": "Renders a chart by receiving events from a dynamic data connection.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-12-13", "updated": "2025-09-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/389ee6c33fcbbc04ed6ff47cd9c38f739501f7366a566934a111722c4738107e.webp", "alt": "Dynamic Data Consumer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chartcontrol", "descriptionParagraphs": [ "Demonstrates how to render a chart by receiving events from a dynamic data connection. Also demonstrates how to render a line chart that looks like the Office 365 Admin dashboards." ], "previews": [ { "src": "/images/previews/389ee6c33fcbbc04ed6ff47cd9c38f739501f7366a566934a111722c4738107e.webp", "alt": "Dynamic Data Consumer", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.duplicate-key", "field": "metadata[4]", "message": "Repeated metadata key: PNPCONTROLS", "severity": "warning" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-chartcontrol/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chartcontrol/assets/sample.json:11", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-horizontal-bar", "title": "Horizontal Bar", "description": "Renders a horizontal bar chart and demonstrates stacked bars.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-12-13", "updated": "2025-09-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/e611d768192fd1d6313554af74c44911c6cee2e201747debf394488c7d0f2708.webp", "alt": "Horizontal Bar", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chartcontrol", "descriptionParagraphs": [ "This sample shows how to render a horizontal bar chart. It also demonstrates how to create stacked bars." ], "previews": [ { "src": "/images/previews/e611d768192fd1d6313554af74c44911c6cee2e201747debf394488c7d0f2708.webp", "alt": "Horizontal Bar", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.duplicate-key", "field": "metadata[4]", "message": "Repeated metadata key: PNPCONTROLS", "severity": "warning" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-chartcontrol/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chartcontrol/assets/sample.json:12", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-line-chart", "title": "Line Chart", "description": "Demonstrates how to render line charts.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-12-13", "updated": "2025-09-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/e2a8f713085344273029ce092e284a6febd8d2a36ac6abf859641ff14004cd30.webp", "alt": "Line Chart", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chartcontrol", "descriptionParagraphs": [ "This sample demonstrates how to render line charts." ], "previews": [ { "src": "/images/previews/e2a8f713085344273029ce092e284a6febd8d2a36ac6abf859641ff14004cd30.webp", "alt": "Line Chart", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.duplicate-key", "field": "metadata[4]", "message": "Repeated metadata key: PNPCONTROLS", "severity": "warning" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-chartcontrol/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chartcontrol/assets/sample.json:13", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-pie-chart", "title": "Pie Chart", "description": "Demonstrates how to create a pie chart.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-12-13", "updated": "2025-09-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/f7e6fb5c4da492a5a265af610a95c672d346fa1c8e56650c040ef9ef6588f253.webp", "alt": "Pie Chart", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chartcontrol", "descriptionParagraphs": [ "Demonstrates how to create a pie chart." ], "previews": [ { "src": "/images/previews/f7e6fb5c4da492a5a265af610a95c672d346fa1c8e56650c040ef9ef6588f253.webp", "alt": "Pie Chart", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.duplicate-key", "field": "metadata[4]", "message": "Repeated metadata key: PNPCONTROLS", "severity": "warning" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-chartcontrol/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chartcontrol/assets/sample.json:14", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-polar-chart", "title": "Polar Chart", "description": "Creates a polar area chart with add/remove data functionality.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-12-13", "updated": "2025-09-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/fb74ff85699415eb8582b72469beb97509f2f74b058ebfeeaacc2f02171ade10.webp", "alt": "Polar Chart", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chartcontrol", "descriptionParagraphs": [ "Creates a polar area chart. Also adds ability to add and remove data." ], "previews": [ { "src": "/images/previews/fb74ff85699415eb8582b72469beb97509f2f74b058ebfeeaacc2f02171ade10.webp", "alt": "Polar Chart", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.duplicate-key", "field": "metadata[4]", "message": "Repeated metadata key: PNPCONTROLS", "severity": "warning" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-chartcontrol/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chartcontrol/assets/sample.json:15", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-radar-chart", "title": "Radar Chart", "description": "Renders a multi-dataset radar chart.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-12-13", "updated": "2025-09-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/804bb4af284749e4696a7a5f7bb7beb73fd105a497fdcaa72c2363f28c322f03.webp", "alt": "Radar Chart", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chartcontrol", "descriptionParagraphs": [ "Renders a multi-dataset radar chart." ], "previews": [ { "src": "/images/previews/804bb4af284749e4696a7a5f7bb7beb73fd105a497fdcaa72c2363f28c322f03.webp", "alt": "Radar Chart", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.duplicate-key", "field": "metadata[4]", "message": "Repeated metadata key: PNPCONTROLS", "severity": "warning" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-chartcontrol/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chartcontrol/assets/sample.json:16", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-realtime-chart", "title": "Real-Time Chart", "description": "Uses a plugin to create a scrolling/real-time chart with time series X axis.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-12-13", "updated": "2025-09-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/10c135c689f74483a930b5612dc2053fefb0072049a319d5290e4175163576bf.webp", "alt": "Real-Time Chart", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chartcontrol", "descriptionParagraphs": [ "This sample uses an existing plugin to create a scrolling/real-time chart. Also demonstrates how to use time series for the X axis." ], "previews": [ { "src": "/images/previews/10c135c689f74483a930b5612dc2053fefb0072049a319d5290e4175163576bf.webp", "alt": "Real-Time Chart", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.duplicate-key", "field": "metadata[4]", "message": "Repeated metadata key: PNPCONTROLS", "severity": "warning" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-chartcontrol/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chartcontrol/assets/sample.json:17", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-scatter-chart", "title": "Scatter Chart", "description": "Shows how to use X and Y coordinate data elements in a scatter chart.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-12-13", "updated": "2025-09-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/47cfd87ae828b7ef41732bbf51ae1c731702a29998b546d68d31fd44198d1b50.webp", "alt": "Scatter Chart", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chartcontrol", "descriptionParagraphs": [ "This sample shows how to use X and Y coordinate data elements in a scatter chart." ], "previews": [ { "src": "/images/previews/47cfd87ae828b7ef41732bbf51ae1c731702a29998b546d68d31fd44198d1b50.webp", "alt": "Scatter Chart", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.duplicate-key", "field": "metadata[4]", "message": "Repeated metadata key: PNPCONTROLS", "severity": "warning" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-chartcontrol/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chartcontrol/assets/sample.json:2", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-bar-chart-static", "title": "Bar Chart (Static Data)", "description": "Uses static data to demonstrate basic ChartControl features.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-12-13", "updated": "2025-09-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/5cad3664911bcef9535ce39157b6f0d56b5343b78011112f81a23dc4df6edc1e.webp", "alt": "Bar Chart (Static Data)", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chartcontrol", "descriptionParagraphs": [ "Uses the most basic features of the ChartControl; It uses static data and does not provide any optional parameters. The ChartControl automatically generates chart colors that mimic Office colors and adapts to the environment's theme." ], "previews": [ { "src": "/images/previews/5cad3664911bcef9535ce39157b6f0d56b5343b78011112f81a23dc4df6edc1e.webp", "alt": "Bar Chart (Static Data)", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.duplicate-key", "field": "metadata[4]", "message": "Repeated metadata key: PNPCONTROLS", "severity": "warning" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-chartcontrol/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chartcontrol/assets/sample.json:3", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-bar-chart", "title": "Bar Chart", "description": "Loads data asynchronously from a (fake) service to render a bar chart.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-12-13", "updated": "2025-09-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/c7feecc5ee4e5826cca1036c7be20d09c0fc3b8f2631fbd8e4096add0736abed.webp", "alt": "Bar Chart", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chartcontrol", "descriptionParagraphs": [ "Another bar chart, but this one loads data asynchronously from a (fake) service. You could replace it with your own code that reads from SharePoint, or any other service." ], "previews": [ { "src": "/images/previews/c7feecc5ee4e5826cca1036c7be20d09c0fc3b8f2631fbd8e4096add0736abed.webp", "alt": "Bar Chart", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.duplicate-key", "field": "metadata[4]", "message": "Repeated metadata key: PNPCONTROLS", "severity": "warning" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-chartcontrol/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chartcontrol/assets/sample.json:4", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-bubble-chart", "title": "Bubble Chart", "description": "Demonstrates the use of X, Y, and R values to create a bubble chart.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-12-13", "updated": "2025-09-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/5fa70a453f224d45293b47d7b4bb10b0dd5c5d9a85b76879a75d1ffa2bab2e8f.webp", "alt": "Bubble Chart", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chartcontrol", "descriptionParagraphs": [ "This sample demonstrates the use of data elements with a X, Y, and R value to create a bubble chart. You can even pop the bubbles, which is a fun way to demonstrate event handlers." ], "previews": [ { "src": "/images/previews/5fa70a453f224d45293b47d7b4bb10b0dd5c5d9a85b76879a75d1ffa2bab2e8f.webp", "alt": "Bubble Chart", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.duplicate-key", "field": "metadata[4]", "message": "Repeated metadata key: PNPCONTROLS", "severity": "warning" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-chartcontrol/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chartcontrol/assets/sample.json:5", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-chartinator", "title": "Chartinator", "description": "A Chart Control version of SharePoint Quick Charts with many configuration options.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-12-13", "updated": "2025-09-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/9db29789cd5ddd8fb0f49c22365862b416603b2e219240eeb9305b1be2405da6.webp", "alt": "Chartinator", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chartcontrol", "descriptionParagraphs": [ "This is a Chart Control version of the SharePoint Quick Charts. It supports every chart type and offers many configuration options. Also demonstrates conditional property pane groups and custom property pane controls." ], "previews": [ { "src": "/images/previews/9db29789cd5ddd8fb0f49c22365862b416603b2e219240eeb9305b1be2405da6.webp", "alt": "Chartinator", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.duplicate-key", "field": "metadata[4]", "message": "Repeated metadata key: PNPCONTROLS", "severity": "warning" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-chartcontrol/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chartcontrol/assets/sample.json:6", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-combo-chart", "title": "Combo Chart", "description": "Demonstrates how to create combination charts with multiple datasets.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-12-13", "updated": "2025-09-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/bd75070c3dee45d8ee4b5aad144d4ca1df2ec26d374f9c0ae3001cc38a36600c.webp", "alt": "Combo Chart", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chartcontrol", "descriptionParagraphs": [ "Demonstrates how to create combination charts with multiple datasets." ], "previews": [ { "src": "/images/previews/bd75070c3dee45d8ee4b5aad144d4ca1df2ec26d374f9c0ae3001cc38a36600c.webp", "alt": "Combo Chart", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.duplicate-key", "field": "metadata[4]", "message": "Repeated metadata key: PNPCONTROLS", "severity": "warning" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-chartcontrol/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chartcontrol/assets/sample.json:7", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-custom-plugin", "title": "Custom Plugin", "description": "Shows how to implement a custom Chart.js plugin with the ChartControl.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-12-13", "updated": "2025-09-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/0b996b588b3f41f158a7569556e8ed19e52c82a2f3d6ecda0fff6c6bd240d9c5.webp", "alt": "Custom Plugin", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chartcontrol", "descriptionParagraphs": [ "If you can't find a Chart.js plugin that already exists, and you want to create your own, simply implement the IChartPlugin interface. This example takes sample plugin code to create a custom plugin." ], "previews": [ { "src": "/images/previews/0b996b588b3f41f158a7569556e8ed19e52c82a2f3d6ecda0fff6c6bd240d9c5.webp", "alt": "Custom Plugin", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.duplicate-key", "field": "metadata[4]", "message": "Repeated metadata key: PNPCONTROLS", "severity": "warning" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-chartcontrol/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chartcontrol/assets/sample.json:8", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-doughnut-patterns", "title": "Doughnut with Patterns", "description": "Renders a donut chart with patterns instead of colors.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-12-13", "updated": "2025-09-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/b8ff5e91296195eb42a43a6eee6891c41d9460b3a3dcfe9677ce3ecd81db8f9c.webp", "alt": "Doughnut with Patterns", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chartcontrol", "descriptionParagraphs": [ "This web part demonstrates how to use the ChartControl to render a donut chart with patterns instead of colors. Inspired by the patternomaly sample referred by the Chart.js documentation." ], "previews": [ { "src": "/images/previews/b8ff5e91296195eb42a43a6eee6891c41d9460b3a3dcfe9677ce3ecd81db8f9c.webp", "alt": "Doughnut with Patterns", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.duplicate-key", "field": "metadata[4]", "message": "Repeated metadata key: PNPCONTROLS", "severity": "warning" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-chartcontrol/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chartcontrol/assets/sample.json:9", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-dynamic-data-callable", "title": "Dynamic Data Callable", "description": "Calls the GitHub REST APIs and shows contributors for a given repository.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2020-12-13", "updated": "2025-09-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/2e799990f4060eda27d6112f6a0ad2c1da4346f78f8f03c2ae55a8878e994859.webp", "alt": "Dynamic Data Callable", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chartcontrol/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chartcontrol", "descriptionParagraphs": [ "A web part that calls the GitHub REST APIs and shows contributors for a given repository. Also demonstrates dynamic data provider and responding to mouse events." ], "previews": [ { "src": "/images/previews/2e799990f4060eda27d6112f6a0ad2c1da4346f78f8f03c2ae55a8878e994859.webp", "alt": "Dynamic Data Callable", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "metadata.duplicate-key", "field": "metadata[4]", "message": "Repeated metadata key: PNPCONTROLS", "severity": "warning" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-chartcontrol/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chat-gpt/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-chat-gpt", "title": "Chat GPT inside SPFx", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2023-02-04", "updated": "2025-10-25", "authors": [ { "name": "Nico De Cleyre", "account": "nicodecleyre", "avatar": "https://github.com/nicodecleyre.png" } ], "preview": { "src": "/images/previews/dcf0a2abba3eaa794982b891f097df623f4e7e1be69348317d72896c236b8e24.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chat-gpt", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chat-gpt/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chat-gpt", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/dcf0a2abba3eaa794982b891f097df623f4e7e1be69348317d72896c236b8e24.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chat-gpt/assets/example.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chat-gpt/assets/example3.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chat-gpt/assets/chatgpt.gif", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chat-sk/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-chat-sk", "title": "Chat with Semantic Kernel with Tools", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-10-15", "updated": "2025-10-15", "authors": [ { "name": "Peter Paul Kirschner", "account": "petkir", "avatar": "https://github.com/petkir.png" } ], "preview": { "src": "/images/previews/17640d4e77e8ff9ac04e80b1fbb6fa90bd23e0d0570bc4e9fd9b765edf0204ef.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chat-sk", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chat-sk/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chat-sk", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/17640d4e77e8ff9ac04e80b1fbb6fa90bd23e0d0570bc4e9fd9b765edf0204ef.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chat-sk/assets/functionLog.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chat-sk/assets/SSERequest.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chat-sk/assets/demo.gif", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chatgpt-app/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-chatgpt-app", "title": "Chat GPT App Web Part", "description": "This App is a implementation of OpenAI ChatGPT-3. It runs on SharePoint, Teams as Personal or Teams App and Message Extension.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2023-02-19", "updated": "2023-03-02", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/6cc511047cb7e4cedd53b5bf0df39b847c5a179c338a91c2fd1d9f3a01a33ff6.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chatgpt-app", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chatgpt-app/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chatgpt-app", "descriptionParagraphs": [ "This App is a implementation of OpenAI ChatGPT-3. It runs on SharePoint, Teams as Personal or Teams App and Message Extension." ], "previews": [ { "src": "/images/previews/6cc511047cb7e4cedd53b5bf0df39b847c5a179c338a91c2fd1d9f3a01a33ff6.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-check-flows/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-check-flows", "title": "Check Flows Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2019-09-17", "updated": "2025-10-25", "authors": [ { "name": "Aakash Bhardwaj", "account": "aakashbhardwaj619", "avatar": "https://avatars.githubusercontent.com/u/33526902?s=460&u=e780f4ef1da922c84f2c5c66c59cecbff2300581&v=4" } ], "preview": { "src": "/images/previews/b98d97c5ad74689318c740179b52874110199d095bad8c0d72dfc75e39a6346f.webp", "alt": "Check Flows", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-check-flows", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-check-flows/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-check-flows", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/b98d97c5ad74689318c740179b52874110199d095bad8c0d72dfc75e39a6346f.webp", "alt": "Check Flows", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-check-user-group/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-check-user-group", "title": "Check User Group Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-03-09", "updated": "2020-03-09", "authors": [ { "name": "Aakash Bhardwaj", "account": "aakashbhardwaj619", "avatar": "https://avatars.githubusercontent.com/u/33526902?s=460&u=e780f4ef1da922c84f2c5c66c59cecbff2300581&v=4" } ], "preview": { "src": "/images/previews/2bedf8158265882c3b1b702f9d4a154ec34aaf98644f5c2775270c4e0bf34d6c.webp", "alt": "Check User Group", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-check-user-group", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-check-user-group/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-check-user-group", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/2bedf8158265882c3b1b702f9d4a154ec34aaf98644f5c2775270c4e0bf34d6c.webp", "alt": "Check User Group", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-cherry-picked-content/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-cherry-picked-content", "title": "Cherry picked content web part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.14", "versionGroup": "1.14", "created": "2022-02-21", "updated": "2022-04-09", "authors": [ { "name": "Christophe Humbert", "account": "PathToSharePoint", "avatar": "https://github.com/PathToSharePoint.png" } ], "preview": { "src": "/images/previews/7f4161ffa5c65bbf3ad508de310bb2ab0adbcd5004c835f7d805b48ba18c1c8e.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-cherry-picked-content", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-cherry-picked-content/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-cherry-picked-content", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/7f4161ffa5c65bbf3ad508de310bb2ab0adbcd5004c835f7d805b48ba18c1c8e.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14", "issues": [ { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-chrome-built-in-ai-summarise-page-content/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-chrome-built-in-ai-summarise-page-content", "title": "Page Summarization with Chrome Built-in AI", "description": "This sample demonstrates a SharePoint Framework web part that uses Chrome's built-in Summarizer API (Gemini Nano) to summarize SharePoint page content.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-11-17", "updated": "2025-11-17", "authors": [ { "name": "Anoop T", "account": "anoopt", "avatar": "https://github.com/anoopt.png" } ], "preview": { "src": "/images/previews/ee9d16a00dd9d858ff8ef2e398db47bfb04863d8ee9a5cde82ae207f682a418a.webp", "alt": "Web Part Demo", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chrome-built-in-ai-summarise-page-content", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chrome-built-in-ai-summarise-page-content/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-chrome-built-in-ai-summarise-page-content", "descriptionParagraphs": [ "This sample demonstrates a SharePoint Framework web part that uses Chrome's built-in Summarizer API (Gemini Nano) to summarize SharePoint page content with multilingual support, translation, caching, and permission-based access control. All AI processing runs entirely in the browser." ], "previews": [ { "src": "/images/previews/ee9d16a00dd9d858ff8ef2e398db47bfb04863d8ee9a5cde82ae207f682a418a.webp", "alt": "Web Part Demo", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chrome-built-in-ai-summarise-page-content/assets/summary-result-en.png", "alt": "Summarize Result English", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chrome-built-in-ai-summarise-page-content/assets/summary-result-it.png", "alt": "Summarize Result Italian", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chrome-built-in-ai-summarise-page-content/assets/regenerate-summary.gif", "alt": "Summarize Result Italian", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-chrome-built-in-ai-summarise-page-content/assets/model-download-and-generation.gif", "alt": "Summarize Result Italian", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Chrome Built-in AI", "description": "Chrome's built-in AI APIs provide on-device machine learning capabilities including summarization, translation, and language detection using Gemini Nano.", "url": "https://developer.chrome.com/docs/ai/built-in" }, { "title": "Chrome Summarizer API", "description": "The Summarizer API enables on-device text summarization using Chrome's built-in AI model.", "url": "https://developer.chrome.com/docs/ai/summarizer-api" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.duplicate-order", "field": "thumbnails[4].order", "message": "Preview order is duplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-company-stories/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-company-stories", "title": "Company Stories Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.14", "versionGroup": "1.14", "created": "2021-03-31", "updated": "2022-03-16", "authors": [ { "name": "Luis Mañez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/previews/f0d256d290f21a709fb72a9841e228caa00a3986936f625df7a676aae1feded0.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-company-stories", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-company-stories/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-company-stories", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/f0d256d290f21a709fb72a9841e228caa00a3986936f625df7a676aae1feded0.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-company-stories/assets/stories-list.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14", "issues": [ { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-comparer/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-comparer", "title": "Comparer Web Part with File Picker", "description": "Allows users to compare Before and After pictures, with a draggable slider. Implements a custom file picker.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.7.1", "versionGroup": "1.7", "created": "2019-01-27", "updated": "2019-01-27", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" } ], "preview": { "src": "/images/previews/b69396658d765e25e1b3d26ae2e27349891f21ee470e32bca2c54512503c44e5.webp", "alt": "Comparer with File Picker", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-comparer", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-comparer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-comparer", "descriptionParagraphs": [ "Allows users to compare Before and After pictures, with a draggable slider. Implements a custom file picker." ], "previews": [ { "src": "/images/previews/b69396658d765e25e1b3d26ae2e27349891f21ee470e32bca2c54512503c44e5.webp", "alt": "Comparer with File Picker", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-comparer/assets/FluentSlider.gif", "alt": "Comparer with File Picker", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-comparer/assets/FromLinkTab.gif", "alt": "Comparer with File Picker", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-comparer/assets/OneDriveTab.gif", "alt": "Comparer with File Picker", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-comparer/assets/RecentTab.gif", "alt": "Comparer with File Picker", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-comparer/assets/SitesTab.gif", "alt": "Comparer with File Picker", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-comparer/assets/UploadTab.gif", "alt": "Comparer with File Picker", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-comparer/assets/WebSearch.gif", "alt": "Comparer with File Picker", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-comparer/assets/WebSearchNoAPI.png", "alt": "Comparer with File Picker", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-comparer/assets/WebSearchTab.gif", "alt": "Comparer with File Picker", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.7.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-components-dynamicloading/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-components-dynamicloading", "title": "Code Splitting in SharePoint Framework", "description": "Load React components and third party packages on demand in SPFx", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.6.0", "versionGroup": "1.6", "created": "2018-10-09", "updated": "2018-10-09", "authors": [ { "name": "Vardhaman Deshpande", "account": "vman", "avatar": "https://github.com/vman.png" } ], "preview": { "src": "/images/previews/b63063a234e272497d4a3b1639a7e7eecb1684ce9ba3619f7bbbf6d786a7514e.webp", "alt": "Code Splitting in SharePoint Framework", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-components-dynamicloading", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-components-dynamicloading/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-components-dynamicloading", "descriptionParagraphs": [ "Load React components and third party packages on demand in SPFx" ], "previews": [ { "src": "/images/previews/b63063a234e272497d4a3b1639a7e7eecb1684ce9ba3619f7bbbf6d786a7514e.webp", "alt": "Code Splitting in SharePoint Framework", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.6.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-connected-web-parts/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-connected-web-parts", "title": "Connected Web Parts", "description": "This samples showcase how to connect two web parts together.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2024-03-16", "updated": "2025-03-22", "authors": [ { "name": "Guido Zambarda", "account": "guidozam", "avatar": "https://github.com/guidozam.png" } ], "preview": { "src": "/images/previews/77abc9e0b6520d1e0ba7cd87a7e55d35f4cdfea8dc6e28c59ee4cf0a2be9c5fe.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-connected-web-parts", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-connected-web-parts/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-connected-web-parts", "descriptionParagraphs": [ "This samples showcase how to connect two web parts together." ], "previews": [ { "src": "/images/previews/77abc9e0b6520d1e0ba7cd87a7e55d35f4cdfea8dc6e28c59ee4cf0a2be9c5fe.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-connected-web-parts/assets/Blank.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-connected-web-parts/assets/Filled.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-connected-web-parts/assets/PropertyPane.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-content-block/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-content-block", "title": "Content Block", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-12-24", "updated": "2025-12-24", "authors": [ { "name": "Sai Siva Ram Bandaru", "account": "saiiiiiii", "avatar": "https://github.com/saiiiiiii.png" } ], "preview": { "src": "/images/previews/48cca8941cede4439f1adb2206f9981c6642c2725ccf52512f3feb9da0d890c4.webp", "alt": "Content Block web part demo showing drag-and-drop reordering and rich text editing", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-block", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-block/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-content-block", "descriptionParagraphs": [ "A dynamic SharePoint Framework (SPFx) web part that displays content in a flexible two-panel layout with comprehensive rich text editing capabilities. Features include drag-and-drop reordering with @dnd-kit, active/inactive content management for visibility control, direct image uploads to SharePoint SiteAssets, and three configurable layouts (50/50, 75/25, 25/75). The custom rich text editor provides full HTML formatting, table insertion, image management with SharePoint integration, source code editing mode, and content sanitization for security. Perfect for creating engaging content sections, feature comparisons, or structured information displays on SharePoint pages." ], "previews": [ { "src": "/images/previews/48cca8941cede4439f1adb2206f9981c6642c2725ccf52512f3feb9da0d890c4.webp", "alt": "Content Block web part demo showing drag-and-drop reordering and rich text editing", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-block/assets/configuration-tab.png", "alt": "Configuration tab for selecting list and layout options", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-block/assets/manage-items-tab.png", "alt": "Manage items tab with drag-and-drop and active/inactive groups", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-block/assets/before-configuration.png", "alt": "Three layout options: 50/50, 75/25, and 25/75 split panels", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-block/assets/published-view.png", "alt": "Published content block with clean presentation", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Using PnP JS with SharePoint Framework", "description": "Learn how to use PnP JS library in your SharePoint Framework solutions for modern SharePoint REST API interactions.", "url": "https://pnp.github.io/pnpjs/getting-started/" }, { "title": "Fluent UI React Components", "description": "Fluent UI React is a collection of robust React-based components designed to make it simple for you to create consistent web experiences using the Fluent Design Language.", "url": "https://developer.microsoft.com/fluentui#/controls/web" }, { "title": "DnD Kit - Modern drag and drop toolkit for React", "description": "A lightweight, performant, accessible and extensible drag & drop toolkit for React.", "url": "https://docs.dndkit.com/" }, { "title": "Working with Lists and Items using PnP JS", "description": "Learn how to work with SharePoint lists and list items using the PnP JS library.", "url": "https://pnp.github.io/pnpjs/sp/items/" } ], "products": [ "SharePoint", "Office" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-content-query-online/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-content-query-online", "title": "Content Query Web Part (SharePoint Online)", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.18.2", "versionGroup": "1.18", "created": "2021-01-07", "updated": "2024-03-31", "authors": [ { "name": "David Warner II", "account": "PopWarner", "avatar": "https://avatars.githubusercontent.com/u/10676147?s=460&u=9e4e74223c4ffb430fb77c97892a84b286df1921&v=4" }, { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/PaoloPia.png" }, { "name": "Abderahman Moujahid", "account": "Abderahman88", "avatar": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4" }, { "name": "Chris Lizon", "account": "ChrisLizon", "avatar": "https://github.com/ChrisLizon.png" }, { "name": "nemortu", "account": "nemortu", "avatar": "https://github.com/nemortu.png" } ], "preview": { "src": "/images/previews/5cd4af9f97c33644ac7c4586cdac3b64bda4b10c07d92f585f52b430f4800951.webp", "alt": "Content Query Web Part (SharePoint Online)", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-query-online", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-query-online/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-content-query-online", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/5cd4af9f97c33644ac7c4586cdac3b64bda4b10c07d92f585f52b430f4800951.webp", "alt": "Content Query Web Part (SharePoint Online)", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-query-online/assets/allsites.gif", "alt": "Content Query Web Part (SharePoint Online)", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-query-online/assets/allsites_v2.gif", "alt": "Content Query Web Part (SharePoint Online)", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-query-online/assets/clearItemSelector.png", "alt": "Content Query Web Part (SharePoint Online)", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-query-online/assets/configureItemSelector.png", "alt": "Content Query Web Part (SharePoint Online)", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-query-online/assets/connectToSource.png", "alt": "Content Query Web Part (SharePoint Online)", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-query-online/assets/datetime.gif", "alt": "Content Query Web Part (SharePoint Online)", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-query-online/assets/dynamicDataConnection.png", "alt": "Content Query Web Part (SharePoint Online)", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-query-online/assets/externalScripts.png", "alt": "Content Query Web Part (SharePoint Online)", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-query-online/assets/filters.gif", "alt": "Content Query Web Part (SharePoint Online)", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-query-online/assets/itemSelectorTemplate.png", "alt": "Content Query Web Part (SharePoint Online)", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-query-online/assets/itemSelectorTemplateOutput.png", "alt": "Content Query Web Part (SharePoint Online)", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-content-query-onprem/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-content-query-onprem", "title": "Content Query Web Part (On-Premises SharePoint)", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.1.1", "versionGroup": "1.1", "created": "2018-05-22", "updated": "2018-05-22", "authors": [ { "name": "Simon-Pierre Plante", "account": "spplante", "avatar": "https://github.com/spplante.png" } ], "preview": { "src": "/images/previews/02070dc582577652dc0c6a9ef0b6ddbc48a93cc1b25525eb1ac9aa3b40403c66.webp", "alt": "Content Query Web Part (On-Premises SharePoint)", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-query-onprem", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-query-onprem/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-content-query-onprem", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/02070dc582577652dc0c6a9ef0b6ddbc48a93cc1b25525eb1ac9aa3b40403c66.webp", "alt": "Content Query Web Part (On-Premises SharePoint)", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.1.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-content-rollup/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-content-rollup", "title": "Content Rollup", "description": "Rolls up recent news from a chosen list, or across sites via a Microsoft Search (KQL) query, with no CAML or Handlebars setup.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2026-08-28", "updated": "2026-08-28", "authors": [ { "name": "Vijay Kumar G", "account": "gvijaikumar9", "avatar": "https://github.com/gvijaikumar9.png" } ], "preview": { "src": "/images/previews/5f327bd51eba3db8b1e58a1f42448c4ef6bd752878324b6f4832f1a471a299b3.webp", "alt": "Content Rollup web part showing recent news in a card layout", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-rollup", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-rollup/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-content-rollup", "descriptionParagraphs": [ "Content Rollup gathers recent news and content from across your SharePoint sites into one web part. Point it at a list (for example, News) and it renders those items newest first, or leave the list blank to run a tenant-wide Microsoft Search (KQL) query instead. It needs no CAML and no Handlebars templating, and it keeps working on tenants where search is restricted by letting you bind a list instead. Four layout styles (Card, Minimal, Bold, Compact), an adjustable item count, and optional heading, border and background colour." ], "previews": [ { "src": "/images/previews/5f327bd51eba3db8b1e58a1f42448c4ef6bd752878324b6f4832f1a471a299b3.webp", "alt": "Content Rollup web part showing recent news in a card layout", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-content-rollup/assets/screenshot.gif", "alt": "Content Rollup cycling through its Card, Minimal, Bold and Compact layouts and the tenant-wide search fallback", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Guidance for building SharePoint Framework client-side web parts.", "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Use the Microsoft Search API to query data", "description": "Query SharePoint and Microsoft 365 content with the Microsoft Search API.", "url": "https://learn.microsoft.com/en-us/graph/search-concept-overview" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-copilot-apis-explorer/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-copilot-apis-explorer", "title": "Microsoft 365 Copilot API Explorer (SPFx)", "description": "This sample demonstrates how to build a SharePoint Framework 1.22.1 web part that explores Microsoft 365 Copilot APIs through Microsoft Graph.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.22.1", "versionGroup": "1.22", "created": "2026-02-01", "updated": "2026-02-21", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/040370bb6b48b01433984eafaab16f5802edd22eb8b00ca84dc0904f0568c019.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-apis-explorer", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-apis-explorer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-copilot-apis-explorer", "descriptionParagraphs": [ "This sample demonstrates how to build a SharePoint Framework 1.22.1 web part that explores Microsoft 365 Copilot APIs through Microsoft Graph." ], "previews": [ { "src": "/images/previews/040370bb6b48b01433984eafaab16f5802edd22eb8b00ca84dc0904f0568c019.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-apis-explorer/assets/copilot-insight-api.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-apis-explorer/assets/copilot-search-api.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-apis-explorer/assets/copilot-usage-api.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-copilot-apis/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-copilot-apis", "title": "Microsoft 365 Copilot Chat and Search with Work IQ in SPFx", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.22.0-rc.0", "versionGroup": "1.22", "created": "2025-12-08", "updated": "2025-12-08", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/paolopia.png" } ], "preview": { "src": "/images/previews/4c50fd7a7971aa64055a449ba0c7ff4bc89a84a25d98278ef5c09be439b9e382.webp", "alt": "Microsoft 365 Copilot Chat Web Part with conversation history", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-apis", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-apis/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-copilot-apis", "descriptionParagraphs": [ "This sample demonstrates how to integrate Microsoft 365 Copilot Chat and Search APIs into SharePoint Framework React web parts. It includes two web parts: Copilot Chat provides a full conversational interface with chat history, allowing users to interact with Microsoft 365 Copilot directly from SharePoint with features like scrollable conversation history, markdown rendering for AI responses, optional web search integration, support for file references and additional context, and the ability to start new conversations. Copilot Search enables hybrid semantic and lexical search using natural language queries, displaying results with document titles, authors, preview text with keyword highlighting, and direct links to documents. Both web parts leverage Work IQ Copilot APIs to provide enterprise-grade AI capabilities within SharePoint." ], "previews": [ { "src": "/images/previews/4c50fd7a7971aa64055a449ba0c7ff4bc89a84a25d98278ef5c09be439b9e382.webp", "alt": "Microsoft 365 Copilot Chat Web Part with conversation history", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-apis/assets/preview-search.png", "alt": "Microsoft 365 Copilot Search Web Part with document results", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Microsoft 365 Copilot extensibility", "description": "Learn about extending Microsoft 365 Copilot with custom plugins, connectors, and APIs to bring organizational data and workflows into the Copilot experience.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Microsoft Graph Copilot APIs", "description": "Explore the Microsoft Graph APIs for interacting with Microsoft 365 Copilot, including creating conversations, sending messages, and managing chat sessions programmatically.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/copilot-apis-overview" }, { "title": "Using Microsoft Graph in SharePoint Framework", "description": "Learn how to use Microsoft Graph APIs within SharePoint Framework solutions to access Microsoft 365 services and data with appropriate permissions.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/use-msgraph" }, { "title": "React Markdown", "description": "A React component for rendering markdown content safely and efficiently, used in this sample to display formatted AI responses with proper styling.", "url": "https://github.com/remarkjs/react-markdown" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.0-rc.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-copilot-chat-api-demo/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-copilot-chat-api-demo", "title": "Copilot chat-api-playground", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.22.1", "versionGroup": "1.22", "created": "2026-01-22", "updated": "2026-01-22", "authors": [ { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png" } ], "preview": { "src": "/images/previews/19bb73ff1fdf01a11483f9821d7bdca6a8fbc833d8596a50e4f9c37d4284be2f.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-chat-api-demo", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-chat-api-demo/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-copilot-chat-api-demo", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/19bb73ff1fdf01a11483f9821d7bdca6a8fbc833d8596a50e4f9c37d4284be2f.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-copilot-chatbubble-with-sso/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-copilot-hr-assistant", "title": "Copilot Chat Bubble - With SSO integrated to SharePoint which summarizes sessions at ESPC 2024", "description": "This web part integrates the Microsoft Copilot Agent, built via Copilot Studio, into SharePoint Online featuring Single Sign-on and a chat interface.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-01-09", "updated": "2025-05-16", "authors": [ { "name": "Nishkalank Bezawada", "account": "NishkalankBezawada", "avatar": "https://github.com/NishkalankBezawada.png" } ], "preview": { "src": "/images/previews/2ba2f2abe3b935702e818a7b9df27184939d559a833dad13ff5f7e313e29f7bc.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-chatbubble-with-sso", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-chatbubble-with-sso/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-copilot-chatbubble-with-sso", "descriptionParagraphs": [ "For sample purpose, I have built a CoPilot agent which will summarize sessions at ESPC 2024, and Provides a concise summary of all sessions and topics covered at ESPC 2024, including key take aways and speakers insights." ], "previews": [ { "src": "/images/previews/2ba2f2abe3b935702e818a7b9df27184939d559a833dad13ff5f7e313e29f7bc.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-chatbubble-with-sso/assets/Example2.gif", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "SharePoint SSO Component", "description": "his code sample demonstrates how to create a SharePoint SPFx component which is a wrapper for a copilot, created with Microsoft Copilot Studio. The SPFx component included in the sample supports SSO, providing seamless authentication for users interacting with the copilot.", "url": "https://github.com/microsoft/CopilotStudioSamples/tree/master/SharePointSSOComponent#sharepoint-sso-component" }, { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-copilot-html-app-integrator/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-copilot-html-app-integrator", "title": "Integrate (Copilot) HTML apps seamlessly in SharePoint (WebPart)", "description": "An SPFx web part that embeds small, self-contained HTML applications (HTML + inline JavaScript + CSS, stored in a SharePoint document library) into SharePoint pages without the SharePoint file-preview chrome (toolbar, download button).", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.23.2", "versionGroup": "1.23", "created": "2026-09-08", "updated": "2026-09-08", "authors": [ { "name": "Marc André Schröder-Zhou", "account": "maschroeder-z", "avatar": "https://github.com/maschroeder-z.png" } ], "preview": { "src": "/images/previews/2d9193ad0b07c295e6823011461beb8936f204515fafe78312f2d3c376439dcf.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-html-app-integrator", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-html-app-integrator/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-copilot-html-app-integrator", "descriptionParagraphs": [ "An SPFx web part that embeds small, self-contained HTML applications (HTML + inline JavaScript + CSS, stored in a SharePoint document library) into SharePoint pages without the SharePoint file-preview chrome (toolbar, download button)." ], "previews": [ { "src": "/images/previews/2d9193ad0b07c295e6823011461beb8936f204515fafe78312f2d3c376439dcf.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-html-app-integrator/assets/app-screen-02.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-html-app-integrator/assets/app-screen-03.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-html-app-integrator/assets/app-screen-04.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.23.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-copilot-prompt-gallery/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-copilot-prompt-gallery", "title": "PnP Copilot Prompt Gallery", "description": "This solution displays a gallery of Copilot prompts from the PnP copilot-prompts repository and allows users to easily copy prompts for reuse.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-08-21", "updated": "2026-03-31", "authors": [ { "name": "Saurabh Tripathi", "account": "saurabh7019", "avatar": "https://github.com/saurabh7019.png" } ], "preview": { "src": "/images/previews/3e0834842918bba6d057c3bb9d3ea750a9f09a6600d47ad6684a85ed88e1c81b.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-prompt-gallery", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-prompt-gallery/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-copilot-prompt-gallery", "descriptionParagraphs": [ "This solution displays a gallery of Copilot prompts from the PnP copilot-prompts repository and allows users to easily copy prompts for reuse." ], "previews": [ { "src": "/images/previews/3e0834842918bba6d057c3bb9d3ea750a9f09a6600d47ad6684a85ed88e1c81b.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-copilot-retrieval-api/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-copilot-retrieval-api", "title": "Copilot Retrieval API Playground", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-01-01", "updated": "2025-01-01", "authors": [ { "name": "Peter Paul Kirschner", "account": "petkir", "avatar": "https://github.com/petkir.png" } ], "preview": { "src": "/images/previews/1a2b08ff8078a7d53527aa3b9489d127201670a6afa0361e4debddd387acebdc.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-retrieval-api", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-retrieval-api/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-copilot-retrieval-api", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/1a2b08ff8078a7d53527aa3b9489d127201670a6afa0361e4debddd387acebdc.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-retrieval-api/assets/webpart.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copilot-retrieval-api/assets/workbench.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-copy-views/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-copy-views", "title": "Copy Views Web Part", "description": "The Copy Views solution enables a user to copy views from one list/library to another across site collections.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "ListView command set", "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2022-08-29", "updated": "2025-09-12", "authors": [ { "name": "Martin Lingstuyl", "account": "martinlingstuyl", "avatar": "https://avatars.githubusercontent.com/u/5267487?v=4" } ], "preview": { "src": "/images/previews/5887cada62c148f7a6edcbe2cb6edc2c76a32b9e3c109693b96451e3cd778cc4.webp", "alt": "Copy Views solution", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copy-views", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copy-views/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-copy-views", "descriptionParagraphs": [ "The Copy Views solution enables a user to copy views from one list/library to another across site collections. It can be used as a webpart on a page, or as a ListView Command Set extension. The user can select multiple views to copy to multiple target lists." ], "previews": [ { "src": "/images/previews/5887cada62c148f7a6edcbe2cb6edc2c76a32b9e3c109693b96451e3cd778cc4.webp", "alt": "Copy Views solution", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-copy-views/assets/copy-views-screenshot.png", "alt": "Copy Views solution", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-covid19-info/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-covid19-info", "title": "COVID 19 information web part", "description": "This web part displays info about the COVID-19 virus for a given country.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-03-25", "updated": "2020-03-25", "authors": [ { "name": "Robin Agten", "account": "agtenr", "avatar": "https://github.com/agtenr.png" } ], "preview": { "src": "/images/previews/efadfd36f43444173a6efd2b080dc1180413ae56a986e9fbd070a31d6ee65bb2.webp", "alt": "COVID 19 information web part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-covid19-info", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-covid19-info/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-covid19-info", "descriptionParagraphs": [ "This web part displays info about the COVID-19 virus for a given country." ], "previews": [ { "src": "/images/previews/efadfd36f43444173a6efd2b080dc1180413ae56a986e9fbd070a31d6ee65bb2.webp", "alt": "COVID 19 information web part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-covid19-info/assets/Langing-page-screenshot.png", "alt": "COVID 19 information web part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-cross-device-data/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-cross-device-data", "title": "Cross-Device Data Web Part", "description": "This solution demonstrates how to use the OneDrive special folder Apps in order to save user's preferencies cross-device.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2021-07-26", "updated": "2021-07-26", "authors": [ { "name": "Giuliano De Luca", "account": "giuleon", "avatar": "https://github.com/giuleon.png" } ], "preview": { "src": "/images/previews/90dc0deeccc74d95467f0bb39009a2037b2f78b09bc969f2655757ac47fc8a0e.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-cross-device-data", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-cross-device-data/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-cross-device-data", "descriptionParagraphs": [ "This solution demonstrates how to use the OneDrive special folder Apps in order to save user's preferencies cross-device." ], "previews": [ { "src": "/images/previews/90dc0deeccc74d95467f0bb39009a2037b2f78b09bc969f2655757ac47fc8a0e.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsPersonalApp" ], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-css-in-js-typestyle/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-css-in-js-typestyle", "title": "CSS in JS with SharePoint Framework and TypeStyle", "description": "The web part demonstrates the usage of \"CSS in JS\" pattern with SharePoint Framework. \"CSS in JS\" is implemented using TypeStyle library.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-04-24", "updated": "2020-04-24", "authors": [ { "name": "Sergei Sergeev", "account": "s-KaiNet", "avatar": "https://github.com/s-KaiNet.png" } ], "preview": { "src": "/images/previews/cbe58848d3d84a3f3a1c5d83ee6fa07e48a5c829e3f0c752df8bd2e7d994f6ac.webp", "alt": "CSS in JS with SharePoint Framework and TypeStyle", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-css-in-js-typestyle", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-css-in-js-typestyle/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-css-in-js-typestyle", "descriptionParagraphs": [ "The web part demonstrates the usage of \"CSS in JS\" pattern with SharePoint Framework. \"CSS in JS\" is implemented using TypeStyle library." ], "previews": [ { "src": "/images/previews/cbe58848d3d84a3f3a1c5d83ee6fa07e48a5c829e3f0c752df8bd2e7d994f6ac.webp", "alt": "CSS in JS with SharePoint Framework and TypeStyle", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-csv-importer/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-csv-importer", "title": "CSV Importer", "description": "This web part allows users to import CSV files into an existing SharePoint list", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2022-10-11", "updated": "2024-10-20", "authors": [ { "name": "Michał Romiszewski", "account": "mromiszewski", "avatar": "https://github.com/mromiszewski.png" } ], "preview": { "src": "/images/previews/d04fdd044e82ea3ee34b28949e320d2773f8aeec6f7d4e12605ce6368e443f19.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-csv-importer", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-csv-importer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-csv-importer", "descriptionParagraphs": [ "This web part allows users to import CSV files into an existing SharePoint list" ], "previews": [ { "src": "/images/previews/d04fdd044e82ea3ee34b28949e320d2773f8aeec6f7d4e12605ce6368e443f19.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-csv-importer/assets/react-csv-importer.gif", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-custom-action-manager/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-custom-action-manager", "title": "SharePoint Custom Action Manager", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2024-09-22", "updated": "2025-10-30", "authors": [ { "name": "Nicolas Kheirallah", "account": "NicolasKheirallah", "avatar": "https://github.com/NicolasKheirallah.png" } ], "preview": { "src": "/images/previews/c47176cab2cc50aa873ba98a0e675c60df082accb35892b51f30e03ef0ea0614.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-custom-action-manager", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-custom-action-manager/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-custom-action-manager", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/c47176cab2cc50aa873ba98a0e675c60df082accb35892b51f30e03ef0ea0614.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-custom-action-manager/assets/image1.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-custom-action-manager/assets/image2.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-custom-action-manager/assets/image3.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-custom-links/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-custom-links", "title": "Custom Links Web Part", "description": "In this web part you can full customize the background and foreground color, font size, width and height of links.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-10-05", "updated": "2020-10-05", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/5f6be7fe66e0597240b5ddd5f21229c02306c682e307ab111e068e72f366a656.webp", "alt": "Custom Links", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-custom-links", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-custom-links/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-custom-links", "descriptionParagraphs": [ "In this web part you can full customize the background and foreground color, font size, width and height of links." ], "previews": [ { "src": "/images/previews/5f6be7fe66e0597240b5ddd5f21229c02306c682e307ab111e068e72f366a656.webp", "alt": "Custom Links", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-custom-links/assets/customLinks01.PNG", "alt": "Custom Links", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-custom-links/assets/customLinks02.PNG", "alt": "Custom Links", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-custom-links/assets/customlinks03.PNG", "alt": "Custom Links", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-custom-localization/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-custom-localization", "title": "Custom Localization", "description": "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", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.18.2", "versionGroup": "1.18", "created": "2025-01-24", "updated": "2025-01-24", "authors": [ { "name": "Brian McCullough", "account": "brianpmccullough", "avatar": "https://github.com/brianpmccullough.png" } ], "preview": { "src": "/images/previews/9fe4ac72da170b03bb75c46eb5185fe03d9fae3d0eec365cad74ff6b6440a076.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-custom-localization", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-custom-localization/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-custom-localization", "descriptionParagraphs": [ "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" ], "previews": [ { "src": "/images/previews/9fe4ac72da170b03bb75c46eb5185fe03d9fae3d0eec365cad74ff6b6440a076.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-custom-localization/assets/page-translation-detection.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-custom-localization/assets/specific-language.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-custompropertypanecontrols/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-custompropertypanecontrols", "title": "Custom property pane controls web part", "description": "Sample custom property pane controls built in React for use with SharePoint Framework client-side web parts.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.14.0-beta.5", "versionGroup": "1.14", "created": "2017-05-01", "updated": "2022-01-26", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" }, { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://github.com/AJIXuMuK.png" } ], "preview": { "src": "/images/previews/ebb7d1b4dd8bfd05235d192de57f45615c270c32da7a90a1f5e414ee9a0f8bea.webp", "alt": "Custom property pane controls", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-custompropertypanecontrols", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-custompropertypanecontrols/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-custompropertypanecontrols", "descriptionParagraphs": [ "Sample custom property pane controls built in React for use with SharePoint Framework client-side web parts." ], "previews": [ { "src": "/images/previews/ebb7d1b4dd8bfd05235d192de57f45615c270c32da7a90a1f5e414ee9a0f8bea.webp", "alt": "Custom property pane controls", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-custompropertypanecontrols/assets/cascading-dropdown-preview.gif", "alt": "Custom property pane controls", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0-beta.5", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-dall-e-image-generation/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-dall-e-image-generation", "title": "Image Generation using DALL-E API Web Part", "description": "This web part allows you to generate some images using the recently released API of DALL-E image generation.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2022-11-08", "updated": "2022-11-08", "authors": [ { "name": "Luis Mañez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/previews/4eac2637b0d03581b413beedb3d8b7740a4927a6114459eff18a66f3c9ca0a49.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-dall-e-image-generation", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-dall-e-image-generation/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-dall-e-image-generation", "descriptionParagraphs": [ "This web part allows you to generate some images using the recently released API of DALL-E image generation." ], "previews": [ { "src": "/images/previews/4eac2637b0d03581b413beedb3d8b7740a4927a6114459eff18a66f3c9ca0a49.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-dashboards/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-dashboards", "title": "Application Insights and Cost Management Dashboards Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2023-06-05", "updated": "2023-06-05", "authors": [ { "name": "Kinga Kazala", "account": "kkazala", "avatar": "https://github.com/kkazala.png" } ], "preview": { "src": "/images/previews/d2540e86bd9e020b02c67b7a40d96dad49719149681bb1f787342583ab87656b.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-dashboards", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-dashboards/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-dashboards", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/d2540e86bd9e020b02c67b7a40d96dad49719149681bb1f787342583ab87656b.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-data-access-options/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-data-access-options", "title": "SharePoint - Use different options to access SharePoint data", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-10-18", "updated": "2025-10-18", "authors": [ { "name": "Marc André Schröder-Zhou", "account": "maschroeder-z", "avatar": "https://github.com/maschroeder-z.png" } ], "preview": { "src": "/images/previews/2124aa2cf07a60fd2b70515277b498294004d9c4e17663849f6870d9cb95868c.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-data-access-options", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-data-access-options/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-data-access-options", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/2124aa2cf07a60fd2b70515277b498294004d9c4e17663849f6870d9cb95868c.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-datatable-using-mui-tables/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-datatable-using-mui-tables", "title": "DataTable Web Part Using MUI table", "description": "This web part provides mui datatable features for your lists.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2022-01-30", "updated": "2022-01-30", "authors": [ { "name": "Jeffin Jacob", "account": "jeffinjacob", "avatar": "https://github.com/jeffinjacob.png" } ], "preview": { "src": "/images/previews/06e297081c84a4e3bd873a74d3141cc941d96119e207804b5feea0cdb46ee1a6.webp", "alt": "Data Table with MUI", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-datatable-using-mui-tables", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-datatable-using-mui-tables/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-datatable-using-mui-tables", "descriptionParagraphs": [ "This web part provides mui datatable features for your lists." ], "previews": [ { "src": "/images/previews/06e297081c84a4e3bd873a74d3141cc941d96119e207804b5feea0cdb46ee1a6.webp", "alt": "Data Table with MUI", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-datatable-using-mui-tables/assets/second.png", "alt": "Data Table with MUI", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-datatable/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-datatable", "title": "Data Table Web Part", "description": "This web part provides easy way to render SharePoint custom list in data table view with all the necessary features.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2021-03-01", "updated": "2024-10-20", "authors": [ { "name": "Chandani Prajapati", "account": "chandaniprajapati", "avatar": "https://github.com/chandaniprajapati.png" } ], "preview": { "src": "/images/previews/76eef97a884581d92c36b32196981029524529886dc9cbde9b95dfb7e2d5e6e9.webp", "alt": "Data Table", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-datatable", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-datatable/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-datatable", "descriptionParagraphs": [ "This web part provides easy way to render SharePoint custom list in data table view with all the necessary features." ], "previews": [ { "src": "/images/previews/76eef97a884581d92c36b32196981029524529886dc9cbde9b95dfb7e2d5e6e9.webp", "alt": "Data Table", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-dataverse/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-dataverse", "title": "Consuming Dataverse API using SPFx", "description": "Enhance the potential of SharePoint by integrating it with Dataverse, a low-code data platform from Microsoft", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.18.0", "versionGroup": "1.18", "created": "2024-08-12", "updated": "2024-08-12", "authors": [ { "name": "Marcin Wojciechowski", "account": "mgwojciech", "avatar": "https://github.com/mgwojciech.png" } ], "preview": { "src": "/images/previews/7274162610db4748e7533cf5ec4da0632a04b632762ce492b39dfd4fd6fa274d.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-dataverse", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-dataverse/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-dataverse", "descriptionParagraphs": [ "This project entails the development of a SharePoint Framework (SPFx) solution, designed to bridge the gap between Microsoft SharePoint and Dataverse. The main goal of the project is to enhance the potential of SharePoint by integrating it with Dataverse, a low-code data platform from Microsoft.", "The SPFx solution will allow users to interact with data in the Dataverse environment directly from their SharePoint user interface. This allows for a more seamless and intuitive experience for end-users, who can access, manipulate, and analyze data without needing to switch between different platforms or applications." ], "previews": [ { "src": "/images/previews/7274162610db4748e7533cf5ec4da0632a04b632762ce492b39dfd4fd6fa274d.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-daterangepicker/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-daterangepicker", "title": "Date range picker in SPFx Web Part", "description": "This web part used the date range picker in the SharePoint Framework (SPFx) web part", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2020-07-04", "updated": "2024-10-07", "authors": [ { "name": "Ravichandran Krishnasamy", "account": "ravichandran-blog", "avatar": "https://github.com/ravichandran-blog.png" } ], "preview": { "src": "/images/previews/73bfd90e6208818e29a9399a52c0f0bca9f585a47f16109bd8782049a9e2324e.webp", "alt": "Date range picker in SPFx", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-daterangepicker", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-daterangepicker/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-daterangepicker", "descriptionParagraphs": [ "This web part used the date range picker in the SharePoint Framework (SPFx) web part" ], "previews": [ { "src": "/images/previews/73bfd90e6208818e29a9399a52c0f0bca9f585a47f16109bd8782049a9e2324e.webp", "alt": "Date range picker in SPFx", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-delivery-plan/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-delivery-plan", "title": "Delivery Plan", "description": "A project delivery dashboard web part that reads tasks from a SharePoint list and displays them across four interactive views. Resources, phases, and date ranges are all driven by list data — no hardcoded configuration required.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2026-08-26", "updated": "2026-08-26", "authors": [ { "name": "Sudeep Ghatak", "account": "sudeepghatak", "avatar": "https://github.com/sudeepghatak.png" } ], "preview": { "src": "/images/previews/0266e38ea640812c4ad27b71072ba5cb2aaf0a0afabb70836fdf4562c378c3c6.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-delivery-plan", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-delivery-plan/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-delivery-plan", "descriptionParagraphs": [ "A project delivery dashboard web part that reads tasks from a SharePoint list and displays them across four interactive views. Resources, phases, and date ranges are all driven by list data — no hardcoded configuration required." ], "previews": [ { "src": "/images/previews/0266e38ea640812c4ad27b71072ba5cb2aaf0a0afabb70836fdf4562c378c3c6.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-delivery-plan/assets/task-list.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-delivery-plan/assets/timeline.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-delivery-plan/assets/weekly-workload.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-designpatterns-typescript/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-designpatterns-typescript", "title": "Design Patterns applied to Sharepoint Framework", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-05-10", "updated": "2018-05-10", "authors": [ { "name": "Luis Valencia", "account": "levalencia", "avatar": "https://github.com/levalencia.png" } ], "preview": { "src": "/images/previews/7fdb468f51dd49a83e907182b4b4e62462deb057fd14932a0d361435068e49fd.webp", "alt": "Design Patterns applied to Sharepoint Framework", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-designpatterns-typescript", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-designpatterns-typescript/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-designpatterns-typescript", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/7fdb468f51dd49a83e907182b4b4e62462deb057fd14932a0d361435068e49fd.webp", "alt": "Design Patterns applied to Sharepoint Framework", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External HTTPS image was not verified against a collected tree.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-dev-radar/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-dev-radar", "title": "Dev-Radar for SharePoint Online", "description": "The web part Use PnPjs library and Axios", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-03-01", "updated": "2020-03-01", "authors": [ { "name": "Saulo Oliveira", "account": "sauslash", "avatar": "https://github.com/sauslash.png" } ], "preview": { "src": "/images/previews/51148a4e55ff88cdc25cedef28613e1355cae66ed000d7ed573c5a074a723edd.webp", "alt": "Dev-Radar for SharePoint Online", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-dev-radar", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-dev-radar/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-dev-radar", "descriptionParagraphs": [ "The web part Use PnPjs library and Axios" ], "previews": [ { "src": "/images/previews/51148a4e55ff88cdc25cedef28613e1355cae66ed000d7ed573c5a074a723edd.webp", "alt": "Dev-Radar for SharePoint Online", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-directory/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-directory", "title": "Organization Directory", "description": "Search People from Organization Directory and show live persona card on hover.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.22.1", "versionGroup": "1.22", "created": "2019-07-29", "updated": "2026-01-24", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" }, { "name": "Peter Paul Kirschner", "account": "petkir", "avatar": "https://github.com/petkir.png" }, { "name": "Sudharsan Kesavanarayanan", "account": "sudharsank", "avatar": "https://github.com/sudharsank.png" }, { "name": "Abderahman Moujahid", "account": "Abderahman88", "avatar": "https://github.com/Abderahman88.png" }, { "name": "Sandeep P S", "account": "Sandeep-FED", "avatar": "https://github.com/Sandeep-FED.png" } ], "preview": { "src": "/images/previews/693cb53f3018838cbe38fc3f5479dc56072a8852a1630c05aa3914d23582c956.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-directory", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-directory/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-directory", "descriptionParagraphs": [ "Search People from Organization Directory and show live persona card on hover." ], "previews": [ { "src": "/images/previews/693cb53f3018838cbe38fc3f5479dc56072a8852a1630c05aa3914d23582c956.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-directory/assets/react-directory-teams2.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-directory/assets/react-directory-teams3.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-directory/assets/react-directory-withPaging.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-directory/assets/react-directory1.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-directory/assets/react-directory2.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-directory/assets/react-directory3.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-directory/assets/react-directory4.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-directory/assets/react-directory5.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-directory/assets/react-directory6.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[5].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[6].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[7].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[8].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[9].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 10 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-display-hierarchy/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-display-hierarchy", "title": "Web part displaying hierarchical information from SharePoint list", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.18.2", "versionGroup": "1.18", "created": "2020-11-21", "updated": "2024-06-28", "authors": [ { "name": "Nanddeep Nachan", "account": "nanddeepn", "avatar": "https://github.com/nanddeepn.png" }, { "name": "Ravi Kulkarni", "account": "ravi16a87", "avatar": "https://github.com/ravi16a87.png" } ], "preview": { "src": "/images/previews/39f4a7d0d687898b5984fb646209905a47a8cc8005b35ae8bcdfe14c2b455ef0.webp", "alt": "Web part displaying hierarchical information from SharePoint list", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-display-hierarchy", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-display-hierarchy/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-display-hierarchy", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/39f4a7d0d687898b5984fb646209905a47a8cc8005b35ae8bcdfe14c2b455ef0.webp", "alt": "Web part displaying hierarchical information from SharePoint list", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-display-hierarchy/assets/list-sample-data.png", "alt": "Web part displaying hierarchical information from SharePoint list", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-display-hierarchy/assets/list-schema.png", "alt": "Web part displaying hierarchical information from SharePoint list", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-display-hierarchy/assets/sharepoint-run.gif", "alt": "Web part displaying hierarchical information from SharePoint list", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-doccard-faq/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-doccard-faq", "title": "Document Card FAQ Web Part", "description": "React FAQ Document Card Web Part", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2021-04-05", "updated": "2021-04-05", "authors": [ { "name": "Sam Collins", "account": "SamC148", "avatar": "https://github.com/SamC148.png" } ], "preview": { "src": "/images/previews/2f335232206c34bd45c7ca0dd36dfa8b32ce027765dc74071fdb49da6204a5e9.webp", "alt": "Web part in action", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-doccard-faq", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-doccard-faq/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-doccard-faq", "descriptionParagraphs": [ "Document Card FAQ" ], "previews": [ { "src": "/images/previews/2f335232206c34bd45c7ca0dd36dfa8b32ce027765dc74071fdb49da6204a5e9.webp", "alt": "Web part in action", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-doccard-faq/assets/reactdoccardfaq.png", "alt": "Web part in action", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-document-ai-chat/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-document-ai-chat", "title": "Document AI Chat using Kernel Memory", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-03-10", "updated": "2025-03-10", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/5f10724a4ebbfddea0e3a95778ade609bc82f023f22d6c161bdeff6a31d935a7.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-document-ai-chat", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-document-ai-chat/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-document-ai-chat", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/5f10724a4ebbfddea0e3a95778ade609bc82f023f22d6c161bdeff6a31d935a7.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-document-ai-chat/assets/kernel-memory-chat-ui.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-document-ai-chat/assets/kernel-memory.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-document-explorer/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-document-explorer", "title": "Document Library Explorer", "description": "A comprehensive SharePoint Framework web part for browsing, searching, and filtering documents across multiple document libraries with folder tree navigation.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-11-09", "updated": "2025-11-09", "authors": [ { "name": "Sai Siva Ram Bandaru", "account": "saiiiiiii", "avatar": "https://github.com/saiiiiiii.png" } ], "preview": { "src": "/images/previews/30d3d941045c67e1685417c02534b71060f9dc86b6340f8e09c49500cf0471ae.webp", "alt": "Document Explorer demo", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-document-explorer", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-document-explorer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-document-explorer", "descriptionParagraphs": [ "A comprehensive SharePoint Framework (SPFx) web part that enables users to browse, search, and filter documents across multiple SharePoint document libraries. Features an interactive folder tree navigation with recursive expansion, sortable file list with detailed metadata, and advanced filtering capabilities. Supports configurable three-panel layout (folder tree, file list, filter panel) with dynamic sizing, permission-aware library loading, direct file access, and both desktop and mobile-friendly layouts." ], "previews": [ { "src": "/images/previews/30d3d941045c67e1685417c02534b71060f9dc86b6340f8e09c49500cf0471ae.webp", "alt": "Document Explorer demo", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-document-explorer/assets/three-panel-view.png", "alt": "Three panel view with folder tree, file list, and filters", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-document-explorer/assets/property-pane.png", "alt": "Property pane configuration", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Using PnP JS with SharePoint Framework", "description": "Learn how to use PnP JS library in your SharePoint Framework solutions for modern SharePoint REST API interactions.", "url": "https://pnp.github.io/pnpjs/getting-started/" }, { "title": "Fluent UI React Components", "description": "Fluent UI React is a collection of robust React-based components designed to make it simple for you to create consistent web experiences using the Fluent Design Language.", "url": "https://developer.microsoft.com/fluentui#/controls/web" }, { "title": "Working with Folders and Files using PnP JS", "description": "Learn how to work with SharePoint folders and files using the PnP JS library.", "url": "https://pnp.github.io/pnpjs/sp/folders/" } ], "products": [ "SharePoint", "Office" ], "supportedHosts": [ "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-document-links-accordion/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-document-links-accordion", "title": "Documents Links Accordion Web Part", "description": "This web part allows user create a accordion with documents links grouped by any column of document library.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2021-10-10", "updated": "2021-10-10", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/effb8222471344576735c9d6464b65c57518561a7886aed54d2453b0eb135aac.webp", "alt": "Screen shot of web part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-document-links-accordion", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-document-links-accordion/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-document-links-accordion", "descriptionParagraphs": [ "This web part allows user create a accordion with documents links grouped by any column of document library.", "When the user clicks on the header it dynamically load documents." ], "previews": [ { "src": "/images/previews/effb8222471344576735c9d6464b65c57518561a7886aed54d2453b0eb135aac.webp", "alt": "Screen shot of web part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-document-links-accordion/assets/documentsLinksAccordion.gif", "alt": "Web part in action", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-documents-detailslist/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-documents-detailslist", "title": "Documents Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-04-28", "updated": "2020-04-28", "authors": [ { "name": "Dimcho Tsanov", "account": "DimchoTsanov", "avatar": "https://avatars.githubusercontent.com/u/9058087?s=460&u=43820d97a5aaf5719a4c98be59c673fb460f0001&v=4" }, { "name": "Harsha Vardhini", "account": "Harshagracy", "avatar": "https://github.com/Harshagracy.png" } ], "preview": { "src": "/images/previews/d19bba9c1ae348d5bab64ec2d5a44e50c24a623dd87b685665ef134730d6d276.webp", "alt": "Documents Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-documents-detailslist", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-documents-detailslist/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-documents-detailslist", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/d19bba9c1ae348d5bab64ec2d5a44e50c24a623dd87b685665ef134730d6d276.webp", "alt": "Documents Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-download-multiple-documents/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-download-multiple-documents", "title": "Download Multiple Documents Web Part", "description": "This sample empowers users to effortlessly download multiple documents as a single compressed ZIP file.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.17.4", "versionGroup": "1.17", "created": "2023-09-09", "updated": "2023-09-09", "authors": [ { "name": "Ramin Ahmadi", "account": "AhmadiRamin", "avatar": "https://github.com/AhmadiRamin.png" } ], "preview": { "src": "/images/previews/52bd5553d6a2d92ee8d26e422b25b0a37a4bdc4038ea63192fc7ff9ccc8c4cb4.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-download-multiple-documents", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-download-multiple-documents/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-download-multiple-documents", "descriptionParagraphs": [ "This sample empowers users to effortlessly download multiple documents as a single compressed ZIP file." ], "previews": [ { "src": "/images/previews/52bd5553d6a2d92ee8d26e422b25b0a37a4bdc4038ea63192fc7ff9ccc8c4cb4.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.17.4", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-dragmatch-game/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-dragmatch-game", "title": "Drag Match", "description": "An interactive drag-and-drop matching game for SharePoint with time-based scoring and rank bonuses.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2026-02-07", "updated": "2026-02-07", "authors": [ { "name": "Sai Siva Ram Bandaru", "account": "saiiiiiii", "avatar": "https://github.com/saiiiiiii.png" } ], "preview": { "src": "/images/previews/b5e59fbc2dacbb26da8e997c2dc8e261b8b796618932993108eeb3a75f30a97e.webp", "alt": "Drag Match Game in action", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-dragmatch-game", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-dragmatch-game/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-dragmatch-game", "descriptionParagraphs": [ "This web part provides an engaging drag-and-drop game where users match questions with their correct answers. Features include a countdown timer, instant visual feedback, time-based bonus scoring, and rewards for the first 100 completers. Each user can play only once, and all scores are saved to a SharePoint list for leaderboard tracking." ], "previews": [ { "src": "/images/previews/b5e59fbc2dacbb26da8e997c2dc8e261b8b796618932993108eeb3a75f30a97e.webp", "alt": "Drag Match Game in action", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-dragmatch-game/assets/dragmatch-completion.png", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint", "Office" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-dynamic-poll/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-dynamic-poll", "title": "React Dynamic Poll", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2026-02-07", "updated": "2026-09-12", "authors": [ { "name": "Ari Gunawan", "account": "arigunawan", "avatar": "https://github.com/arigunawan.png" } ], "preview": { "src": "/images/previews/02789f8bd6411d61d6fb8e4e6ea87c0ba820287771943628b716154ccefb52dd.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-dynamic-poll", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-dynamic-poll/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-dynamic-poll", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/02789f8bd6411d61d6fb8e4e6ea87c0ba820287771943628b716154ccefb52dd.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-dynamic-poll/assets/List.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-dynamic-poll/assets/Question.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-dynamic-poll/assets/Questions.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-dynamic-poll/assets/Result.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-dynamics-crm-api/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-dynamics-crm-api", "title": "Web Part Using Dynamics CRM API", "description": "This sample shows how to consume Dynamics CRM API using AadTokenProvider class.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-07-12", "updated": "2020-07-12", "authors": [ { "name": "Ramin Ahmadi", "account": "AhmadiRamin", "avatar": "https://github.com/AhmadiRamin.png" } ], "preview": { "src": "/images/previews/1fff043e31e0a94df1d4ac1a86d7f9cf4ac99fd425ce3667f2a8d43430f356d1.webp", "alt": "Using Dynamics CRM API", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-dynamics-crm-api", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-dynamics-crm-api/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-dynamics-crm-api", "descriptionParagraphs": [ "This sample shows how to consume Dynamics CRM API using AadTokenProvider class." ], "previews": [ { "src": "/images/previews/1fff043e31e0a94df1d4ac1a86d7f9cf4ac99fd425ce3667f2a8d43430f356d1.webp", "alt": "Using Dynamics CRM API", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-easter-egg-hunt-game/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-easter-egg-hunt-game", "title": "Easter Egg Hunt Game SPFx Web Part", "description": "A fun interactive Easter Egg Hunt Game built as a SharePoint Framework web part", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-04-15", "updated": "2025-04-15", "authors": [ { "name": "Valeras Narbutas", "account": "ValerasNarbutas", "avatar": "https://github.com/ValerasNarbutas.png" } ], "preview": { "src": "/images/previews/109a1e0c24f0bdbeb72ca621ac09a1e73dc9c269d8b067b76197cff1d8bb13da.webp", "alt": "Easter Egg Hunt Game", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-easter-egg-hunt-game", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-easter-egg-hunt-game/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-easter-egg-hunt-game", "descriptionParagraphs": [ "A fun interactive Easter Egg Hunt Game built as a SharePoint Framework web part. This web part creates an engaging, festive activity that allows users to hunt for hidden Easter eggs across a SharePoint page. The game includes regular and bonus eggs with different point values, and eggs can be placed both inside the web part and around other elements on the SharePoint page." ], "previews": [ { "src": "/images/previews/109a1e0c24f0bdbeb72ca621ac09a1e73dc9c269d8b067b76197cff1d8bb13da.webp", "alt": "Easter Egg Hunt Game", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-easter-egg-hunt-game/assets/EasterEggHunt.gif", "alt": "Easter Egg Hunt Game gif", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "technology.missing", "field": "metadata.CLIENT-SIDE-DEV", "message": "Technology filter metadata is missing.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-edit-applicationcustomizer/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-edit-applicationcustomizer", "title": "Edit Application Customizers Web Part", "description": "This web part will allow users to view/update application customizers properties across any web where the current user has access to.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-11-07", "updated": "2020-11-07", "authors": [ { "name": "Kunj Sangani", "account": "kunj-sangani", "avatar": "https://github.com/kunj-sangani.png" }, { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png" } ], "preview": { "src": "/images/previews/11c9b0f20cf4079a1b940f04aca36e63bd900061e3ed13c09661a41c3a9ef325.webp", "alt": "Edit Application Customizers", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-edit-applicationcustomizer", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-edit-applicationcustomizer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-edit-applicationcustomizer", "descriptionParagraphs": [ "This web part will allow users to view/update application customizers properties across any web where the current user has access to." ], "previews": [ { "src": "/images/previews/11c9b0f20cf4079a1b940f04aca36e63bd900061e3ed13c09661a41c3a9ef325.webp", "alt": "Edit Application Customizers", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-emoji-ratings/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-emoji-ratings", "title": "Emoji Ratings Web Part", "description": "Take emoji-based reactions or feedback for a given news/article/post", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2021-09-24", "updated": "2022-11-22", "authors": [ { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png" } ], "preview": { "src": "/images/previews/13ce8075fe774cc4151a1c19033908354cdec7e4bb9a8591f4c1a95ba2ed84d5.webp", "alt": "Web part in action", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-emoji-ratings", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-emoji-ratings/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-emoji-ratings", "descriptionParagraphs": [ "This is sample web part which can be used to take emoji based reaction or feedback for particular news/article/posts.", "We all know every organizations would be using SharePoint news features for company's internal communications from HR to IT updates and some time annoucements. News created in SharePoint are created as Pages in library. Idea behind this web part is to take employee/user's feedback as emoji reactions on particular news. This web part can also be used on wiki articles or blog posts to take similar reactions. Web part uses concept of 1 to 5 star based rating system(configurable), you can decide low to high based on your preference." ], "previews": [ { "src": "/images/previews/13ce8075fe774cc4151a1c19033908354cdec7e4bb9a8591f4c1a95ba2ed84d5.webp", "alt": "Web part in action", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-employees-onboarding/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-employees-onboarding", "title": "Employee Onboarding", "description": "This project is an SPFx (SharePoint Framework) application designed for employee onboarding.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.19.0", "versionGroup": "1.19", "created": "2024-09-01", "updated": "2024-09-01", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/c8373ea0d59a2bfba934533b7a6c04db7852bce2efc896531c465634ae2cd6b2.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-employees-onboarding", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-employees-onboarding/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-employees-onboarding", "descriptionParagraphs": [ "This project is an SPFx (SharePoint Framework) application designed for employee onboarding. It automates various tasks for each employee, such as updating their department, joining the team, and sending notification emails. The application utilizes the Microsoft Graph SDK's batch requests approach to efficiently manage these operations within a .NET-based Azure function. Additionally, the system logs information into a SharePoint list for auditing purposes." ], "previews": [ { "src": "/images/previews/c8373ea0d59a2bfba934533b7a6c04db7852bce2efc896531c465634ae2cd6b2.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-employees-onboarding/assets/demo2.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-employees-onboarding/assets/demo3.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-employees-onboarding/assets/demo4.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.19.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-engage-hub/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-engage-hub", "title": "Engage Hub", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.22.2", "versionGroup": "1.22", "created": "2025-04-27", "updated": "2026-06-17", "authors": [ { "name": "Sandeep P S", "account": "Sandeep-FED", "avatar": "https://github.com/Sandeep-FED.png" }, { "name": "AOAI SDK", "account": null, "avatar": "https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/openai/openai.png" } ], "preview": { "src": "/images/previews/1f77acd40c9e714e626aa487568b066ac65b23774c090072d9b287ba99847b2f.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-engage-hub", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-engage-hub/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-engage-hub", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/1f77acd40c9e714e626aa487568b066ac65b23774c090072d9b287ba99847b2f.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-engage-hub/assets/engage_hub2.gif", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-engage-hub/assets/engage_hub2.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.2", "issues": [ { "code": "author.account-format", "field": "authors[1].gitHubAccount", "message": "Check the GitHub account format.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-enhanced-button/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-enhanced-button", "title": "Enhanced Button", "description": "Extends the functionality of the native button web part.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.19.0", "versionGroup": "1.19", "created": "2024-09-01", "updated": "2024-09-01", "authors": [ { "name": "Ari Gunawan", "account": "AriGunawan", "avatar": "https://github.com/AriGunawan.png" } ], "preview": { "src": "/images/previews/9b6a12e18bc40b1b85265cc5bf34ca58905a0c3385524344458299f598c8593a.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-enhanced-button", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-enhanced-button/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-enhanced-button", "descriptionParagraphs": [ "The Enhanced Button Web Part is a custom SharePoint web part that extends the functionality of the native button web part. It provides additional configuration options to create more customizable and flexible buttons within your SharePoint pages." ], "previews": [ { "src": "/images/previews/9b6a12e18bc40b1b85265cc5bf34ca58905a0c3385524344458299f598c8593a.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.19.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-enhanced-list-formatting/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-enhanced-list-formatting", "title": "Enhanced List Formatting Web Part", "description": "This web part allows you to add custom CSS on a page to enhance list formatting.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-03-18", "updated": "2020-03-18", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "David Warner II", "account": "PopWarner", "avatar": "https://avatars.githubusercontent.com/u/10676147?s=460&u=9e4e74223c4ffb430fb77c97892a84b286df1921&v=4" } ], "preview": { "src": "/images/previews/f901baf849896624a49d737f74920423b41201ad23c6a882368e12e984598f64.webp", "alt": "Enhanced List Formatting", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-enhanced-list-formatting", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-enhanced-list-formatting/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-enhanced-list-formatting", "descriptionParagraphs": [ "This web part allows you to add custom CSS on a page to enhance list formatting." ], "previews": [ { "src": "/images/previews/f901baf849896624a49d737f74920423b41201ad23c6a882368e12e984598f64.webp", "alt": "Enhanced List Formatting", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-enhanced-list-formatting/assets/Viewformatting.png", "alt": "Enhanced List Formatting", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-enhanced-page-properties/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-enhanced-page-properties", "title": "Enhanced Page Properties Web Part", "description": "Goes beyond the standard SharePoint Page Properties web part, offering expanded support for various metadata types and configurations", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.19.0", "versionGroup": "1.19", "created": "2023-09-23", "updated": "2023-10-28", "authors": [ { "name": "Ari Gunawan", "account": "AriGunawan", "avatar": "https://github.com/AriGunawan.png" } ], "preview": { "src": "/images/previews/c7dfc364528d69cb37a7631a5474a8d4bbfcb9629e0aa9794ecffac619c97ad2.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-enhanced-page-properties", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-enhanced-page-properties/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-enhanced-page-properties", "descriptionParagraphs": [ "This is a web part that goes beyond the standard SharePoint Page Properties web part, offering expanded support for various metadata types and configurations. Effortlessly display key page details based on metadata files, providing a comprehensive view of your content. Streamline information management and enhance user interaction with this versatile and customizable web part." ], "previews": [ { "src": "/images/previews/c7dfc364528d69cb37a7631a5474a8d4bbfcb9629e0aa9794ecffac619c97ad2.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.19.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-enhanced-powerapps/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-enhanced-powerapps", "title": "Enhanced Power App", "description": "Sample web part showing how to embed a Power App that resizes, adapts to themes, and supports dynamic properties", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.13.1", "versionGroup": "1.13", "created": "2024-12-25", "updated": "2024-12-31", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" }, { "name": "Babak Danyal", "account": "babakdanyal", "avatar": "https://github.com/babakdanyal.png" } ], "preview": { "src": "/images/previews/52fcd4ccafe2eca65b3e79d0102ca49dd57069b2ef4dc4ff90cd5e7d34dad671.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-enhanced-powerapps", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-enhanced-powerapps/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-enhanced-powerapps", "descriptionParagraphs": [ "Sample web part showing how to embed a Power App that resizes, adapts to themes, and supports dynamic properties" ], "previews": [ { "src": "/images/previews/52fcd4ccafe2eca65b3e79d0102ca49dd57069b2ef4dc4ff90cd5e7d34dad671.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-enhanced-powerapps/assets/enhanced-power-apps.gif", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-enhanced-powerapps/assets/FixedPackage.json.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-enhanced-powerapps/assets/resize.gif", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-enhanced-powerapps/assets/sizeoptions.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-enhanced-powerapps/assets/step1-5.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-enhanced-powerapps/assets/step1.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-enhanced-powerapps/assets/step2.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[5].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[6].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[7].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 8 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-environment-settings/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-environment-settings", "title": "SPFx environment settings management web part", "description": "Easily swap between environments when building SPFx solutions", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.18.1", "versionGroup": "1.18", "created": "2023-11-14", "updated": "2023-11-14", "authors": [ { "name": "Dan Toft", "account": "Tanddant", "avatar": "https://github.com/Tanddant.png" } ], "preview": { "src": "/images/previews/c277d11c574614a8315a2adfef80bbf41575863e14e7ca9f0cd0cec023de02a5.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-environment-settings", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-environment-settings/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-environment-settings", "descriptionParagraphs": [ "Have you ever been building SPFx solutions, and wanted to use different settings for different environments? This web part allows you to easily swap between different environment settings, and even add your own custom settings." ], "previews": [ { "src": "/images/previews/c277d11c574614a8315a2adfef80bbf41575863e14e7ca9f0cd0cec023de02a5.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-events-aggregator/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-events-aggregator", "title": "Event Aggregator Sample (DEPRECATED)", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-11-18", "updated": "2018-11-18", "authors": [ { "name": "Velin Georgiev", "account": "VelinGeorgiev", "avatar": "https://github.com/VelinGeorgiev.png" }, { "name": "Austin Breslin", "account": "AustinBreslinDev", "avatar": "https://avatars.githubusercontent.com/u/10480670?s=460&v=4" } ], "preview": { "src": "/images/previews/e8c6201c7c6faaf320c97848f8a502adf0a17459b829f8ecdeeb5a18f0e6efce.webp", "alt": "Event Aggregator Sample (DEPRECATED)", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-events-aggregator", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-events-aggregator/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-events-aggregator", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/e8c6201c7c6faaf320c97848f8a502adf0a17459b829f8ecdeeb5a18f0e6efce.webp", "alt": "Event Aggregator Sample (DEPRECATED)", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-events-dynamicdata/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-events-dynamicdata", "title": "Dynamic data Web Part", "description": "Sample web parts illustrating using the SharePoint Framework Dynamic data capability.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-07-08", "updated": "2020-07-08", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" }, { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" } ], "preview": { "src": "/images/previews/f5cf7bb36d92722a8280eeab8c2a066e9699267c272397b9e29e1a8023b9f834.webp", "alt": "Dynamic data", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-events-dynamicdata", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-events-dynamicdata/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-events-dynamicdata", "descriptionParagraphs": [ "Sample web parts illustrating using the SharePoint Framework Dynamic data capability." ], "previews": [ { "src": "/images/previews/f5cf7bb36d92722a8280eeab8c2a066e9699267c272397b9e29e1a8023b9f834.webp", "alt": "Dynamic data", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-events/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-events", "title": "React Events Feed Web Part", "description": "A SharePoint Framework (SPFx) web part that aggregates and displays calendar events from multiple sources — Microsoft 365 Group calendars and SharePoint list calendars — in a single, unified feed. It supports 9 layout styles, live date-range filtering with timezone-aware boundaries, drag-and-drop reordering, and full SharePoint theme integration via Fluent UI v9. Built with @spteck/react-controls-v2 and runs on SharePoint Online, Microsoft Teams, and Microsoft 365 (Office) hosts.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.23.0", "versionGroup": "1.23", "created": "2026-05-24", "updated": "2026-05-24", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/048ba3e089663803462fc15616d57426ff3cfde6b71e9583f3b12fcc2c6861be.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-events", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-events/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-events", "descriptionParagraphs": [ "A SharePoint Framework (SPFx) web part that aggregates and displays calendar events from multiple sources — Microsoft 365 Group calendars and SharePoint list calendars — in a single, unified feed. It supports 9 layout styles, live date-range filtering with timezone-aware boundaries, drag-and-drop reordering, and full SharePoint theme integration via Fluent UI v9. Built with @spteck/react-controls-v2 and runs on SharePoint Online, Microsoft Teams, and Microsoft 365 (Office) hosts." ], "previews": [ { "src": "/images/previews/048ba3e089663803462fc15616d57426ff3cfde6b71e9583f3b12fcc2c6861be.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-events/assets/feed02.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-events/assets/feed03.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-events/assets/feed04.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.23.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-extension-manager/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-extension-manager", "title": "Tenant wide extension manager web part", "description": "Manage those tenant wide extensions", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.17.2", "versionGroup": "1.17", "created": "2023-07-10", "updated": "2023-07-10", "authors": [ { "name": "Dan Toft", "account": "Tanddant", "avatar": "https://github.com/Tanddant.png" } ], "preview": { "src": "/images/previews/111797214fcb4f76368740606349f5018c1137eea0a5b66e51c96607af2578a5.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-extension-manager", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-extension-manager/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-extension-manager", "descriptionParagraphs": [ "Here it is, a modern extension manager, that allows you to easily enable/disable, and update the properties of the globally deployed extensions in your environment." ], "previews": [ { "src": "/images/previews/111797214fcb4f76368740606349f5018c1137eea0a5b66e51c96607af2578a5.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.17.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-facebook-plugin/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-facebook-plugin", "title": "SharePoint Framework Facebook Page Social Plugin web part", "description": "This sample shows how to implement iFrame-based web parts with a dynamic responsive behavior on the example of Facebook Page Social Plugin.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2018-08-26", "updated": "2021-07-09", "authors": [ { "name": "Andrew Koltyakov", "account": "koltyakov", "avatar": "https://avatars.githubusercontent.com/u/7816483?s=460&u=d77bbdeda1e5fc389b11899f93b62a7d00475835&v=4" }, { "name": "Ari Gunawan", "account": "AriGunawan", "avatar": "https://github.com/AriGunawan.png" } ], "preview": { "src": "/images/previews/a08a4ef87d2c28fcc5983eb8b840940ba91017ab15ecaec99244cbe410bdd7bb.webp", "alt": "SharePoint Framework Facebook Page Social Plugin web part sample", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-facebook-plugin", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-facebook-plugin/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-facebook-plugin", "descriptionParagraphs": [ "This sample shows how to implement iFrame-based web parts with a dynamic responsive behavior on the example of Facebook Page Social Plugin." ], "previews": [ { "src": "/images/previews/a08a4ef87d2c28fcc5983eb8b840940ba91017ab15ecaec99244cbe410bdd7bb.webp", "alt": "SharePoint Framework Facebook Page Social Plugin web part sample", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-faqapp/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-faqapp", "title": "Frequently Asked Questions Web Part", "description": "Allows users to create Frequently Asked Questions(Faq App) in modern and classic SharePoint pages.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.8.2", "versionGroup": "1.8", "created": "2020-10-28", "updated": "2020-10-28", "authors": [ { "name": "Ashok Swain", "account": "ashokswain7", "avatar": "https://avatars.githubusercontent.com/u/26612087?s=460&v=4" }, { "name": "Abderahman Moujahid", "account": "Abderahman88", "avatar": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4" } ], "preview": { "src": "/images/previews/7e9d88f4021b488752494b46fe91c6236a31fd0d26cfc73aaeabd3501f4b38b5.webp", "alt": "Frequently Asked Questions", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-faqapp", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-faqapp/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-faqapp", "descriptionParagraphs": [ "Allows users to create Frequently Asked Questions(Faq App) in modern and classic SharePoint pages." ], "previews": [ { "src": "/images/previews/7e9d88f4021b488752494b46fe91c6236a31fd0d26cfc73aaeabd3501f4b38b5.webp", "alt": "Frequently Asked Questions", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.8.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-faqs/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-faqs", "title": "Frequently Asked Questions Web Part", "description": "Allows users to create Frequently Asked Questions using Property Field Collection Data", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2022-03-07", "updated": "2022-06-02", "authors": [ { "name": "Arun Kumar Perumal", "account": "arunkumarperumal", "avatar": "https://avatars.githubusercontent.com/u/39132298?v=4" } ], "preview": { "src": "/images/previews/9db254d892640a044ecbc58b63e91a48aa9476a1ef2564b17885378a98f96b98.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-faqs", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-faqs/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-faqs", "descriptionParagraphs": [ "Allows users to create Frequently Asked Questions using Property Field Collection Data, with options to view as an Accordion or Tab and also ability to search within the FAQs" ], "previews": [ { "src": "/images/previews/9db254d892640a044ecbc58b63e91a48aa9476a1ef2564b17885378a98f96b98.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-feature-framework/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-feature-framework", "title": "Deployment of SharePoint assets as part of SPFx package", "description": "Simplistic solution demonstrating how to provision SharePoint assets using Feature Framework elements when SharePoint Framework solution is being deployed to a SharePoint site.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.0.0", "versionGroup": "< 1.1", "created": "2017-02-27", "updated": "2017-02-27", "authors": [ { "name": "Vesa Juvonen", "account": "VesaJuvonen", "avatar": "https://github.com/VesaJuvonen.png" } ], "preview": { "src": "/images/previews/b0c5a00ec9c651070e0971b1fe68ce3b23eb80e106d1133b010b2e2f1dff21e3.webp", "alt": "Deployment of SharePoint assets as part of SPFx package", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-feature-framework", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-feature-framework/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-feature-framework", "descriptionParagraphs": [ "Simplistic solution demonstrating how to provision SharePoint assets using Feature Framework elements when SharePoint Framework solution is being deployed to a SharePoint site." ], "previews": [ { "src": "/images/previews/b0c5a00ec9c651070e0971b1fe68ce3b23eb80e106d1133b010b2e2f1dff21e3.webp", "alt": "Deployment of SharePoint assets as part of SPFx package", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.0.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-feedback-sidebar/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-feedback-sidebar", "title": "Feedback Sidebar Web Part", "description": "This web part displays a sidebar that allows users to provide feedback on various sections of your site.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2022-09-14", "updated": "2023-01-20", "authors": [ { "name": "Alessia De Martino", "account": "AlessiaDeMartino", "avatar": "https://github.com/AlessiaDeMartino.png" }, { "name": "Michele Catena", "account": "10xMike", "avatar": "https://github.com/10xMike.png" } ], "preview": { "src": "/images/previews/0a4b04913ecf9c1b1dc618bee9caafba89b5da05a9c5c6ecba31dc651473de73.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-feedback-sidebar", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-feedback-sidebar/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-feedback-sidebar", "descriptionParagraphs": [ "This web part displays a sidebar that allows users to provide feedback on various sections of your site." ], "previews": [ { "src": "/images/previews/0a4b04913ecf9c1b1dc618bee9caafba89b5da05a9c5c6ecba31dc651473de73.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-feedback-sidebar/assets/preview-img-01.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-feedback-sidebar/assets/preview-img-02.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-feedback/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-feedback", "title": "Feedback Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2021-03-03", "updated": "2021-03-03", "authors": [ { "name": "Perry Kankam", "account": "perr124", "avatar": "https://github.com/perr124.png" }, { "name": "Abderahman Moujahid", "account": "Abderahman88", "avatar": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4" } ], "preview": { "src": "/images/previews/8d2227a47082fa9f3ab763c7929c6d7463cbc1c1a6e82dbc1a756c9931eeaa93.webp", "alt": "Feedback", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-feedback", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-feedback/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-feedback", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/8d2227a47082fa9f3ab763c7929c6d7463cbc1c1a6e82dbc1a756c9931eeaa93.webp", "alt": "Feedback", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-file-type-distribution/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-file-type-distribution", "title": "File Type Distribution", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-11-09", "updated": "2025-11-09", "authors": [ { "name": "Harminder Singh", "account": "HarminderSethi", "avatar": "https://github.com/HarminderSethi.png" } ], "preview": { "src": "/images/previews/b68652fe491972aeb8cf0d194a48fd225b1e9fa767a1268ec83d4c2820c0f726.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-file-type-distribution", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-file-type-distribution/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-file-type-distribution", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/b68652fe491972aeb8cf0d194a48fd225b1e9fa767a1268ec83d4c2820c0f726.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-file-type-distribution/assets/HorizontalBarChart.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-file-upload/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-file-upload", "title": "File Upload Web Part", "description": "The file upload web part allowing users to upload multiple files to a document library or as item attachments.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.4.0", "versionGroup": "1.4", "created": "2018-02-14", "updated": "2018-02-14", "authors": [ { "name": "Ramin Ahmadi", "account": "AhmadiRamin", "avatar": "https://github.com/AhmadiRamin.png" } ], "preview": { "src": "/images/previews/78530dbd9a67431c3b8af2db64bdedf54c8253889a03d96ec2b25ac7b1d6f8f7.webp", "alt": "File Upload Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-file-upload", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-file-upload/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-file-upload", "descriptionParagraphs": [ "The file upload web part allowing users to upload multiple files to a document library or as item attachments." ], "previews": [ { "src": "/images/previews/78530dbd9a67431c3b8af2db64bdedf54c8253889a03d96ec2b25ac7b1d6f8f7.webp", "alt": "File Upload Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-find-parker/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-find-parker", "title": "Find Parker Web Part", "description": "This web part is a simple find object game.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2021-10-31", "updated": "2021-10-31", "authors": [ { "name": "Adam Wojcik", "account": "Adam-it", "avatar": "https://github.com/Adam-it.png" } ], "preview": { "src": "/images/previews/2c4623b2e27e4a7cb064d611e3442149d2f6db7e44464f156f4c126eb7dcfe14.webp", "alt": "Find Parker", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-find-parker", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-find-parker/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-find-parker", "descriptionParagraphs": [ "Work is not about work 🤨, sometimes a bit of fun is in order 🕹️", "This web part is a simple find object game." ], "previews": [ { "src": "/images/previews/2c4623b2e27e4a7cb064d611e3442149d2f6db7e44464f156f4c126eb7dcfe14.webp", "alt": "Find Parker", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-flag-template/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-flag-template", "title": "React Flag Template", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-09-14", "updated": "2025-09-14", "authors": [ { "name": "sudeepghatak", "account": "sudeepghatak", "avatar": "https://github.com/sudeepghatak.png" } ], "preview": { "src": "/images/previews/7145331f293e966cebef2cd72ab2cd52582aaf572eae2eb90b9cbf864cfafe49.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-flag-template", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-flag-template/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-flag-template", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/7145331f293e966cebef2cd72ab2cd52582aaf572eae2eb90b9cbf864cfafe49.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-flighttracker/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-flighttracker", "title": "Flight Tracker", "description": "Sample Web Part to track all flights from a selected airport, date and information type.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2022-11-14", "updated": "2022-11-14", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/9513803537978ccc89fdb5114717c5952264b3b23edd9af662c916d320499af1.webp", "alt": "Flight tracker preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-flighttracker", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-flighttracker/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-flighttracker", "descriptionParagraphs": [ "This Web Part allows to track all flights from a selected airport, date and information type.", "The SPFx use external API to get data of flight. There are some restritions on this API, the number of requests is limited (free version)" ], "previews": [ { "src": "/images/previews/9513803537978ccc89fdb5114717c5952264b3b23edd9af662c916d320499af1.webp", "alt": "Flight tracker preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-flighttracker/assets/Flight-Tracker-Preview-02.png", "alt": "Flight tracker preview", "isFallback": false } ], "references": [ { "title": "Getting started with SharePoint Framework", "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/set-up-your-developer-tenant" }, { "title": "Build your first SharePoint client-side web part", "description": "Learn how to build a SharePoint Framework Web Part.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Microsoft 365 Patterns and Practices", "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.", "url": "https://aka.ms/m365pnp" } ], "products": [ "SharePoint", "Microsoft Teams" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-flow-button/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-flow-button", "title": "Flow Button Web Part", "description": "This web part demonstrates displaying the list of flow button of Power Automate.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.14.0", "versionGroup": "1.14", "created": "2022-02-09", "updated": "2022-03-28", "authors": [ { "name": "Takashi Shinohara", "account": "karamem0", "avatar": "https://github.com/karamem0.png" } ], "preview": { "src": "/images/previews/13fd2d054f2b58561d9213a586f2e78483e6f8e609766443728dd0a34258aea1.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-flow-button", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-flow-button/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-flow-button", "descriptionParagraphs": [ "This web part demonstrates displaying the list of flow button of Power Automate." ], "previews": [ { "src": "/images/previews/13fd2d054f2b58561d9213a586f2e78483e6f8e609766443728dd0a34258aea1.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-flow-dashboard/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-flow-dashboard", "title": "Flow Dashboard Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2023-08-03", "updated": "2024-10-01", "authors": [ { "name": "NIshkalank Bezawada", "account": "NishkalankBezawada", "avatar": "https://github.com/NishkalankBezawada.png" } ], "preview": { "src": "/images/previews/67946d5e82ea18269ebdf2efca56ac9d4c250829334c6a004b6ab7d43a0c442f.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-flow-dashboard", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-flow-dashboard/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-flow-dashboard", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/67946d5e82ea18269ebdf2efca56ac9d4c250829334c6a004b6ab7d43a0c442f.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-flow-dashboard/assets/Flowrunhistory.gif", "alt": "Flow run history preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-flow-dashboard/assets/Enablingflows.gif", "alt": "Enabling flows Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-fluentui-9/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-fluentui-9", "title": "Using Fluent UI 9 in SPFx web part", "description": "description", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.23.2", "versionGroup": "1.23", "created": "2022-04-20", "updated": "2026-07-20", "authors": [ { "name": "Nick Brown", "account": "techienickb", "avatar": "https://github.com/techienickb.png" } ], "preview": { "src": "/images/previews/2a7bd0b1c07a7fa7c257a29ac8f98d2f27538d3502497c6f6affcfecafeeeb53.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-fluentui-9", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-fluentui-9/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-fluentui-9", "descriptionParagraphs": [ "description" ], "previews": [ { "src": "/images/previews/2a7bd0b1c07a7fa7c257a29ac8f98d2f27538d3502497c6f6affcfecafeeeb53.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-fluentui-9/assets/FQzO9YjWUAgFlrU.jpg", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.23.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[1].order", "message": "Preview order is duplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-fluentui-theme-variant/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-fluentui-theme-variant", "title": "Fluent UI Theme Variant Web Part", "description": "An example of how to apply a custom theme or a variation of the current SharePoint theme directly to the web part", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2021-08-09", "updated": "2021-08-09", "authors": [ { "name": "Fabio Franzini", "account": "fabiofranzini", "avatar": "https://github.com/fabiofranzini.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-fluentui-theme-variant", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-fluentui-theme-variant/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-fluentui-theme-variant", "descriptionParagraphs": [ "This web part provides an example of how to apply a custom theme or a variation of the current SharePoint theme directly to the web part.", "In this way it is possible to implement the same mechanism that is currently implemented by default by the SharePoint page sections" ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-follow-document/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-follow-document", "title": "Follow Document Web Part", "description": "react-follow-document", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2021-06-21", "updated": "2022-05-17", "authors": [ { "name": "André Lage", "account": "aaclage", "avatar": "https://github.com/aaclage.png" }, { "name": "Mai Mostafa", "account": "Maya-Mostafa", "avatar": "https://github.com/Maya-Mostafa.png" } ], "preview": { "src": "/images/previews/0becc094bec37f6f601d40b127f17d873379c12b72f8e093d23af7588afe7a55.webp", "alt": "react-follow-document", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-follow-document", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-follow-document/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-follow-document", "descriptionParagraphs": [ "identify/follow user key documents from all Tenant and easily access them in Modern Pages and Microsoft Teams" ], "previews": [ { "src": "/images/previews/0becc094bec37f6f601d40b127f17d873379c12b72f8e093d23af7588afe7a55.webp", "alt": "react-follow-document", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-followed-drag-and-drop-grid/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-followed-drag-and-drop-grid", "title": "Followed Drag and Drop Grid Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2022-01-09", "updated": "2022-01-09", "authors": [ { "name": "Adam Wójcik", "account": "Adam-it", "avatar": "https://github.com/Adam-it.png" } ], "preview": { "src": "/images/previews/fda719e877243287d883ae9cea7af18b5304561a565851188805b88745772f0c.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-followed-drag-and-drop-grid", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-followed-drag-and-drop-grid/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-followed-drag-and-drop-grid", "descriptionParagraphs": [ "YOUR-SHORT-DESCRIPTION" ], "previews": [ { "src": "/images/previews/fda719e877243287d883ae9cea7af18b5304561a565851188805b88745772f0c.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-followed-drag-and-drop-grid/assets/appInTeams.png", "alt": "App in Teams", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-followed-drag-and-drop-grid/assets/nothingToFollow.png", "alt": "Nothisg to follow", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-followed-drag-and-drop-grid/assets/sorting.gif", "alt": "Sorting", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-followed-drag-and-drop-grid/assets/dataAsJson.png", "alt": "Data as JSON", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-followed-drag-and-drop-grid/assets/linkSavedInJsonFile.png", "alt": "Link saved to JSON file", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-followedsites/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-followedsites", "title": "Followed Sites Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-05-13", "updated": "2020-05-13", "authors": [ { "name": "Eric Overfield", "account": "eoverfield", "avatar": "https://github.com/eoverfield.png" } ], "preview": { "src": "/images/previews/17c98626ab461b0684b2ebb7c68209b936907111c46c2832fbf51874b5e92cec.webp", "alt": "Followed Sites", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-followedsites", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-followedsites/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-followedsites", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/17c98626ab461b0684b2ebb7c68209b936907111c46c2832fbf51874b5e92cec.webp", "alt": "Followed Sites", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [ { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-form-builder/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-form-builder", "title": "SharePoint - Dynamic Form Builder (WebPart)", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2023-10-08", "updated": "2023-10-08", "authors": [ { "name": "Marc André Schröder-Zhou", "account": "maschroeder-z", "avatar": "https://github.com/maschroeder-z.png" } ], "preview": { "src": "/images/previews/d28e8b17218343e5107595755a348564dc69c23ba0ec9efc1e2b97359aecc43b.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-form-builder", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-form-builder/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-form-builder", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/d28e8b17218343e5107595755a348564dc69c23ba0ec9efc1e2b97359aecc43b.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-form-builder/assets/form-builder-screen-02.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-functional-component-with-data-fetch/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-functional-component-with-data-fetch", "title": "React Functional Component web part with data fetch", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.18.0", "versionGroup": "1.18", "created": "2019-06-14", "updated": "2023-10-10", "authors": [ { "name": "Bill Ayers", "account": "SPDoctor", "avatar": "https://avatars.githubusercontent.com/u/10207194?s=460&v=4" }, { "name": "Don Kirkham", "account": "DonKirkham", "avatar": "https://github.com/DonKirkham.png" } ], "preview": { "src": "/images/previews/3a3f7a06dd39e05c4a8ebaf3084c0e334eb3e005b2e148bef060be59f66811d0.webp", "alt": "React Functional Component web part with data fetch", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-functional-component-with-data-fetch", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-functional-component-with-data-fetch/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-functional-component-with-data-fetch", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/3a3f7a06dd39e05c4a8ebaf3084c0e334eb3e005b2e148bef060be59f66811d0.webp", "alt": "React Functional Component web part with data fetch", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-functional-component/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-functional-component", "title": "React Functional Component Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.8.2", "versionGroup": "1.8", "created": "2019-06-05", "updated": "2019-06-05", "authors": [ { "name": "Bill Ayers", "account": "SPDoctor", "avatar": "https://avatars.githubusercontent.com/u/10207194?s=460&v=4" } ], "preview": { "src": "/images/previews/e266128603212dc3dae005cb60a391ffad76dab0ee5b0c5975046a39e9604cfc.webp", "alt": "React Functional Component web part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-functional-component", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-functional-component/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-functional-component", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/e266128603212dc3dae005cb60a391ffad76dab0ee5b0c5975046a39e9604cfc.webp", "alt": "React Functional Component web part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.8.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-functional-servicescope-hooks/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-functional-servicescope-hooks", "title": "Consuming SPFX Service Scopes using React Hooks", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-03-25", "updated": "2020-03-25", "authors": [ { "name": "Garry Trinder", "account": "garrytrinder", "avatar": "https://github.com/garrytrinder.png" } ], "preview": { "src": "/images/previews/54c9041063bcc3fdb3fd56d79e280725f1ac1626571ea510b9841d1eac88b041.webp", "alt": "Consuming SPFX Service Scopes using React Hooks", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-functional-servicescope-hooks", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-functional-servicescope-hooks/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-functional-servicescope-hooks", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/54c9041063bcc3fdb3fd56d79e280725f1ac1626571ea510b9841d1eac88b041.webp", "alt": "Consuming SPFX Service Scopes using React Hooks", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-functional-stateful-component/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-functional-stateful-component", "title": "React Functional Stateful Component web part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.8.2", "versionGroup": "1.8", "created": "2019-06-05", "updated": "2019-06-05", "authors": [ { "name": "Bill Ayers", "account": "SPDoctor", "avatar": "https://avatars.githubusercontent.com/u/10207194?s=460&v=4" } ], "preview": { "src": "/images/previews/42abdef6f88f43e09fb5eb1fcd30ead0edfb791eabe65730e8542baa5c84c8d3.webp", "alt": "React Functional Stateful Component web part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-functional-stateful-component", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-functional-stateful-component/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-functional-stateful-component", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/42abdef6f88f43e09fb5eb1fcd30ead0edfb791eabe65730e8542baa5c84c8d3.webp", "alt": "React Functional Stateful Component web part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.8.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-gantt/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-gantt", "title": "React Gantt Chart Web Part", "description": "A SharePoint Framework (SPFx) web part that displays project tasks from a SharePoint list as an interactive Gantt chart. Built with @svar-ui/react-gantt and Fluent UI v9, it supports SharePoint pages, Microsoft Teams, and Microsoft 365 (Office) hosts.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.22.2", "versionGroup": "1.22", "created": "2026-03-06", "updated": "2026-03-06", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/5b431a27110f2d00583444af4968ecfe41b30e925fc4dda3dd118add514e6a24.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-gantt", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-gantt/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-gantt", "descriptionParagraphs": [ "A SharePoint Framework (SPFx) web part that displays project tasks from a SharePoint list as an interactive Gantt chart. Built with @svar-ui/react-gantt and Fluent UI v9, it supports SharePoint pages, Microsoft Teams, and Microsoft 365 (Office) hosts." ], "previews": [ { "src": "/images/previews/5b431a27110f2d00583444af4968ecfe41b30e925fc4dda3dd118add514e6a24.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-gantt/assets/sp-react-gant.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-gantt/assets/teams-react-gantt.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-github-badge/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-github-badge", "title": "GitHub Badge Web Part (React)", "description": "Displays information about a GitHub user.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.8.2", "versionGroup": "1.8", "created": "2019-06-06", "updated": "2019-06-06", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" } ], "preview": { "src": "/images/previews/efdc4ed6cc9927108d7c7518a48dcee466333f49bb3907a4911d8d7bf9a67074.webp", "alt": "GitHub Badge (React)", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-github-badge", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-github-badge/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-github-badge", "descriptionParagraphs": [ "Displays information about a GitHub user." ], "previews": [ { "src": "/images/previews/efdc4ed6cc9927108d7c7518a48dcee466333f49bb3907a4911d8d7bf9a67074.webp", "alt": "GitHub Badge (React)", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.8.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-global-news-sp2019/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-global-news-sp2019", "title": "Global News Web Part (SP2019)", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2021-05-22", "updated": "2021-05-22", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/b331d117f091440ae78f0649186fb529a7a468b4636fe58c170f3b7dddd1f8cb.webp", "alt": "Global News", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-global-news-sp2019", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-global-news-sp2019/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-global-news-sp2019", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/b331d117f091440ae78f0649186fb529a7a468b4636fe58c170f3b7dddd1f8cb.webp", "alt": "Global News", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-global-news-sp2019/assets/GlobalNews.png", "alt": "Global News", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-global-news-sp2019/assets/GlobalNews01.png", "alt": "Global News", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Using single part app pages in SharePoint Online", "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-global-news/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-global-news", "title": "Global News Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-04-14", "updated": "2020-04-14", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/537efeb85f82dedb570286bbaf4c0ea6a4c3617da5650a611cac6c0e3de03ef6.webp", "alt": "Global News", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-global-news", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-global-news/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-global-news", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/537efeb85f82dedb570286bbaf4c0ea6a4c3617da5650a611cac6c0e3de03ef6.webp", "alt": "Global News", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-global-news/assets/globalNews.gif", "alt": "Global News", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-global-news/assets/news.jpg", "alt": "Global News", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Using single part app pages in SharePoint Online", "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-google-fit/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-google-fit", "title": "Web part displaying Google Fit information", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.7.1", "versionGroup": "1.7", "created": "2019-01-14", "updated": "2019-01-14", "authors": [ { "name": "Nanddeep Nachan", "account": "nanddeepn", "avatar": "https://github.com/nanddeepn.png" } ], "preview": { "src": "/images/previews/a9085ab945edfa61861af530bf25d10a4190408851354e73a7c6a09181bb5526.webp", "alt": "Web part displaying Google Fit information", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-google-fit", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-google-fit/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-google-fit", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/a9085ab945edfa61861af530bf25d10a4190408851354e73a7c6a09181bb5526.webp", "alt": "Web part displaying Google Fit information", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-google-fit/assets/add-authorized-origins.png", "alt": "Web part displaying Google Fit information", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-google-fit/assets/add-credentials-to-your-project.png", "alt": "Web part displaying Google Fit information", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-google-fit/assets/create-new-project.png", "alt": "Web part displaying Google Fit information", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-google-fit/assets/generate-credentials.png", "alt": "Web part displaying Google Fit information", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-google-fit/assets/oauth-clientid.png", "alt": "Web part displaying Google Fit information", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-google-fit/assets/setup-oauth-consent.png", "alt": "Web part displaying Google Fit information", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-google-fit/assets/sharepoint-run.gif", "alt": "Web part displaying Google Fit information", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.7.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-governor-sharing/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-governor-sharing", "title": "Governor Sharing Web Part", "description": "Shows documents which have been (explicitly) shared within a SharePoint site or Team.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.18.0", "versionGroup": "1.18", "created": "2023-11-24", "updated": "2023-11-24", "authors": [ { "name": "Robin Meure", "account": "robinmeure", "avatar": "https://github.com/robinmeure.png" } ], "preview": { "src": "/images/previews/72445614c4f2466f5598fa86e6cd0f76d4cc5f7514f829069c70ab40a3b6d4f3.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-governor-sharing", "descriptionParagraphs": [ "Shows documents which have been (explicitly) shared within a SharePoint site or Team." ], "previews": [ { "src": "/images/previews/72445614c4f2466f5598fa86e6cd0f76d4cc5f7514f829069c70ab40a3b6d4f3.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/Govenor_Sharing_AddedtoTeam.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/Govenor_Sharing_AddtoSharePointSite.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/Govenor_Sharing_AddtoTeam.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/Govenor_Sharing_AddtoTeamTab.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/Govenor_Sharing_AddtoTeam_Save.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/Govenor_Sharing_AddtoTeam_Search.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/Govenor_Sharing_AddtoTeam_SelectTeam.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/debug.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/screenshot.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/screenshot2.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/SharePoint_Admin_Center_API_Consent.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/SharePoint_Admin_Center_API_Consent_Approve.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/SharePoint_Admin_Center_Enable_app.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/SharePoint_Admin_Center_Manage_apps.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/SharePoint_Admin_Center__Remove_API_Consent.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/Teams_Admin_Center_Manage_apps.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/Teams_Admin_Center_Manage_apps_Upload.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/Teams_Admin_Center_Manage_apps_Uploaded.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-governor-sharing/assets/Troubleshooting_Teams_App_Already_Exists.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[10].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[11].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[12].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[13].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[14].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[15].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[16].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[17].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[18].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[19].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[5].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[6].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[7].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[8].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[9].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 20 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-graph-app-secret-expiration/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-graph-app-secret-expiration", "title": "Applications Secrets Expiration Web Part", "description": "This sample web part shows the list of your applications registered in Azure AD along with their associated client secret/certificate expiration date.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2021-09-17", "updated": "2025-05-26", "authors": [ { "name": "Aimery Thomas", "account": "a1mery", "avatar": "https://github.com/a1mery.png" } ], "preview": { "src": "/images/previews/a5df5eb41e3b003d9ac1519c387ada98680ac5abe3d33ba9d403231886ffe159.webp", "alt": "Preview of web part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-app-secret-expiration", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-app-secret-expiration/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-graph-app-secret-expiration", "descriptionParagraphs": [ "This sample web part shows the list of your applications registered in Azure AD along with their associated client secret/certificate expiration date." ], "previews": [ { "src": "/images/previews/a5df5eb41e3b003d9ac1519c387ada98680ac5abe3d33ba9d403231886ffe159.webp", "alt": "Preview of web part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-graph-auto-batching/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-graph-auto-batching", "title": "Graph Auto Batching Web Part", "description": "This sample shows how to abstract batching graph requests", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension", "Web part" ], "technologies": [ "React" ], "version": "1.13.0-beta.17", "versionGroup": "1.13", "created": "2022-02-03", "updated": "2022-02-03", "authors": [ { "name": "Marcin Wojciechowski", "account": "mgwojciech", "avatar": "https://github.com/mgwojciech.png" } ], "preview": { "src": "/images/previews/48861779eb8e36bb3156fd7a78472980bba8f26fc63354276c23547f37486a93.webp", "alt": "No preview available", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-auto-batching", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-auto-batching/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-graph-auto-batching", "descriptionParagraphs": [ "This sample shows how to abstract batching Graph requests" ], "previews": [ { "src": "/images/previews/48861779eb8e36bb3156fd7a78472980bba8f26fc63354276c23547f37486a93.webp", "alt": "No preview available", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "Dashboard", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0-beta.17", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-graph-azureapps/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-graph-azureapps", "title": "Azure Apps Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2023-05-07", "updated": "2023-05-07", "authors": [ { "name": "Diksha Bhura", "account": "Diksha-Bhura", "avatar": "https://github.com/Diksha-Bhura.png" } ], "preview": { "src": "/images/previews/1fae8b3d2990d33dd76d6b08eea23281c7f25ea9e701260795346274be9e666b.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-azureapps", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-azureapps/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-graph-azureapps", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/1fae8b3d2990d33dd76d6b08eea23281c7f25ea9e701260795346274be9e666b.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-azureapps/assets/Edit-App.gif", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-graph-calendar/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-graph-calendar", "title": "Graph Calendar Web Part", "description": "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.).", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.19.0", "versionGroup": "1.19", "created": "2020-11-06", "updated": "2024-09-12", "authors": [ { "name": "Sébastien Levert", "account": "sebastienlevert", "avatar": "https://github.com/sebastienlevert.png" }, { "name": "Abderahman Moujahid", "account": "Abderahman88", "avatar": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4" } ], "preview": { "src": "/images/previews/223b9fda7fac212fb102c0a6bca01acd1446d933067f907cf20803fc51bcdb11.webp", "alt": "Graph Calendar Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-calendar", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-calendar/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-graph-calendar", "descriptionParagraphs": [ "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.)." ], "previews": [ { "src": "/images/previews/223b9fda7fac212fb102c0a6bca01acd1446d933067f907cf20803fc51bcdb11.webp", "alt": "Graph Calendar Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-calendar/assets/react-graph-calendar-teams.gif", "alt": "Graph Calendar Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.19.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-graph-cascading-managed-metadata/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-graph-cascading-managed-metadata", "title": "Cascading managed metadata Web Part using Graph API", "description": "Shows how to use the Microsoft Graph APIs (beta) for Taxonomy to get the data.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.14.0", "versionGroup": "1.14", "created": "2020-09-02", "updated": "2022-03-02", "authors": [ { "name": "Anoop Tatti", "account": "anoopt", "avatar": "https://avatars.githubusercontent.com/u/9694225?s=460&u=fbb4b27ed944935800d5f6dbc91e71911ce0d4ec&v=4" } ], "preview": { "src": "/images/previews/3e7ad6bb6320582ffc0186f8278f0bc4c1aa1b13ff90e8617b0d02be96f6a73e.webp", "alt": "Cascading managed metadata using Graph API", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-cascading-managed-metadata", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-cascading-managed-metadata/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-graph-cascading-managed-metadata", "descriptionParagraphs": [ "Shows how to use the Microsoft Graph APIs (beta) for Taxonomy to get the data." ], "previews": [ { "src": "/images/previews/3e7ad6bb6320582ffc0186f8278f0bc4c1aa1b13ff90e8617b0d02be96f6a73e.webp", "alt": "Cascading managed metadata using Graph API", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-cascading-managed-metadata/assets/termstore.png", "alt": "Cascading managed metadata using Graph API", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-graph-evalurl/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-graph-evalurl", "title": "Web part showing Url validation for SharePoint using Office Graph", "description": "This sample contains a class that evaluates the url input of a text field against the Microsoft Graph.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-04-15", "updated": "2018-04-15", "authors": [ { "name": "Stefan Bauer", "account": "StfBauer", "avatar": "https://github.com/StfBauer.png" } ], "preview": { "src": "/images/previews/81e1131fe39cea0490691fdd2b1afee02b079ae86cfc1bb81be5ccb8ce26f746.webp", "alt": "Web part showing Url validation for SharePoint using Office Graph", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-evalurl", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-evalurl/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-graph-evalurl", "descriptionParagraphs": [ "This sample contains a class that evaluates the url input of a text field against the Microsoft Graph." ], "previews": [ { "src": "/images/previews/81e1131fe39cea0490691fdd2b1afee02b079ae86cfc1bb81be5ccb8ce26f746.webp", "alt": "Web part showing Url validation for SharePoint using Office Graph", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-evalurl/assets/eval-web-after-site-collection.png", "alt": "Web part showing Url validation for SharePoint using Office Graph", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-evalurl/assets/evaluation-client-searching-for-site-collection.png", "alt": "Web part showing Url validation for SharePoint using Office Graph", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-graph-feedback-form/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-graph-feedback-form", "title": "Feedback Form Web Part", "description": "Sample SPFx React web part which allows sending emails using Microsoft Graph.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-05-15", "updated": "2020-05-15", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" } ], "preview": { "src": "/images/previews/980f61777df6d6acd60e25cdaf25d57e60329964191f06bc755e667b611fef2e.webp", "alt": "Feedback Form", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-feedback-form", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-feedback-form/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-graph-feedback-form", "descriptionParagraphs": [ "Sample SPFx React web part which allows sending emails using Microsoft Graph." ], "previews": [ { "src": "/images/previews/980f61777df6d6acd60e25cdaf25d57e60329964191f06bc755e667b611fef2e.webp", "alt": "Feedback Form", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-graph-groupviewer/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-graph-groupviewer", "title": "Graph Group Viewer Web Part", "description": "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", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2021-09-27", "updated": "2021-09-27", "authors": [ { "name": "Zach Roberts", "account": "zachroberts8668", "avatar": "https://github.com/zachroberts8668.png" } ], "preview": { "src": "/images/previews/593ad9b52e1d31a7497d7bc52637494ea53c0203b9791633529227d8b56b6e32.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-groupviewer", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-groupviewer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-graph-groupviewer", "descriptionParagraphs": [ "This webpart will provide the functionality to 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" ], "previews": [ { "src": "/images/previews/593ad9b52e1d31a7497d7bc52637494ea53c0203b9791633529227d8b56b6e32.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-graph-mgt-client/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-graph-mgt-client", "title": "Graph MGT Client Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2021-04-18", "updated": "2021-04-18", "authors": [ { "name": "Sébastien Levert", "account": "sebastienlevert", "avatar": "https://github.com/sebastienlevert.png" } ], "preview": { "src": "/images/previews/d37c3a2939b1ab5e18e799c5dc626b3508b9172ee55ae89c682f687fbb2b3e5c.webp", "alt": "Web Part in action", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-mgt-client", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-mgt-client/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-graph-mgt-client", "descriptionParagraphs": [ "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 enables scenarios like throttling management, Chaos management and a lot more!" ], "previews": [ { "src": "/images/previews/d37c3a2939b1ab5e18e799c5dc626b3508b9172ee55ae89c682f687fbb2b3e5c.webp", "alt": "Web Part in action", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [ { "code": "text.whitespace", "field": "shortDescription", "message": "Trim leading and trailing whitespace.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-graph-personalemail/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-graph-personalemail", "title": "Personal e-mail Web Part", "description": "Sample React web part showing how to retrieve and display personal e-mail retrieved using the Microsoft Graph.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.6.0", "versionGroup": "1.6", "created": "2018-10-03", "updated": "2018-10-03", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/d981e808d5f957f42ec738842d5231af9c11fe2bd10893b8d07792401f860570.webp", "alt": "Personal e-mail", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-personalemail", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-personalemail/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-graph-personalemail", "descriptionParagraphs": [ "Sample React web part showing how to retrieve and display personal e-mail retrieved using the Microsoft Graph." ], "previews": [ { "src": "/images/previews/d981e808d5f957f42ec738842d5231af9c11fe2bd10893b8d07792401f860570.webp", "alt": "Personal e-mail", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.6.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-graph-pnpjs/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-graph-pnpjs", "title": "Web Part Using PnPJS with MS Graph", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.7.1", "versionGroup": "1.7", "created": "2019-01-09", "updated": "2019-01-09", "authors": [ { "name": "Sergei Sergeev", "account": "s-KaiNet", "avatar": "https://github.com/s-KaiNet.png" } ], "preview": { "src": "/images/previews/6c784dec71365095a0dc12d1336de29dd444f96c40dbc4e7c1e0ad0251db158f.webp", "alt": "Using PnPJS with MS Graph", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-pnpjs", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-pnpjs/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-graph-pnpjs", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/6c784dec71365095a0dc12d1336de29dd444f96c40dbc4e7c1e0ad0251db158f.webp", "alt": "Using PnPJS with MS Graph", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-pnpjs/assets/approve-request.png", "alt": "Using PnPJS with MS Graph", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-pnpjs/assets/approve.png", "alt": "Using PnPJS with MS Graph", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.7.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-graph-profile-awards/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-graph-profile-awards", "title": "My Awards Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.15.0-beta.1", "versionGroup": "1.15", "created": "2022-06-02", "updated": "2022-06-02", "authors": [ { "name": "Luis Mañez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/previews/6d0000516181569f3175896793e224025dc9fe819c1c4e2ed97a4b947434358f.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-profile-awards", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-profile-awards/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-graph-profile-awards", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/6d0000516181569f3175896793e224025dc9fe819c1c4e2ed97a4b947434358f.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.0-beta.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-graph-reports/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-graph-reports", "title": "Graph Usage Reports Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.8.0", "versionGroup": "1.8", "created": "2019-04-09", "updated": "2019-04-09", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/fa88181e635291145b72d0a7a6eab877fe4dbc7e3e33289f1364621d643fc4e2.webp", "alt": "Graph Usage Reports", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-reports", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-reports/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-graph-reports", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/fa88181e635291145b72d0a7a6eab877fe4dbc7e3e33289f1364621d643fc4e2.webp", "alt": "Graph Usage Reports", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-reports/assets/graph-api-permissions-usage-reports.png", "alt": "Graph Usage Reports", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.8.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-graph-schema-extensions/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-graph-schema-extensions", "title": "Read / update MS Graph Custom Schema Extensions Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.5.1-plusbeta", "versionGroup": "1.5", "created": "2018-07-03", "updated": "2018-07-03", "authors": [ { "name": "Luis Mañez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/previews/b6674a6c4c23b73a63e7961d3d469aa789144cc127d5708aa3b3fff7f3e42e72.webp", "alt": "Read / update MS Graph Custom Schema Extensions", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-schema-extensions", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-schema-extensions/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-graph-schema-extensions", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/b6674a6c4c23b73a63e7961d3d469aa789144cc127d5708aa3b3fff7f3e42e72.webp", "alt": "Read / update MS Graph Custom Schema Extensions", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.5.1-plusbeta", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-graph-telephonedirectory/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-graph-telephonedirectory", "title": "Telephone Directory Web Part using React, Ms Graph and SPFx", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2020-11-07", "updated": "2023-03-10", "authors": [ { "name": "Dipen Shah", "account": "dips365", "avatar": "https://avatars.githubusercontent.com/u/40450958?s=460&u=77f108fb56adbed4f87304f15ce71033df667aaf&v=4" }, { "name": "Aimery Thomas", "account": "a1mery", "avatar": "https://avatars.githubusercontent.com/u/7100077?s=460&v=4" }, { "name": "mrkhandev", "account": "mrkhandev", "avatar": "https://github.com/mrkhandev.png" } ], "preview": { "src": "/images/previews/7538b638ce0ce2fea47675bb659338d110713b09dece90b07e6159fab6b3aad8.webp", "alt": "Telephone Directory using React, Ms Graph and SPFx", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-telephonedirectory", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-telephonedirectory/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-graph-telephonedirectory", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/7538b638ce0ce2fea47675bb659338d110713b09dece90b07e6159fab6b3aad8.webp", "alt": "Telephone Directory using React, Ms Graph and SPFx", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-telephonedirectory/assets/Capture.PNG", "alt": "Telephone Directory using React, Ms Graph and SPFx", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-graph-webpart-report/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-graph-webpart-report", "title": "Web Part Report", "description": "This sample web part shows a report of the web parts used on the current site.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2023-03-23", "updated": "2025-10-24", "authors": [ { "name": "Aimery Thomas", "account": "a1mery", "avatar": "https://github.com/a1mery.png" } ], "preview": { "src": "/images/previews/0f03434e6e0d86ff6406b2d06427c26e05f0563939086c449039811bc828b75d.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-webpart-report", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-webpart-report/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-graph-webpart-report", "descriptionParagraphs": [ "This sample web part shows a report of the web parts used on the current site." ], "previews": [ { "src": "/images/previews/0f03434e6e0d86ff6406b2d06427c26e05f0563939086c449039811bc828b75d.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-webpart-report/assets/listView.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-graph-webpart-report/assets/webpartReport.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-group-members-webpart/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-group-members-webpart", "title": "Group Members Web Part – Microsoft 365 Group User Management", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-02-28", "updated": "2025-04-21", "authors": [ { "name": "Nicolas Kheirallah", "account": "NicolasKheirallah", "avatar": "https://github.com/NicolasKheirallah.png" } ], "preview": { "src": "/images/previews/7cfdd8df0c00dca734046c52ead76e7273682a5e0906e47c7ce4e2de16e407e4.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-group-members-webpart", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-group-members-webpart/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-group-members-webpart", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/7cfdd8df0c00dca734046c52ead76e7273682a5e0906e47c7ce4e2de16e407e4.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-group-members-webpart/assets/GroupMembersUI_updated.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-group-members/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-group-members", "title": "Group Members", "description": "List Microsoft 365 group members using Microsoft Graph and display person cards with PnP property controls.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.14.0", "versionGroup": "1.14", "created": "2022-03-30", "updated": "2022-03-30", "authors": [ { "name": "Nick Brown", "account": "techienickb", "avatar": "https://github.com/techienickb.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-group-members", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-group-members/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-group-members", "descriptionParagraphs": [ "List Microsoft 365 group members using Microsoft Graph and display person cards with PnP property controls." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Sample documentation", "description": "Summary, contributors, version history, and usage instructions.", "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-group-members/README.md" } ], "products": [ "SharePoint", "Teams", "Microsoft Graph" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0", "issues": [ { "code": "preview.missing", "field": "thumbnails", "message": "At least one image preview is required.", "severity": "error" }, { "code": "preview.unavailable", "field": "thumbnails", "message": "No usable declared image is available; a labelled fallback is shown.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-group-membership-manager/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-group-membership-manager", "title": "Group Membership Manager Web Part", "description": "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", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.17.2", "versionGroup": "1.17", "created": "2022-08-25", "updated": "2023-05-15", "authors": [ { "name": "Nick Brown", "account": "techienickb", "avatar": "https://github.com/techienickb.png" } ], "preview": { "src": "/images/previews/6aa75f0bccb37245add7ea3f08e65e17a6e7322ecc355f65ec20ec52e5207ec1.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-group-membership-manager", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-group-membership-manager/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-group-membership-manager", "descriptionParagraphs": [ "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" ], "previews": [ { "src": "/images/previews/6aa75f0bccb37245add7ea3f08e65e17a6e7322ecc355f65ec20ec52e5207ec1.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-group-membership-manager/assets/screenshot.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.17.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-groups-teams/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-groups-teams", "title": "All Microsoft 365 Groups and Teams Web Part", "description": "Web part pulls all Microsoft 365 Groups and Teams that the logged in user has access to view.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2021-05-06", "updated": "2023-02-26", "authors": [ { "name": "Alison Collins", "account": "ReactIntern", "avatar": "https://github.com/ReactIntern.png" }, { "name": "Christophe Humbert", "account": "PathToSharePoint", "avatar": "https://github.com/PathToSharePoint.png" } ], "preview": { "src": "/images/previews/0a2fd121bf17950aa05b8b7383b1d9bbc65ca5ff21680ce2bf4bc017b11f9907.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-groups-teams", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-groups-teams/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-groups-teams", "descriptionParagraphs": [ "Web part pulls all Microsoft 365 Groups and Teams that the logged in user has access to view." ], "previews": [ { "src": "/images/previews/0a2fd121bf17950aa05b8b7383b1d9bbc65ca5ff21680ce2bf4bc017b11f9907.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-groups-teams/assets/Table-Display.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-groups-teams/assets/Theme-Display.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-heft-plugin/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-heft-plugin", "title": "Building Custom Heft Plugins for SharePoint Framework", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.22.0", "versionGroup": "1.22", "created": "2026-01-15", "updated": "2026-01-15", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/3ad58f167bcb962c5167f23bfe460b5e9b4b2386ca7d8ba3b36441a13b210b0d.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-heft-plugin", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-heft-plugin/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-heft-plugin", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/3ad58f167bcb962c5167f23bfe460b5e9b4b2386ca7d8ba3b36441a13b210b0d.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-hero-webpart/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-hero-webpart", "title": "Hero Web Part", "description": "This solution creates a customisable Hero web part, it uses a stored collection from the PnP PropertyFieldCollectionData control", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2021-04-02", "updated": "2022-03-11", "authors": [ { "name": "Omar El-Anis", "account": "omarelanis", "avatar": "https://github.com/omarelanis.png" } ], "preview": { "src": "/images/previews/ee17757693ad89e9704580d8436fe42a59f2a1d80df987e0b82da2c96ce0effd.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hero-webpart", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hero-webpart/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-hero-webpart", "descriptionParagraphs": [ "This solution creates a customisable Hero web part, it uses a stored collection from the PnP PropertyFieldCollectionData control" ], "previews": [ { "src": "/images/previews/ee17757693ad89e9704580d8436fe42a59f2a1d80df987e0b82da2c96ce0effd.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [ { "code": "text.whitespace", "field": "shortDescription", "message": "Trim leading and trailing whitespace.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-hero/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-hero", "title": "React Hero Web Part", "description": "A SharePoint Framework (SPFx) web part that displays a rich, fully configurable Hero banner with support for 7 layout modes, image/video backgrounds, call-to-action links, auto-rotation, and full Fluent UI v9 theming. Built with @spteck/react-controls-v2 and runs on SharePoint Online, Microsoft Teams, and Microsoft 365 (Office) hosts.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.22.2", "versionGroup": "1.22", "created": "2026-05-10", "updated": "2026-05-10", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/c43028811e5fbbf67bfc154b8339ec636f9bd8ba9e6b3bb4029199f56fefcc23.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hero", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hero/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-hero", "descriptionParagraphs": [ "A SharePoint Framework (SPFx) web part that displays a rich, fully configurable Hero banner with support for 7 layout modes, image/video backgrounds, call-to-action links, auto-rotation, and full Fluent UI v9 theming. Built with @spteck/react-controls-v2 and runs on SharePoint Online, Microsoft Teams, and Microsoft 365 (Office) hosts." ], "previews": [ { "src": "/images/previews/c43028811e5fbbf67bfc154b8339ec636f9bd8ba9e6b3bb4029199f56fefcc23.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hero/assets/hero1.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hero/assets/hero2.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hero/assets/hero3.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hero/assets/hero4.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hero/assets/hero5.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hero/assets/hero6.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hero/assets/hero7.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[5].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[6].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[7].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 8 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-holidays-calendar/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-holidays-calendar", "title": "Holiday calendar", "description": "Holiday calendar solution contains SPFx web part and Adaptive card extension for Viva connections. SPFx web part provides below functionalities", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension", "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2021-01-29", "updated": "2025-09-28", "authors": [ { "name": "Harminder Singh", "account": "HarminderSethi", "avatar": "https://github.com/HarminderSethi.png" } ], "preview": { "src": "/images/previews/f0dbc952ebf325d1910cee3d27188871d49b2369ca83d2f2bb0cfabdb67aa5b3.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-holidays-calendar", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-holidays-calendar/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-holidays-calendar", "descriptionParagraphs": [ "Holiday calendar solution contains SPFx web part and Adaptive card extension for Viva connections. SPFx web part provides below functionalities" ], "previews": [ { "src": "/images/previews/f0dbc952ebf325d1910cee3d27188871d49b2369ca83d2f2bb0cfabdb67aa5b3.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-holidays-calendar/assets/209691198-4d0cbc31-f0d4-49c8-a1b5-ae8701406221.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "Dashboard", "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-hooks/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-hooks", "title": "React Hooks Form Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2019-08-19", "updated": "2019-08-19", "authors": [ { "name": "Adrian Diaz Cervera", "account": "AdrianDiaz81", "avatar": "https://github.com/AdrianDiaz81.png" } ], "preview": { "src": "/images/previews/d2b7c9aa2cc6f332e60e6e5dd09cfbc5dee0bad358c356168b16c40e67e2cd77.webp", "alt": "React Hooks Form Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hooks", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hooks/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-hooks", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/d2b7c9aa2cc6f332e60e6e5dd09cfbc5dee0bad358c356168b16c40e67e2cd77.webp", "alt": "React Hooks Form Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-hot-desk-booking/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-hot-desk-booking", "title": "React Hot Desk Booking Web Part", "description": "This SharePoint Framework (SPFx) web part enables organizations to efficiently manage shared resource bookings, such as hot desks, parking spots, and lockers. Users can browse available resources, make instant bookings for specific dates, view their existing bookings, and cancel reservations when needed.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2026-06-22", "updated": "2026-06-22", "authors": [ { "name": "sudeepghatak", "account": "sudeepghatak", "avatar": "https://github.com/sudeepghatak.png" } ], "preview": { "src": "/images/previews/75556ac7628bcd5515d82ef98f15b049e7d01b70afa40781f68069f3fec1e367.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hot-desk-booking", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hot-desk-booking/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-hot-desk-booking", "descriptionParagraphs": [ "This SharePoint Framework (SPFx) web part enables organizations to efficiently manage shared resource bookings, such as hot desks, parking spots, and lockers. Users can browse available resources, make instant bookings for specific dates, view their existing bookings, and cancel reservations when needed." ], "previews": [ { "src": "/images/previews/75556ac7628bcd5515d82ef98f15b049e7d01b70afa40781f68069f3fec1e367.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hot-desk-booking/assets/screenshot2.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-htm-templating/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-htm-templating", "title": "HTM (Hyperscript Tagged Markup) Templating Web Part", "description": "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", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2021-08-04", "updated": "2021-08-04", "authors": [ { "name": "Fabio Franzini", "account": "fabiofranzini", "avatar": "https://github.com/fabiofranzini.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-htm-templating", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-htm-templating/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-htm-templating", "descriptionParagraphs": [ "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" ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-hub-site-navigator/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-hub-site-navigator", "title": "Hub Site Navigator", "description": "Hub Site Navigator solution contains SPFx web part that provides", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-11-06", "updated": "2025-11-06", "authors": [ { "name": "Harminder Singh", "account": "HarminderSethi", "avatar": "https://github.com/HarminderSethi.png" } ], "preview": { "src": "/images/previews/f590fb8a2858e939983047c0aba014dc9b77e57100ad1c9405169e92078c45b3.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hub-site-navigator", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hub-site-navigator/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-hub-site-navigator", "descriptionParagraphs": [ "Hub Site Navigator solution contains SPFx web part that provides" ], "previews": [ { "src": "/images/previews/f590fb8a2858e939983047c0aba014dc9b77e57100ad1c9405169e92078c45b3.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hub-site-navigator/assets/HubSiteNavigatorOptions.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-hub-site-navigator/assets/SiteDetails.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-image-editor/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-image-editor", "title": "React Image Editor", "description": "This solution contains an SPFx web part that shows an HTML Image Editor based on canvas and Fluent UI.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2021-03-17", "updated": "2025-04-02", "authors": [ { "name": "Peter Paul Kirschner", "account": "petkir", "avatar": "https://github.com/petkir.png" } ], "preview": { "src": "/images/previews/991275c799a33550110f71343eb5add3512904a9a46f5c9b267c9b6d3a43f1f6.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-image-editor", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-image-editor/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-image-editor", "descriptionParagraphs": [ "This solution contains an SPFx web part that shows an HTML Image Editor based on canvas and Office UI Fabric", "Key features of the Editor", "* Resize", "* Crop", "* Flip", "* Rotate", "* Scale", "* Filter (Grayscale / Sepia)", "* Redo / Undo", "* Histoy of Actions" ], "previews": [ { "src": "/images/previews/991275c799a33550110f71343eb5add3512904a9a46f5c9b267c9b6d3a43f1f6.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-image-editor/assets/screenshot.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-image-gallery/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-image-gallery", "title": "Filterable Image Gallery Web Part", "description": "This sample describe a SPFX application which implement an image gallery with taxonomy base filtering and typed search. This application also implement pagination.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.14.0", "versionGroup": "1.14", "created": "2019-03-01", "updated": "2022-05-23", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/3f77ce832743852aa4c363719ba409656307b0181870d13958d3ba7ecb975c74.webp", "alt": "Filterable Image Gallery Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-image-gallery", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-image-gallery/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-image-gallery", "descriptionParagraphs": [ "This sample describe a SPFX application which implement an image gallery with taxonomy base filtering and typed search. This application also implement pagination." ], "previews": [ { "src": "/images/previews/3f77ce832743852aa4c363719ba409656307b0181870d13958d3ba7ecb975c74.webp", "alt": "Filterable Image Gallery Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-image-magnifier/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-image-magnifier", "title": "Image Magnifier Web Part", "description": "This web part allow to magnify an image, displaying a resolution more detailed through a lens.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.2.0", "versionGroup": "1.2", "created": "2017-09-17", "updated": "2017-09-17", "authors": [ { "name": "Giuliano De Luca", "account": "giuleon", "avatar": "https://github.com/giuleon.png" } ], "preview": { "src": "/images/previews/4525ee28ad36a27cd2b6803690db2b350c16fbc525f2796a6810a29e0b77e59e.webp", "alt": "Image Magnifier", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-image-magnifier", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-image-magnifier/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-image-magnifier", "descriptionParagraphs": [ "This web part allow to magnify an image, displaying a resolution more detailed through a lens." ], "previews": [ { "src": "/images/previews/4525ee28ad36a27cd2b6803690db2b350c16fbc525f2796a6810a29e0b77e59e.webp", "alt": "Image Magnifier", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.2.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-image-slider-list-taxonomy-filter/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-image-slider-list-taxonomy-filter", "title": "Image Slider from Photo Gallery using Taxonomy Filter Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.6.0", "versionGroup": "1.6", "created": "2019-03-01", "updated": "2019-03-01", "authors": [ { "name": "Sudhir Rawat", "account": "sudhir007rawat", "avatar": "https://github.com/sudhir007rawat.png" } ], "preview": { "src": "/images/previews/e10b6208cec2d64add0d888e1a1d83b13b98a7e4bcb064c1f868e39258900e17.webp", "alt": "Image Slider from Photo Gallery using Taxonomy Filter", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-image-slider-list-taxonomy-filter", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-image-slider-list-taxonomy-filter/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-image-slider-list-taxonomy-filter", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/e10b6208cec2d64add0d888e1a1d83b13b98a7e4bcb064c1f868e39258900e17.webp", "alt": "Image Slider from Photo Gallery using Taxonomy Filter", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.6.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-instagram/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-instagram", "title": "Instagram Feed Web Part", "description": "Sample web part to showcase an Instagram feed.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2023-03-12", "updated": "2023-03-12", "authors": [ { "name": "Reshmee Auckloo", "account": "reshmee011", "avatar": "https://github.com/reshmee011.png" } ], "preview": { "src": "/images/previews/ca7d55172c68d8e3530fea2c86c91cd859fd4adfc1b9c4e38a4e4e26ec814295.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-instagram", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-instagram/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-instagram", "descriptionParagraphs": [ "Sample web part to showcase an Instagram feed." ], "previews": [ { "src": "/images/previews/ca7d55172c68d8e3530fea2c86c91cd859fd4adfc1b9c4e38a4e4e26ec814295.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-interactive-map/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-interactive-map", "title": "Interactive Map", "description": "This web parts displays a (world) map. An editor can set custom markers directly in the map. Each marker can configured individually. It is possible to determine the color of the pin, the icon in the pin or what should happen when the pin is clicked. It is even possible to change the tile layer in the web part properties.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.23.0", "versionGroup": "1.23", "created": "2023-01-19", "updated": "2026-07-01", "authors": [ { "name": "Sergej Schwabauer", "account": "SPFxAppDev", "avatar": "https://github.com/SPFxAppDev.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/195e9323697479fbcca54942205d08bb61b44615b18f94eb73d066e6a7ee303e.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-interactive-map", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-interactive-map/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-interactive-map", "descriptionParagraphs": [ "This web parts displays a (world) map. An editor can set custom markers directly in the map. Each marker can configured individually. It is possible to determine the color of the pin, the icon in the pin or what should happen when the pin is clicked. It is even possible to change the tile layer in the web part properties." ], "previews": [ { "src": "/images/previews/195e9323697479fbcca54942205d08bb61b44615b18f94eb73d066e6a7ee303e.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-interactive-map/assets/MapStyleSatellite.gif", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-interactive-map/assets/MapWPOverview.gif", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-interactive-map/assets/WPContextMenu.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-interactive-map/assets/WPPreview.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.23.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-invitation-manager/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-invitation-manager", "title": "Azure Active Directory invitation manager Graph API samples", "description": "Sample SharePoint Framework web parts built using React illustrating the possibility to use Graph API to invite external users into the Azure Active Directory.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.3.0", "versionGroup": "1.3", "created": "2017-10-09", "updated": "2017-10-09", "authors": [ { "name": "Giuliano De Luca", "account": "giuleon", "avatar": "https://github.com/giuleon.png" } ], "preview": { "src": "/images/previews/97ddd46dfa9fba42a5905edb91989654dfd3b3bebc3ef27dd44f42a64b0d3221.webp", "alt": "Azure Active Directory invitation manager Graph API samples", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-invitation-manager", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-invitation-manager/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-invitation-manager", "descriptionParagraphs": [ "Sample SharePoint Framework web parts built using React illustrating the possibility to use Graph API to invite external users into the Azure Active Directory." ], "previews": [ { "src": "/images/previews/97ddd46dfa9fba42a5905edb91989654dfd3b3bebc3ef27dd44f42a64b0d3221.webp", "alt": "Azure Active Directory invitation manager Graph API samples", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.3.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-invoice-generator/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-invoice-generator", "title": "Invoice Generator Web Part", "description": "SPFx Invoice Generator Web part using PnP JS allows users to create invoices for different clients or customers.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.23.0", "versionGroup": "1.23", "created": "2023-05-25", "updated": "2026-07-01", "authors": [ { "name": "Rishabh Shukla", "account": "rishabhshukla12", "avatar": "https://github.com/rishabhshukla12.png" }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/987b903119efbfd08f81c63cb1d46588e5cb01ed4e9941b82c65d85274b078b0.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-invoice-generator", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-invoice-generator/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-invoice-generator", "descriptionParagraphs": [ "SPFx Invoice Generator Web part using PnP JS allows users to create invoices for different clients or customers. Users can add items to the invoice using add item button, and the application calculates the subtotal, tax, and total amount. The application also generates PDF versions of the invoices. To obtain customer names and addresses, the application retrieve data from a SharePoint list and present them in dropdown menus for use in the application. The user interface components are designed and implemented using the Fluent UI library. Additionally, the @react-pdf/renderer library is utilized to generate the PDF versions of the invoices. Company Logo, Company Name, Address and Tax rate can be updated using web part properties." ], "previews": [ { "src": "/images/previews/987b903119efbfd08f81c63cb1d46588e5cb01ed4e9941b82c65d85274b078b0.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-invoice-generator/assets/invoice.PNG", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-invoice-generator/assets/invoiceList.PNG", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-invoice-generator/assets/InvoicePDF.PNG", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-invoice-generator/assets/noInvoicesFound.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.23.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-ioc-tests/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-ioc-tests", "title": "React Inversion Of Control Web Part with Unit Tests using Jest and Enzyme", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2019-03-20", "updated": "2019-03-20", "authors": [ { "name": "Paul Ryan", "account": "paulryan", "avatar": "https://github.com/paulryan.png" } ], "preview": { "src": "/images/previews/c910e2e56192caf2ab1282bdbe0c53362f6a3f55108fa6d5441cdcc31678844b.webp", "alt": "React Inversion Of Control Web Part with Unit Tests using Jest and Enzyme", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-ioc-tests", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-ioc-tests/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-ioc-tests", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/c910e2e56192caf2ab1282bdbe0c53362f6a3f55108fa6d5441cdcc31678844b.webp", "alt": "React Inversion Of Control Web Part with Unit Tests using Jest and Enzyme", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-item-History/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-item-history", "title": "Item History Web Part", "description": "This listview command is used to show the past versions of the selected list item in a grid.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-06-15", "updated": "2018-06-15", "authors": [ { "name": "Russell Gove", "account": "russgove", "avatar": "https://github.com/russgove.png" } ], "preview": { "src": "/images/previews/83406bbfc6794430cd7f13ce4b9eb5b7a5085c437323c475e4905ed21a764b7a.webp", "alt": "Item History", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-item-History", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-item-History/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-item-History", "descriptionParagraphs": [ "This listview command is used to show the past versions of the selected list item in a grid." ], "previews": [ { "src": "/images/previews/83406bbfc6794430cd7f13ce4b9eb5b7a5085c437323c475e4905ed21a764b7a.webp", "alt": "Item History", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-jest-testing/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-jest-testing", "title": "React Jest Testing sample Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.8.2", "versionGroup": "1.8", "created": "2019-06-23", "updated": "2019-06-23", "authors": [ { "name": "Velin Georgiev", "account": "VelinGeorgiev", "avatar": "https://github.com/VelinGeorgiev.png" } ], "preview": { "src": "/images/previews/8979784f4af67f1990ee46d59afd7620367e72bd823f27f380b2c433c093dee4.webp", "alt": "React Jest Testing sample", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-jest-testing", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/8979784f4af67f1990ee46d59afd7620367e72bd823f27f380b2c433c093dee4.webp", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-add-artifacts-to-release.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-add-job.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-add-release-task.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-all-build-steps-done.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-appcatalog.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-bash-args.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-bash.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-change-name.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-ci-enabled.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-edit-build.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-edit-continious.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-goto-build.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-goto-buld.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-new-project.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-new-release.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-node.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-node8.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-office365cli-script.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-overview.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-repo-config.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-repos.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-select-repo.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-select-template.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-spfx.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-success.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-suggest.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-ubuntu.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-vars.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github.PNG", "alt": "React Jest Testing sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-jest-testing/assets/SPFx-jest-coverage.png", "alt": "React Jest Testing sample", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.8.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-json-form/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-json-form", "title": "JSON form builder Web Part", "description": "Build a custom form with ease", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.17.1", "versionGroup": "1.17", "created": "2023-05-16", "updated": "2023-05-16", "authors": [ { "name": "Dan Toft", "account": "Tanddant", "avatar": "https://github.com/Tanddant.png" } ], "preview": { "src": "/images/previews/999ab5588b6a3de2149bbb3bf10123d6563d609385544933be5822c8617e5246.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-json-form", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-json-form/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-json-form", "descriptionParagraphs": [ "Really easy way for the users to build and use a custom form without having to worry about having to setup a SharePoint list, instead stores the data directly in a document library" ], "previews": [ { "src": "/images/previews/999ab5588b6a3de2149bbb3bf10123d6563d609385544933be5822c8617e5246.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.17.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-kanban-board/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-kanban-board", "title": "Kanban Board Web part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.22.1", "versionGroup": "1.22", "created": "2020-07-02", "updated": "2026-01-23", "authors": [ { "name": "Ram Prasad Meenavalli", "account": "RamPrasadMeenavalli", "avatar": "https://github.com/RamPrasadMeenavalli.png" }, { "name": "Daniel Westerdale", "account": "westerdaled", "avatar": "https://avatars.githubusercontent.com/u/937208?s=460&v=4" }, { "name": "Peter Paul Kirschner", "account": "petkir", "avatar": "https://github.com/petkir.png" }, { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" } ], "preview": { "src": "/images/previews/d7ebe053da5d2070ced7db9b4532e29e090a340c11e37908f088cd1fb158eaf1.webp", "alt": "Kanban Board Web part in action", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-kanban-board", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-kanban-board/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-kanban-board", "descriptionParagraphs": [ "This solution contains an SPFx web part which shows a Kanban board. The web part uses the default columns of the SharePoint Tasks list for showing the board's columns and the tasks." ], "previews": [ { "src": "/images/previews/d7ebe053da5d2070ced7db9b4532e29e090a340c11e37908f088cd1fb158eaf1.webp", "alt": "Kanban Board Web part in action", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-kanban-board/assets/kanbanimg1.png", "alt": "Kanban Board Web part configuration of a bucket", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-kanban-board/assets/kanbanimg2.png", "alt": "Kanban Board Web part item View", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-kanban-board/assets/kanbanimg3.png", "alt": "Kanban Board Web part task list selection and status column order as bucket", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-kiota-custom-api-client/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-kiota-custom-api-client", "title": "React Kiota Custom API Client Web Part", "description": "Using Kiota to generate a client to your AzureAd API and use it from a SPFx webpart.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2022-11-11", "updated": "2022-11-11", "authors": [ { "name": "Luis Manez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/previews/61860401beebfb9429237b53158b0a2a2602c880af9d0e26412887a7221e73fd.webp", "alt": "React Kiota Custom API Client architecture", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-kiota-custom-api-client", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-kiota-custom-api-client/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-kiota-custom-api-client", "descriptionParagraphs": [ "This sample shows how you can generate a client for your custom API using Kiota, and how to use that client in an SPFx webpart. The sample contains a custom API that is secured by Azure AD and interacts with Microsoft Graph API to do some basic operations with the Teams endpoint (it allows to list all the Teams in the tenant, to get detailed info for a given Team, and to Provision a new Team with some preconfigured channels)." ], "previews": [ { "src": "/images/previews/61860401beebfb9429237b53158b0a2a2602c880af9d0e26412887a7221e73fd.webp", "alt": "React Kiota Custom API Client architecture", "isFallback": false } ], "references": [ { "title": "Getting started with SharePoint Framework", "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/set-up-your-developer-tenant" }, { "title": "Microsoft Kiota", "description": "Official documentation about Microsoft Kiota.", "url": "https://microsoft.github.io/kiota/" }, { "title": "Microsoft 365 Patterns and Practices", "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.", "url": "https://aka.ms/m365pnp" } ], "products": [ "SharePoint", "Microsoft Teams", "AzureAD", "Microsoft Graph" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-knowledge-source-health/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-knowledge-source-health", "title": "Knowledge Source Health", "description": "A SharePoint Framework web part that audits a site's document libraries against the documented constraints of Copilot Studio knowledge sources, and flags the content that will silently fail to ground.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.23.2", "versionGroup": "1.23", "created": "2026-08-15", "updated": "2026-08-15", "authors": [ { "name": "Elliot Margot", "account": "OwnOptic", "avatar": "https://github.com/OwnOptic.png" } ], "preview": { "src": "/images/previews/718085ef5171983625e212ceeedd2a080f78452f5e553882c589b2bb2add7ee4.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-knowledge-source-health", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-knowledge-source-health/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-knowledge-source-health", "descriptionParagraphs": [ "A SharePoint Framework web part that audits a site's document libraries against the documented constraints of Copilot Studio knowledge sources, and flags the content that will silently fail to ground." ], "previews": [ { "src": "/images/previews/718085ef5171983625e212ceeedd2a080f78452f5e553882c589b2bb2add7ee4.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-knowledge-source-health/assets/screenshot-scorecard.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.23.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-legallens/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-legallens", "title": "LegalLens SPFx Solution", "description": "AI-powered contract management and e-signature platform built on SharePoint Online. Includes an SPFx web part for internal users and a vendor-facing signing flow backed by Azure Functions — no SharePoint access required for external signers.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.22.0", "versionGroup": "1.22", "created": "2026-04-10", "updated": "2026-04-10", "authors": [ { "name": "Sai Siva Ram Bandaru", "account": "saiiiiiii", "avatar": "https://github.com/saiiiiiii.png" }, { "name": "Antanina Druzhkina", "account": "Ateina", "avatar": "https://github.com/Ateina.png" } ], "preview": { "src": "/images/previews/b0da2647a20013116a6530bb71e661e367a758ea331d18b99fe99c9a32628350.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-legallens", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-legallens/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-legallens", "descriptionParagraphs": [ "AI-powered contract management and e-signature platform built on SharePoint Online. Includes an SPFx web part for internal users and a vendor-facing signing flow backed by Azure Functions — no SharePoint access required for external signers." ], "previews": [ { "src": "/images/previews/b0da2647a20013116a6530bb71e661e367a758ea331d18b99fe99c9a32628350.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-legallens/assets/placeholder-architecture.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-legallens/assets/placeholder-business-impact.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-links/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-links", "title": "Links web part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10", "versionGroup": "1.10", "created": "2018-05-01", "updated": "2018-05-01", "authors": [ { "name": "Eric Overfield", "account": "eoverfield", "avatar": "https://github.com/eoverfield.png" } ], "preview": { "src": "/images/previews/d9941580ee547bcdb52caab5487a3b308b60159917ebb0ee8d6e391bdd032f4b.webp", "alt": "Links web part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-links", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-links/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-links", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/d9941580ee547bcdb52caab5487a3b308b60159917ebb0ee8d6e391bdd032f4b.webp", "alt": "Links web part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10", "issues": [ { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-list-dashboard/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-list-dashboard", "title": "List Dashboard", "description": "One versatile web part that turns any SharePoint list or library into a dashboard - stat, KPI tiles, bar, column, pie, donut, line, area, or table - with colourblind-safe palettes, status-vs-target colouring, and number formatting, and no Power BI or external chart library.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2026-09-10", "updated": "2026-09-10", "authors": [ { "name": "Vijay Kumar G", "account": "gvijaikumar9", "avatar": "https://github.com/gvijaikumar9.png" } ], "preview": { "src": "/images/previews/3133ef7a2456a7fd12b410c10175aad82d1ceccded56e577d47045579b390fea.webp", "alt": "A full dashboard page composed of several List Dashboard web parts - KPI tiles, donut, bar, column, pie, line, area, and a table - from one SharePoint list", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-dashboard", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-dashboard/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-list-dashboard", "descriptionParagraphs": [ "List Dashboard is a single, versatile web part that visualizes any SharePoint list or library without Power BI. Pick a list, choose a display type, and it renders: a single Stat number, KPI Tiles by category, Bar or Column charts, Pie or Donut, a Line or Area trend over a date column (bucketed by day, week, or month), or a sortable Table.", "Numeric columns can be aggregated (count, sum, average, min, max) and grouped by a category column. Colour modes include a colourblind-safe categorical palette (Vibrant, Soft, Mild, Deep), a value gradient, and status-vs-target colouring (green/amber/red against thresholds, each paired with a glyph so colour is never the only signal). Values format as compact, plain number, currency, or percent of total. Because it is one configurable web part, you place it several times on a page to compose a full dashboard from your own lists.", "Every visual is pure CSS or inline SVG and theme-aware, so there is no external charting dependency and no Power BI licence required. It reads each list's real columns, expands person/lookup fields correctly, ignores fields not on the bound list, and supports full-width sections. It ships with built-in demo data so every display type renders the moment you drop it on a page, before you bind a list." ], "previews": [ { "src": "/images/previews/3133ef7a2456a7fd12b410c10175aad82d1ceccded56e577d47045579b390fea.webp", "alt": "A full dashboard page composed of several List Dashboard web parts - KPI tiles, donut, bar, column, pie, line, area, and a table - from one SharePoint list", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-dashboard/assets/properties-1.png", "alt": "The List Dashboard property pane, showing the list, display type, field mapping, and appearance options", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are custom controls that appear inside the SharePoint page.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-list-form/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-list-form", "title": "List Form Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2017-11-24", "updated": "2022-09-05", "authors": [ { "name": "Dany Wyss", "account": "DanyWyss", "avatar": "https://github.com/DanyWyss.png" }, { "name": "Harsha Vardhini", "account": "Harshagracy", "avatar": "https://github.com/Harshagracy.png" }, { "name": "Ryan Schouten", "account": "sharepointknight", "avatar": "https://github.com/sharepointknight.png" }, { "name": "Abderahman Moujahid", "account": "Abderahman88", "avatar": "https://github.com/Abderahman88.png" }, { "name": "Fredrik Thorild", "account": "fthorild", "avatar": "https://github.com/fthorild.png" }, { "name": "Ari Gunawan", "account": "AriGunawan", "avatar": "https://github.com/AriGunawan.png" } ], "preview": { "src": "/images/previews/697e5ebeb7d47e0925fc9c2dee1c892a06151f30974b0dce519271d7fcf419d0.webp", "alt": "List Form Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-form", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-form/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-list-form", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/697e5ebeb7d47e0925fc9c2dee1c892a06151f30974b0dce519271d7fcf419d0.webp", "alt": "List Form Web Part", "isFallback": false } ], "references": [], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-list-items-menu-sp2019/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-list-items-menu-sp2019", "title": "List Items Menu (SP2019 Version)", "description": "Allows user create a navigation menu , grouped by any column of document library. When the user clicks on the header it dynamically load documents.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2021-05-06", "updated": "2021-05-06", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/bcc5e51794dfa178ce32191e91293e57086a94222526ed6db1d9d439c771f3e6.webp", "alt": "List Items Menu", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-items-menu-sp2019", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-items-menu-sp2019/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-list-items-menu-sp2019", "descriptionParagraphs": [ "Allows user create a navigation menu , grouped by any column of document library. When the user clicks on the header it dynamically load documents." ], "previews": [ { "src": "/images/previews/bcc5e51794dfa178ce32191e91293e57086a94222526ed6db1d9d439c771f3e6.webp", "alt": "List Items Menu", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-items-menu-sp2019/assets/react-list-item-menu.png", "alt": "List Items Menu", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-items-menu-sp2019/assets/react-list-item-menu2.png", "alt": "List Items Menu", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-list-items-menu/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-list-items-menu", "title": "List Items Menu Web Part", "description": "Allows user create a navigation menu , grouped by any column of document library. When the user clicks on the header it dynamically load documents.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2021-02-18", "updated": "2021-10-31", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" }, { "name": "Mohammed Amer", "account": "mohammadamer", "avatar": "https://avatars.githubusercontent.com/u/19314043?s=460&u=79acb7fd0ad466e1040ddd8a739fa93385018b81&v=4" } ], "preview": { "src": "/images/previews/e817e52ef15659651d2b7ac826e5488bde2d2c56d4cdf9f34ce3c50320468b91.webp", "alt": "List Items Menu", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-items-menu", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-items-menu/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-list-items-menu", "descriptionParagraphs": [ "Allows user create a navigation menu , grouped by any column of document library. When the user clicks on the header it dynamically load documents." ], "previews": [ { "src": "/images/previews/e817e52ef15659651d2b7ac826e5488bde2d2c56d4cdf9f34ce3c50320468b91.webp", "alt": "List Items Menu", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-items-menu/assets/reactListItems1.JPG", "alt": "List Items Menu", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-items-menu/assets/reactListItems2.JPG", "alt": "List Items Menu", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-items-menu/assets/reactListItems3.JPG", "alt": "List Items Menu", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-list-search/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-list-search", "title": "List Search Web Part", "description": "This list search web part allows the user to show data from lists or libraries.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2020-12-20", "updated": "2025-10-17", "authors": [ { "name": "Alberto Gutierrez perez", "account": "albegut", "avatar": "https://github.com/albegut.png" } ], "preview": { "src": "/images/previews/f30ebc498a96ccb2b8ecd088d978053fd4c450286723bc4d92017db5bc9c7fe4.webp", "alt": "List Search", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-search", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-search/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-list-search", "descriptionParagraphs": [ "This list search web part allows the user to show data from lists or libraries." ], "previews": [ { "src": "/images/previews/f30ebc498a96ccb2b8ecd088d978053fd4c450286723bc4d92017db5bc9c7fe4.webp", "alt": "List Search", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-search/assets/docInModal.gif", "alt": "List Search", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-search/assets/docInNewTab.gif", "alt": "List Search", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-search/assets/dynamicData.gif", "alt": "List Search", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-search/assets/itemCurrentData.gif", "alt": "List Search", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-search/assets/itemSelectedData.gif", "alt": "List Search", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-search/assets/redirectToUrl.gif", "alt": "List Search", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-search/assets/selectFieldRenderType.gif", "alt": "List Search", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-list-view-metrics/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-list-view-metrics", "title": "List View Metrics Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.18.2", "versionGroup": "1.18", "created": "2024-12-25", "updated": "2024-12-31", "authors": [ { "name": "tvahk", "account": "tvahk", "avatar": "https://github.com/tvahk.png" } ], "preview": { "src": "/images/previews/6575d0d5ddf286d7a3b88b7307a03f09167aa2ec5ba7680cfbb4abd01c962f48.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-view-metrics", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-view-metrics/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-list-view-metrics", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/6575d0d5ddf286d7a3b88b7307a03f09167aa2ec5ba7680cfbb4abd01c962f48.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-view-metrics/assets/asset2.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-view-metrics/assets/asset3.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-view-metrics/assets/asset4.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-list-view-metrics/assets/asset5.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-lists-hide/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-lists-hide", "title": "Hide Lists Web Part", "description": "SPFx Web part to Hide/UnHide lists in a Site Collection's Site Contents Page.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.14", "versionGroup": "1.14", "created": "2022-02-27", "updated": "2022-02-27", "authors": [ { "name": "Sandeep Unnikrishnan", "account": "SandeepDev365", "avatar": "https://github.com/SandeepDev365.png" } ], "preview": { "src": "/images/previews/c38b87ae699834f7ef2d3b6ed6c1ec9d6d2a02f6ee0197841f0c742377863628.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-lists-hide", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-lists-hide/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-lists-hide", "descriptionParagraphs": [ "SPFx Web part to Hide/UnHide lists in a Site Collection's Site Contents Page." ], "previews": [ { "src": "/images/previews/c38b87ae699834f7ef2d3b6ed6c1ec9d6d2a02f6ee0197841f0c742377863628.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-lists-hide/assets/listHidewp.gif", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14", "issues": [ { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-listview-context-ecb/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-listview-context-ecb", "title": "Employee ListView Contextual Menu", "description": "This small sample illustrates how to extend the PnP React SPFx ListView control with a contextual menu.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2023-01-01", "updated": "2023-01-01", "authors": [ { "name": "Markus Moeller", "account": "mmsharepoint", "avatar": "https://github.com/mmsharepoint.png" } ], "preview": { "src": "/images/previews/fb6219f17cb07d551ccb25f2b9541d27b9adf8a4734a3800aa799293a9d46ae6.webp", "alt": "Context or ECB menu", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-listview-context-ecb", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-listview-context-ecb/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-listview-context-ecb", "descriptionParagraphs": [ "This small sample illustrates how to extend the PnP React SPFx ListView control with a contextual menu." ], "previews": [ { "src": "/images/previews/fb6219f17cb07d551ccb25f2b9541d27b9adf8a4734a3800aa799293a9d46ae6.webp", "alt": "Context or ECB menu", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-listview-context-ecb/assets/03_employeelistview_ecb_clicked3.png", "alt": "Context or ECB menu action clicked", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-lob-integration/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-lob-integration", "title": "LOB Integration web part", "description": "This web part allows you to learn how to consume 3rd party APIs, secured with Azure Active Directory, in the context of SharePoint Framework.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10", "versionGroup": "1.10", "created": "2018-05-01", "updated": "2018-05-01", "authors": [ { "name": "Microsoft 365 & Power Platform Community", "account": "pnp", "avatar": "https://github.com/pnp.png" } ], "preview": { "src": "/images/previews/b477c3b2c840d12b3391f32c3f394466850ace23cb6fb059adcc42f176594e93.webp", "alt": "LOB Integration web part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-lob-integration", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-lob-integration/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-lob-integration", "descriptionParagraphs": [ "This web part allows you to learn how to consume 3rd party APIs, secured with Azure Active Directory, in the context of SharePoint Framework." ], "previews": [ { "src": "/images/previews/b477c3b2c840d12b3391f32c3f394466850ace23cb6fb059adcc42f176594e93.webp", "alt": "LOB Integration web part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10", "issues": [ { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-m365-search-hub/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-m365-search-hub", "title": "Microsoft 365 Search Hub", "description": "A custom Microsoft 365 search experience built on the Microsoft Search API in Microsoft Graph. Demonstrates the architecture behind a search web part rather than the search box itself.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.23.2", "versionGroup": "1.23", "created": "2026-07-28", "updated": "2026-07-28", "authors": [ { "name": "João Livio", "account": "jtlivio", "avatar": "https://github.com/jtlivio.png" } ], "preview": { "src": "/images/previews/88eb718156fdb5c4138a250203ad22dcfa4a1b664a1ccc6ef6a2914b8d67512e.webp", "alt": "Search results across documents, pages and sites, with filters and sort in a toolbar", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-m365-search-hub", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-m365-search-hub/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-m365-search-hub", "descriptionParagraphs": [ "Searches documents, pages, sites and list items through the Microsoft Search API in Microsoft Graph, from one search box, with a single Sites.Read.All permission.", "The sample exists for the case where the search that comes with SharePoint does not fit the problem and somebody has to write code: a page where search belongs among the other content, a portal where only certain sites matter, or results that need the organisation's own context on them.", "What it demonstrates is the architecture. Query building and result normalisation are pure functions; concurrency lives in one service, with debounce, a short cache, superseded responses discarded and paging; the interface is composed from Fluent UI v9 with the SharePoint theme bridged onto it, and a denied permission, an expired sign-in, throttling and a service error each get a state of their own rather than one generic failure.", "Built on SPFx 1.23.2 with the Heft toolchain. 163 unit tests cover the query building, result normalisation, cache, service and search state, including the races between debounce, superseded responses and unmount." ], "previews": [ { "src": "/images/previews/88eb718156fdb5c4138a250203ad22dcfa4a1b664a1ccc6ef6a2914b8d67512e.webp", "alt": "Search results across documents, pages and sites, with filters and sort in a toolbar", "isFallback": false } ], "references": [ { "title": "Use the Microsoft Search API to query data", "description": "How to scope a search request by entity type, page the results and select the properties that come back.", "url": "https://learn.microsoft.com/graph/api/resources/search-api-overview" }, { "title": "Use the MSGraphClientV3 to connect to Microsoft Graph", "description": "The client the SharePoint Framework provides for calling Microsoft Graph, and how to get hold of it.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/use-msgraph" }, { "title": "Manage access to Microsoft Entra ID-secured APIs", "description": "How an administrator approves the permission a solution requests, and which role is required to approve Microsoft Graph.", "url": "https://learn.microsoft.com/sharepoint/api-access" }, { "title": "Supporting section backgrounds", "description": "The SPFx ThemeProvider service, which is how a web part follows the theme of the section it sits in.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" } ], "products": [ "SharePoint", "Microsoft Graph" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.23.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-m365-services-health/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-m365-services-health", "title": "Service Health for Microsoft 365 Web Part", "description": "Service Health for Microsoft 365 solution show the health status for all the Microsoft 365 services", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2023-02-03", "updated": "2025-09-28", "authors": [ { "name": "Harminder Singh", "account": "HarminderSethi", "avatar": "https://github.com/HarminderSethi.png" } ], "preview": { "src": "/images/previews/37bad56edfd927007c349b6640e409751aa931f6e6155a843d3d2edaa02e7b01.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-m365-services-health", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-m365-services-health/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-m365-services-health", "descriptionParagraphs": [ "Service Health for Microsoft 365 solution show the health status for all the M365 services" ], "previews": [ { "src": "/images/previews/37bad56edfd927007c349b6640e409751aa931f6e6155a843d3d2edaa02e7b01.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-manage-hublevel-subscriptions/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-manage-hublevel-subscriptions", "title": "Subscription Manager Web Part", "description": "This sample web part demonstrates managing the list subscriptions (sharepoint webhooks) and action to renew the webhook expiration date using Rest calls.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2023-09-01", "updated": "2024-10-02", "authors": [ { "name": "NIshkalank Bezawada", "account": "NishkalankBezawada", "avatar": "https://github.com/NishkalankBezawada.png" } ], "preview": { "src": "/images/previews/7cc53c045e6813506f8c0bbad124f453f011199a180cdd00c04f524f9d8ffbf5.webp", "alt": "Subscription Manager", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-hublevel-subscriptions", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-hublevel-subscriptions/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-manage-hublevel-subscriptions", "descriptionParagraphs": [ "This sample web part demonstrates managing the list subscriptions (sharepoint webhooks) and action to renew the webhook expiration date using Rest calls. The webpart is to be added at Hubsite level or the sites associated to the hubsite, on selection of the site, it will list out the lists available. On list/library selection, the available subscriptions is displayed. Depending upon the expiry date of the subscription, 'Renew subscription' action can be performed. The subscription (webhook expiry renewal date) renewal date is set to 179 days, as the default days are 180." ], "previews": [ { "src": "/images/previews/7cc53c045e6813506f8c0bbad124f453f011199a180cdd00c04f524f9d8ffbf5.webp", "alt": "Subscription Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-hublevel-subscriptions/assets/ConfiguringWebpart.gif", "alt": "Configuring subscription manager webpart", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-hublevel-subscriptions/assets/RenewingSubscriptions.gif", "alt": "Renewing webhook subscriptions", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-hublevel-subscriptions/assets/ConfiguringWebpart-NonHubrelatedSite.gif", "alt": "Configuration error while adding the webpart to Non-Hub related sites", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Get Subscription", "description": "Get SharePoint webhook subscriptions", "url": "https://learn.microsoft.com/sharepoint/dev/apis/webhooks/lists/get-subscription" }, { "title": "Update Subscription", "description": "Update SharePoint webhook subscriptions", "url": "https://learn.microsoft.com/sharepoint/dev/apis/webhooks/lists/update-subscription" } ], "products": [ "SharePoint", "WebHooks", "Subscriptions", "Update Subscriptions", "Get Subscriptions" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-manage-o365-groups/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-manage-o365-groups", "title": "Manage Office 365 Groups with SPFx", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2020-01-01", "updated": "2020-01-01", "authors": [ { "name": "Nanddeep Nachan", "account": "nanddeepn", "avatar": "https://github.com/nanddeepn.png" }, { "name": "Smita Nachan", "account": "SmitaNachan", "avatar": "https://github.com/SmitaNachan.png" } ], "preview": { "src": "/images/previews/d526f0c6420af1e671234f8b25acab68386d8037c105f4370d99ab8ad312824a.webp", "alt": "Manage Office 365 Groups with SPFx", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-o365-groups", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-o365-groups/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-manage-o365-groups", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/d526f0c6420af1e671234f8b25acab68386d8037c105f4370d99ab8ad312824a.webp", "alt": "Manage Office 365 Groups with SPFx", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-o365-groups/assets/approve-request.gif", "alt": "Manage Office 365 Groups with SPFx", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-o365-groups/assets/group-listing-search.gif", "alt": "Manage Office 365 Groups with SPFx", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-o365-groups/assets/join-group.gif", "alt": "Manage Office 365 Groups with SPFx", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-o365-groups/assets/join-private-group.gif", "alt": "Manage Office 365 Groups with SPFx", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-o365-groups/assets/leave-group.gif", "alt": "Manage Office 365 Groups with SPFx", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-o365-groups/assets/new-group.gif", "alt": "Manage Office 365 Groups with SPFx", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-o365-groups/assets/pending-permission-requests.png", "alt": "Manage Office 365 Groups with SPFx", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-manage-profile-card-properties/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-manage-profile-card-properties", "title": "Manage Profile Card Properties Web Part", "description": "This web part allows tenant administrators to manage profile card properties.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-10-05", "updated": "2020-10-05", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/5ea7382440067c60ea9f6a79c4821aa416d5f9d9633051d2ed29197eb23eec4b.webp", "alt": "Manage Profile Card Properties", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-profile-card-properties", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-profile-card-properties/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-manage-profile-card-properties", "descriptionParagraphs": [ "This web part allows tenant administrators to manage profile card properties." ], "previews": [ { "src": "/images/previews/5ea7382440067c60ea9f6a79c4821aa416d5f9d9633051d2ed29197eb23eec4b.webp", "alt": "Manage Profile Card Properties", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-profile-card-properties/assets/Screenshot1.png", "alt": "Manage Profile Card Properties", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-profile-card-properties/assets/Screenshot2.png", "alt": "Manage Profile Card Properties", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-profile-card-properties/assets/Screenshot3.png", "alt": "Manage Profile Card Properties", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-profile-card-properties/assets/Screenshot4.png", "alt": "Manage Profile Card Properties", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-manage-schema-extensions/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-manage-schema-extensions", "title": "Schema Extensions Manager", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-09-27", "updated": "2025-09-27", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/ed8972e10f4cbedd8db79eca4439b4a3c7390c80855188be8da4ce7003eacf89.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-schema-extensions", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-schema-extensions/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-manage-schema-extensions", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/ed8972e10f4cbedd8db79eca4439b4a3c7390c80855188be8da4ce7003eacf89.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-schema-extensions/assets/Screenshot%202025-09-26%20at%2021.30.46.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-schema-extensions/assets/Screenshot%202025-09-27%20at%2014.48.16.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-schema-extensions/assets/Screenshot%202025-09-27%20at%2014.48.32.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[0].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[1].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[2].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[3].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 8 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-manage-sitedesigns/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-manage-sitedesigns", "title": "Site Designs Manager Web Part", "description": "This web part allows tenant administrators to manage site designs through a graphical interface.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.8.0-plusbeta", "versionGroup": "1.8", "created": "2019-04-08", "updated": "2019-04-08", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/a10255e373aa48fffcd53b9ed36696ce3dea9066c5b01a9f24489fe462e76ea0.webp", "alt": "Site Designs Manager", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-sitedesigns", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-sitedesigns/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-manage-sitedesigns", "descriptionParagraphs": [ "This web part allows tenant administrators to manage site designs through a graphical interface." ], "previews": [ { "src": "/images/previews/a10255e373aa48fffcd53b9ed36696ce3dea9066c5b01a9f24489fe462e76ea0.webp", "alt": "Site Designs Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-sitedesigns/assets/screen10.jpg", "alt": "Site Designs Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-sitedesigns/assets/screen11.jpg", "alt": "Site Designs Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-sitedesigns/assets/screen12.jpg", "alt": "Site Designs Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-sitedesigns/assets/screen13.jpg", "alt": "Site Designs Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-sitedesigns/assets/screen14.jpg", "alt": "Site Designs Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-sitedesigns/assets/screen15.jpg", "alt": "Site Designs Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-sitedesigns/assets/screen16.jpg", "alt": "Site Designs Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-sitedesigns/assets/screen17.jpg", "alt": "Site Designs Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-sitedesigns/assets/screen2.jpg", "alt": "Site Designs Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-sitedesigns/assets/screen3.1.jpg", "alt": "Site Designs Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-sitedesigns/assets/screen3.jpg", "alt": "Site Designs Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-sitedesigns/assets/screen4.jpg", "alt": "Site Designs Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-sitedesigns/assets/screen5.jpg", "alt": "Site Designs Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-sitedesigns/assets/screen6.jpg", "alt": "Site Designs Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-sitedesigns/assets/screen7.jpg", "alt": "Site Designs Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-sitedesigns/assets/screen8.jpg", "alt": "Site Designs Manager", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-sitedesigns/assets/screen9.jpg", "alt": "Site Designs Manager", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.8.0-plusbeta", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-manage-spfx-solutions-alm/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-manage-spfx-solutions-alm", "title": "Manage SPFx solution using ALM APIs", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-03-09", "updated": "2020-03-09", "authors": [ { "name": "Ramakrishnan Raman", "account": "Ramakrishnan24689", "avatar": "https://github.com/Ramakrishnan24689.png" } ], "preview": { "src": "/images/previews/8dbb2882440e05f43855ed6480d6aa7597d87045b9978ef8628db98a72b6380f.webp", "alt": "Manage SPFx solution using ALM APIs", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-spfx-solutions-alm", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-spfx-solutions-alm/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-manage-spfx-solutions-alm", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/8dbb2882440e05f43855ed6480d6aa7597d87045b9978ef8628db98a72b6380f.webp", "alt": "Manage SPFx solution using ALM APIs", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-manage-spfx-solutions-alm/assets/SPFxALMSPAppcatalog.gif", "alt": "Manage SPFx solution using ALM APIs", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-material-ui/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-material-ui", "title": "Material UI Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.8.0", "versionGroup": "1.8", "created": "2019-03-25", "updated": "2019-03-25", "authors": [ { "name": "Ramin Ahmadi", "account": "AhmadiRamin", "avatar": "https://github.com/AhmadiRamin.png" } ], "preview": { "src": "/images/previews/ffb3262ffdf63b16d4a67ff01dd1da75c1269affd73caff7b606944a4146aa66.webp", "alt": "Material UI", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-material-ui", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-material-ui/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-material-ui", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/ffb3262ffdf63b16d4a67ff01dd1da75c1269affd73caff7b606944a4146aa66.webp", "alt": "Material UI", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.8.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-mcp-client/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-mcp-client", "title": "MCP Client for SharePoint", "description": "A SharePoint Framework web part that acts as a Model Context Protocol (MCP) client from inside a SharePoint page. It connects to an MCP server over Streamable HTTP, lists the tools that server exposes, lets a user invoke one from a form generated out of the tool's JSON Schema, and renders the full HTTP and JSON-RPC trace so the protocol is visible rather than hidden inside an agent.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.23.2", "versionGroup": "1.23", "created": "2026-08-15", "updated": "2026-08-15", "authors": [ { "name": "Elliot Margot", "account": "OwnOptic", "avatar": "https://github.com/OwnOptic.png" } ], "preview": { "src": "/images/previews/145a018fdb76344a6ab11e512b8b817152c2a1f01419c0f82da387beb6d23f83.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mcp-client", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mcp-client/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-mcp-client", "descriptionParagraphs": [ "A SharePoint Framework web part that acts as a Model Context Protocol (MCP) client from inside a SharePoint page. It connects to an MCP server over Streamable HTTP, lists the tools that server exposes, lets a user invoke one from a form generated out of the tool's JSON Schema, and renders the full HTTP and JSON-RPC trace so the protocol is visible rather than hidden inside an agent." ], "previews": [ { "src": "/images/previews/145a018fdb76344a6ab11e512b8b817152c2a1f01419c0f82da387beb6d23f83.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mcp-client/assets/screenshot-tools.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mcp-client/assets/screenshot-trace.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.23.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-mcs-hr-assistant/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-mcs-hr-assistant", "title": "Copilot Agent - HR Assistant", "description": "Integrates the Microsoft Copilot Agent, built via Copilot Studio, into SharePoint Online modern pages", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-01-10", "updated": "2025-01-10", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/321010576f348132ff81e796f4bf97754a75a76f20113970d71f813fb7b38a47.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mcs-hr-assistant", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mcs-hr-assistant/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-mcs-hr-assistant", "descriptionParagraphs": [ "HR Assistant SPFx web part app integrates the Microsoft Copilot Agent, built via Copilot Studio, into SharePoint Online modern pages. It features a chat interface with Single Sign-On, simplifying HR processes, answering employee queries, and supporting tasks like onboarding, benefits, and performance management—boosting efficiency and enhancing employee experiences." ], "previews": [ { "src": "/images/previews/321010576f348132ff81e796f4bf97754a75a76f20113970d71f813fb7b38a47.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mcs-hr-assistant/assets/demo-2.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-members-with-presence/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-members-with-presence", "title": "Group members list with Presence information web part", "description": "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).", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2019-12-23", "updated": "2019-12-23", "authors": [ { "name": "Luis Mañez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/previews/fad0d889e1f270c5d1f3b58e17642e38e8a0139b115a6827605cd87c3c639286.webp", "alt": "Group members list with Presence information", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-members-with-presence", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-members-with-presence/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-members-with-presence", "descriptionParagraphs": [ "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)." ], "previews": [ { "src": "/images/previews/fad0d889e1f270c5d1f3b58e17642e38e8a0139b115a6827605cd87c3c639286.webp", "alt": "Group members list with Presence information", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-mgtevents/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-mgtevents", "title": "MGT Events Web Part", "description": "This sample shows how to use Microsoft Graph Toolkit in SPFx and custom with Fluent UI Fabric Controls", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-11-29", "updated": "2020-11-29", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/3d06abd82f63d3b349dd67387668ae2d76545fca26f3f81dd50f92630ad7b9e8.webp", "alt": "MGT Events", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mgtevents", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mgtevents/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-mgtevents", "descriptionParagraphs": [ "This sample shows how to use Microsoft Graph Toolkit in SPFx and custom with Fluent UI Fabric Controls" ], "previews": [ { "src": "/images/previews/3d06abd82f63d3b349dd67387668ae2d76545fca26f3f81dd50f92630ad7b9e8.webp", "alt": "MGT Events", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Using single part app pages in SharePoint Online", "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-microsoft-learn-agent/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-microsoft-learn-agent", "title": "Microsoft Learn Agent (Copilot Studio) for SPFx", "description": "- 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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-10-11", "updated": "2025-10-11", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/90ab7aabe51363680a8bbaa4da8b137fb64e146f594975b0d1022e37eef30adc.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-microsoft-learn-agent", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-microsoft-learn-agent/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-microsoft-learn-agent", "descriptionParagraphs": [ "- 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." ], "previews": [ { "src": "/images/previews/90ab7aabe51363680a8bbaa4da8b137fb64e146f594975b0d1022e37eef30adc.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-microsoft-learn-agent/assets/copilot-studio-client-webchat.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-migrate-settings-approot/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-migrate-settings-approot", "title": "SPFx Legacy App Files Browser", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-07-09", "updated": "2025-07-09", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/paolopia.png" } ], "preview": { "src": "/images/previews/6297b8c6e0ddc7c068996fa512cb5e30a08b9e2517f21ef8cb8c2e5a5a3844f3.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-migrate-settings-approot", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-migrate-settings-approot/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-migrate-settings-approot", "descriptionParagraphs": [ "This sample demonstrates how to build a simplified interface for browsing and viewing files stored in the legacy 'SharePoint Online Client Extensibility Web Application Principal' folder using the native SPFx MSGraphClientV3. The web part provides a clean, professional interface for listing legacy app files and viewing their text content directly within the SharePoint page, making it easy to examine and migrate legacy SharePoint application data without custom authentication complexity." ], "previews": [ { "src": "/images/previews/6297b8c6e0ddc7c068996fa512cb5e30a08b9e2517f21ef8cb8c2e5a5a3844f3.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Changes on SharePoint Framework (SPFx) permission grants in Microsoft Entra ID", "description": "Article explaining a set of changes to the way API permissions are managed in SharePoint Online by Tenant Administrators in SharePoint Framework (SPFx) starting from March 2025.", "url": "https://devblogs.microsoft.com/microsoft365dev/changes-on-sharepoint-framework-spfx-permission-grants-in-microsoft-entra-id/" }, { "title": "Microsoft Graph Special Folders", "description": "Learn how to use Microsoft Graph special folders, such as the 'approot' folder, to store and manage user-specific files and settings in OneDrive for Business in a secure and isolated way.", "url": "https://learn.microsoft.com/graph/api/drive-get-specialfolder?view=graph-rest-1.0&tabs=http" }, { "title": "Use Microsoft Graph in your SharePoint Framework solution", "description": "Learn how to use Microsoft Graph APIs within SharePoint Framework solutions using the native MSGraphClientV3 for seamless authentication and API access.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis" }, { "title": "Microsoft Graph Files API", "description": "Explore the Microsoft Graph Files API to access and manage files stored in OneDrive for Business, including special folders and legacy application data.", "url": "https://learn.microsoft.com/graph/api/resources/driveitem?view=graph-rest-1.0" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-minesweeper/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-minesweeper", "title": "Minesweeper Web Part", "description": "This web part is the classic game Minesweeper, put in a Fluent UI powered SPFx web part!.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-07-01", "updated": "2020-07-01", "authors": [ { "name": "Pieter Heemeryck", "account": "PieterHeemeryck", "avatar": "https://github.com/PieterHeemeryck.png" } ], "preview": { "src": "/images/previews/fa017bb35d40dc7127ba9b399e739d47e49c0d6befe1bba04ea7d9e2580d9202.webp", "alt": "Minesweeper", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-minesweeper", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-minesweeper/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-minesweeper", "descriptionParagraphs": [ "This web part is the classic game Minesweeper, put in a Fluent UI powered SPFx web part!." ], "previews": [ { "src": "/images/previews/fa017bb35d40dc7127ba9b399e739d47e49c0d6befe1bba04ea7d9e2580d9202.webp", "alt": "Minesweeper", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-mobx-multiple-stores/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-mobx-multiple-stores", "title": "Using multiple stores with React and Mobx Web Part", "description": "A sample web part that uses the Mobx library with multiple stores to keep track of the applications state.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.8.2", "versionGroup": "1.8", "created": "2019-05-24", "updated": "2019-05-24", "authors": [ { "name": "Kemal Sinanagic", "account": "KEMiCZA", "avatar": "https://github.com/KEMiCZA.png" } ], "preview": { "src": "/images/previews/0fbc895f3dda129c20e3332b27cbd63073173e2184f2fe72700d030fe7196e60.webp", "alt": "Using multiple stores with React and Mobx", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mobx-multiple-stores", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mobx-multiple-stores/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-mobx-multiple-stores", "descriptionParagraphs": [ "A sample web part that uses the Mobx library with multiple stores to keep track of the applications state." ], "previews": [ { "src": "/images/previews/0fbc895f3dda129c20e3332b27cbd63073173e2184f2fe72700d030fe7196e60.webp", "alt": "Using multiple stores with React and Mobx", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.8.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-mobx/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-mobx", "title": "Using React and Mobx Web Part", "description": "Sample web part implementation that uses Mobx to keep track of its state.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "0.1.0", "versionGroup": "< 1.1", "created": "2016-11-04", "updated": "2016-11-04", "authors": [ { "name": "Kevin Mees", "account": "kmees", "avatar": "https://github.com/kmees.png" } ], "preview": { "src": "/images/previews/b7f470f7a40cd99f3a547d733464739aeebc32712d4fa0b24757eb75be63f3d5.webp", "alt": "Using React and Mobx", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mobx", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mobx/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-mobx", "descriptionParagraphs": [ "Sample web part implementation that uses Mobx to keep track of its state." ], "previews": [ { "src": "/images/previews/b7f470f7a40cd99f3a547d733464739aeebc32712d4fa0b24757eb75be63f3d5.webp", "alt": "Using React and Mobx", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "0.1.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-modern-birthdays/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-modern-birthdays-timeline", "title": "Birthdays Timeline Web Part", "description": "Shows upcoming birthdays in the company in a timeline", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2023-01-31", "updated": "2025-01-19", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" }, { "name": "Aimery Thomas", "account": "a1mery", "avatar": "https://github.com/a1mery.png" } ], "preview": { "src": "/images/previews/221e7ff6d9006f9cb5de9b6425505027cf8aca2d338b62dadeb4ac50205f949f.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-birthdays", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-birthdays/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-modern-birthdays", "descriptionParagraphs": [ "Shows upcoming birthdays in the company, laid out in a timeline" ], "previews": [ { "src": "/images/previews/221e7ff6d9006f9cb5de9b6425505027cf8aca2d338b62dadeb4ac50205f949f.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-modern-birthdays/assets/sample.json:1", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-modern-birthdays", "title": "Birthdays Web Part", "description": "Shows upcoming birthdays in the company", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2023-01-31", "updated": "2025-01-19", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" }, { "name": "Aimery Thomas", "account": "a1mery", "avatar": "https://github.com/a1mery.png" } ], "preview": { "src": "/images/previews/edaeb9fe7a693548dc03e28ed332211273d8e2302f57a40df57fa557de8e8e03.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-birthdays", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-birthdays/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-modern-birthdays", "descriptionParagraphs": [ "The Web Part shows the upcoming birthdays in the company, the web parts reads birthdays from a list located on the tenant's root site with title \"Birthdays.\"" ], "previews": [ { "src": "/images/previews/edaeb9fe7a693548dc03e28ed332211273d8e2302f57a40df57fa557de8e8e03.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "url.duplicate", "field": "url", "message": "Also used by pnp/sp-dev-fx-webparts/samples/react-modern-birthdays/assets/sample.json#0; records remain namespaced, not silently deduplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-modern-calendar/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-modern-calendar", "title": "New Modern Calendar Web Part", "description": "New Modern Calendar Web Part for SharePoint Framework", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-03-08", "updated": "2025-03-08", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/3650c8370697eb5841643af68e747ec16b489796a44d58d6f7dc38bbc256bac2.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-calendar", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-calendar/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-modern-calendar", "descriptionParagraphs": [ "New Modern Calendar Web Part for SharePoint Framework. This is a new web part that allows users to view their calendar events directly within SharePoint. It integrates with Microsoft Graph to pull in calendar data and provides a user-friendly interface for viewing events." ], "previews": [ { "src": "/images/previews/3650c8370697eb5841643af68e747ec16b489796a44d58d6f7dc38bbc256bac2.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-modern-carousel/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-modern-carousel", "title": "Modern Carousel", "description": "This SharePoint Framework (SPFx) web part introduces a contemporary carousel component leveraging Swiper, facilitating seamless traversal through content housed within a SharePoint site.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.0", "versionGroup": "1.21", "created": "2024-03-16", "updated": "2025-05-01", "authors": [ { "name": "Sandeep P S", "account": "Sandeep-FED", "avatar": "https://github.com/Sandeep-FED.png" } ], "preview": { "src": "/images/previews/e01f8749a546814ea549fbd8ed955f597b8834001e540407dab6a6d4b5ecd964.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-carousel", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-carousel/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-modern-carousel", "descriptionParagraphs": [ "This SharePoint Framework (SPFx) web part introduces a contemporary carousel component leveraging Swiper, facilitating seamless traversal through content housed within a SharePoint site. This innovative feature enhances user experience by providing fluid navigation through various pieces of content, thereby adding a touch of elegance and sophistication to the SharePoint environment." ], "previews": [ { "src": "/images/previews/e01f8749a546814ea549fbd8ed955f597b8834001e540407dab6a6d4b5ecd964.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-modern-charts/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-modern-charts", "title": "Modern Charts", "description": "This web part uses the Chart.js library to visualize SharePoint list data.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-07-30", "updated": "2021-10-19", "authors": [ { "name": "Jeremy Coleman", "account": "jcoleman-pcprofessional", "avatar": "https://github.com/jcoleman-pcprofessional.png" }, { "name": "Peter Paul Kirschner", "account": "petkir", "avatar": "https://github.com/petkir.png" } ], "preview": { "src": "/images/previews/467bd4add18e18e06f813da2cdc0512b91b66ae6f61c588b46ac6319278f4cd5.webp", "alt": "Modern Charts", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-charts", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-charts/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-modern-charts", "descriptionParagraphs": [ "This web part uses the Chart.js library to visualize SharePoint list data." ], "previews": [ { "src": "/images/previews/467bd4add18e18e06f813da2cdc0512b91b66ae6f61c588b46ac6319278f4cd5.webp", "alt": "Modern Charts", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-charts/assets/Modern-Charts.gif", "alt": "Modern Charts", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-charts/assets/modern-charts.png", "alt": "Modern Charts", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [ { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-modern-glossary/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-modern-glossary", "title": "Modern Glossary", "description": "A dynamic SharePoint Framework web part displaying an A-Z indexed, accordion-style glossary with alphabet navigation, in-place item management, and Active/Inactive content lifecycle control.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.23.0", "versionGroup": "1.23", "created": "2026-08-08", "updated": "2026-08-08", "authors": [ { "name": "Sai Siva Ram Bandaru", "account": "saiiiiiii", "avatar": "https://github.com/saiiiiiii.png" } ], "preview": { "src": "/images/previews/5718f0deb9a464153b1785ac4346f54d9aa8a9277dbf9941e064c625dd276290.webp", "alt": "Modern Glossary web part demo showing A-Z navigation and accordion expansion", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-glossary", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-glossary/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-modern-glossary", "descriptionParagraphs": [ "A dynamic SharePoint Framework (SPFx) web part that displays glossary terms sourced from a SharePoint list in an A-Z indexed, accordion-style layout. Features include alphabet-based navigation with disabled states for empty letters, expand/collapse-all controls, free-text search across title and description, and in-place add/edit/delete item management surfaced through a gear icon visible only in page Edit mode. Content lifecycle is controlled through an Active/Inactive Status field, filtered server-side so retired terms are never sent to the browser. Perfect for IT glossaries, acronym libraries, application directories, and other structured reference content on SharePoint pages." ], "previews": [ { "src": "/images/previews/5718f0deb9a464153b1785ac4346f54d9aa8a9277dbf9941e064c625dd276290.webp", "alt": "Modern Glossary web part demo showing A-Z navigation and accordion expansion", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-glossary/assets/alphabet-navigation.png", "alt": "A-Z alphabet navigation strip with Show All and Expand All controls", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-glossary/assets/manage-items-panel.png", "alt": "Manage Glossary Items panel with add, edit, and delete operations", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-glossary/assets/accordion-expanded.png", "alt": "Expanded accordion item showing description, application URL, and details URL", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Using PnP JS with SharePoint Framework", "description": "Learn how to use PnP JS library in your SharePoint Framework solutions for modern SharePoint REST API interactions.", "url": "https://pnp.github.io/pnpjs/getting-started/" }, { "title": "Fluent UI React Components", "description": "Fluent UI React is a collection of robust React-based components designed to make it simple for you to create consistent web experiences using the Fluent Design Language.", "url": "https://developer.microsoft.com/fluentui#/controls/web" }, { "title": "Working with Lists and Items using PnP JS", "description": "Learn how to work with SharePoint lists and list items using the PnP JS library, including create, read, update, and delete operations.", "url": "https://pnp.github.io/pnpjs/sp/items/" }, { "title": "SharePoint Framework display modes", "description": "Learn how to detect and respond to a web part's display mode (Read vs Edit) to conditionally render editing controls.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/basics/handle-web-part-configuration" } ], "products": [ "SharePoint", "Office" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.23.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-modern-link-presenter/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-modern-link-presenter", "title": "Modern Link Presenter", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2024-12-25", "updated": "2024-12-31", "authors": [ { "name": "Marc André Schröder-Zhou", "account": "maschroeder-z", "avatar": "https://github.com/maschroeder-z.png" } ], "preview": { "src": "/images/previews/5d062a8199b214588880d34ef59e0ac7b31f3fbf67874e668ee57905235089c9.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-link-presenter", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-link-presenter/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-modern-link-presenter", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/5d062a8199b214588880d34ef59e0ac7b31f3fbf67874e668ee57905235089c9.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-link-presenter/assets/modernlink-02.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-modern-organization-chart/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-modern-organization-chart", "title": "Modern Organization Chart", "description": "This web part show organization chart for current user, shows, managers and direct reports and there available status.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2020-07-09", "updated": "2024-10-06", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/ffe7d7b641738b6acc3f8096c0ee31159a182ba57847d18ac6f7193e4c6ef98f.webp", "alt": "Modern Organization Chart", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-organization-chart", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-organization-chart/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-modern-organization-chart", "descriptionParagraphs": [ "This web part show organization chart for current user, shows, managers and direct reports and there available status." ], "previews": [ { "src": "/images/previews/ffe7d7b641738b6acc3f8096c0ee31159a182ba57847d18ac6f7193e4c6ef98f.webp", "alt": "Modern Organization Chart", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-modern-organization-chart/assets/Screenshot2.png", "alt": "Modern Organization Chart", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-msal-msgraph/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-msal-msgraph", "title": "Microsoft Authentication Library (MSAL JS) authentication sample", "description": "Sample SharePoint Framework web part which uses the Microsoft Authentication Library (MSAL JS) to call the Microsoft Graph.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.1.1", "versionGroup": "1.1", "created": "2017-03-17", "updated": "2017-03-17", "authors": [ { "name": "Elio Struyf", "account": "estruyf", "avatar": "https://github.com/estruyf.png" } ], "preview": { "src": "/images/previews/2adce21db93b4f1bf597b5e41b2a8c4f88c992d3b5f5fef132cc225ae7e2d07f.webp", "alt": "Microsoft Authentication Library (MSAL JS) authentication sample", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-msal-msgraph", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-msal-msgraph/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-msal-msgraph", "descriptionParagraphs": [ "Sample SharePoint Framework web part which uses the Microsoft Authentication Library (MSAL JS) to call the Microsoft Graph." ], "previews": [ { "src": "/images/previews/2adce21db93b4f1bf597b5e41b2a8c4f88c992d3b5f5fef132cc225ae7e2d07f.webp", "alt": "Microsoft Authentication Library (MSAL JS) authentication sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-msal-msgraph/assets/permission-scopes.png", "alt": "Microsoft Authentication Library (MSAL JS) authentication sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-msal-msgraph/assets/redirect-url.png", "alt": "Microsoft Authentication Library (MSAL JS) authentication sample", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.1.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-msgraph-extension/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-msgraph-extension", "title": "Manage Microsoft Graph Open Extension in SPFx", "description": "This sample shows how to managed Microsoft Graph Open Extension in SPFX. This application uses User Resource to create Open Extension.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2019-10-20", "updated": "2019-10-20", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/24744b854adc510f4cfe264b4cd8a4f2e73c97619fffd226ba145a0cd3c79c5a.webp", "alt": "Manage Microsoft Graph Open Extension in SPFx", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-msgraph-extension", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-msgraph-extension/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-msgraph-extension", "descriptionParagraphs": [ "This sample shows how to managed Microsoft Graph Open Extension in SPFX. This application uses User Resource to create Open Extension." ], "previews": [ { "src": "/images/previews/24744b854adc510f4cfe264b4cd8a4f2e73c97619fffd226ba145a0cd3c79c5a.webp", "alt": "Manage Microsoft Graph Open Extension in SPFx", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-msgraph-extension/assets/get-graph-extension.png", "alt": "Manage Microsoft Graph Open Extension in SPFx", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-msgraph-extension/assets/graph-extension-user-permissions.png", "alt": "Manage Microsoft Graph Open Extension in SPFx", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-msgraph-peoplesearch/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-msgraph-peoplesearch", "title": "Microsoft Graph People Search Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-07-31", "updated": "2020-07-31", "authors": [ { "name": "Yannick Reekmans", "account": "YannickRe", "avatar": "https://github.com/YannickRe.png" } ], "preview": { "src": "/images/previews/9298f0f20dc5f94aeddc2c8c57f1a0dd6922752dd2568731186fd757940a4c9e.webp", "alt": "Microsoft Graph People Search Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-msgraph-peoplesearch", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-msgraph-peoplesearch/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-msgraph-peoplesearch", "descriptionParagraphs": [ "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.", "The web part accepts a search query through a Dynamic Data connection, to further filter the displayed results. A source for this search query is not provided, but by default this can come from the Microsoft Search search box or the Page Environment. You could also use the Search Box Web Part provided by the PnP Modern Search Web Parts.", "The sample also shows how to use SPFx Web Part asynchronous rendering using isRenderAsync property and renderCompleted method." ], "previews": [ { "src": "/images/previews/9298f0f20dc5f94aeddc2c8c57f1a0dd6922752dd2568731186fd757940a4c9e.webp", "alt": "Microsoft Graph People Search Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-msgraph-peoplesearch/assets/MicrosoftGraphPeopleSearch-LPC.gif", "alt": "Microsoft Graph People Search Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-multilist-grid/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-multilist-grid", "title": "Multi-list Grid Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "0.4.0", "versionGroup": "< 1.1", "created": "2016-12-31", "updated": "2016-12-31", "authors": [ { "name": "Russell Gove", "account": "russgove", "avatar": "https://github.com/russgove.png" } ], "preview": { "src": "/images/previews/6037aee0579236376ee602b185af8a153400155645288ce33237628ac713dbbf.webp", "alt": "Multi-list Grid", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-multilist-grid", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-multilist-grid/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-multilist-grid", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/6037aee0579236376ee602b185af8a153400155645288ce33237628ac713dbbf.webp", "alt": "Multi-list Grid", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "0.4.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-multimedia-gallery/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-multimedia-gallery", "title": "Image Gallery Web Part", "description": "This web part show images and videos in responsive grid, on click it show images and videos in a carousel view.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.18.2", "versionGroup": "1.18", "created": "2020-07-19", "updated": "2025-04-25", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" }, { "name": "Vivek Chand", "account": "Vivekrajput20", "avatar": "https://github.com/Vivekrajput20.png" }, { "name": "Peter Paul Kirschner", "account": "petkir", "avatar": "https://github.com/petkir.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-multimedia-gallery", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-multimedia-gallery/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-multimedia-gallery", "descriptionParagraphs": [ "This web part show images and videos in responsive grid, on click it show images and videos in a carousel view." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-multimedia-gallery/assets/Annotation0.jpg", "alt": "Image Gallery", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-multimedia-gallery/assets/Annotation1.jpg", "alt": "Image Gallery", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-multimedia-gallery/assets/Annotation2.jpg", "alt": "Image Gallery", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-multimedia-gallery/assets/Screenshot1.png", "alt": "Image Gallery", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-multimedia-gallery/assets/Screenshot2.png", "alt": "Image Gallery", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-multipage/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-multipage", "title": "Multi-page client-side web part", "description": "Sample SharePoint Framework client-side web parts built using React illustrating building multi-page web parts.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.0.0", "versionGroup": "< 1.1", "created": "2017-05-01", "updated": "2017-05-01", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/43d51cdf55d5f335970ae30d00e45e6aa529cf41b37cb05b1de7dd492e0204e3.webp", "alt": "Multi-page client-side web part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-multipage", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-multipage/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-multipage", "descriptionParagraphs": [ "Sample SharePoint Framework client-side web parts built using React illustrating building multi-page web parts." ], "previews": [ { "src": "/images/previews/43d51cdf55d5f335970ae30d00e45e6aa529cf41b37cb05b1de7dd492e0204e3.webp", "alt": "Multi-page client-side web part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.0.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-multiscreen-webpart/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-multiscreen-webpart", "title": "Multi screen web part sample", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2019-07-03", "updated": "2021-10-03", "authors": [ { "name": "Velin Georgiev", "account": "VelinGeorgiev", "avatar": "https://github.com/VelinGeorgiev.png" }, { "name": "Ari Gunawan", "account": "AriGunawan", "avatar": "https://github.com/AriGunawan.png" } ], "preview": { "src": "/images/previews/53000b6dbe08ad0b68f04d2cbb0e65de04df033f0b2891f743cd7ed93ce666f7.webp", "alt": "Multi screen web part sample", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-multiscreen-webpart", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-multiscreen-webpart/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-multiscreen-webpart", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/53000b6dbe08ad0b68f04d2cbb0e65de04df033f0b2891f743cd7ed93ce666f7.webp", "alt": "Multi screen web part sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-multiscreen-webpart/assets/multi-screen-webpart-history.gif", "alt": "Multi screen web part sample", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-my-approvals/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-my-approvals", "title": "My Approvals Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2022-01-11", "updated": "2022-11-03", "authors": [ { "name": "Takashi Shinohara", "account": "karamem0", "avatar": "https://github.com/karamem0.png" } ], "preview": { "src": "/images/previews/2b45320226fc938d797547476993465bdc6ef2bf3c539979bde40a13e6f2f719.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-approvals", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-approvals/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-my-approvals", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/2b45320226fc938d797547476993465bdc6ef2bf3c539979bde40a13e6f2f719.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-my-dashboard/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-my-dashboard", "title": "My Dashboard Web Part", "description": "This SPFx app allows quick access to user agenda, ToDo Tasks, Files and News and Relevant People related to user.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2023-06-23", "updated": "2024-10-22", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/56f6b873d17d6a698968a83eabffda8c001a627892dfb3cbed788e0ee382968b.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-dashboard", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-dashboard/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-my-dashboard", "descriptionParagraphs": [ "This SPFx app allows quick access to user agenda, ToDo Tasks, Files and News and Relevant People related to user." ], "previews": [ { "src": "/images/previews/56f6b873d17d6a698968a83eabffda8c001a627892dfb3cbed788e0ee382968b.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-my-events/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-my-events", "title": "My Events Web Part", "description": "This web part provides loggedin user's outlook events with some advanced features", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.15.0-beta.1", "versionGroup": "1.15", "created": "2021-08-18", "updated": "2022-03-28", "authors": [ { "name": "Chandani Prajapati", "account": "chandaniprajapati", "avatar": "https://github.com/chandaniprajapati.png" } ], "preview": { "src": "/images/previews/d6aa45d00058e49ae2024601debfefafdda668073312c8bc8b1f5e8de59ef7a5.webp", "alt": "react-my-events", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-events", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-events/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-my-events", "descriptionParagraphs": [ "This web part provides loggedin user's outlook events with some advanced features" ], "previews": [ { "src": "/images/previews/d6aa45d00058e49ae2024601debfefafdda668073312c8bc8b1f5e8de59ef7a5.webp", "alt": "react-my-events", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.0-beta.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-my-groups/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-my-groups", "title": "My Groups Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-07-09", "updated": "2020-07-09", "authors": [ { "name": "Zach Roberts", "account": "zachroberts8668", "avatar": "https://github.com/zachroberts8668.png" } ], "preview": { "src": "/images/previews/5e33ed4354bfefbaeef7cf9068d234fe9d38c07452220b26a4972d92e8c8d368.webp", "alt": "My Groups", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-groups", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-groups/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-my-groups", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/5e33ed4354bfefbaeef7cf9068d234fe9d38c07452220b26a4972d92e8c8d368.webp", "alt": "My Groups", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-groups/assets/React-MyGroups_Compact.png", "alt": "My Groups", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-groups/assets/React-MyGroups_Property.png", "alt": "My Groups", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-my-onedrive-info/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-my-onedrive-info", "title": "My OneDrive Info", "description": "MyOneDriveInfo solution contains Adaptive card extension for Viva connection with below functionalities", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2021-01-24", "updated": "2025-04-27", "authors": [ { "name": "Harminder Singh", "account": "HarminderSethi", "avatar": "https://github.com/HarminderSethi.png" } ], "preview": { "src": "/images/previews/d3bba32e6a35262ad7109893507a7833e538ea51e3bf767d7d70033da596e2cd.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-onedrive-info", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-onedrive-info/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-my-onedrive-info", "descriptionParagraphs": [ "MyOneDriveInfo solution contains Adaptive card extension for Viva connection with below functionalities" ], "previews": [ { "src": "/images/previews/d3bba32e6a35262ad7109893507a7833e538ea51e3bf767d7d70033da596e2cd.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-onedrive-info/assets/ACEScreenshot2.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-my-personal-apps/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-my-personal-apps", "title": "My Personal Apps Web Part", "description": "The Web Part My Personal Apps allows the user to define links to Applications or Sites for quick access.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-04-28", "updated": "2025-01-13", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" }, { "name": "Zach Roberts", "account": "zachroberts8668", "avatar": "https://github.com/zachroberts8668.png" }, { "name": "Azores", "account": "gretchunkim", "avatar": "https://github.com/gretchunkim.png" } ], "preview": { "src": "/images/previews/df075a2e012815f97a718088a3a39f42252dfffc5d973b19965258a2b5ea9fe6.webp", "alt": "My Personal Apps", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-personal-apps", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-personal-apps/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-my-personal-apps", "descriptionParagraphs": [ "The Web Part My Personal Apps allows the user to define links to Applications or Sites for quick access." ], "previews": [ { "src": "/images/previews/df075a2e012815f97a718088a3a39f42252dfffc5d973b19965258a2b5ea9fe6.webp", "alt": "My Personal Apps", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-personal-apps/assets/Image06.png", "alt": "My Personal Apps", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-personal-apps/assets/Image10.png", "alt": "My Personal Apps", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-personal-apps/assets/image11.png", "alt": "My Personal Apps", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-personal-apps/assets/image12.png", "alt": "My Personal Apps", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-personal-apps/assets/image13.png", "alt": "My Personal Apps", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-personal-apps/assets/image14.png", "alt": "My Personal Apps", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-personal-apps/assets/Image2.png", "alt": "My Personal Apps", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-personal-apps/assets/Image3.png", "alt": "My Personal Apps", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-personal-apps/assets/Image4.png", "alt": "My Personal Apps", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-personal-apps/assets/Image5.png", "alt": "My Personal Apps", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-personal-apps/assets/Image7.png", "alt": "My Personal Apps", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-personal-apps/assets/Image8.png", "alt": "My Personal Apps", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-personal-apps/assets/Image9.png", "alt": "My Personal Apps", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-my-qr-code-generator/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-my-qr-code-generator", "title": "QR Code Generator Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-11-28", "updated": "2025-11-28", "authors": [ { "name": "Nicolas Kheirallah", "account": "NicolasKheirallah", "avatar": "https://github.com/NicolasKheirallah.png" } ], "preview": { "src": "/images/previews/bfb1f6c11f7e31951a54b1a6d10dfc991280e20327de47edc5b1bc3bd9bc65fd.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-qr-code-generator", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-qr-code-generator/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-my-qr-code-generator", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/bfb1f6c11f7e31951a54b1a6d10dfc991280e20327de47edc5b1bc3bd9bc65fd.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-qr-code-generator/assets/qr-code-generator-preview.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-qr-code-generator/assets/qr-code-generator-preview2.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-my-sites/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-my-sites", "title": "My Sites Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-08-30", "updated": "2020-08-30", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-sites", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-sites/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-my-sites", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-sites/assets/Screenshot%202020-08-06%20at%2013.50.51.png", "alt": "My Sites", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-sites/assets/Screenshot%202020-08-06%20at%2013.52.58.png", "alt": "My Sites", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-sites/assets/Screenshot%202020-08-06%20at%2014.17.35.png", "alt": "My Sites", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [ { "code": "url.normalized", "field": "thumbnails[1].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[2].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[3].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-my-teams/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-my-teams", "title": "My Teams Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.13.1", "versionGroup": "1.13", "created": "2019-02-26", "updated": "2021-12-18", "authors": [ { "name": "Joel Rodrigues", "account": "joelfmrodrigues", "avatar": "https://github.com/joelfmrodrigues.png" }, { "name": "Yves Habersaat", "account": "yhabersaat", "avatar": "https://github.com/yhabersaat.png" } ], "preview": { "src": "/images/previews/f38a97481c0b7cd66cf9448a2992a37bb248f79de6727f81b4b45cdf0a08ba97.webp", "alt": "My Teams", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-teams", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-teams/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-my-teams", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/f38a97481c0b7cd66cf9448a2992a37bb248f79de6727f81b4b45cdf0a08ba97.webp", "alt": "My Teams", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-my-workspaces-hub/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-my-workspaces-hub", "title": "My Workspaces Hub", "description": "My Workspaces Hub is SharePoint Framework (SPFx) web part that gives the signed-in user a single, sleek place to explore, monitor, and navigate every site, team, group space they can access. It pairs a fast, virtualized catalog with an analytics dashboard and rich on-demand detail drawers - all built on Fluent UI v9 and fully theme-aware across SharePoint Online and Microsoft Teams.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.23.0", "versionGroup": "1.23", "created": "2026-09-12", "updated": "2026-09-12", "authors": [ { "name": "Harminder Singh", "account": "HarminderSethi", "avatar": "https://github.com/HarminderSethi.png" } ], "preview": { "src": "/images/previews/0864e97883d8de6b2f363c2c813c7e56ff640134ad74d0e1e7466edd47b020b6.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-workspaces-hub", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-workspaces-hub/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-my-workspaces-hub", "descriptionParagraphs": [ "My Workspaces Hub is SharePoint Framework (SPFx) web part that gives the signed-in user a single, sleek place to explore, monitor, and navigate every site, team, group space they can access. It pairs a fast, virtualized catalog with an analytics dashboard and rich on-demand detail drawers - all built on Fluent UI v9 and fully theme-aware across SharePoint Online and Microsoft Teams." ], "previews": [ { "src": "/images/previews/0864e97883d8de6b2f363c2c813c7e56ff640134ad74d0e1e7466edd47b020b6.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-workspaces-hub/assets/GroupDetails.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-workspaces-hub/assets/MyGroups.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-workspaces-hub/assets/MyWorkspaceDashboard.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-workspaces-hub/assets/RecentFiles.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-my-workspaces-hub/assets/WebpartProperties.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.23.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[5].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 6 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-myonedrive/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-myonedrive", "title": "My OneDrive", "description": "Displays currently logged in user's OneDrive's file", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2021-08-12", "updated": "2024-02-27", "authors": [ { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png" } ], "preview": { "src": "/images/previews/927600225a3334d6c28415268284405be99549ad3f7d5f3ad67c4806e39374aa.webp", "alt": "react-myonedrive", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-myonedrive", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-myonedrive/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-myonedrive", "descriptionParagraphs": [ "This is a sample web part that displays currently logged in user's OneDrive's file", "This web part can be useful on the Intranet home page which can be added as My OneDrive files for quick reference of user's OneDrive files." ], "previews": [ { "src": "/images/previews/927600225a3334d6c28415268284405be99549ad3f7d5f3ad67c4806e39374aa.webp", "alt": "react-myonedrive", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-mytasks/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-mytasks", "title": "My Tasks Web Part", "description": "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..", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-09-09", "updated": "2020-09-09", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" }, { "name": "Swaminathan Sriram", "account": "Swaminathan-Sriram", "avatar": "https://github.com/Swaminathan-Sriram.png" } ], "preview": { "src": "/images/previews/428c87bd8b2ab8d70ca46a4ab6513ee75d3fd7a8671e95245382a539cab145ec.webp", "alt": "My Tasks Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mytasks", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mytasks/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-mytasks", "descriptionParagraphs": [ "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.." ], "previews": [ { "src": "/images/previews/428c87bd8b2ab8d70ca46a4ab6513ee75d3fd7a8671e95245382a539cab145ec.webp", "alt": "My Tasks Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mytasks/assets/AddTask.gif", "alt": "My Tasks Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mytasks/assets/EditTask.gif", "alt": "My Tasks Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mytasks/assets/screen1.png", "alt": "My Tasks Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mytasks/assets/screen10.png", "alt": "My Tasks Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mytasks/assets/screen11.png", "alt": "My Tasks Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mytasks/assets/screen12.png", "alt": "My Tasks Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mytasks/assets/screen13.png", "alt": "My Tasks Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mytasks/assets/Screen14.png", "alt": "My Tasks Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mytasks/assets/screen2.png", "alt": "My Tasks Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mytasks/assets/screen3.png", "alt": "My Tasks Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mytasks/assets/screen4.png", "alt": "My Tasks Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mytasks/assets/screen5.png", "alt": "My Tasks Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mytasks/assets/screen6.png", "alt": "My Tasks Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mytasks/assets/screen7.png", "alt": "My Tasks Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mytasks/assets/screen8.png", "alt": "My Tasks Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-mytasks/assets/screen9.png", "alt": "My Tasks Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-navigation-tabs/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-navigation-tabs", "title": "Navigation Tabs", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.22.1", "versionGroup": "1.22", "created": "2026-02-20", "updated": "2026-02-20", "authors": [ { "name": "W. Kevin Wolff", "account": "wkwolff", "avatar": "https://github.com/wkwolff.png" } ], "preview": { "src": "/images/previews/ba7cdb8697efaeac64700db447929c8df136ca347a5a7e400a29b22c981b2d56.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-navigation-tabs", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-navigation-tabs/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-navigation-tabs", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/ba7cdb8697efaeac64700db447929c8df136ca347a5a7e400a29b22c981b2d56.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-navigation-tabs/assets/card-layout.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-navigation-tabs/assets/compact-layout.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-navigation-tabs/assets/layout-dropdown.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-navigation-tabs/assets/property-pane-configured.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-navigation-tabs/assets/property-pane-setup.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-navigation-tabs/assets/tile-layout.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[5].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[6].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 7 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-news-banner/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-news-banner", "title": "News Banner Web Part", "description": "Shows news information as a Banner, this information come from a list defined in any site.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2021-05-06", "updated": "2021-05-06", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/04d67e88e90ad4c6470e554e0afbfb61111f73c3e25defe8ea5dfd68e1cae7c4.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-news-banner", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-news-banner/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-news-banner", "descriptionParagraphs": [ "This web part shows news information as a Banner, this information come from a list defined in any site, this web part can be installed on 2019, and SharePoint Online." ], "previews": [ { "src": "/images/previews/04d67e88e90ad4c6470e554e0afbfb61111f73c3e25defe8ea5dfd68e1cae7c4.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-news-banner/assets/NewsBanner.png", "alt": "List Items Menu", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-news-extension/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-news-extension", "title": "Targeted News Web Part using Microsoft Graph Open Extension", "description": "This sample contains two SPFx web parts: User preferences web part and Curated news web part", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.17.4", "versionGroup": "1.17", "created": "2023-10-04", "updated": "2023-10-04", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/3d5eaec9711e7572efcc786591ab65ee26547ac17d370d2ff062975de60d6f17.webp", "alt": "Curated news", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-news-extension", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-news-extension/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-news-extension", "descriptionParagraphs": [ "This sample contains two SPFx web parts: User preferences web part and Curated news web part" ], "previews": [ { "src": "/images/previews/3d5eaec9711e7572efcc786591ab65ee26547ac17d370d2ff062975de60d6f17.webp", "alt": "Curated news", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-news-extension/assets/user-preferences-model.png", "alt": "User preferences model", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-news-extension/assets/demo.gif", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.17.4", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-news/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-news", "title": "News Web Part", "description": "SPFx Webpart to display News from SharePoint site(s)", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2021-04-02", "updated": "2021-04-02", "authors": [ { "name": "Alison Collins", "account": "ReactIntern", "avatar": "https://github.com/ReactIntern.png" } ], "preview": { "src": "/images/previews/982f153caafed194c154c56c15f4322e3a412fef4a74d9406a70fc62e8fe3edb.webp", "alt": "Single view default", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-news", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-news/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-news", "descriptionParagraphs": [ "Web part pulls all SharePoint News Posts that the logged in user has access to view" ], "previews": [ { "src": "/images/previews/982f153caafed194c154c56c15f4322e3a412fef4a74d9406a70fc62e8fe3edb.webp", "alt": "Single view default", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-news/assets/Stack-Style-Default.png", "alt": "Stack style", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-news/assets/Several-Sites-Author-Hidden.png", "alt": "Several sites author hidden", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-news/assets/Pagination.png", "alt": "Pagination", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-nutrient-document-viewer/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-nutrient-document-viewer", "title": "Nutrient Document Viewer", "description": "This a custom PDF viewer web part for SharePoint Online by integrating Nutrient for Web using the SharePoint Framework (SPFx).", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-03-25", "updated": "2025-03-25", "authors": [ { "name": "Clavin Fernandes", "account": "cfernandes-muhimbi", "avatar": "https://github.com/cfernandes-muhimbi.png" } ], "preview": { "src": "/images/previews/7ebddf500e3479359a9b5960bcebe6beb7c52b6e7f592b97590a372bf52f6668.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-nutrient-document-viewer", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-nutrient-document-viewer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-nutrient-document-viewer", "descriptionParagraphs": [ "This a custom PDF viewer web part for SharePoint Online by integrating Nutrient for Web using the SharePoint Framework (SPFx)." ], "previews": [ { "src": "/images/previews/7ebddf500e3479359a9b5960bcebe6beb7c52b6e7f592b97590a372bf52f6668.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-nutrient-document-viewer/assets/PDFViewer.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-office-breakout/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-office-breakout", "title": "Office Breakout", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-10-12", "updated": "2025-10-12", "authors": [ { "name": "Peter Paul Kirschner", "account": "petkir", "avatar": "https://github.com/petkir.png" } ], "preview": { "src": "/images/previews/0119583b08d2c4e01ed0b8e9f50368db0cbd5f243fd1cd5489bc8d6e7482e52f.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-office-breakout", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-office-breakout/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-office-breakout", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/0119583b08d2c4e01ed0b8e9f50368db0cbd5f243fd1cd5489bc8d6e7482e52f.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-office-breakout/assets/gameplay2.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-office-breakout/assets/officebreakout.gif", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-office-breakout/assets/paused.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-office-breakout/assets/start_game.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-office-breakout/assets/victory.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[5].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 6 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-office-offer-creation/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-office-offer-creation", "title": "SharePoint document generator - Offer Creation Web Part", "description": "This sample is a Teams personal Tab to act as a Microsoft 365 across application (Teams, Outlook, Office) to generate docuemnts.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2023-01-05", "updated": "2023-01-05", "authors": [ { "name": "Markus Moeller", "account": "mmsharepoint", "avatar": "https://github.com/mmsharepoint.png" } ], "preview": { "src": "/images/previews/180b17c51c949626fcf4283011da83157c985d30420a68554a8b6707bf760954.webp", "alt": "Create Offer Form with FluentUI controls", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-office-offer-creation", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-office-offer-creation/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-office-offer-creation", "descriptionParagraphs": [ "This sample is a Teams personal Tab to act as a Microsoft 365 across application (Teams, Outlook, Office) to generate docuemnts. It is realized with SharePoint Framework (SPFx)." ], "previews": [ { "src": "/images/previews/180b17c51c949626fcf4283011da83157c985d30420a68554a8b6707bf760954.webp", "alt": "Create Offer Form with FluentUI controls", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-office-offer-creation/assets/16OfferCreationDemo_SPFx.gif", "alt": "App in action", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-officegraph/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-officegraph", "title": "Office Graph Web Part samples", "description": "Sample SharePoint Framework client-side web parts built using React showing interaction with the Office Graph.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.0.0", "versionGroup": "< 1.1", "created": "2017-05-31", "updated": "2017-05-31", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/baa5bfa2c9dea169cba927cbfde06cdea4556a6d5097e0bcca3fa02410cd040d.webp", "alt": "Office Graph Web Part samples", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-officegraph", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-officegraph/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-officegraph", "descriptionParagraphs": [ "Sample SharePoint Framework client-side web parts built using React showing interaction with the Office Graph." ], "previews": [ { "src": "/images/previews/baa5bfa2c9dea169cba927cbfde06cdea4556a6d5097e0bcca3fa02410cd040d.webp", "alt": "Office Graph Web Part samples", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-officegraph/assets/my-recent-documents-preview.png", "alt": "Office Graph Web Part samples", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-officegraph/assets/trending-in-sites-i-follow-preview.png", "alt": "Office Graph Web Part samples", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-officegraph/assets/working-with-preview.png", "alt": "Office Graph Web Part samples", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.0.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-offline-first/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-offline-first", "title": "Offline First Web part built using LocalForage, Whatwg-Fetch, ES6-Promise", "description": "Sample SharePoint Framework Client-Side Web Parts built using React showing interacting with the Office Graph.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2017-05-31", "updated": "2017-05-31", "authors": [ { "name": "Austin Breslin", "account": "AustinBreslinDev", "avatar": "https://avatars.githubusercontent.com/u/10480670?s=460&v=4" } ], "preview": { "src": "/images/previews/9bb273d5c5744d7efd9e7c516cb4d40f8c4e18ed902307c818bd84a883627db9.webp", "alt": "Offline First Web part built using LocalForage, Whatwg-Fetch, ES6-Promise", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-offline-first", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-offline-first/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-offline-first", "descriptionParagraphs": [ "Sample SharePoint Framework Client-Side Web Parts built using React showing interacting with the Office Graph." ], "previews": [ { "src": "/images/previews/9bb273d5c5744d7efd9e7c516cb4d40f8c4e18ed902307c818bd84a883627db9.webp", "alt": "Offline First Web part built using LocalForage, Whatwg-Fetch, ES6-Promise", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-offline-first/assets/webpart-screenshot.jpg", "alt": "Offline First Web part built using LocalForage, Whatwg-Fetch, ES6-Promise", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-okr-tracker/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-okr-tracker", "title": "Goals OKR Tracker", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-08-03", "updated": "2025-08-03", "authors": [ { "name": "Sudeep Ghatak", "account": "sudeepghatak", "avatar": "https://github.com/sudeepghatak.png" } ], "preview": { "src": "/images/previews/9c7f5a39b725602dbbde4b71112943bbac74846fcfd5140473620841c1ea89f7.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-okr-tracker", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-okr-tracker/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-okr-tracker", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/9c7f5a39b725602dbbde4b71112943bbac74846fcfd5140473620841c1ea89f7.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-onedrive-finder/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-onedrive-finder", "title": "OneDrive Finder Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2021-04-16", "updated": "2021-05-20", "authors": [ { "name": "André Lage", "account": "aaclage", "avatar": "https://github.com/aaclage.png" } ], "preview": { "src": "/images/previews/e2855baa16647610fa0ba8cb2b75e3bb31037137b1b0f8380ebb1539ad9760dc.webp", "alt": "Web Part in action", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-onedrive-finder", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-onedrive-finder/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-onedrive-finder", "descriptionParagraphs": [ "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.", "This new control provides the ability to retrieve the Drive Library with associated Files and folders making easier to develop and navigate between tenant content and access to file." ], "previews": [ { "src": "/images/previews/e2855baa16647610fa0ba8cb2b75e3bb31037137b1b0f8380ebb1539ad9760dc.webp", "alt": "Web Part in action", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-onedrive-finder/assets/OneDrivefinderSample1.PNG", "alt": "Web Part in action", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-onedrive-finder/assets/OneDrivefinderSample2.PNG", "alt": "Web Part in action", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-openai-devops/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-openai-devops", "title": "OpenAI Azure DevOps Bot Web Part", "description": "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", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.17.4", "versionGroup": "1.17", "created": "2023-07-23", "updated": "2023-07-23", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/d361accf9ea6660f78f28cb29247f58d97d32a07252536199bb59542a7488166.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-openai-devops", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-openai-devops/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-openai-devops", "descriptionParagraphs": [ "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" ], "previews": [ { "src": "/images/previews/d361accf9ea6660f78f28cb29247f58d97d32a07252536199bb59542a7488166.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.17.4", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-openai-summarise-page-content/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-openai-summarise-page-content", "title": "Multilingual SharePoint Page Summarization Web Part with Open AI API and Microsoft Graph Pages API", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2023-03-12", "updated": "2023-03-12", "authors": [ { "name": "Anoop Tatti", "account": "anoopt", "avatar": "https://github.com/anoopt.png" } ], "preview": { "src": "/images/previews/00b43ce2f2704edccc2bf00a58d0dbd88bf407a42a3d7e2a1554ce253d6e192f.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-openai-summarise-page-content", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-openai-summarise-page-content/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-openai-summarise-page-content", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/00b43ce2f2704edccc2bf00a58d0dbd88bf407a42a3d7e2a1554ce253d6e192f.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-organisationchart/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-organisationchart", "title": "Organisation Chart Web Part", "description": "A simple Organisation Chart web part using Office UI Fabric, React, REST API batching and ServiceScope plumbing.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.0.0", "versionGroup": "< 1.1", "created": "2017-07-19", "updated": "2017-07-19", "authors": [ { "name": "Vardhaman Deshpande", "account": "vman", "avatar": "https://github.com/vman.png" } ], "preview": { "src": "/images/previews/b55ca23af7e4e4e9c368a068bd96ed49b98fd6a337d2137c015577a7dcc5fdf4.webp", "alt": "Organisation Chart", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-organisationchart", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-organisationchart/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-organisationchart", "descriptionParagraphs": [ "A simple Organisation Chart web part using Office UI Fabric, React, REST API batching and ServiceScope plumbing." ], "previews": [ { "src": "/images/previews/b55ca23af7e4e4e9c368a068bd96ed49b98fd6a337d2137c015577a7dcc5fdf4.webp", "alt": "Organisation Chart", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-organisationchart/assets/orgchart-mock.png", "alt": "Organisation Chart", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.0.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-organization-chart/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-organization-chart", "title": "Organization Chart Web Part", "description": "Shows an organization chart based on specified user, and user can navigate to show company organization", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.22.1", "versionGroup": "1.22", "created": "2021-05-03", "updated": "2025-12-30", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" }, { "name": "Passoli Mirko", "account": "Paxol", "avatar": "https://github.com/Paxol.png" }, { "name": "Peter Paul Kirschner", "account": "petkir", "avatar": "https://github.com/petkir.png" } ], "preview": { "src": "/images/previews/e8ae4ee9955ea3e89bc2dad0877cebfd581230eb7b1b9ac312f59fb827c4ab8f.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-organization-chart", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-organization-chart/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-organization-chart", "descriptionParagraphs": [ "This web part shows an organization chart based on specified user, and user can navigate to show company organization.", "Can be installed on SharePoint Online." ], "previews": [ { "src": "/images/previews/e8ae4ee9955ea3e89bc2dad0877cebfd581230eb7b1b9ac312f59fb827c4ab8f.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-organization-chart/assets/orgchart_01.jpg", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-organization-chart/assets/orgchart_02.jpg", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-outlook-add-todo-task/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-outlook-add-todo-task", "title": "Create To Do Task from Email (Outlook Add in)", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0-plusbeta", "versionGroup": "1.10", "created": "2020-10-16", "updated": "2020-10-16", "authors": [ { "name": "Luis Mañez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/previews/0efdf90339e6d95b09ea9a7535e1601cb8905e0f0ab0e665b5d25deb85e534e2.webp", "alt": "Create To Do Task from Email (Outlook Add in)", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-outlook-add-todo-task", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-outlook-add-todo-task/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-outlook-add-todo-task", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/0efdf90339e6d95b09ea9a7535e1601cb8905e0f0ab0e665b5d25deb85e534e2.webp", "alt": "Create To Do Task from Email (Outlook Add in)", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Create Outlook Add-ins using SharePoint Framework", "description": "Introduced in SharePoint Framework v1.10, you can implement an Outlook Web App add-in with the SharePoint Framework and use SharePoint as a host for your solution.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/office-addins-create" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0-plusbeta", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-outlook-copy2teams/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-outlook-copy2teams", "title": "Outlook to Teams Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0-plusbeta", "versionGroup": "1.10", "created": "2020-04-06", "updated": "2020-04-06", "authors": [ { "name": "Markus Moeller", "account": "mmsharepoint", "avatar": "https://github.com/mmsharepoint.png" } ], "preview": { "src": "/images/previews/81718c0a4ecb51ef802a10146029686ed02c62b0229f1dc887c79cf1b526cab7.webp", "alt": "Outlook to Teams", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-outlook-copy2teams", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-outlook-copy2teams/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-outlook-copy2teams", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/81718c0a4ecb51ef802a10146029686ed02c62b0229f1dc887c79cf1b526cab7.webp", "alt": "Outlook to Teams", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Create Outlook Add-ins using SharePoint Framework", "description": "Introduced in SharePoint Framework v1.10, you can implement an Outlook Web App add-in with the SharePoint Framework and use SharePoint as a host for your solution.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/office-addins-create" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0-plusbeta", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-page-navigator/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-page-navigator", "title": "Page Navigator Web Part", "description": "This web part fetches all the automatically added Header anchor tags in a SharePoint page and displays them in a Navigation component.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2019-09-05", "updated": "2026-05-15", "authors": [ { "name": "Aakash Bhardwaj", "account": "aakashbhardwaj619", "avatar": "https://avatars.githubusercontent.com/u/33526902?s=460&u=e780f4ef1da922c84f2c5c66c59cecbff2300581&v=4" }, { "name": "Jasey Waegebaert", "account": "Jwaegebaert", "avatar": "https://github.com/Jwaegebaert.png" }, { "name": "Mike Zimmerman", "account": "mikezimm", "avatar": "https://github.com/mikezimm.png" }, { "name": "Aimery Thomas", "account": "a1mery", "avatar": "https://github.com/a1mery.png" } ], "preview": { "src": "/images/previews/30bf9d18c53932a5dc9f15e957f275269dfa01022f7c2dddd8fc7c81c62855f0.webp", "alt": "Page Navigator", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-page-navigator", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-page-navigator/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-page-navigator", "descriptionParagraphs": [ "This web part fetches all the automatically added Header anchor tags in a SharePoint page and displays them in a Navigation component." ], "previews": [ { "src": "/images/previews/30bf9d18c53932a5dc9f15e957f275269dfa01022f7c2dddd8fc7c81c62855f0.webp", "alt": "Page Navigator", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-page-sections-navigation/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-page-sections-navigation", "title": "Page Sections Navigation Web Part", "description": "Sample web parts allowing to add sections navigation to the SharePoint page.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.14.0", "versionGroup": "1.14", "created": "2019-03-22", "updated": "2022-04-25", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" } ], "preview": { "src": "/images/previews/e8fc5827811bde7dd9c6a955c26b187238229c1fd341cfb58b06733f8b4103c2.webp", "alt": "Page Sections Navigation", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-page-sections-navigation", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-page-sections-navigation/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-page-sections-navigation", "descriptionParagraphs": [ "Sample web parts allowing to add sections navigation to the SharePoint page." ], "previews": [ { "src": "/images/previews/e8fc5827811bde7dd9c6a955c26b187238229c1fd341cfb58b06733f8b4103c2.webp", "alt": "Page Sections Navigation", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Using single part app pages in SharePoint Online", "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-pagecontributors/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-pagecontributors", "title": "Page Contributors Web Part", "description": "Displays page contributors in reverse chronological order.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2017-07-27", "updated": "2021-07-05", "authors": [ { "name": "Ari Gunawan", "account": "AriGunawan", "avatar": "https://github.com/AriGunawan.png" } ], "preview": { "src": "/images/previews/c889cafdde6e7e42b81fc4a3595d4b8ccbcb66d5caab39f2c007e64d080dfe68.webp", "alt": "Page Contributors Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pagecontributors", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pagecontributors/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-pagecontributors", "descriptionParagraphs": [ "Displays page contributors in reverse chronological order." ], "previews": [ { "src": "/images/previews/c889cafdde6e7e42b81fc4a3595d4b8ccbcb66d5caab39f2c007e64d080dfe68.webp", "alt": "Page Contributors Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pagecontributors/assets/pagecontributors_mockup.PNG", "alt": "Page Contributors Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-pages-hierarchy/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-pages-hierarchy", "title": "Page Hierarchy Web Part", "description": "This web part allows users to create a faux page hierarchy in their pages library and use it for page-to-page navigation.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2020-04-30", "updated": "2024-10-12", "authors": [ { "name": "Bo George", "account": "bogeorge", "avatar": "https://avatars.githubusercontent.com/u/10885472?s=460&u=74d23f4289cd555aa530e1c2c6156a382c373f2f&v=4" }, { "name": "Nick Brown", "account": "techienickb", "avatar": "https://github.com/techienickb.png" }, { "name": "ruslan-s", "account": "ruslan-s", "avatar": "https://github.com/ruslan-s.png" }, { "name": "SlowRobot", "account": "SlowRobot", "avatar": "https://github.com/SlowRobot.png" }, { "name": "Tobias Maestrini", "account": "tmaestrini", "avatar": "https://github.com/tmaestrini.png" } ], "preview": { "src": "/images/previews/28501a84583467e140f1fcdc01552f80f4e9df6347c46038cb3706355569cff6.webp", "alt": "Page Hierarchy", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pages-hierarchy", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pages-hierarchy/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-pages-hierarchy", "descriptionParagraphs": [ "This web part allows users to create a faux page hierarchy in their pages library and use it for page-to-page navigation." ], "previews": [ { "src": "/images/previews/28501a84583467e140f1fcdc01552f80f4e9df6347c46038cb3706355569cff6.webp", "alt": "Page Hierarchy", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-palette-picker/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-palette-picker", "title": "Palette Picker Web Part", "description": "Custom Property Pane pain resolved (whew), color palette generator inspired by [Jhey](https://codepen.io/jh3y/pen/rNjbmBQ?editors=0011).", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.13.1", "versionGroup": "1.13", "created": "2022-08-01", "updated": "2022-08-01", "authors": [ { "name": "Linda K", "account": "flowerbot", "avatar": "https://github.com/flowerbot.png" } ], "preview": { "src": "/images/previews/f538decead17e03aec13b9e92791cf21ed198d7de282e933b14012eef2f2984c.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-palette-picker", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-palette-picker/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-palette-picker", "descriptionParagraphs": [ "Built it to get an understanding of [Property Pane Portal](https://www.npmjs.com/package/property-pane-portal) and cuz I want to eventually build in a dynamic palette generator/css reader for my web parts." ], "previews": [ { "src": "/images/previews/f538decead17e03aec13b9e92791cf21ed198d7de282e933b14012eef2f2984c.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-palette-picker/assets/palettePickerWebPartAfterSaveAndRefresh.gif", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-password-vault/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-password-vault", "title": "Password Vault Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2023-10-27", "updated": "2023-10-27", "authors": [ { "name": "Sergej Schwabauer", "account": "SPFxAppDev", "avatar": "https://github.com/SPFxAppDev.png" } ], "preview": { "src": "/images/previews/1dcf40d70202b3d4c0bedbe2470e5431dec65cf9710f467fd21cf864f75d1ab6.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-password-vault", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-password-vault/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-password-vault", "descriptionParagraphs": [ "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.", "The data is encrypted and stored in the properties of the web part. This means that the data is not in plain text and can only be decrypted by entering the master password. You can also use this web part in SharePoint and Microsoft Teams (as a tab)" ], "previews": [ { "src": "/images/previews/1dcf40d70202b3d4c0bedbe2470e5431dec65cf9710f467fd21cf864f75d1ab6.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-password-vault/assets/PWVaultEditMode.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-password-vault/assets/PWVaultMaintenanceMode.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[1].order", "message": "Preview order is duplicated.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[2].order", "message": "Preview order is duplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-people-directory/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-people-directory", "title": "People Directory Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10", "versionGroup": "1.10", "created": "2018-05-01", "updated": "2018-05-01", "authors": [ { "name": "Eric Overfield", "account": "eoverfield", "avatar": "https://github.com/eoverfield.png" } ], "preview": { "src": "/images/previews/4e16a3cac3a040354d01a3a3d1f503ed6ef8240b4f3f797dbaa765286e5ad556.webp", "alt": "People Directory", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-people-directory", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-people-directory/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-people-directory", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/4e16a3cac3a040354d01a3a3d1f503ed6ef8240b4f3f797dbaa765286e5ad556.webp", "alt": "People Directory", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10", "issues": [ { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-people-slick/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-people-slick", "title": "React People Slick", "description": "Show a list of people using react-slick", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-07-08", "updated": "2025-07-08", "authors": [ { "name": "Lew Chin Hoong", "account": "ChinHoongLew", "avatar": "https://github.com/ChinHoongLew.png" } ], "preview": { "src": "/images/previews/014d28f8248201082b426fea754191117bc2e28c1beda5f7716ce68d871f77ec.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-people-slick", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-people-slick/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-people-slick", "descriptionParagraphs": [ "This web part uses @pnp/sp to get a list of people from a list value and uses react-slick to display the content" ], "previews": [ { "src": "/images/previews/014d28f8248201082b426fea754191117bc2e28c1beda5f7716ce68d871f77ec.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-people-slick/assets/Screenshot.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-peoplepicker/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-peoplepicker", "title": "People Picker Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.8.0", "versionGroup": "1.8", "created": "2017-12-06", "updated": "2017-12-06", "authors": [ { "name": "Giuliano De Luca", "account": "giuleon", "avatar": "https://github.com/giuleon.png" } ], "preview": { "src": "/images/previews/4ba5ba1cd93ec7b0c84e8915abf2ddade7f61dd546b91bdfa7afad2b99b45085.webp", "alt": "People Picker", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-peoplepicker", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-peoplepicker/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-peoplepicker", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/4ba5ba1cd93ec7b0c84e8915abf2ddade7f61dd546b91bdfa7afad2b99b45085.webp", "alt": "People Picker", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.8.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-personal-anniversary-counter/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-personal-anniversary-counter", "title": "Personal Anniversary Web Part", "description": "A web part to help you notice those special days", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.18.2", "versionGroup": "1.18", "created": "2023-12-09", "updated": "2023-12-09", "authors": [ { "name": "Dan Toft", "account": "Tanddant", "avatar": "https://github.com/Tanddant.png" } ], "preview": { "src": "/images/previews/2fe567b7a5d83bca396b52d8865cfe9c97f14830c795eb8390a0c42bcaf4846c.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-anniversary-counter", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-anniversary-counter/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-personal-anniversary-counter", "descriptionParagraphs": [ "Recently we had a fun talk at the office, 'how many days have I been working here?' turns out the answer was almost exactly 1500 days. So I thought it would be fun to make a web part that could help you keep track of those fun days." ], "previews": [ { "src": "/images/previews/2fe567b7a5d83bca396b52d8865cfe9c97f14830c795eb8390a0c42bcaf4846c.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-anniversary-counter/assets/Screenshot.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-personal-calendar/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-personal-calendar", "title": "Personal Calendar Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10", "versionGroup": "1.10", "created": "2018-05-01", "updated": "2018-05-01", "authors": [ { "name": "Eric Overfield", "account": "eoverfield", "avatar": "https://github.com/eoverfield.png" } ], "preview": { "src": "/images/previews/9d808452801c89e2f16b6bf177d816c918c5b677d39d961a80140b2870a9872a.webp", "alt": "Personal Calendar", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-calendar", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-calendar/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-personal-calendar", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/9d808452801c89e2f16b6bf177d816c918c5b677d39d961a80140b2870a9872a.webp", "alt": "Personal Calendar", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10", "issues": [ { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-personal-contacts/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-personal-contacts", "title": "Personal Contacts Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10", "versionGroup": "1.10", "created": "2018-05-01", "updated": "2018-05-01", "authors": [ { "name": "Eric Overfield", "account": "eoverfield", "avatar": "https://github.com/eoverfield.png" } ], "preview": { "src": "/images/previews/de0966053457ca4cff6a3a0b073437ecc80e17401850505cefe070c7a7eb1dbe.webp", "alt": "Personal Contacts", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-contacts", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-contacts/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-personal-contacts", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/de0966053457ca4cff6a3a0b073437ecc80e17401850505cefe070c7a7eb1dbe.webp", "alt": "Personal Contacts", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10", "issues": [ { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-personal-dashboard/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-personal-dashboard", "title": "Personal Dashboard", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-04-08", "updated": "2025-04-08", "authors": [ { "name": "Saurabh Tripathi", "account": "saurabh7019", "avatar": "https://github.com/saurabh7019.png" } ], "preview": { "src": "/images/previews/5ede3999b3f6d5ecc8047173dc7f977061c2898b653dddaed5fdd773f9dd3415.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-dashboard", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-dashboard/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-personal-dashboard", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/5ede3999b3f6d5ecc8047173dc7f977061c2898b653dddaed5fdd773f9dd3415.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-dashboard/assets/personalDashboard.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-dashboard/assets/selection.gif", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-personal-email/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-personal-email", "title": "Personal Email Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10", "versionGroup": "1.10", "created": "2018-05-01", "updated": "2018-05-01", "authors": [ { "name": "Eric Overfield", "account": "eoverfield", "avatar": "https://github.com/eoverfield.png" } ], "preview": { "src": "/images/previews/617d864f79b612a6d6ba379273c89cb4bc89729c9d5301e43e37e50cba19f1eb.webp", "alt": "Personal Email", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-email", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-email/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-personal-email", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/617d864f79b612a6d6ba379273c89cb4bc89729c9d5301e43e37e50cba19f1eb.webp", "alt": "Personal Email", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10", "issues": [ { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-personal-greeting/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-personal-greeting", "title": "Personal Greeting Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.23.2", "versionGroup": "1.23", "created": "2020-10-18", "updated": "2026-09-13", "authors": [ { "name": "Zach Roberts", "account": "zachroberts8668", "avatar": "https://github.com/zachroberts8668.png" }, { "name": "Ari Gunawan", "account": "AriGunawan", "avatar": "https://github.com/AriGunawan.png" } ], "preview": { "src": "/images/previews/6e00028a6fa0a7ee49a606bb96b7c2359e99570d5374749042f870f4ed089e82.webp", "alt": "Personal Greeting", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-greeting", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-greeting/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-personal-greeting", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/6e00028a6fa0a7ee49a606bb96b7c2359e99570d5374749042f870f4ed089e82.webp", "alt": "Personal Greeting", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.23.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-personal-tasks/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-personal-tasks", "title": "Personal Tasks Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10", "versionGroup": "1.10", "created": "2018-05-01", "updated": "2018-05-01", "authors": [ { "name": "Eric Overfield", "account": "eoverfield", "avatar": "https://github.com/eoverfield.png" } ], "preview": { "src": "/images/previews/c406265fda44a87332db03615ea51bdfbfc921b590c43d4c52b269dbd41684e1.webp", "alt": "Personal Tasks", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-tasks", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-tasks/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-personal-tasks", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/c406265fda44a87332db03615ea51bdfbfc921b590c43d4c52b269dbd41684e1.webp", "alt": "Personal Tasks", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10", "issues": [ { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-personal-tools-list/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-personal-tools-list", "title": "Personal tools list Web Part", "description": "Allows users to select tools from a predefined list and save them in their own personalized view.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.18.0", "versionGroup": "1.18", "created": "2024-02-08", "updated": "2024-02-25", "authors": [ { "name": "Eli Schei", "account": "Eli-Schei", "avatar": "https://github.com/Eli-Schei.png" } ], "preview": { "src": "/images/previews/cb955fb45f236d888d9cc92d9f8b5e5a811089cbf3aadcf57ce8b699703be033.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-tools-list", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-tools-list/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-personal-tools-list", "descriptionParagraphs": [ "This web part allows users to select tools from a predefined list and save them in their own personalized view.", "This web part has the fundamental functionality - a great starting point to build upon if you need something more advanced." ], "previews": [ { "src": "/images/previews/cb955fb45f236d888d9cc92d9f8b5e5a811089cbf3aadcf57ce8b699703be033.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-tools-list/assets/MyToolsDemo2.gif", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-tools-list/assets/availableTools.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-tools-list/assets/mytoold.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-tools-list/assets/mytoolslist.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-tools-list/assets/savedtools.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-tools-list/assets/savetools.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-tools-list/assets/selecttools.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-personal-tools-list/assets/settings.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[5].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[6].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[7].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[8].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 9 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-photo-sync/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-photo-sync", "title": "SPUPS Photo Sync Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-09-13", "updated": "2020-09-13", "authors": [ { "name": "Sudharsan Kesavanarayanan", "account": "sudharsank", "avatar": "https://github.com/sudharsank.png" } ], "preview": { "src": "/images/previews/d28d74e779730580d3cef08fb84e0fbef6505d72009b73031c46e484c5bb07ac.webp", "alt": "SPUPS Photo Sync", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-photo-sync", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-photo-sync/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-photo-sync", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/d28d74e779730580d3cef08fb84e0fbef6505d72009b73031c46e484c5bb07ac.webp", "alt": "SPUPS Photo Sync", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-photo-sync/assets/SPUPS_Photo_Sync_2.gif", "alt": "SPUPS Photo Sync", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-pnp-controls-list-view-fields/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-pnp-controls-list-view-fields", "title": "PnP ListView with PnP Field Controls Web Part", "description": "Sample web part to display PnP ListView control with column rendering using PnP Field Controls.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-03-10", "updated": "2020-03-10", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" } ], "preview": { "src": "/images/previews/1f64d3018fbd849d497b0659a9b4aa929828bc4656628711b95fc3f3b0fb6f69.webp", "alt": "PnP ListView with PnP Field Controls Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pnp-controls-list-view-fields", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pnp-controls-list-view-fields/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-pnp-controls-list-view-fields", "descriptionParagraphs": [ "Sample web part to display PnP ListView control with column rendering using PnP Field Controls." ], "previews": [ { "src": "/images/previews/1f64d3018fbd849d497b0659a9b4aa929828bc4656628711b95fc3f3b0fb6f69.webp", "alt": "PnP ListView with PnP Field Controls Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pnp-controls-list-view-fields/assets/taxonomy.png", "alt": "PnP ListView with PnP Field Controls Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-pnp-controls/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-pnp-controls", "title": "SharePoint Framework PnP Controls Sample", "description": "This is a sample project that contains a web part which makes use of the PnP SPFx Controls", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-12-16", "updated": "2020-12-16", "authors": [ { "name": "Elio Struyf", "account": "estruyf", "avatar": "https://github.com/estruyf.png" }, { "name": "Swaminathan Sriram", "account": "Swaminathan-Sriram", "avatar": "https://github.com/Swaminathan-Sriram.png" } ], "preview": { "src": "/images/previews/5d772f03239c1dcac536d5d67f05f279553e89d97d1ef606ebd8cce79906ed3d.webp", "alt": "SharePoint Framework PnP Controls Sample", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pnp-controls", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pnp-controls/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-pnp-controls", "descriptionParagraphs": [ "This is a sample project that contains a web part which makes use of the PnP SPFx Controls" ], "previews": [ { "src": "/images/previews/5d772f03239c1dcac536d5d67f05f279553e89d97d1ef606ebd8cce79906ed3d.webp", "alt": "SharePoint Framework PnP Controls Sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pnp-controls/assets/documents.png", "alt": "SharePoint Framework PnP Controls Sample", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-pnp-js-hooks/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-pnp-js-hooks", "title": "pnp/js and ReactJS Functional Components", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2022-10-17", "updated": "2022-10-18", "authors": [ { "name": "Beau Cameron", "account": "bcameron1231", "avatar": "https://github.com/bcameron1231.png" } ], "preview": { "src": "/images/previews/e1fd0e29f3cfeb7782579aa305adccb6fbcfaee44d7190d61f7053a6d59e2c35.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pnp-js-hooks", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pnp-js-hooks/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-pnp-js-hooks", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/e1fd0e29f3cfeb7782579aa305adccb6fbcfaee44d7190d61f7053a6d59e2c35.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-pnp-js-sample/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-pnp-js-sample", "title": "Using @pnp/js and ReactJS", "description": "Shows how to use PnPjs in a React web part", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2023-02-18", "updated": "2024-10-23", "authors": [ { "name": "Julie Turner", "account": "juliemturner", "avatar": "https://github.com/juliemturner.png" }, { "name": "Beau Cameron", "account": "bcameron1231", "avatar": "https://github.com/bcameron1231.png" }, { "name": "Gretchun Kim", "account": "gretchunkim", "avatar": "https://github.com/gretchunkim.png" } ], "preview": { "src": "/images/previews/003b4a24a05f4a2206dd82e0ed930b4f54019a17802bfbb2f397af493bd04a83.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pnp-js-sample", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pnp-js-sample/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-pnp-js-sample", "descriptionParagraphs": [ "Shows how to use PnPjs in a React web part" ], "previews": [ { "src": "/images/previews/003b4a24a05f4a2206dd82e0ed930b4f54019a17802bfbb2f397af493bd04a83.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-pnpjs-http-client/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-pnpjs-http-client", "title": "GitHub Profile Web Part Display via API", "description": "This web part loads the GitHub profile using SPHttp client in PnP v3.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2023-03-07", "updated": "2023-03-07", "authors": [ { "name": "Divya Akula", "account": "divya-akula", "avatar": "https://github.com/divya-akula.png" } ], "preview": { "src": "/images/previews/54a12ffea6e3713d07657074e8bcd10ed055b5a230d18736600f331e8521419d.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pnpjs-http-client", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pnpjs-http-client/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-pnpjs-http-client", "descriptionParagraphs": [ "This web part loads the GitHub profile using SPHttp client in PnP v3." ], "previews": [ { "src": "/images/previews/54a12ffea6e3713d07657074e8bcd10ed055b5a230d18736600f331e8521419d.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-pnpjs-project-online/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-pnpjs-project-online", "title": "PnPjs Project Online Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.8.2", "versionGroup": "1.8", "created": "2019-12-04", "updated": "2019-12-04", "authors": [ { "name": "Joel Rodrigues", "account": "joelfmrodrigues", "avatar": "https://github.com/joelfmrodrigues.png" } ], "preview": { "src": "/images/previews/1074f2eb2b0903f060750d9ec2ce19a25e678ad4c1e87e1ca19ac1e82baf2678.webp", "alt": "PnPjs Project Online", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pnpjs-project-online", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pnpjs-project-online/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-pnpjs-project-online", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/1074f2eb2b0903f060750d9ec2ce19a25e678ad4c1e87e1ca19ac1e82baf2678.webp", "alt": "PnPjs Project Online", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.8.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-pnpjs-spsite-er-diagram/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-pnpjs-spsite-er-diagram", "title": "SP Site ER Diagram", "description": "This web part loads all lists on a site and display it in a Entity Relationship Diagram (ERD)", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2022-11-07", "updated": "2022-12-21", "authors": [ { "name": "Niklas Wilhelm", "account": "ICTNiklasWilhelm", "avatar": "https://github.com/ICTNiklasWilhelm.png" } ], "preview": { "src": "/images/previews/27bbab216cc69e45a5df00ca8c4210335b48a3ae47d2ff6418e2ce6e46ef1d80.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pnpjs-spsite-er-diagram", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pnpjs-spsite-er-diagram/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-pnpjs-spsite-er-diagram", "descriptionParagraphs": [ "This web part loads all lists on a site and display it in a Entity Relationship Diagram (ERD)" ], "previews": [ { "src": "/images/previews/27bbab216cc69e45a5df00ca8c4210335b48a3ae47d2ff6418e2ce6e46ef1d80.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pnpjs-spsite-er-diagram/assets/SPERasAppPage.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-pnpjsexplorer/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-pnpjsexplorer", "title": "SPFx web part to Test PnpJS SharePoint Methods", "description": "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", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-10-30", "updated": "2020-10-30", "authors": [ { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png" }, { "name": "Kunj Sangani", "account": "kunj-sangani", "avatar": "https://github.com/kunj-sangani.png" }, { "name": "Joel Rodrigues", "account": "joelfmrodrigues", "avatar": "https://github.com/joelfmrodrigues.png" }, { "name": "Abderahman Moujahid", "account": "Abderahman88", "avatar": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4" } ], "preview": { "src": "/images/previews/83103ef007b56a4f00c9a0e023e836109c3b96741935e96064ef0dd3fb8db8e3.webp", "alt": "SPFx web part to Test PnpJS SharePoint Methods", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pnpjsexplorer", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-pnpjsexplorer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-pnpjsexplorer", "descriptionParagraphs": [ "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" ], "previews": [ { "src": "/images/previews/83103ef007b56a4f00c9a0e023e836109c3b96741935e96064ef0dd3fb8db8e3.webp", "alt": "SPFx web part to Test PnpJS SharePoint Methods", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-poll/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-poll", "title": "Poll Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.17.1", "versionGroup": "1.17", "created": "2024-03-16", "updated": "2024-03-16", "authors": [ { "name": "Harsh Bhavsar", "account": "Harsh24491", "avatar": "https://github.com/Harsh24491.png" } ], "preview": { "src": "/images/previews/080d8cdcd5fca394d90f9e4d56f75c8e5c51dc04c5bcd3648e855525701a35f9.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-poll", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-poll/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-poll", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/080d8cdcd5fca394d90f9e4d56f75c8e5c51dc04c5bcd3648e855525701a35f9.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-poll/assets/add-poll.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-poll/assets/poll-answers.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-poll/assets/poll-questions.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-poll/assets/wp1.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-poll/assets/wp2.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.17.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[5].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 6 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-power-platform-environments/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-power-platform-environments", "title": "Power Platform Environments", "description": "Manage and explore Power Platform environments directly from SharePoint with sorting, environment details, administrative actions and environment deletion.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.23.0", "versionGroup": "1.23", "created": "2026-07-09", "updated": "2026-07-09", "authors": [ { "name": "joshua", "account": "brayjosh", "avatar": "https://github.com/brayjosh.png" } ], "preview": { "src": "/images/previews/5877abf94f1b3b61ca0a693db8562ea25c35a60eee0319323caa87186132e081.webp", "alt": "Environments list", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-power-platform-environments", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-power-platform-environments/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-power-platform-environments", "descriptionParagraphs": [ "This web part demonstrates how to manage Power Platform environments directly from a SharePoint page using SharePoint Framework (SPFx) and React.", "The sample provides environment discovery, sorting, environment details, links to Power Apps Maker Studio and Power Platform Admin Center, and environment deletion through the Power Platform API." ], "previews": [ { "src": "/images/previews/5877abf94f1b3b61ca0a693db8562ea25c35a60eee0319323caa87186132e081.webp", "alt": "Environments list", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-power-platform-environments/assets/Search.png", "alt": "Environment search", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-power-platform-environments/assets/Panel.png", "alt": "Environment details panel", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-power-platform-environments/assets/Delete.png", "alt": "Environment deletion", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.23.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-powerapps-power-palette/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-powerapps-power-palette", "title": "Power Palette Studio", "description": "A SharePoint Framework (SPFx) web part that lets you generate, customize, and preview color palettes for Power Apps themes — all within SharePoint. Choose colors, fine-tune them with an interactive HSL picker, and instantly see how they look applied to a realistic dashboard in desktop and mobile views. When you're happy with your palette, copy the ready-to-paste Power Apps ColorValue formula with one click.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2026-04-01", "updated": "2026-04-01", "authors": [ { "name": "Sandeep-FED", "account": "Sandeep-FED", "avatar": "https://github.com/Sandeep-FED.png" } ], "preview": { "src": "/images/previews/f083bf7ec114ef5c4279c396c00f07408fafc523ab151c62371c23558a808246.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-powerapps-power-palette", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-powerapps-power-palette/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-powerapps-power-palette", "descriptionParagraphs": [ "A SharePoint Framework (SPFx) web part that lets you generate, customize, and preview color palettes for Power Apps themes — all within SharePoint. Choose colors, fine-tune them with an interactive HSL picker, and instantly see how they look applied to a realistic dashboard in desktop and mobile views. When you're happy with your palette, copy the ready-to-paste Power Apps ColorValue formula with one click." ], "previews": [ { "src": "/images/previews/f083bf7ec114ef5c4279c396c00f07408fafc523ab151c62371c23558a808246.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-powerapps-power-palette/assets/power-palette-light-desktop.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-powerapps-power-palette/assets/power-palette-light-mobile.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-powerautomate-approvals/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-powerautomate-approvals", "title": "Power Automate Approvals", "description": "The Power Automate Approvals web part is a SharePoint Framework (SPFx) solution that demonstrates how to consume the Microsoft Graph Approvals API (beta) using the native MSGraphClientV3 HTTP client. It renders a full approvals dashboard - approvals waiting on you, requests you've raised, and their history - with a per-item detail panel showing an activity timeline built from approver responses and reassignment history.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.22.1", "versionGroup": "1.22", "created": "2026-07-07", "updated": "2026-07-07", "authors": [ { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png" } ], "preview": { "src": "/images/previews/7ed0fcdd9be0f2e4c577fb39e22dea7f2682eb88df5f7e97c4ce07d694dfa914.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-powerautomate-approvals", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-powerautomate-approvals/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-powerautomate-approvals", "descriptionParagraphs": [ "The Power Automate Approvals web part is a SharePoint Framework (SPFx) solution that demonstrates how to consume the Microsoft Graph Approvals API (beta) using the native MSGraphClientV3 HTTP client. It renders a full approvals dashboard - approvals waiting on you, requests you've raised, and their history - with a per-item detail panel showing an activity timeline built from approver responses and reassignment history." ], "previews": [ { "src": "/images/previews/7ed0fcdd9be0f2e4c577fb39e22dea7f2682eb88df5f7e97c4ce07d694dfa914.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-powerautomate-approvals/assets/Pa%20Approvals%202.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-powerautomate-approvals/assets/Pa%20Approvals%203.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-powerautomate-approvals/assets/welcome-dark.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-powerautomate-approvals/assets/welcome-light.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[0].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[1].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[2].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 8 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-ppp-pnp-controls/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-ppp-pnp-controls", "title": "Property Pane Portal PnP Controls Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.14", "versionGroup": "1.14", "created": "2022-03-20", "updated": "2022-03-20", "authors": [ { "name": "Christophe Humbert", "account": "PathToSharePoint", "avatar": "https://github.com/PathToSharePoint.png" } ], "preview": { "src": "/images/previews/614b5dcab858a4829ecc90824c859c1d7cbcd199ff755a80a52af465b023f22a.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-ppp-pnp-controls", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-ppp-pnp-controls/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-ppp-pnp-controls", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/614b5dcab858a4829ecc90824c859c1d7cbcd199ff755a80a52af465b023f22a.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14", "issues": [ { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-ppw-html/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-ppw-html", "title": "Property Pane Wrapper for HTML Controls", "description": "Showcases the use of the Property Pane Wrap to embed HTML controls in the SPFx Property Pane", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.14", "versionGroup": "1.14", "created": "2022-02-10", "updated": "2022-02-10", "authors": [ { "name": "Christophe Humbert", "account": "PathToSharePoint", "avatar": "https://github.com/PathToSharePoint.png" } ], "preview": { "src": "/images/previews/a7084eaf33e246c11aebc1358b8f67cb73f6f09cddb1cb6d8ce66a043592fdbb.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-ppw-html", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-ppw-html/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-ppw-html", "descriptionParagraphs": [ "Showcases the use of the Property Pane Wrap to embed HTML controls in the SPFx Property Pane" ], "previews": [ { "src": "/images/previews/a7084eaf33e246c11aebc1358b8f67cb73f6f09cddb1cb6d8ce66a043592fdbb.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14", "issues": [ { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-private-libraries/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-private-libraries", "title": "Private Library/Folder Manager Web Part", "description": "This sample provides a webpart that can be used to manage Document Libraries with Secured Subfolders.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2021-07-02", "updated": "2021-07-02", "authors": [ { "name": "Russell Gove", "account": "russgove", "avatar": "https://github.com/russgove.png" } ], "preview": { "src": "/images/previews/b9eab5d845d8c6c4703c6bbf681d8dedfdeed1720050b7e875b6a61e32addf27.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-private-libraries", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-private-libraries/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-private-libraries", "descriptionParagraphs": [ "This sample provides a webpart that can be used to manage Document Libraries with Secured Subfolders. The use case this was developed for is a Request for Proposal site. A Document library is created for each RFP and subfolders are created within that Library for each external supplier invited to participate in that RFP.", "The application manages all the security groups set up for the various libraries and folders so that suppliers only see RFP's they were invited to participate in and only thier folder in those libraries. General documents for the RFP that should be seen by everyone participating in the RFP can be put in the root folder of the library. General terms and conditions that everyone should see can be put at the root folder of the site." ], "previews": [ { "src": "/images/previews/b9eab5d845d8c6c4703c6bbf681d8dedfdeed1720050b7e875b6a61e32addf27.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-project-online/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-project-online", "title": "Project Online Web Part", "description": "This sample shows how to use SPFx to consume data from the Project Online REST API.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-04-12", "updated": "2020-04-12", "authors": [ { "name": "Joel Rodrigues", "account": "joelfmrodrigues", "avatar": "https://github.com/joelfmrodrigues.png" } ], "preview": { "src": "/images/previews/ee3f344dcd7add182030c4c68d4e14652993e28c55d27e1fdca88085265cf716.webp", "alt": "Project Online", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-project-online", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-project-online/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-project-online", "descriptionParagraphs": [ "This sample shows how to use SPFx to consume data from the Project Online REST API." ], "previews": [ { "src": "/images/previews/ee3f344dcd7add182030c4c68d4e14652993e28c55d27e1fdca88085265cf716.webp", "alt": "Project Online", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-property-bag-editor/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-property-bag-editor", "title": "Property Bag Navigation Web parts", "description": "A set of web parts that lets you set property bag settings on site collections and enable navigation using those properties.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.17.1", "versionGroup": "1.17", "created": "2017-03-19", "updated": "2024-02-21", "authors": [ { "name": "Russell Gove", "account": "russgove", "avatar": "https://github.com/russgove.png" } ], "preview": { "src": "/images/previews/5ba61025f1433b218f64b9fa16c3f845e0e16cf72ecf73021dfc01aa350233e7.webp", "alt": "Property Bag Navigation Web parts", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-property-bag-editor", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-property-bag-editor/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-property-bag-editor", "descriptionParagraphs": [ "A set of web parts that lets you set property bag settings on site collections and enable navigation using those properties." ], "previews": [ { "src": "/images/previews/5ba61025f1433b218f64b9fa16c3f845e0e16cf72ecf73021dfc01aa350233e7.webp", "alt": "Property Bag Navigation Web parts", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.17.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-property-pane-navigation/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-property-pane-navigation", "title": "Property Pane Navigation Web Part", "description": "This sample showcase how to handle the navigation between property pane pages.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.18.2", "versionGroup": "1.18", "created": "2024-02-22", "updated": "2024-02-22", "authors": [ { "name": "Guido Zambarda", "account": "guidozam", "avatar": "https://github.com/guidozam.png" } ], "preview": { "src": "/images/previews/c6a28b79c83ce8cf3e278d7e1b7da8ca778f1b560a1f101b33dd4f9c88e9cd2f.webp", "alt": "Property Pane Navigation", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-property-pane-navigation", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-property-pane-navigation/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-property-pane-navigation", "descriptionParagraphs": [ "This sample showcase how to handle the navigation between property pane pages." ], "previews": [ { "src": "/images/previews/c6a28b79c83ce8cf3e278d7e1b7da8ca778f1b560a1f101b33dd4f9c88e9cd2f.webp", "alt": "Property Pane Navigation", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-property-pane-navigation/assets/FirstPropertyPanePage.png", "alt": "Property Pane Navigation", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-property-pane-navigation/assets/SecondPropertyPanePage.png", "alt": "Property Pane Navigation", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-property-pane-navigation/assets/ThirdPropertyPanePage.png", "alt": "Property Pane Navigation", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Integrate web part properties with SharePoint", "description": "Learn how to integrate web part properties with SharePoint.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/integrate-web-part-properties-with-sharepoint" }, { "title": "Make your SharePoint client-side web part configurable", "description": "Learn how to make your SharePoint client-side web part configurable.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/basics/integrate-with-property-pane" }, { "title": "Validate web part property values", "description": "Learn how to validate web part property values.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/validate-web-part-property-values" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-provision-assets/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-provision-assets", "title": "Provision SharePoint Assets with the SPFx solution package", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.18.0", "versionGroup": "1.18", "created": "2020-09-06", "updated": "2020-09-06", "authors": [ { "name": "Velin Georgiev", "account": "VelinGeorgiev", "avatar": "https://github.com/VelinGeorgiev.png" }, { "name": "Nanddeep Nachan", "account": "nanddeepn", "avatar": "https://github.com/nanddeepn.png" } ], "preview": { "src": "/images/previews/f3fd4c83dc3fecb5dc94b6e309233d8ecde89a44a4f9b598adba5419490d6343.webp", "alt": "Provision SharePoint Assets with the SPFx solution package", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-provision-assets", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-provision-assets/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-provision-assets", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/f3fd4c83dc3fecb5dc94b6e309233d8ecde89a44a4f9b598adba5419490d6343.webp", "alt": "Provision SharePoint Assets with the SPFx solution package", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.18.0", "issues": [ { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-public-holidays-global/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-public-holidays-global", "title": "Public Holidays Global", "description": "Displays public holidays for multiple countries and years.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-06-17", "updated": "2026-07-28", "authors": [ { "name": "João Livio", "account": "jtlivio", "avatar": "https://github.com/jtlivio.png" } ], "preview": { "src": "/images/previews/0ee0f60f14f9cd8efbf4d12f6d9becebbadea52d97d445bd082d7d8f76ef8dae.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-public-holidays-global", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-public-holidays-global/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-public-holidays-global", "descriptionParagraphs": [ "This SharePoint Framework (SPFx) web part displays public holidays for multiple countries and years. Users can select the country via the property pane, view holidays for the current year, navigate through paginated results." ], "previews": [ { "src": "/images/previews/0ee0f60f14f9cd8efbf4d12f6d9becebbadea52d97d445bd082d7d8f76ef8dae.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-questions-and-answers/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-questions-and-answers", "title": "Questions and Answers Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Application customizer", "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2021-03-22", "updated": "2021-03-22", "authors": [ { "name": "Bo George", "account": "bogeorge", "avatar": "https://avatars.githubusercontent.com/u/10885472?s=460&u=74d23f4289cd555aa530e1c2c6156a382c373f2f&v=4" } ], "preview": { "src": "/images/previews/67261d2298141c8002034af65d1c1f133f7abb335a7a60be4899e213934d37e0.webp", "alt": "React Questions and Answers", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-questions-and-answers", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-questions-and-answers/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-questions-and-answers", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/67261d2298141c8002034af65d1c1f133f7abb335a7a60be4899e213934d37e0.webp", "alt": "React Questions and Answers", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-quick-links-grid/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-quick-links-grid", "title": "Quick Links Grid", "description": "Displays a set of quick links fetched from a SharePoint list.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2024-08-11", "updated": "2025-07-18", "authors": [ { "name": "Venkadesh Sundaramurthy", "account": "VenkadeshSundaramurthy", "avatar": "https://github.com/VenkadeshSundaramurthy.png" }, { "name": "Adam Wójcik", "account": "Adam-it", "avatar": "https://github.com/Adam-it.png" } ], "preview": { "src": "/images/previews/31a102142733d266c4218d33b9a64987a9c9d4efbb40f4a27158032a73eb4b07.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links-grid", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links-grid/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-quick-links-grid", "descriptionParagraphs": [ "Displays a set of quick links fetched from a SharePoint list.", "The quick links are displayed with icons and titles in a responsive grid layout." ], "previews": [ { "src": "/images/previews/31a102142733d266c4218d33b9a64987a9c9d4efbb40f4a27158032a73eb4b07.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links-grid/assets/356854637-e68afa9a-0e48-40bf-abc0-f0fa12f154c7.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links-grid/assets/356854684-bae0b02d-aaa8-47ba-b3c1-57e684260fd1.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links-grid/assets/react-quick-links-grid-sample-screenshot.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-quick-links-hierarchy/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-quick-links-hierarchy", "title": "Quick Links Hierarchy", "description": "A modern SharePoint Framework web part that provides hierarchical quick links management with collapsible tree navigation and inline CRUD operations directly from the page.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-11-07", "updated": "2025-11-07", "authors": [ { "name": "Sai Siva Ram Bandaru", "account": "saiiiiiii", "avatar": "https://github.com/saiiiiiii.png" } ], "preview": { "src": "/images/previews/19c8a07d9a53929b446ba14225d8e7e38dd7ebccafdc1b654bc7b7725feb7b50.webp", "alt": "Quick Links Hierarchy demo", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links-hierarchy", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links-hierarchy/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-quick-links-hierarchy", "descriptionParagraphs": [ "A modern SharePoint Framework (SPFx) web part that provides hierarchical quick links management with collapsible tree navigation and inline CRUD operations. Content authors can organize and manage navigational links in unlimited parent-child relationships directly from the page using a comprehensive configuration panel. Features include visual tree editor, headers/folders support, active/inactive toggles, custom Fluent UI icons, multiple list support, and responsive design. The web part eliminates the need to navigate to list settings, providing an intuitive interface for managing complex link hierarchies." ], "previews": [ { "src": "/images/previews/19c8a07d9a53929b446ba14225d8e7e38dd7ebccafdc1b654bc7b7725feb7b50.webp", "alt": "Quick Links Hierarchy demo", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links-hierarchy/assets/display-view.png", "alt": "Hierarchical display with collapsible sections", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links-hierarchy/assets/config-panel.png", "alt": "Configuration panel with tree editor", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links-hierarchy/assets/item-editor.png", "alt": "Item editor with all properties", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://docs.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Using PnP JS with SharePoint Framework", "description": "Learn how to use PnP JS library in your SharePoint Framework solutions for modern SharePoint REST API interactions.", "url": "https://pnp.github.io/pnpjs/getting-started/" }, { "title": "Fluent UI React Components", "description": "Fluent UI React is a collection of robust React-based components designed to make it simple for you to create consistent web experiences using the Fluent Design Language.", "url": "https://developer.microsoft.com//fluentui#/controls/web" }, { "title": "SharePoint Lookup Fields", "description": "Learn how to work with lookup columns in SharePoint, including self-referencing lookups for hierarchical data structures.", "url": "https://docs.microsoft.com//sharepoint/dev/schema/lookup-element-list" } ], "products": [ "SharePoint", "Office" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-quick-links-pro/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-quick-links-pro", "title": "Quick Links Pro", "description": "A modern SharePoint Framework web part that provides dynamic quick-access links with inline editing capabilities directly from the page.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-10-30", "updated": "2025-10-30", "authors": [ { "name": "Sai Siva Ram Bandaru", "account": "saiiiiiii", "avatar": "https://github.com/saiiiiiii.png" } ], "preview": { "src": "/images/previews/c26456985c85778a3915f44125dbd8f003f53520f00d02747aba424ecbd9844b.webp", "alt": "Cards display style", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links-pro", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links-pro/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-quick-links-pro", "descriptionParagraphs": [ "A modern SharePoint Framework (SPFx) web part that provides dynamic quick-access links with inline editing capabilities. Content authors can manage links directly from the page using a configuration panel, eliminating the need to navigate to list settings or the property pane. Features include edit mode detection, multiple display styles (cards, buttons, list), CRUD operations, link target control, icon support, and responsive design." ], "previews": [ { "src": "/images/previews/c26456985c85778a3915f44125dbd8f003f53520f00d02747aba424ecbd9844b.webp", "alt": "Cards display style", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links-pro/assets/quick-links-pro-demo.gif", "alt": "Quick Links Pro demo", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links-pro/assets/list-view.png", "alt": "List display style", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links-pro/assets/config-panel.png", "alt": "Configuration panel", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links-pro/assets/edit-mode.png", "alt": "Edit mode with gear icon", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Using PnP JS with SharePoint Framework", "description": "Learn how to use PnP JS library in your SharePoint Framework solutions for modern SharePoint REST API interactions.", "url": "https://pnp.github.io/pnpjs/getting-started/" }, { "title": "Fluent UI React Components", "description": "Fluent UI React is a collection of robust React-based components designed to make it simple for you to create consistent web experiences using the Fluent Design Language.", "url": "https://developer.microsoft.com/fluentui#/controls/web" } ], "products": [ "SharePoint", "Office" ], "supportedHosts": [ "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-quick-links/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-quick-links", "title": "Quick Links Web Part", "description": "A demonstration of how one could build SharePoints Quick Links web part", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2023-03-05", "updated": "2025-07-31", "authors": [ { "name": "Dan Toft", "account": "Tanddant", "avatar": "https://github.com/Tanddant.png" }, { "name": "Jeppe Spanggaard", "account": "jeppesc11", "avatar": "https://github.com/jeppesc11.png" } ], "preview": { "src": "/images/previews/366f7fb4921a7fcee8bb24c4baa84874e2fa17754365bd332114249e6fa4f04e.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-quick-links", "descriptionParagraphs": [ "A demonstration of building a web part with a dynamic property pane, drag n' drop edit capabilities - I've built the Tiles feature of the default Quick Links web part, but made room for the option to implement the other 5 layouts." ], "previews": [ { "src": "/images/previews/366f7fb4921a7fcee8bb24c4baa84874e2fa17754365bd332114249e6fa4f04e.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links/assets/Screenshot.png", "alt": "Screen shot", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-links/assets/Screenshot-with-audiencetargeting.png", "alt": "Screen shot with audience targeting", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-quick-poll/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-quick-poll", "title": "Quick Poll Web Part", "description": "This component is developed for the users who really need to create a Poll within a minute and with less maintenance.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.13.1", "versionGroup": "1.13", "created": "2020-10-17", "updated": "2022-03-18", "authors": [ { "name": "Sudharsan Kesavanarayanan", "account": "sudharsank", "avatar": "https://github.com/sudharsank.png" }, { "name": "Dipen Shah", "account": "dips365", "avatar": "https://github.com/dips365.png" } ], "preview": { "src": "/images/previews/d324b5062034f6d867d13f7177cb55685b522a7ee5fe04c6b32468eb79943716.webp", "alt": "Quick Poll", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-poll", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quick-poll/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-quick-poll", "descriptionParagraphs": [ "This component is developed for the users who really need to create a Poll within a minute and with less maintenance." ], "previews": [ { "src": "/images/previews/d324b5062034f6d867d13f7177cb55685b522a7ee5fe04c6b32468eb79943716.webp", "alt": "Quick Poll", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-quotes/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-quotes", "title": "Quote of the Day Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.13.1", "versionGroup": "1.13", "created": "2019-11-11", "updated": "2022-01-01", "authors": [ { "name": "Zach Roberts", "account": "zachroberts8668", "avatar": "https://github.com/zachroberts8668.png" }, { "name": "Yves Habersaat", "account": "yhabersaat", "avatar": "https://github.com/yhabersaat.png" } ], "preview": { "src": "/images/previews/fdcbd2c68fdfce0acf60c384b2f2c06412ef91cd1a6247e401d0a2ca85c866af.webp", "alt": "Quote of the Day", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quotes", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-quotes/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-quotes", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/fdcbd2c68fdfce0acf60c384b2f2c06412ef91cd1a6247e401d0a2ca85c866af.webp", "alt": "Quote of the Day", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-react-query/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-react-query", "title": "Query Microsoft Graph Web Part", "description": "This sample shows how you can query Microsoft Graph from React in SharePoint Framework", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2022-10-18", "updated": "2022-10-18", "authors": [ { "name": "Marcin Wojciechowski", "account": "mgwojciech", "avatar": "https://github.com/mgwojciech.png" } ], "preview": { "src": "/images/previews/c8aa48e3aeae2c2ca8276e7b931c97c75b32f40abd3cf90ab82e407fc15ebb56.webp", "alt": "No preview available", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-react-query", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-react-query/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-react-query", "descriptionParagraphs": [ "This sample shows how you can query Microsoft Graph from React in SharePoint Framework" ], "previews": [ { "src": "/images/previews/c8aa48e3aeae2c2ca8276e7b931c97c75b32f40abd3cf90ab82e407fc15ebb56.webp", "alt": "No preview available", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-real-time/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-real-time", "title": "Real Time News Feed Web Part using Azure Logic Apps, Node.js and socket.io", "description": "This sample shows you how to implement real time web parts using the SPFx, Azure Logic Apps, Node.js and socket.io.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "0.1.0", "versionGroup": "< 1.1", "created": "2016-11-04", "updated": "2016-11-04", "authors": [ { "name": "Franck Cornu", "account": "FranckyC", "avatar": "https://github.com/FranckyC.png" } ], "preview": { "src": "/images/previews/35da656e02343f02e8243f26ceac49e63ee6c2067746e891581c0d0e3c30ad2c.webp", "alt": "Real Time News Feed using Azure Logic Apps, Node.js and socket.io", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-real-time", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-real-time/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-real-time", "descriptionParagraphs": [ "This sample shows you how to implement real time web parts using the SPFx, Azure Logic Apps, Node.js and socket.io." ], "previews": [ { "src": "/images/previews/35da656e02343f02e8243f26ceac49e63ee6c2067746e891581c0d0e3c30ad2c.webp", "alt": "Real Time News Feed using Azure Logic Apps, Node.js and socket.io", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-real-time/assets/flow.png", "alt": "Real Time News Feed using Azure Logic Apps, Node.js and socket.io", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-real-time/assets/network-console.png", "alt": "Real Time News Feed using Azure Logic Apps, Node.js and socket.io", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-real-time/assets/service-bus-new-connection.png", "alt": "Real Time News Feed using Azure Logic Apps, Node.js and socket.io", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-real-time/assets/service-bus.png", "alt": "Real Time News Feed using Azure Logic Apps, Node.js and socket.io", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-real-time/assets/solution_overview.png", "alt": "Real Time News Feed using Azure Logic Apps, Node.js and socket.io", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-real-time/assets/spfx-initial.png", "alt": "Real Time News Feed using Azure Logic Apps, Node.js and socket.io", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-real-time/assets/spfx-newitem.png", "alt": "Real Time News Feed using Azure Logic Apps, Node.js and socket.io", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "0.1.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-realtime-documents/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-realtime-documents", "title": "List Subscription Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.7.0", "versionGroup": "1.7", "created": "2018-11-09", "updated": "2018-11-09", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/83b4b8b3aea9a320eaaae6fdca2ed27852b0f13e35fb3b170b81ba5026bb8f36.webp", "alt": "List subscription", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-realtime-documents", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-realtime-documents/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-realtime-documents", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/83b4b8b3aea9a320eaaae6fdca2ed27852b0f13e35fb3b170b81ba5026bb8f36.webp", "alt": "List subscription", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.7.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-realtime-incidentdashboard/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-realtime-incidentdashboard", "title": "List notifications + Microsoft Teams Integrations", "description": "Illustrating using the SharePoint Framework List subscription capability, which allows you to get notified of changes to custom list refresh the displayed data", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.18.0", "versionGroup": "1.18", "created": "2023-10-23", "updated": "2023-10-23", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/ef4a5f672045037c361a79b31c9442f91109bc1f95ae62049dad7ccc61ed1659.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-realtime-incidentdashboard", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-realtime-incidentdashboard/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-realtime-incidentdashboard", "descriptionParagraphs": [ "Illustrating using the SharePoint Framework List subscription capability, which allows you to get notified of changes to custom list refresh the displayed data" ], "previews": [ { "src": "/images/previews/ef4a5f672045037c361a79b31c9442f91109bc1f95ae62049dad7ccc61ed1659.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-recaptcha/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-recaptcha", "title": "Google reCaptcha Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2019-10-10", "updated": "2019-10-10", "authors": [ { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png" } ], "preview": { "src": "/images/previews/b1e903f7835ee7c0522dcb40162cab886d687be4e1366e5e7feaf0ab9f34b568.webp", "alt": "Google reCaptcha Sample", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-recaptcha", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-recaptcha/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-recaptcha", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/b1e903f7835ee7c0522dcb40162cab886d687be4e1366e5e7feaf0ab9f34b568.webp", "alt": "Google reCaptcha Sample", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-recent-contacts/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-recent-contacts", "title": "Recent Contacts Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10", "versionGroup": "1.10", "created": "2018-05-01", "updated": "2018-05-01", "authors": [ { "name": "Eric Overfield", "account": "eoverfield", "avatar": "https://github.com/eoverfield.png" } ], "preview": { "src": "/images/previews/7151432e021ae321a149b9720ce7361a3f92e5366090d0c95fb2be63e5c55e2a.webp", "alt": "Recent Contacts", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-recent-contacts", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-recent-contacts/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-recent-contacts", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/7151432e021ae321a149b9720ce7361a3f92e5366090d0c95fb2be63e5c55e2a.webp", "alt": "Recent Contacts", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10", "issues": [ { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-recently-used-documents/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-recently-used-documents", "title": "Recently Used Documents Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10", "versionGroup": "1.10", "created": "2018-05-01", "updated": "2018-05-01", "authors": [ { "name": "Eric Overfield", "account": "eoverfield", "avatar": "https://github.com/eoverfield.png" } ], "preview": { "src": "/images/previews/c7b8f3d4f8f8239ad41f4bb25bda738d13a9abb460e1c27aecbcd105570709ff.webp", "alt": "Recently Used Documents", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-recently-used-documents", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-recently-used-documents/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-recently-used-documents", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/c7b8f3d4f8f8239ad41f4bb25bda738d13a9abb460e1c27aecbcd105570709ff.webp", "alt": "Recently Used Documents", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10", "issues": [ { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-recently-visited-sites/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-recently-visited-sites", "title": "Recently Visited Sites Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10", "versionGroup": "1.10", "created": "2018-05-01", "updated": "2018-05-01", "authors": [ { "name": "Eric Overfield", "account": "eoverfield", "avatar": "https://github.com/eoverfield.png" } ], "preview": { "src": "/images/previews/732c3ca576cacfd13ce3e2383fc90ce0fc8074e7140d937e9101f1e829050d5d.webp", "alt": "Recently Visited Sites", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-recently-visited-sites", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-recently-visited-sites/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-recently-visited-sites", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/732c3ca576cacfd13ce3e2383fc90ce0fc8074e7140d937e9101f1e829050d5d.webp", "alt": "Recently Visited Sites", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10", "issues": [ { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-redux-async-immutablejs/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-redux-async-immutablejs", "title": "Using React, Redux and ImmutableJS", "description": "SharePoint Framework web part which uses Redux to maintain a single state for the entire application and ImmutableJS to create performant state trees.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.1.1", "versionGroup": "1.1", "created": "2017-07-11", "updated": "2017-07-11", "authors": [ { "name": "Vardhaman Deshpande", "account": "vman", "avatar": "https://github.com/vman.png" } ], "preview": { "src": "/images/previews/383263350ea0a9e69b5313562bd807782ca7c74f8bd0a524405c5acea51bbc44.webp", "alt": "Using React, Redux and ImmutableJS", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-redux-async-immutablejs", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-redux-async-immutablejs/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-redux-async-immutablejs", "descriptionParagraphs": [ "SharePoint Framework web part which uses Redux to maintain a single state for the entire application and ImmutableJS to create performant state trees." ], "previews": [ { "src": "/images/previews/383263350ea0a9e69b5313562bd807782ca7c74f8bd0a524405c5acea51bbc44.webp", "alt": "Using React, Redux and ImmutableJS", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.1.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-redux/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-redux", "title": "Using React and Redux", "description": "Sample web part implementation that uses Redux to keep track of its state.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "0.1.0", "versionGroup": "< 1.1", "created": "2016-10-28", "updated": "2016-10-28", "authors": [ { "name": "Kevin Mees", "account": "kmees", "avatar": "https://github.com/kmees.png" } ], "preview": { "src": "/images/previews/85b48847faadfa4fd9c0b791394468fb2a1e1fb93c37e5d64b221e19c62442a6.webp", "alt": "Using React and Redux", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-redux", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-redux/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-redux", "descriptionParagraphs": [ "Sample web part implementation that uses Redux to keep track of its state." ], "previews": [ { "src": "/images/previews/85b48847faadfa4fd9c0b791394468fb2a1e1fb93c37e5d64b221e19c62442a6.webp", "alt": "Using React and Redux", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-redux/assets/reactive.gif", "alt": "Using React and Redux", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "0.1.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-reduxform/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-reduxform", "title": "Using Redux-Form library and React", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-05-02", "updated": "2018-05-02", "authors": [ { "name": "Vipul Kelkar", "account": "vipulkelkar", "avatar": "https://github.com/vipulkelkar.png" } ], "preview": { "src": "/images/previews/68d2ed7568446fa90bbccc7a5a3074fe6ca0c4d2a5f1379fe82bd6bba4bda285.webp", "alt": "Using Redux-Form library and React", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-reduxform", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-reduxform/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-reduxform", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/68d2ed7568446fa90bbccc7a5a3074fe6ca0c4d2a5f1379fe82bd6bba4bda285.webp", "alt": "Using Redux-Form library and React", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-remote-event-receiver-manager/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-remote-event-receiver-manager", "title": "Remote Event Receiver Manager Web Part", "description": "Lets you add and delete remote event receivers to lists", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2021-05-03", "updated": "2021-06-09", "authors": [ { "name": "Dan Toft", "account": "Tanddant", "avatar": "https://github.com/Tanddant.png" } ], "preview": { "src": "/images/previews/e137689fcd3c14e669a1ea655818c54c4fcd8104f2bcbf877f1ec802d25e44d4.webp", "alt": "Word Game", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-remote-event-receiver-manager", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-remote-event-receiver-manager/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-remote-event-receiver-manager", "descriptionParagraphs": [ "A very simple web part that lets you add and delete remote event receivers to lists, the need came about due to remote event receivers not functioning properly when added with app only authentication and PnP.Powershell now only using that." ], "previews": [ { "src": "/images/previews/e137689fcd3c14e669a1ea655818c54c4fcd8104f2bcbf877f1ec802d25e44d4.webp", "alt": "Word Game", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-restaurant-menu/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-restaurant-menu", "title": "Restaurant Menu Web Part", "description": "This web part shows a Restaurant Menu, the user can select the options to show in Menu.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-09-05", "updated": "2020-09-05", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-restaurant-menu", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-restaurant-menu/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-restaurant-menu", "descriptionParagraphs": [ "This web part shows a Restaurant Menu, the user can select the options to show in Menu." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-restaurant-menu/assets/restaurantmenu.png", "alt": "Restaurant Menu", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-restaurant-menu/assets/restaurantmenu2.png", "alt": "Restaurant Menu", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-restaurant-menu/assets/restaurantmenu3.png", "alt": "Restaurant Menu", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-rhythm-of-business-calendar/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-rhythm-of-business-calendar", "title": "Rhythm of Business Calendar Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "TypeScript" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2022-09-26", "updated": "2024-09-13", "authors": [ { "name": "Dan Turley", "account": "d-turley", "avatar": "https://github.com/d-turley.png" } ], "preview": { "src": "/images/previews/f958d3752e7f53a12518bd8263c659a7442684b6ac222758eb690dcb6ecd94aa.webp", "alt": "Edit refiners", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-rhythm-of-business-calendar", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-rhythm-of-business-calendar/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-rhythm-of-business-calendar", "descriptionParagraphs": [ "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.", "Rhythm of Business (RoB) Calendar keeps you on top of your business goals by managing all team and organizational events seamlessly. Simplify and expedite the coordination and planning process for your team and subgroups with the help of color-coded events, approval workflow, refiners and confidential events. Ideal for Chiefs of Staff, Executive Assistants, or anyone who manages a team calendar, you can empower your teams by enabling better insights on your business goals and team events." ], "previews": [ { "src": "/images/previews/f958d3752e7f53a12518bd8263c659a7442684b6ac222758eb690dcb6ecd94aa.webp", "alt": "Edit refiners", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-rhythm-of-business-calendar/assets/screenshot-month-view.png", "alt": "Month view", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-rhythm-of-business-calendar/assets/screenshot-view-event.png", "alt": "View event", "isFallback": false } ], "references": [ { "title": "Getting started with SharePoint Framework", "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/set-up-your-developer-tenant" }, { "title": "Build your first SharePoint client-side web part", "description": "Learn how to develop your first Web Part using SharePoint Framework (SPFx).", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint", "Microsoft Teams" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-richtext-editor/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-richtext-editor", "title": "Rich Text Editor - Fluent UI", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-02-11", "updated": "2025-02-11", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/a929d7eb53682ccf8407ea9767fa431cf806b36544560b3aea86035bab197e06.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-richtext-editor", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-richtext-editor/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-richtext-editor", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/a929d7eb53682ccf8407ea9767fa431cf806b36544560b3aea86035bab197e06.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-roomchat/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-roomchat", "title": "Room Chat Web Part", "description": "This web part shows how to use Azure Communications Services and React UI component to create a Room Chat.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.15.0", "versionGroup": "1.15", "created": "2022-07-19", "updated": "2022-07-19", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/0f59ef0152991a3027d97341a91c2c2afde2c3a403d8b8ba3a31ee91bdbfdf63.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-roomchat", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-roomchat/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-roomchat", "descriptionParagraphs": [ "This web part shows how to use Azure Communications Services and React UI component to create a Room Chat." ], "previews": [ { "src": "/images/previews/0f59ef0152991a3027d97341a91c2c2afde2c3a403d8b8ba3a31ee91bdbfdf63.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-roomchat/assets/roomchat.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-rss-reader/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-rss-reader", "title": "RSS Reader", "description": "A RSS Reader original based on work by Olivier Carpentier, part of the SPFx Fantastic 40 Web Parts", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.22.2", "versionGroup": "1.22", "created": "2024-12-25", "updated": "2026-04-15", "authors": [ { "name": "Abderahman Moujahid", "account": "Abderahman88", "avatar": "https://github.com/Abderahman88.png" }, { "name": "Eric Overfield", "account": "eoverfield", "avatar": "https://github.com/eoverfield.png" }, { "name": "Kalle Mansikkaniemi", "account": "djsladi", "avatar": "https://github.com/djsladi.png" }, { "name": "Lauri Koskimies", "account": "koskimiesl", "avatar": "https://github.com/koskimiesl.png" }, { "name": "Nishkalank Bezawada", "account": "NishkalankBezawada", "avatar": "https://github.com/NishkalankBezawada.png" } ], "preview": { "src": "/images/previews/8db975e353e644ee2f5507b49f012b9ebafb3b1c58b32424dd21fff4b110fa87.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-rss-reader", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-rss-reader/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-rss-reader", "descriptionParagraphs": [ "A RSS Reader original based on work by Olivier Carpentier, part of the SPFx Fantastic 40 Web Parts" ], "previews": [ { "src": "/images/previews/8db975e353e644ee2f5507b49f012b9ebafb3b1c58b32424dd21fff4b110fa87.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-rss-reader/assets/react-rss-reader.gif", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-rss-reader/assets/rss_property_pane.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-rxjs-event-emitter/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-rxjs-event-emitter", "title": "ReactiveX (RxJs) Event Emitter Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Library component", "Web part" ], "technologies": [ "React" ], "version": "1.7.0", "versionGroup": "1.7", "created": "2018-12-10", "updated": "2018-12-10", "authors": [ { "name": "Velin Georgiev", "account": "VelinGeorgiev", "avatar": "https://github.com/VelinGeorgiev.png" } ], "preview": { "src": "/images/previews/0fa05295fd3ddb80a0663178b704eaff72fe29ff055b1a8fb610a84e2b2a4a3e.webp", "alt": "ReactiveX (RxJs) Event Emitter Sample", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-rxjs-event-emitter", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-rxjs-event-emitter/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-rxjs-event-emitter", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/0fa05295fd3ddb80a0663178b704eaff72fe29ff055b1a8fb610a84e2b2a4a3e.webp", "alt": "ReactiveX (RxJs) Event Emitter Sample", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.7.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-sales-orders/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-sales-orders", "title": "Sales Orders Web Part", "description": "Shows how how to use Microsoft Graph Connector that use DB2 Database and display Sales Orders in a list.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.18.0", "versionGroup": "1.18", "created": "2023-11-06", "updated": "2023-11-06", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/11c24d2206ca501f3850fd7bd860a5bc80ae6fe838f8ee435c12c578a0b7b682.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sales-orders", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sales-orders/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-sales-orders", "descriptionParagraphs": [ "This Sample show how to use Microsoft Graph Connector that use DB2 Database and display Sales Orders in a list." ], "previews": [ { "src": "/images/previews/11c24d2206ca501f3850fd7bd860a5bc80ae6fe838f8ee435c12c578a0b7b682.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sales-orders/assets/salesOrders01.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sales-orders/assets/salesOrders02.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sales-orders/assets/teams01.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-save-attachments/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-save-attachments", "title": "Save Attachments Web Part", "description": "This SPFx Outlook Add-In lets users save any email attachments to a OneDrive folder.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.13.0-beta.15", "versionGroup": "1.13", "created": "2020-10-04", "updated": "2021-10-19", "authors": [ { "name": "Aakash Bhardwaj", "account": "aakashbhardwaj619", "avatar": "https://avatars.githubusercontent.com/u/33526902?s=460&u=e780f4ef1da922c84f2c5c66c59cecbff2300581&v=4" } ], "preview": { "src": "/images/previews/30c124f64dd39f9d31987944ec13a86c8803a0ee6f32b2648e770c68964fad21.webp", "alt": "Save Attachments", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-save-attachments", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-save-attachments/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-save-attachments", "descriptionParagraphs": [ "This SPFx Outlook Add-In lets users save any email attachments to a OneDrive folder." ], "previews": [ { "src": "/images/previews/30c124f64dd39f9d31987944ec13a86c8803a0ee6f32b2648e770c68964fad21.webp", "alt": "Save Attachments", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-save-attachments/assets/react-save-attachments-1.png", "alt": "Save Attachments", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-save-attachments/assets/react-save-attachments-2.gif", "alt": "Save Attachments", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Create Outlook Add-ins using SharePoint Framework", "description": "Introduced in SharePoint Framework v1.10, you can implement an Outlook Web App add-in with the SharePoint Framework and use SharePoint as a host for your solution.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/office-addins-create" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0-beta.15", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-save-to-onedrive-app-personal-folder/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-save-to-onedrive-app-personal-folder", "title": "Save to User Application Personal Folder in OneDrive", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Library component", "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.14", "versionGroup": "1.14", "created": "2022-02-21", "updated": "2022-02-21", "authors": [ { "name": "Adam Wójcik", "account": "Adam-it", "avatar": "https://github.com/Adam-it.png" } ], "preview": { "src": "/images/previews/1ef7e38fb5e92d10b8e9d035b90a69f5b2c6e7b56f8bf6f87b286b0dc5c7ab84.webp", "alt": "Web Part Preview in SharePoint", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-save-to-onedrive-app-personal-folder", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-save-to-onedrive-app-personal-folder/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-save-to-onedrive-app-personal-folder", "descriptionParagraphs": [ "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. The solution is built of two compontents.", "SPFx library which provides the functionality to manage data saved to OneDrive application personal folder and SFIx webpart component which is a very simple solution that uses the library and gets or saves data." ], "previews": [ { "src": "/images/previews/1ef7e38fb5e92d10b8e9d035b90a69f5b2c6e7b56f8bf6f87b286b0dc5c7ab84.webp", "alt": "Web Part Preview in SharePoint", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-save-to-onedrive-app-personal-folder/assets/in-teams.png", "alt": "Web Part Preview in Teams", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14", "issues": [ { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[1].order", "message": "Preview order is duplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-script-editor-onprem/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-script-editor-onprem", "title": "Script editor web part for modern pages", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2020-03-16", "updated": "2020-03-16", "authors": [ { "name": "Mikael Svenson", "account": "wobba", "avatar": "https://github.com/wobba.png" } ], "preview": { "src": "/images/previews/864dde6999f56131393b554f6dfbb18fbaac466469d72143ef6736b2bc13367e.webp", "alt": "Script editor web part for modern pages", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-script-editor-onprem", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-script-editor-onprem/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-script-editor-onprem", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/864dde6999f56131393b554f6dfbb18fbaac466469d72143ef6736b2bc13367e.webp", "alt": "Script editor web part for modern pages", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Using single part app pages in SharePoint Online", "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-script-editor/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-script-editor", "title": "Script editor web part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2019-10-13", "updated": "2024-10-01", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" }, { "name": "Felix Bohnacker", "account": "felixbohnacker", "avatar": "https://github.com/felixbohnacker.png" }, { "name": "salascz", "account": "salascz", "avatar": "https://github.com/salascz.png" }, { "name": "Mikael Svenson", "account": "wobba", "avatar": "https://github.com/wobba.png" } ], "preview": { "src": "/images/previews/f6c7ea49265e0ff2e967ed11af989c981b3e684f2c4abe0a3581777de92511bf.webp", "alt": "Script editor web part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-script-editor", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-script-editor/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-script-editor", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/f6c7ea49265e0ff2e967ed11af989c981b3e684f2c4abe0a3581777de92511bf.webp", "alt": "Script editor web part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-script-editor/assets/modern-script-editor-wp-teams.gif", "alt": "Script editor web part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Using single part app pages in SharePoint Online", "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-search/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-search", "title": "Search Client-Side Web Part built with React and Flux", "description": "Sample Search Web Part with internal and external template support. This sample illustrates how you can use React and Flux within the SharePoint Framework.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.0.0", "versionGroup": "< 1.1", "created": "2017-02-28", "updated": "2017-02-28", "authors": [ { "name": "Elio Struyf", "account": "estruyf", "avatar": "https://github.com/estruyf.png" } ], "preview": { "src": "/images/previews/54838609720071f4970ca424e50c0d9da24f9f25f47a968e4b0d7888cbdc0ec7.webp", "alt": "Search Client-Side Web Part built with React and Flux", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-search", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-search/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-search", "descriptionParagraphs": [ "Sample Search Web Part with internal and external template support. This sample illustrates how you can use React and Flux within the SharePoint Framework." ], "previews": [ { "src": "/images/previews/54838609720071f4970ca424e50c0d9da24f9f25f47a968e4b0d7888cbdc0ec7.webp", "alt": "Search Client-Side Web Part built with React and Flux", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-search/assets/external.png", "alt": "Search Client-Side Web Part built with React and Flux", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-search/assets/internal.png", "alt": "Search Client-Side Web Part built with React and Flux", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.0.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-securitygrid/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-securitygrid", "title": "Security Grid", "description": "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:", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2021-03-06", "updated": "2025-09-12", "authors": [ { "name": "Russell Gove", "account": "russgove", "avatar": "https://github.com/russgove.png" } ], "preview": { "src": "/images/previews/0da55afcfc6338c226a9130b2aeef71b4bfad142b95cb88aaa730b935a111568.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-securitygrid", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-securitygrid/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-securitygrid", "descriptionParagraphs": [ "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:" ], "previews": [ { "src": "/images/previews/0da55afcfc6338c226a9130b2aeef71b4bfad142b95cb88aaa730b935a111568.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-settings-approot/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-settings-approot", "title": "SPFx Personal Settings Solution", "description": "A full-stack solution for secure, user-specific settings in SharePoint using SPFx, Azure Functions, and Microsoft Graph approot.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-07-01", "updated": "2025-07-01", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/paolopia.png" } ], "preview": { "src": "/images/previews/52380ea122535af0fe9e8400f0844cf4056922e98b4c694a7419697b739210f3.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-settings-approot", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-settings-approot/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-settings-approot", "descriptionParagraphs": [ "This sample demonstrates how to build a secure, enterprise-ready solution for managing personal user settings in SharePoint. It uses a SPFx React web part for the UI, an Azure Function API for business logic and security, and Microsoft Graph's approot special folder for per-user storage. The solution implements the On-Behalf-Of (OBO) flow, JWT validation, and CORS, and is ready for real-world deployment." ], "previews": [ { "src": "/images/previews/52380ea122535af0fe9e8400f0844cf4056922e98b4c694a7419697b739210f3.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Changes on SharePoint Framework (SPFx) permission grants in Microsoft Entra ID", "description": "Article explaining a set of changes to the way API permissions are managed in SharePoint Online by Tenant Administrators in SharePoint Framework (SPFx) starting from March 2025.", "url": "https://devblogs.microsoft.com/microsoft365dev/changes-on-sharepoint-framework-spfx-permission-grants-in-microsoft-entra-id/" }, { "title": "Microsoft Graph Special Folders", "description": "Learn how to use Microsoft Graph special folders, such as the 'approot' folder, to store and manage user-specific files and settings in OneDrive for Business in a secure and isolated way.", "url": "https://learn.microsoft.com/graph/api/drive-get-specialfolder?view=graph-rest-1.0&tabs=http" }, { "title": "On-Behalf-Of Flow", "description": "Understand how to implement the OAuth 2.0 On-Behalf-Of (OBO) authentication flow to securely call downstream APIs like Microsoft Graph from your own APIs, while preserving the user's identity and permissions.", "url": "https://learn.microsoft.com/azure/active-directory/develop/v2-oauth2-on-behalf-of-flow" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-side-panel/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-side-panel", "title": "Side Panel Client-Side Web Part", "description": "The web part illustrates creation and usage of Side Panel (Sidebar) control.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.0.0", "versionGroup": "< 1.1", "created": "2017-05-11", "updated": "2017-05-11", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" } ], "preview": { "src": "/images/previews/8b7bb028acabdc4843530d158a63e28b1c3518813ae39251b301c282307c8671.webp", "alt": "Side Panel Client-Side Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-side-panel", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-side-panel/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-side-panel", "descriptionParagraphs": [ "The web part illustrates creation and usage of Side Panel (Sidebar) control." ], "previews": [ { "src": "/images/previews/8b7bb028acabdc4843530d158a63e28b1c3518813ae39251b301c282307c8671.webp", "alt": "Side Panel Client-Side Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.0.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-site-content/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-site-content", "title": "Site Content Web Part", "description": "Site Content solution contains SPFx web part that provides", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.23.0", "versionGroup": "1.23", "created": "2025-09-07", "updated": "2025-11-20", "authors": [ { "name": "Harminder Singh", "account": "HarminderSethi", "avatar": "https://github.com/HarminderSethi.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-site-content", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-site-content/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-site-content", "descriptionParagraphs": [ "Site Content solution contains SPFx web part that provides" ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.23.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "asset.missing", "field": "thumbnails[0].url", "message": "Asset not found in collected repository tree: samples/react-site-content/assets/SiteContentWebpart.png", "severity": "error" }, { "code": "preview.unavailable", "field": "thumbnails", "message": "No usable declared image is available; a labelled fallback is shown.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-site-information/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-site-information", "title": "Site Information Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10", "versionGroup": "1.10", "created": "2018-05-01", "updated": "2018-05-01", "authors": [ { "name": "Eric Overfield", "account": "eoverfield", "avatar": "https://github.com/eoverfield.png" } ], "preview": { "src": "/images/previews/3c169e1f40b8e591261d97fb7d77651586ca3cb3268c995e0dfb35c37d0056bf.webp", "alt": "Site Information", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-site-information", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-site-information/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-site-information", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/3c169e1f40b8e591261d97fb7d77651586ca3cb3268c995e0dfb35c37d0056bf.webp", "alt": "Site Information", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10", "issues": [ { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-site-provisioning-manager/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-site-provisioning-manager", "title": "Site Provisioning Manager Web Part", "description": "This sample shows how you can manage site provisioning by calling Azure functions.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2019-08-14", "updated": "2019-08-14", "authors": [ { "name": "Ramin Ahmadi", "account": "AhmadiRamin", "avatar": "https://github.com/AhmadiRamin.png" } ], "preview": { "src": "/images/previews/2aa100a1ae4cc3d4ab8196d1757a1a2898af83c605ae79ef1b1ae22b94744253.webp", "alt": "Site Provisioning Manager Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-site-provisioning-manager", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-site-provisioning-manager/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-site-provisioning-manager", "descriptionParagraphs": [ "This sample shows how you can manage site provisioning by calling Azure functions." ], "previews": [ { "src": "/images/previews/2aa100a1ae4cc3d4ab8196d1757a1a2898af83c605ae79ef1b1ae22b94744253.webp", "alt": "Site Provisioning Manager Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-site-provisioning-manager/assets/api-permissions.png", "alt": "Site Provisioning Manager Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-site-provisioning-manager/assets/functions-CORS-settings.PNG", "alt": "Site Provisioning Manager Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-site-provisioning-manager/assets/functions-visual-studio-publish-profile.png", "alt": "Site Provisioning Manager Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-site-secure-function-call/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-site-secure-function-call", "title": "Site Secure Function Call", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.18.2", "versionGroup": "1.18", "created": "2024-07-12", "updated": "2024-07-12", "authors": [ { "name": "Markus Moeller", "account": "mmsharepoint", "avatar": "https://github.com/mmsharepoint.png" } ], "preview": { "src": "/images/previews/6f1427de36e790f595287eb32f917eec6b6d52d0bab188320eaac3377d9b6035.webp", "alt": "App in action", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-site-secure-function-call", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-site-secure-function-call/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-site-secure-function-call", "descriptionParagraphs": [ "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, in fact here Microsoft Graph. It shows that AadHttpClient should be preferred over MSGraphClient." ], "previews": [ { "src": "/images/previews/6f1427de36e790f595287eb32f917eec6b6d52d0bab188320eaac3377d9b6035.webp", "alt": "App in action", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-sitepage-migration/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-sitepage-migration", "title": "Page Migration Admin", "description": "Copies modern Site Pages from one SharePoint Online site to another, with their images, layout and web part configuration.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.23.2", "versionGroup": "1.23", "created": "2026-05-03", "updated": "2026-07-26", "authors": [ { "name": "Nico", "account": "NicolasKheirallah", "avatar": "https://github.com/NicolasKheirallah.png" } ], "preview": { "src": "/images/previews/b5b4fc1aafa20bcb709d9c2f62572460b5742526374a7dce69a531eb7ce8ab60.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sitepage-migration", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sitepage-migration/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-sitepage-migration", "descriptionParagraphs": [ "Copies modern Site Pages from one SharePoint Online site to another, with their images, layout and web part configuration." ], "previews": [ { "src": "/images/previews/b5b4fc1aafa20bcb709d9c2f62572460b5742526374a7dce69a531eb7ce8ab60.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sitepage-migration/assets/02-site-picker-recent-sites.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sitepage-migration/assets/03-sites-selected-load-pages.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sitepage-migration/assets/04-page-inventory-readiness.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sitepage-migration/assets/05-page-inventory-migrated-status.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sitepage-migration/assets/06-migration-confirmation-dialog.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.23.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[5].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 6 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-sitepages-metadata/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-sitepages-metadata", "title": "Sitepages Metadata Web Part", "description": "Solution provides an enhancement to SitePages library that enables updating existing items with metadata, and a rollup Web Part to display them.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "ListView command set", "Web part" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-04-17", "updated": "2018-04-17", "authors": [ { "name": "Oleg Rumiancev", "account": "olegrumiancev", "avatar": "https://github.com/olegrumiancev.png" } ], "preview": { "src": "/images/previews/3a6059770157b67c94fd0ea75626fa2c40d0863fb89584fa4638cb562c416d0e.webp", "alt": "Sitepages Metadata", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sitepages-metadata", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sitepages-metadata/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-sitepages-metadata", "descriptionParagraphs": [ "Solution provides an enhancement to SitePages library that enables updating existing items with metadata, and a rollup Web Part to display them." ], "previews": [ { "src": "/images/previews/3a6059770157b67c94fd0ea75626fa2c40d0863fb89584fa4638cb562c416d0e.webp", "alt": "Sitepages Metadata", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sitepages-metadata/assets/demo-commandset.gif", "alt": "Sitepages Metadata", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-sites-selected-admin/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-sites-selected-admin", "title": "Sites Selected Admin", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2021-03-08", "updated": "2021-03-08", "authors": [ { "name": "Fredrik Thorild", "account": "fthorild", "avatar": "https://github.com/fthorild.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sites-selected-admin", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sites-selected-admin/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-sites-selected-admin", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sites-selected-admin/assets/aad-appreg.png", "alt": "Sites Selected Admin", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sites-selected-admin/assets/api-access-page.png", "alt": "Sites Selected Admin", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sites-selected-admin/assets/vsDemo.gif", "alt": "Sites Selected Admin", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-skype-status/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-skype-status", "title": "Skype Status Web Part", "description": "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", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.8.0", "versionGroup": "1.8", "created": "2019-03-27", "updated": "2019-03-27", "authors": [ { "name": "Vincent Biret", "account": "baywet", "avatar": "https://github.com/baywet.png" } ], "preview": { "src": "/images/previews/2a13ea982e6d3a4bc98c8e2cbdfcfe003fdda36e1071e78028d8f04e8999f487.webp", "alt": "Skype Status Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-skype-status", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-skype-status/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-skype-status", "descriptionParagraphs": [ "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" ], "previews": [ { "src": "/images/previews/2a13ea982e6d3a4bc98c8e2cbdfcfe003fdda36e1071e78028d8f04e8999f487.webp", "alt": "Skype Status Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.8.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-slide-swiper/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-slide-swiper", "title": "Slide Swiper Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.7.0", "versionGroup": "1.7", "created": "2019-11-01", "updated": "2019-11-01", "authors": [ { "name": "Velin Georgiev", "account": "VelinGeorgiev", "avatar": "https://github.com/VelinGeorgiev.png" } ], "preview": { "src": "/images/previews/429cb37e21503c793a4f29f6e46333de7b782b27f985410591851711edfc5d50.webp", "alt": "Slide Swiper", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-slide-swiper", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-slide-swiper/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-slide-swiper", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/429cb37e21503c793a4f29f6e46333de7b782b27f985410591851711edfc5d50.webp", "alt": "Slide Swiper", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.7.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-smart-profile-photo-editor/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-smart-profile-photo-editor", "title": "Smart Profile Photo Editor Web Part", "description": "Uses Azure Cognitive Services to analyze and approve or reject user-submitted photos.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-08-12", "updated": "2020-08-12", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" } ], "preview": { "src": "/images/previews/06e298a2a149904bbeefe4f08da8b01e26bdef5c65f57166652a34b1077b90a1.webp", "alt": "Smart Profile Photo Editor", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-smart-profile-photo-editor", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-smart-profile-photo-editor/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-smart-profile-photo-editor", "descriptionParagraphs": [ "Uses Azure Cognitive Services to analyze and approve or reject user-submitted photos." ], "previews": [ { "src": "/images/previews/06e298a2a149904bbeefe4f08da8b01e26bdef5c65f57166652a34b1077b90a1.webp", "alt": "Smart Profile Photo Editor", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-soccer-highlights/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-soccer-highlights", "title": "Soccer Highlights Web Part", "description": "This react web part sample displays Soccer Highlights from a public Soccer API.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-10-30", "updated": "2020-10-30", "authors": [ { "name": "Jerry Yasir", "account": "jerryyasir", "avatar": "https://github.com/jerryyasir.png" } ], "preview": { "src": "/images/previews/4ef0354ec29dd50650f9ea4361104b542ff4784626c7a45824ed1437c58e85ef.webp", "alt": "Soccer Highlights", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-soccer-highlights", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-soccer-highlights/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-soccer-highlights", "descriptionParagraphs": [ "This react web part sample displays Soccer Highlights from a public Soccer API." ], "previews": [ { "src": "/images/previews/4ef0354ec29dd50650f9ea4361104b542ff4784626c7a45824ed1437c58e85ef.webp", "alt": "Soccer Highlights", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-soccer-highlights/assets/SoccerHighlights.gif", "alt": "Soccer Highlights", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-soccer-highlights/assets/SoccerHighlights.png", "alt": "Soccer Highlights", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-sp-bookmarks/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-sp-bookmarks", "title": "Bookmarks Manager", "description": "Allows users to manage and organize bookmarks in a SharePoint list.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-01-27", "updated": "2025-01-27", "authors": [ { "name": "Sudeep Ghatak", "account": "sudeepghatak", "avatar": "https://github.com/sudeepghatak.png" } ], "preview": { "src": "/images/previews/a50972509a84e0d9901940935e70715ff387562e753658e18a8c91173672be11.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-bookmarks", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-bookmarks/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-sp-bookmarks", "descriptionParagraphs": [ "The Bookmarks Manager web part allows users to manage and organize bookmarks in a SharePoint list. Users can add, edit, and delete bookmarks, which are displayed in a grid layout. The web part supports both light and dark themes and integrates seamlessly with SharePoint." ], "previews": [ { "src": "/images/previews/a50972509a84e0d9901940935e70715ff387562e753658e18a8c91173672be11.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-sp-countdown-timer/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-sp-countdown-timer", "title": "Countdown Timer Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2024-12-25", "updated": "2024-12-31", "authors": [ { "name": "Sudeep Ghatak", "account": "sudeepghatak", "avatar": "https://github.com/sudeepghatak.png" } ], "preview": { "src": "/images/previews/887d1d8689bdea2eb75ea21238c25c004b726de77880ef6cf6024aa1dabbcf20.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-countdown-timer", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-countdown-timer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-sp-countdown-timer", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/887d1d8689bdea2eb75ea21238c25c004b726de77880ef6cf6024aa1dabbcf20.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-sp-elevatedprivileges/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-sp-elevatedprivileges", "title": "Communicate using elevated privileges with SharePoint", "description": "Sample SharePoint Framework client-side web part illustrating communication with SharePoint using elevated privileges through a custom Web API.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "0.4.0", "versionGroup": "< 1.1", "created": "2016-10-12", "updated": "2016-10-12", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/07350d208973ed7d2bd013913f0da73b5d0b28b2f8b72cd1f68549c8992d3477.webp", "alt": "Communicate using elevated privileges with SharePoint", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-elevatedprivileges", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-elevatedprivileges/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-sp-elevatedprivileges", "descriptionParagraphs": [ "Sample SharePoint Framework client-side web part illustrating communication with SharePoint using elevated privileges through a custom Web API." ], "previews": [ { "src": "/images/previews/07350d208973ed7d2bd013913f0da73b5d0b28b2f8b72cd1f68549c8992d3477.webp", "alt": "Communicate using elevated privileges with SharePoint", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "0.4.0", "issues": [ { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-sp-emp-recognition/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-sp-emp-recognition", "title": "rEmployee Recognition", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-04-20", "updated": "2025-04-20", "authors": [ { "name": "Sudeep Ghatak", "account": "sudeepghatak", "avatar": "https://github.com/sudeepghatak.png" } ], "preview": { "src": "/images/previews/d9c2389f48fcccb8402c1d10eb9e2efcf2476584e3d28520c26eebd43d570a3d.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-emp-recognition", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-emp-recognition/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-sp-emp-recognition", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/d9c2389f48fcccb8402c1d10eb9e2efcf2476584e3d28520c26eebd43d570a3d.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-emp-recognition/assets/Recognitions.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[0].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-sp-org-chart/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-sp-org-chart", "title": "Building Org Chart using a SharePoint list", "description": "Displays your organization's structure based on a custom list, starting from the top boss down to everyone else.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-04-20", "updated": "2025-04-20", "authors": [ { "name": "Sudeep Ghatak", "account": "sudeepghatak", "avatar": "https://github.com/sudeepghatak.png" } ], "preview": { "src": "/images/previews/382d783df7f5718233df582ea4f6d7a4ef60566b8d26a8c3cda194a96b66518e.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-org-chart", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-org-chart/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-sp-org-chart", "descriptionParagraphs": [ "This Org Chart Web Part displays your organization's structure based on a custom list, starting from the top boss down to everyone else.", "Each person's card shows their name and job title, and when you click on someone, it highlights them so you can focus on where they sit in the company." ], "previews": [ { "src": "/images/previews/382d783df7f5718233df582ea4f6d7a4ef60566b8d26a8c3cda194a96b66518e.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-org-chart/assets/Orgchart.gif", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-sp-permission-manager/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-sp-permission-manager", "title": "SharePoint Permissions Manager", "description": "SharePoint Permissions Manager is a SharePoint Framework web part for administering SharePoint site groups, group membership, and user permissions from a single interface.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.22.2", "versionGroup": "1.22", "created": "2026-04-13", "updated": "2026-04-13", "authors": [ { "name": "Harminder Singh", "account": "HarminderSethi", "avatar": "https://github.com/HarminderSethi.png" } ], "preview": { "src": "/images/previews/ce5a12682137ea84f7e60d8cae1cfb7825208aa7205dc1f2a723c9ad12514d1d.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-permission-manager", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-permission-manager/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-sp-permission-manager", "descriptionParagraphs": [ "SharePoint Permissions Manager is a SharePoint Framework web part for administering SharePoint site groups, group membership, and user permissions from a single interface." ], "previews": [ { "src": "/images/previews/ce5a12682137ea84f7e60d8cae1cfb7825208aa7205dc1f2a723c9ad12514d1d.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-permission-manager/assets/MainPage.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-permission-manager/assets/ManageGroup.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-permission-manager/assets/ManageGroupUsers.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-permission-manager/assets/PermissionsLevels.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-sp-pnp-js-property-decorators/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-sp-pnp-js-property-decorators", "title": "Using PnP JS Core custom objects with @select and @expand decorators", "description": "This web part demonstrates how to use PnP JS Core Custom Objects with @select and @expand TypeScript decorators.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.1.1", "versionGroup": "1.1", "created": "2017-07-02", "updated": "2017-07-02", "authors": [ { "name": "Jose Quinto", "account": "jquintozamora", "avatar": "https://github.com/jquintozamora.png" } ], "preview": { "src": "/images/previews/ccbde1c9c871344bc5a6948b7250270b5f6f31db898c962a225fbec33c989ccc.webp", "alt": "Using PnP JS Core custom objects with @select and @expand decorators", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-pnp-js-property-decorators", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-pnp-js-property-decorators/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-sp-pnp-js-property-decorators", "descriptionParagraphs": [ "This web part demonstrates how to use PnP JS Core Custom Objects with @select and @expand TypeScript decorators." ], "previews": [ { "src": "/images/previews/ccbde1c9c871344bc5a6948b7250270b5f6f31db898c962a225fbec33c989ccc.webp", "alt": "Using PnP JS Core custom objects with @select and @expand decorators", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.1.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-sp-secret-santa/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-sp-secret-santa", "title": "Using React Accordion plugin with SPFx", "description": "The Secret Santa is a fun and interactive tool designed to manage a Secret Santa gift exchange directly on your SharePoint site.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2024-12-25", "updated": "2024-12-31", "authors": [ { "name": "Sudeep Ghatak", "account": "sudeepghatak", "avatar": "https://github.com/sudeepghatak.png" } ], "preview": { "src": "/images/previews/e7c58d170618b3e76b87e9f12b8d8284aaf2d2f35f93b3a9b5229accebb84d11.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-secret-santa", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-secret-santa/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-sp-secret-santa", "descriptionParagraphs": [ "The Secret Santa is a fun and interactive tool designed to manage a Secret Santa gift exchange directly on your SharePoint site." ], "previews": [ { "src": "/images/previews/e7c58d170618b3e76b87e9f12b8d8284aaf2d2f35f93b3a9b5229accebb84d11.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-sp-site-user-groups/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-sp-site-user-groups", "title": "Site User and Group Information Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-09-08", "updated": "2020-09-08", "authors": [ { "name": "Daniel Watford", "account": "danwatford", "avatar": "https://avatars.githubusercontent.com/u/5949502?s=460&u=01688c475aa5c94da6a292473ff80ffe1a7975cb&v=4" } ], "preview": { "src": "/images/previews/8d786b3efde1051eabdeed5b7328dc675cd8861f3029b1129108338b4f9760bc.webp", "alt": "Site User and Group Information", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-site-user-groups", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-site-user-groups/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-sp-site-user-groups", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/8d786b3efde1051eabdeed5b7328dc675cd8861f3029b1129108338b4f9760bc.webp", "alt": "Site User and Group Information", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-site-user-groups/assets/screen2.png", "alt": "Site User and Group Information", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-site-user-groups/assets/screen3.png", "alt": "Site User and Group Information", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-sp-tinymce/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-sp-tinymce", "title": "List Integration with TinyMCE Editor Web Part", "description": "The web part allows users to insert column data from associated SharePoint lists using a split button on the toolbar", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.17.4", "versionGroup": "1.17", "created": "2023-06-06", "updated": "2023-06-06", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/2e5b527164861776bd10a40232a8f3e0355e4b195b059488adf6e389a3a4a9ed.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-tinymce", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-sp-tinymce/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-sp-tinymce", "descriptionParagraphs": [ "An example of integrating SharePoint lists with TinyMCE editors can be found in this sample. The web part allows users to insert column data from associated SharePoint lists using a split button on the toolbar. An editor preview plugin for TinyMce was developed in order to be able to preview changes before they are saved." ], "previews": [ { "src": "/images/previews/2e5b527164861776bd10a40232a8f3e0355e4b195b059488adf6e389a3a4a9ed.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.17.4", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-spfx-control-iframepanel/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-spfx-control-iframepanel", "title": "IFramePanel Web Part", "description": "This sample shows how to use the IFramePanel control in a SharePoint Framework web part.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.16.0", "versionGroup": "1.16", "created": "2023-03-29", "updated": "2023-03-29", "authors": [ { "name": "Valeras Narbutas", "account": "ValerasNarbutas", "avatar": "https://github.com/valerasnarbutas.png" } ], "preview": { "src": "/images/previews/9644d15fd4593a2c1f8a7ee4bcba85a4438c488b6688cbd363359ee9c66566b0.webp", "alt": "Spfx control iframepanel", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-spfx-control-iframepanel", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-spfx-control-iframepanel/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-spfx-control-iframepanel", "descriptionParagraphs": [ "This sample shows how to use the IFramePanel control in a SharePoint Framework web part." ], "previews": [ { "src": "/images/previews/9644d15fd4593a2c1f8a7ee4bcba85a4438c488b6688cbd363359ee9c66566b0.webp", "alt": "Spfx control iframepanel", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-spfx-control-iframepanel/assets/IFramePanel.gif", "alt": "Spfx control iframepanel", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Using single part app pages in SharePoint Online", "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-spfx-room-booking/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-spfx-room-booking", "title": "Room Booking", "description": "Discover meeting rooms, check availability, and manage Outlook calendar bookings with Microsoft Graph and SharePoint.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.22.1", "versionGroup": "1.22", "created": "2026-03-22", "updated": "2026-03-22", "authors": [ { "name": "Swami Nawale", "account": "swaminawale", "avatar": "https://github.com/swaminawale.png" }, { "name": "Divyanshu Barania", "account": "divyanshubarania", "avatar": "https://github.com/divyanshubarania.png" } ], "preview": { "src": "/images/previews/129bbeae53902ac67147e4258bd8508ef84e88298ac26cc8fb5482d967aab1ef.webp", "alt": "Room Booking room selection view", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-spfx-room-booking", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-spfx-room-booking/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-spfx-room-booking", "descriptionParagraphs": [ "This SharePoint Framework web part discovers rooms through the Microsoft Graph Places API, checks availability with getSchedule, manages Outlook bookings, and synchronizes booking metadata to a SharePoint list using PnPjs." ], "previews": [ { "src": "/images/previews/129bbeae53902ac67147e4258bd8508ef84e88298ac26cc8fb5482d967aab1ef.webp", "alt": "Room Booking room selection view", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-spfx-room-booking/assets/img-admin-view.png", "alt": "Room Booking administration view", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-spfx-room-booking/assets/img-my-bookings.png", "alt": "Room Booking personal bookings view", "isFallback": false } ], "references": [ { "title": "Sample documentation", "description": "Summary, contributors, version history, and usage instructions.", "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-spfx-room-booking/README.md" } ], "products": [ "SharePoint", "Teams", "Microsoft Graph" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-spin-wheel/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-spin-wheel", "title": "Spin Wheel Game", "description": "An interactive daily spin wheel game with probability-based rewards, built with React and PnPjs v4", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2026-02-08", "updated": "2026-02-08", "authors": [ { "name": "Sai Siva Ram Bandaru", "account": "saiiiiiii", "avatar": "https://github.com/saiiiiiii.png" } ], "preview": { "src": "/images/previews/4c5ba6096c8be4e39ba5e8acefda41415dd33f260ff0a82d2cc358d72ed67bab.webp", "alt": "Spin wheel game in action", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-spin-wheel", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-spin-wheel/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-spin-wheel", "descriptionParagraphs": [ "A beautiful, interactive spin wheel game built with SharePoint Framework (SPFx), React, and PnPjs v4. Users can spin the wheel once per day to earn points and rewards. Features include smooth animations, sound effects, probability-based reward selection, spin history tracking, and a modern responsive design." ], "previews": [ { "src": "/images/previews/4c5ba6096c8be4e39ba5e8acefda41415dd33f260ff0a82d2cc358d72ed67bab.webp", "alt": "Spin wheel game in action", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-spin-wheel/assets/spin-wheel-preview.png", "alt": "Spin wheel on mobile device", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "PnPjs Library", "description": "PnPjs is a collection of fluent libraries for consuming SharePoint, Graph, and Office 365 REST APIs in a type-safe way.", "url": "https://pnp.github.io/pnpjs/" }, { "title": "Using React in SharePoint Framework", "description": "Learn how to use React to build SharePoint Framework client-side web parts.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab" } ], "products": [ "SharePoint", "Office" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-spo-site-game/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-spo-site-game", "title": "React SharePoint Online Site Game Web Part", "description": "This web part turns any SharePoint site content into a 2D game where players discover lists, libraries, and other users in a fun and engaging way.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.22.2", "versionGroup": "1.22", "created": "2026-03-13", "updated": "2026-03-13", "authors": [ { "name": "Adam Wójcik", "account": "Adam-it", "avatar": "https://github.com/Adam-it.png" }, { "name": "Saurabh Tripathi", "account": "Saurabh7019", "avatar": "https://github.com/Saurabh7019.png" }, { "name": "Nico De Cleyre", "account": "nicodecleyre", "avatar": "https://github.com/nicodecleyre.png" } ], "preview": { "src": "/images/previews/f5726c005bc0b2e4a075a4723986b4cbfa7f96737c8e492c2333652211486772.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-spo-site-game", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-spo-site-game/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-spo-site-game", "descriptionParagraphs": [ "This web part transforms any SharePoint site content into a 2D game in which the player's aim is to discover lists, libraries (represented as buildings), and their content in a fun and engaging way. The game also shows other users with direct access to the site. It comes with multiple themes to match your unique SharePoint site experience and allows you to discover Microsoft 365 development resources and PnP community resources." ], "previews": [ { "src": "/images/previews/f5726c005bc0b2e4a075a4723986b4cbfa7f96737c8e492c2333652211486772.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-spo-site-game/assets/game2.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-spo-site-game/assets/themes.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-spupsproperty-sync/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-spupsproperty-sync", "title": "SPUPS Property Sync Web Part", "description": "This component will help the administrators who are currently maintaining the user profiles in their organization.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-04-23", "updated": "2020-04-23", "authors": [ { "name": "Sudharsan Kesavanarayanan", "account": "sudharsank", "avatar": "https://github.com/sudharsank.png" } ], "preview": { "src": "/images/previews/ccd8756686a7dedfca6761c6d49fc4891b33f57431f8915178ae1b3f35a4897b.webp", "alt": "SPUPS Property Sync", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-spupsproperty-sync", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-spupsproperty-sync/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-spupsproperty-sync", "descriptionParagraphs": [ "This component will help the administrators who are currently maintaining the user profiles in their organization." ], "previews": [ { "src": "/images/previews/ccd8756686a7dedfca6761c6d49fc4891b33f57431f8915178ae1b3f35a4897b.webp", "alt": "SPUPS Property Sync", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Using single part app pages in SharePoint Online", "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [ { "code": "preview.duplicate-order", "field": "thumbnails[2].order", "message": "Preview order is duplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-staff-directory-sp2019/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-staff-directory-sp2019", "title": "Staff Directory (Search Directory) Version 2019", "description": "Show the current user's colleagues, search the directory, and configure the properties displayed on expanded user cards.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2021-05-22", "updated": "2021-05-22", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/fa2fda715e0eb6aeb620a75b7c48862f419c60f097117e31668e73b0ba2e0602.webp", "alt": "Staff directory on SharePoint Server", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-staff-directory-sp2019", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-staff-directory-sp2019/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-staff-directory-sp2019", "descriptionParagraphs": [ "Show the current user's colleagues, search the directory, and configure the properties displayed on expanded user cards." ], "previews": [ { "src": "/images/previews/fa2fda715e0eb6aeb620a75b7c48862f419c60f097117e31668e73b0ba2e0602.webp", "alt": "Staff directory on SharePoint Server", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-staff-directory-sp2019/assets/staffdirectory_online.png", "alt": "Staff directory on SharePoint Online", "isFallback": false } ], "references": [ { "title": "Sample documentation", "description": "Summary, contributors, version history, and usage instructions.", "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-staff-directory-sp2019/README.md" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-staffdirectory/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-staffdirectory", "title": "Staff Directory Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.14.0", "versionGroup": "1.14", "created": "2021-03-09", "updated": "2022-06-16", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" }, { "name": "Ari Gunawan", "account": "AriGunawan", "avatar": "https://github.com/AriGunawan.png" }, { "name": "Tristian O'brien", "account": "tristian2", "avatar": "https://github.com/tristian2.png" }, { "name": "Milan Holemans", "account": "milanholemans", "avatar": "https://github.com/milanholemans.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-staffdirectory", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-staffdirectory/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-staffdirectory", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-staffdirectory/assets/staffTeams01.png", "alt": "Staff Directory", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-staffdirectory/assets/staffTeams02.png", "alt": "Staff Directory", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-star-ratings/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-star-ratings", "title": "Star Ratings Web Part", "description": "Demonstrates Star Ratings capabilities to SharePoint News.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2021-10-07", "updated": "2025-01-22", "authors": [ { "name": "Takashi Shinohara", "account": "karamem0", "avatar": "https://github.com/karamem0.png" } ], "preview": { "src": "/images/previews/3cf1065a0ad6b8e7d0fa46bee544fcd9ce9496cbaac5649a84aec978c243adec.webp", "alt": "Web part in action", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-star-ratings", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-star-ratings/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-star-ratings", "descriptionParagraphs": [ "This web part demonstrates Star Ratings capabilities to SharePoint News. The Ratings site collection feature provides Likes and Star Ratings, but SharePoint News provides only provides Likes. This web part can get or set ratings of the current page." ], "previews": [ { "src": "/images/previews/3cf1065a0ad6b8e7d0fa46bee544fcd9ce9496cbaac5649a84aec978c243adec.webp", "alt": "Web part in action", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-stock-information/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-stock-information", "title": "Stock Information Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10", "versionGroup": "1.10", "created": "2018-05-01", "updated": "2018-05-01", "authors": [ { "name": "Eric Overfield", "account": "eoverfield", "avatar": "https://github.com/eoverfield.png" } ], "preview": { "src": "/images/previews/dbd9e5a37acf1aa90ced6dcedb912e0f2ab9961182600cc983d18419336d7acc.webp", "alt": "Stock Information", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-stock-information", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-stock-information/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-stock-information", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/dbd9e5a37acf1aa90ced6dcedb912e0f2ab9961182600cc983d18419336d7acc.webp", "alt": "Stock Information", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10", "issues": [ { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-styled-list/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-styled-list", "title": "Styled List", "description": "This SharePoint web part displays items from a SharePoint list in a modern, responsive, and styled grid layout.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-08-23", "updated": "2025-08-23", "authors": [ { "name": "Sudeep Ghatak", "account": "sudeepghatak", "avatar": "https://github.com/sudeepghatak.png" } ], "preview": { "src": "/images/previews/af61c649aa249c2c7bcb66acaf9fb86435b185c65b0741df7207462603c61def.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-styled-list", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-styled-list/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-styled-list", "descriptionParagraphs": [ "This SharePoint web part displays items from a SharePoint list in a modern, responsive, and styled grid layout." ], "previews": [ { "src": "/images/previews/af61c649aa249c2c7bcb66acaf9fb86435b185c65b0741df7207462603c61def.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-styled-list/assets/screenshot2.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-svg-property-controls/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-svg-property-controls", "title": "Dynamic Scalable Vector Graphics (SVG) image using properties", "description": "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 (specifically the SpinButton and ColorPicker) to set these properties.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.23.2", "versionGroup": "1.23", "created": "2022-09-28", "updated": "2026-09-06", "authors": [ { "name": "Nader Hadjebi", "account": "NaderHadjebi", "avatar": "https://github.com/NaderHadjebi.png" } ], "preview": { "src": "/images/previews/38b2a26f803527f64898cdaf817e13b793cb54407f3c97e3661ed0075e65469b.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-svg-property-controls", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-svg-property-controls/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-svg-property-controls", "descriptionParagraphs": [ "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 (specifically the SpinButton and ColorPicker) to set these properties." ], "previews": [ { "src": "/images/previews/38b2a26f803527f64898cdaf817e13b793cb54407f3c97e3661ed0075e65469b.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-svg-property-controls/assets/Screenshot%202026-08-31%20113354.gif", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-svg-property-controls/assets/Screenshot%202026-08-31%20113354.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.23.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[1].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[2].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-svg-to-json-converter/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-svg-to-json-converter", "title": "SVG to JSON Converter", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2024-11-01", "updated": "2024-11-01", "authors": [ { "name": "Luise Freese", "account": "LuiseFreese", "avatar": "https://github.com/LuiseFreese.png" } ], "preview": { "src": "/images/previews/0c69cb4953eb52cab012a988cb16d4ebbf73ae5fd44f65160b9c4f41b7df91e6.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-svg-to-json-converter", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-svg-to-json-converter/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-svg-to-json-converter", "descriptionParagraphs": [ "This web part 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. Users can both copy the JSON format to their clipboard (for further manipulation) or select a site, a list, and a column and then directly apply the format to this column." ], "previews": [ { "src": "/images/previews/0c69cb4953eb52cab012a988cb16d4ebbf73ae5fd44f65160b9c4f41b7df91e6.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-svg-to-json-converter/assets/webpart-sp.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-svg-to-json-converter/assets/webpart-with-reset.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-svg-to-json-converter/assets/webpart-with-site-selector.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-svg-to-json-converter/assets/webpart.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 5 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-tabacordion/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-tabacordion", "title": "Tab Accordion Web Part with Property Field Collection Data and tinyMCE for Rich Text Editing", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2022-03-30", "updated": "2025-03-16", "authors": [ { "name": "Arun Kumar Perumal", "account": "arunkumarperumal", "avatar": "https://github.com/arunkumarperumal.png" }, { "name": "Nicolas Kheirallah", "account": "nicolaskheirallah", "avatar": "https://github.com/nicolaskheirallah.png" } ], "preview": { "src": "/images/previews/40cfde89042fda80a2ee9ac431e243296e34d895f64c9f83c2498a2c4a1fe86d.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tabacordion", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tabacordion/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-tabacordion", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/40cfde89042fda80a2ee9ac431e243296e34d895f64c9f83c2498a2c4a1fe86d.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-tailwindcss/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-tailwindcss", "title": "Tailwind CSS Web Part", "description": "This project shows how to integrate Tailwind CSS framework into a SPFx React project.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-10-17", "updated": "2020-10-17", "authors": [ { "name": "Fabio Franzini", "account": "fabiofranzini", "avatar": "https://github.com/fabiofranzini.png" } ], "preview": { "src": "/images/previews/ae393c79e47c5ecfe65ea1ece6bbc47a6af7db6e7c288d3c0a25b5d9f8eafee2.webp", "alt": "Tailwind CSS", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tailwindcss", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tailwindcss/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-tailwindcss", "descriptionParagraphs": [ "This project shows how to integrate Tailwind CSS framework into a SPFx React project." ], "previews": [ { "src": "/images/previews/ae393c79e47c5ecfe65ea1ece6bbc47a6af7db6e7c288d3c0a25b5d9f8eafee2.webp", "alt": "Tailwind CSS", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-tailwindcss3/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-tailwindcss3", "title": "Tailwind 3 Web Part", "description": "This project showcases an integration of Tailwind CSS into an SPFx project.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.18.0", "versionGroup": "1.18", "created": "2023-10-07", "updated": "2023-10-07", "authors": [ { "name": "Ari Gunawan", "account": "AriGunawan", "avatar": "https://github.com/AriGunawan.png" } ], "preview": { "src": "/images/previews/b23181d90391a79cc3ce47a0b6c83216ca2f0c6c4558a1b1a9e3905e6eb29f2c.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tailwindcss3", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tailwindcss3/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-tailwindcss3", "descriptionParagraphs": [ "This project showcases an integration of Tailwind CSS into an SPFx project. It offers a sample implementation, facilitating straightforward setup and utilization of Tailwind CSS for enhanced styling and design in SharePoint Framework projects." ], "previews": [ { "src": "/images/previews/b23181d90391a79cc3ce47a0b6c83216ca2f0c6c4558a1b1a9e3905e6eb29f2c.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-target-audience/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-target-audience", "title": "Target Audience Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-01-28", "updated": "2020-01-28", "authors": [ { "name": "Rabia Williams", "account": "rabwill", "avatar": "https://github.com/rabwill.png" } ], "preview": { "src": "/images/previews/11f581ec72ed9c962ff4a202d5caf5de437d15e5e60ad17dfccd387bee109e8a.webp", "alt": "Target audience", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-target-audience", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-target-audience/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-target-audience", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/11f581ec72ed9c962ff4a202d5caf5de437d15e5e60ad17dfccd387bee109e8a.webp", "alt": "Target audience", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-taxonomy-file-explorer/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-taxonomy-file-explorer", "title": "Taxonomy File Explorer Web Part", "description": "This solution renders a given Termset as a Tree and incorporates files similar than a folder structure in file explorer.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.15.0", "versionGroup": "1.15", "created": "2021-12-26", "updated": "2022-07-16", "authors": [ { "name": "Markus Moeller", "account": "mmsharepoint", "avatar": "https://github.com/mmsharepoint.png" } ], "preview": { "src": "/images/previews/9b709969a27eb40a827a3fcbdc6006ffbbe9551f7043409b14b13fb3fa585caf.webp", "alt": "Linking to a file", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-taxonomy-file-explorer", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-taxonomy-file-explorer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-taxonomy-file-explorer", "descriptionParagraphs": [ "This solution renders a given Termset as a Tree and incorporates files similar than a folder structure in file explorer." ], "previews": [ { "src": "/images/previews/9b709969a27eb40a827a3fcbdc6006ffbbe9551f7043409b14b13fb3fa585caf.webp", "alt": "Linking to a file", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-taxonomy-file-explorer/assets/04Move.gif", "alt": "Moving a file", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-taxonomypicker-panel/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-taxonomypicker-panel", "title": "Taxonomy picker using Office UI Fabric Panel", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.5.1", "versionGroup": "1.5", "created": "2018-07-20", "updated": "2018-07-20", "authors": [ { "name": "Vipul Kelkar", "account": "vipulkelkar", "avatar": "https://github.com/vipulkelkar.png" } ], "preview": { "src": "/images/previews/45f2be72280048a16f90dc630de82b7018e5ed47abd8c648d8271b2eaa9cdfc9.webp", "alt": "Taxonomy picker using Office UI Fabric Panel", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-taxonomypicker-panel", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-taxonomypicker-panel/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-taxonomypicker-panel", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/45f2be72280048a16f90dc630de82b7018e5ed47abd8c648d8271b2eaa9cdfc9.webp", "alt": "Taxonomy picker using Office UI Fabric Panel", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.5.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-taxonomypicker/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-taxonomypicker", "title": "Taxonomy Picker Web Part", "description": "A Taxonomy Picker control built with React based on react-taxonomypicker for use with SharePoint Framework client-side web parts (SPFx).", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.1.1", "versionGroup": "1.1", "created": "2017-04-14", "updated": "2017-04-14", "authors": [ { "name": "Jose Quinto", "account": "jquintozamora", "avatar": "https://github.com/jquintozamora.png" } ], "preview": { "src": "/images/previews/559c86a10c96a5087cd4a110764a32338e9e32a283ba2926d6da638f79eaf8f5.webp", "alt": "Taxonomy Picker", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-taxonomypicker", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-taxonomypicker/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-taxonomypicker", "descriptionParagraphs": [ "A Taxonomy Picker control built with React based on react-taxonomypicker for use with SharePoint Framework client-side web parts (SPFx)." ], "previews": [ { "src": "/images/previews/559c86a10c96a5087cd4a110764a32338e9e32a283ba2926d6da638f79eaf8f5.webp", "alt": "Taxonomy Picker", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.1.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-team-creator/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-team-creator", "title": "Teams Creator Web Part", "description": "The web part illustrates usage of MS Graph beta APIs to work with Teams", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.7.0", "versionGroup": "1.7", "created": "2018-11-19", "updated": "2018-11-19", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" } ], "preview": { "src": "/images/previews/b47b4ce217ade0027958d6441fe216bc9add0f6d58ffd9f90ca225593bb5ec3c.webp", "alt": "Teams Creator Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-team-creator", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-team-creator/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-team-creator", "descriptionParagraphs": [ "The web part illustrates usage of MS Graph beta APIs to work with Teams" ], "previews": [ { "src": "/images/previews/b47b4ce217ade0027958d6441fe216bc9add0f6d58ffd9f90ca225593bb5ec3c.webp", "alt": "Teams Creator Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.7.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-team-randomiser/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-team-randomiser", "title": "Team Randomiser", "description": "Randomly assign people into evenly-sized groups with a single click. Enter a list of names and a desired group size; the web part shuffles them and displays colour-coded group cards. Hit Shuffle Groups to re-randomise at any time.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2026-07-01", "updated": "2026-07-01", "authors": [ { "name": "Sudeep Ghatak", "account": "sudeepghatak", "avatar": "https://github.com/sudeepghatak.png" } ], "preview": { "src": "/images/previews/6ea58b8dbd15a607da6c7acea534bca8d5b75a42de3e0f5b709f25623922b20e.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-team-randomiser", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-team-randomiser/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-team-randomiser", "descriptionParagraphs": [ "Randomly assign people into evenly-sized groups with a single click. Enter a list of names and a desired group size; the web part shuffles them and displays colour-coded group cards. Hit Shuffle Groups to re-randomise at any time." ], "previews": [ { "src": "/images/previews/6ea58b8dbd15a607da6c7acea534bca8d5b75a42de3e0f5b709f25623922b20e.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-teams-configure-tab/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-teams-configure-tab", "title": "Teams Configuration Tab", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2020-01-06", "updated": "2020-01-06", "authors": [ { "name": "Bob German", "account": "BobGerman", "avatar": "https://avatars.githubusercontent.com/u/4664072?s=460&u=29310fd67417ec5f81dc8881dc6eb5dc0065da2d&v=4" } ], "preview": { "src": "/images/previews/9e1704580090a533baaa60e32ca352de4320f08ed5f2e91924237dca423fc663.webp", "alt": "Teams Configuration Tab", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-configure-tab", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-configure-tab/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-teams-configure-tab", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/9e1704580090a533baaa60e32ca352de4320f08ed5f2e91924237dca423fc663.webp", "alt": "Teams Configuration Tab", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-teams-conversationview/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-teams-conversationview", "title": "Teams Tab Conversation View", "description": "Displays Microsoft Teams channels conversations in a simpler way which makes easy to search and filters the new conversations and its replies", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2023-03-11", "updated": "2023-03-11", "authors": [ { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png" }, { "name": "Kunj Sangani", "account": "kunj-sangani", "avatar": "https://github.com/kunj-sangani.png" } ], "preview": { "src": "/images/previews/7b28c467983341bdbf119d0756b65186e26200fb7687e71bd28f7485cee0044d.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-conversationview", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-conversationview/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-teams-conversationview", "descriptionParagraphs": [ "Displays Microsoft Teams channels conversations in a simpler way which makes easy to search and filters the new conversations and its replies" ], "previews": [ { "src": "/images/previews/7b28c467983341bdbf119d0756b65186e26200fb7687e71bd28f7485cee0044d.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-conversationview/assets/2.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-conversationview/assets/3.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 3 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-teams-graph-upload-as-pdf/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-teams-graph-upload-as-pdf", "title": "Teams Graph Upload as PDF Web Part", "description": "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", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2020-11-10", "updated": "2021-11-08", "authors": [ { "name": "Markus Moeller", "account": "mmsharepoint", "avatar": "https://github.com/mmsharepoint.png" } ], "preview": { "src": "/images/previews/fc65d6df887298fbfe9ae7e1178cf4c0b7cc29eaa7e73cf67e34e83a578938ab.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-graph-upload-as-pdf", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-graph-upload-as-pdf/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-teams-graph-upload-as-pdf", "descriptionParagraphs": [ "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" ], "previews": [ { "src": "/images/previews/fc65d6df887298fbfe9ae7e1178cf4c0b7cc29eaa7e73cf67e34e83a578938ab.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-teams-lead-dashboard/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-teams-lead-dashboard", "title": "Lead Dashboard Web Part", "description": "This sample shows how to use SPFx to create a Microsoft Teams dashboard personal app.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.17.1", "versionGroup": "1.17", "created": "2021-10-05", "updated": "2023-04-07", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/PaoloPia.png" }, { "name": "Guido Zambarda", "account": "GuidoZam", "avatar": "https://github.com/GuidoZam.png" }, { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/865dda35fc078fecba4e782ffe0cb88920296478cbf1f8bf5fd2abf01e5e80db.webp", "alt": "Lead Dashboard", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-lead-dashboard", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-lead-dashboard/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-teams-lead-dashboard", "descriptionParagraphs": [ "This sample shows how to use SPFx to create a Microsoft Teams dashboard personal app." ], "previews": [ { "src": "/images/previews/865dda35fc078fecba4e782ffe0cb88920296478cbf1f8bf5fd2abf01e5e80db.webp", "alt": "Lead Dashboard", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building for Microsoft Teams", "description": "Learn how to create SPFx web parts that integrate with the Microsoft Teams context.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/build-for-teams-overview" }, { "title": "Use Microsoft Graph in your solution", "description": "Learn how you can leverage the Microsoft Graph API from your custom developed SPFx web parts.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis" }, { "title": "Publish SharePoint Framework applications to the Marketplace", "description": "Publishing your SharePoint Framework solutions to marketplace (also known as AppSource) and to SharePoint store, which allows you to reach other organizations and let them easily install your application in their Microsoft 365 tenant.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/publish-to-marketplace-overview" } ], "products": [ "SharePoint", "Teams" ], "supportedHosts": [ "SharePointWebPart", "TeamsPersonalApp" ], "framework": "SharePoint Framework", "frameworkVersion": "1.17.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-teams-meeting-app-questionnaire/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-teams-meeting-app-questionnaire", "title": "Questionnaire Teams Meeting App", "description": "Questionnaire meeting app provides Pre-meeting app experience for MS Teams meeting attendees to ask the questions related to meeting before the meeting starts.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.14.0", "versionGroup": "1.14", "created": "2021-03-22", "updated": "2022-05-02", "authors": [ { "name": "Nanddeep Nachan", "account": "nanddeepn", "avatar": "https://github.com/nanddeepn.png" }, { "name": "Ravi Kulkarni", "account": "ravi16a87", "avatar": "https://github.com/ravi16a87.png" }, { "name": "Smita Nachan", "account": "SmitaNachan", "avatar": "https://github.com/SmitaNachan.png" } ], "preview": { "src": "/images/previews/67e5c39be77f51c889530caf4296c514320282639d48551d0b7b6d2eeeaf4b2e.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-meeting-app-questionnaire", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-meeting-app-questionnaire/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-teams-meeting-app-questionnaire", "descriptionParagraphs": [ "SPFx v1.12 support for Microsoft Teams meeting apps development. Questionnaire meeting app provides Pre-meeting app experience for MS Teams meeting attendees to ask the questions related to meeting before the meeting starts.", "The Questionnaire meeting app displays the questions from attendees as pre-meeting app experience." ], "previews": [ { "src": "/images/previews/67e5c39be77f51c889530caf4296c514320282639d48551d0b7b6d2eeeaf4b2e.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-meeting-app-questionnaire/assets/questionnaire-preview.png", "alt": "Questionnaire Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Apps in Teams meetings", "description": "Meetings are key to productivity in Teams. They enable collaboration, partnership, informed communication, and shared feedback in an inclusive and active forum. As a developer, you can create configurable tab, bot, and message extension applications to enhance and enrich a Teams meeting experience. Meeting users can access apps, via the tab gallery, to enable relevant scenarios such as pre-staging a Kanban board, launching an in-meeting actionable dialog, or creating a post-meeting poll. Your meeting app can deliver a user experience for each stage of the meeting lifecycle based upon attendee status.", "url": "https://learn.microsoft.com//microsoftteams/platform/apps-in-teams-meetings/teams-apps-in-meetings?WT.mc_id=M365-MVP-5003693" } ], "products": [ "SharePoint", "Teams" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-teams-membership-updater/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-teams-membership-updater", "title": "Teams Membership Updater Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.14.0", "versionGroup": "1.14", "created": "2020-04-27", "updated": "2022-03-24", "authors": [ { "name": "Nick Brown", "account": "techienickb", "avatar": "https://github.com/techienickb.png" } ], "preview": { "src": "/images/previews/433146b072136984923fe5882c58c07c117932813a62631706c0c398f0c9a0d9.webp", "alt": "Web part in action", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-membership-updater", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-membership-updater/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-teams-membership-updater", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/433146b072136984923fe5882c58c07c117932813a62631706c0c398f0c9a0d9.webp", "alt": "Web part in action", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-membership-updater/assets/teamsmembership.gif", "alt": "Web part in action", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-membership-updater/assets/72f2b53a-f9be-4344-8fec-f4a09961a25b.png", "alt": "Web part in action", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsPersonalApp" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-teams-message-user/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-teams-message-user", "title": "Message Teams User Web Part", "description": "Sample that shows how to send a message to Microsoft Teams using a SharePoint framework solution using Microsoft Graph.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2021-02-28", "updated": "2021-02-28", "authors": [ { "name": "David Ramalho", "account": "DRamalho92", "avatar": "https://github.com/DRamalho92.png" } ], "preview": { "src": "/images/previews/bc154a6d37dcaeab9efa674fcbf588b9652661ca48f2bfabc49945552b998876.webp", "alt": "Message Teams User", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-message-user", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-message-user/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-teams-message-user", "descriptionParagraphs": [ "Sample that shows how to send a message to Microsoft Teams using a SharePoint framework solution using Microsoft Graph." ], "previews": [ { "src": "/images/previews/bc154a6d37dcaeab9efa674fcbf588b9652661ca48f2bfabc49945552b998876.webp", "alt": "Message Teams User", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-message-user/assets/MessageTeams.gif", "alt": "Message Teams User", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-teams-message/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-teams-message", "title": "Teams Messages Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-05-23", "updated": "2020-05-23", "authors": [ { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png" } ], "preview": { "src": "/images/previews/f028db7bfd1c8a1a0ef17043207a7e119d881d02aea98d3f45fcfb96430a38a7.webp", "alt": "React Teams Messages", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-message", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-message/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-teams-message", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/f028db7bfd1c8a1a0ef17043207a7e119d881d02aea98d3f45fcfb96430a38a7.webp", "alt": "React Teams Messages", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-message/assets/webpartproperties.jpg", "alt": "React Teams Messages", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-teams-my-webinars/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-teams-my-webinars", "title": "Teams My Webinars Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.18.2", "versionGroup": "1.18", "created": "2023-12-25", "updated": "2023-12-31", "authors": [ { "name": "Nick Brown", "account": "techienickb", "avatar": "https://github.com/techienickb.png" } ], "preview": { "src": "/images/previews/81d7c4de6523888f947e615b5abe68d480c858f06fcc665d202765bf9edfe3eb.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-my-webinars", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-my-webinars/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-teams-my-webinars", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/81d7c4de6523888f947e615b5abe68d480c858f06fcc665d202765bf9edfe3eb.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-my-webinars/assets/Screenshot%202023-12-25-addtolist.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-my-webinars/assets/Screenshot%202023-12-25.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[0].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[1].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[2].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 6 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-teams-personal-app-settings/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-teams-personal-app-settings", "title": "Teams Personal App Settings Web Part", "description": "Demonstrates how you can store Teams Personal App Web Part's properties in user's OneDrive.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-04-24", "updated": "2020-04-24", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" } ], "preview": { "src": "/images/previews/b11413e3d949ea921d9440648a80db75d2d3e13229ecd0f55550a1c3f9c417a7.webp", "alt": "Teams Personal App Settings Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-personal-app-settings", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-personal-app-settings/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-teams-personal-app-settings", "descriptionParagraphs": [ "Demonstrates how you can store Teams Personal App Web Part's properties in user's OneDrive." ], "previews": [ { "src": "/images/previews/b11413e3d949ea921d9440648a80db75d2d3e13229ecd0f55550a1c3f9c417a7.webp", "alt": "Teams Personal App Settings Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "TeamsPersonalApp" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-teams-send-notification/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-teams-send-notification", "title": "Send Notifications in Teams Web Part", "description": "This web part allows you to send MS Teams feed notifications to a selected user", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-12-04", "updated": "2020-12-04", "authors": [ { "name": "Luis Mañez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/previews/ed01efb6244de72039d997a5228565e2983b830e2d85a04f3a614313e77c5997.webp", "alt": "Send Notifications in Teams", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-send-notification", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-send-notification/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-teams-send-notification", "descriptionParagraphs": [ "This web part allows you to send MS Teams feed notifications to a selected user" ], "previews": [ { "src": "/images/previews/ed01efb6244de72039d997a5228565e2983b830e2d85a04f3a614313e77c5997.webp", "alt": "Send Notifications in Teams", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-teams-tab-field-visit-mashup/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-teams-tab-field-visit-mashup", "title": "Teams Tab - Field Visit Web Part (Mashup)", "description": "A web part for use in Microsoft Teams that displays a mashup of information partaining to customer visits.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.8.0", "versionGroup": "1.8", "created": "2019-04-20", "updated": "2019-04-20", "authors": [ { "name": "Bob German", "account": "BobGerman", "avatar": "https://avatars.githubusercontent.com/u/4664072?s=460&u=29310fd67417ec5f81dc8881dc6eb5dc0065da2d&v=4" } ], "preview": { "src": "/images/previews/b720c00b8b067d1dffa3ab6ea9e1507c08c2bf0bb566dcb223bdd505471b774a.webp", "alt": "Teams Tab - Field Visit Demo (Mashup)", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-tab-field-visit-mashup", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-tab-field-visit-mashup/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-teams-tab-field-visit-mashup", "descriptionParagraphs": [ "A web part for use in Microsoft Teams that displays a mashup of information partaining to customer visits." ], "previews": [ { "src": "/images/previews/b720c00b8b067d1dffa3ab6ea9e1507c08c2bf0bb566dcb223bdd505471b774a.webp", "alt": "Teams Tab - Field Visit Demo (Mashup)", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.8.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-teams-tab-suggested-members/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-teams-tab-suggested-members", "title": "Group members suggestion Web Part", "description": "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", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.7.0-plusbeta", "versionGroup": "1.7", "created": "2018-11-18", "updated": "2018-11-18", "authors": [ { "name": "Luis Mañez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/previews/0a11655b6531d4e8f7dd82753d1b74ff6fcc16970703282b3fc1ebb9bb307217.webp", "alt": "Group members suggestion", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-tab-suggested-members", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-tab-suggested-members/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-teams-tab-suggested-members", "descriptionParagraphs": [ "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" ], "previews": [ { "src": "/images/previews/0a11655b6531d4e8f7dd82753d1b74ff6fcc16970703282b3fc1ebb9bb307217.webp", "alt": "Group members suggestion", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.7.0-plusbeta", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-teams-tabs-graph/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-teams-tabs-graph", "title": "MS Teams Channels and Tabs from Modern Team site", "description": "A SPFx Web Part using Graph api. It shows Channels and Tabs (with link) from a Modern Team Site connected to Microsoft Teams.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-01-01", "updated": "2025-01-01", "authors": [ { "name": "Federico Porceddu", "account": "fredupstair", "avatar": "https://github.com/fredupstair.png" }, { "name": "Nicolas Kheirallah", "account": "nicolaskheirallah", "avatar": "https://github.com/nicolaskheirallah.png" } ], "preview": { "src": "/images/previews/aad4b2f0138754b767667eb84900bd448d7a70dffc0fc8465be14bf049b63983.webp", "alt": "MS Teams Channels and Tabs from Modern Team site", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-tabs-graph", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-tabs-graph/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-teams-tabs-graph", "descriptionParagraphs": [ "A SPFx Web Part using @pnp/graph/teams. It shows Channels and Tabs (with link) from a Modern Team Site connected to Microsoft Teams." ], "previews": [ { "src": "/images/previews/aad4b2f0138754b767667eb84900bd448d7a70dffc0fc8465be14bf049b63983.webp", "alt": "MS Teams Channels and Tabs from Modern Team site", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-tabs-graph/assets/screenshots/react-teams-tabs-graph-webpart2.png", "alt": "MS Teams Channels and Tabs from Modern Team site", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-teams-tabs-pnpjs/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-teams-tabs-pnpjs", "title": "MS Teams Channels and Tabs from Modern Team site", "description": "A SPFx Web Part using @pnp/graph/teams. It shows Channels and Tabs (with link) from a Modern Team Site connected to Microsoft Teams.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2019-10-30", "updated": "2019-10-30", "authors": [ { "name": "Federico Porceddu", "account": "fredupstair", "avatar": "https://github.com/fredupstair.png" } ], "preview": { "src": "/images/previews/882ddc9258ea072778ef4178109ae56270b079a665935fff3c13cc872fb3ade7.webp", "alt": "MS Teams Channels and Tabs from Modern Team site", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-tabs-pnpjs", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-tabs-pnpjs/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-teams-tabs-pnpjs", "descriptionParagraphs": [ "A SPFx Web Part using @pnp/graph/teams. It shows Channels and Tabs (with link) from a Modern Team Site connected to Microsoft Teams." ], "previews": [ { "src": "/images/previews/882ddc9258ea072778ef4178109ae56270b079a665935fff3c13cc872fb3ade7.webp", "alt": "MS Teams Channels and Tabs from Modern Team site", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-tabs-pnpjs/assets/react-teams-tabs-pnpjs-webpart.png", "alt": "MS Teams Channels and Tabs from Modern Team site", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-teams-tagging/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-teams-tagging", "title": "Tag Teams using a TermSet in SharePoint", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.8.0", "versionGroup": "1.8", "created": "2019-04-18", "updated": "2019-04-18", "authors": [ { "name": "Luis Mañez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/previews/5d1e1b24471322b13eda00329bfbfec9872fc5152e245e7bdfea98571de759b5.webp", "alt": "Tag Teams using a TermSet in SharePoint", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-tagging", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-teams-tagging/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-teams-tagging", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/5d1e1b24471322b13eda00329bfbfec9872fc5152e245e7bdfea98571de759b5.webp", "alt": "Tag Teams using a TermSet in SharePoint", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.8.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-telemetry-event-sender-sample/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-telemetry-event-sender-sample", "title": "Telemetry Event Sender Web Part", "description": "SPFx React web part that sends telemetry events via CustomEvent to a tenant-wide telemetry Application Customizer.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-11-18", "updated": "2025-11-18", "authors": [ { "name": "Valeras Narbutas", "account": "ValerasNarbutas", "avatar": "https://github.com/ValerasNarbutas.png" } ], "preview": { "src": "/images/previews/fd1e2c988ea5b7110116f85302b5b52b4d1f5f7a3d06587fb6fa2fe7ec3c490a.webp", "alt": "Telemetry Event Sender web part preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-telemetry-event-sender-sample", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-telemetry-event-sender-sample/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-telemetry-event-sender-sample", "descriptionParagraphs": [ "This sample demonstrates a React-based SPFx web part that emits telemetry events through the browser CustomEvent API (`spfx-telemetry`).", "It is designed to work together with a tenant-wide Application Customizer that listens for these events and forwards them to Azure Application Insights or an Azure Function endpoint.", "The web part showcases configurable scenario metadata, importance levels, and a simple UI to trigger sample telemetry events." ], "previews": [ { "src": "/images/previews/fd1e2c988ea5b7110116f85302b5b52b4d1f5f7a3d06587fb6fa2fe7ec3c490a.webp", "alt": "Telemetry Event Sender web part preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-telemetry-event-sender-sample/assets/propertyPanePreview.png", "alt": "Telemetry Event Sender web part property pane preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-telemetry-event-sender-sample/assets/AppInsightsPreview.png", "alt": "Telemetry Event Sender web part property pane preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-telemetry-event-sender-sample/assets/DEbugLogPreview.png", "alt": "Telemetry Event Sender web part property pane preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-tenant-properties/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-tenant-properties", "title": "Tenant Properties Web Part", "description": "This web part allows tenant administrators to manage tenant properties through a graphical interface. We can create, edit or delete tenant properties.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-10-20", "updated": "2020-10-20", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" }, { "name": "Joel Rodrigues", "account": "joelfmrodrigues", "avatar": "https://github.com/joelfmrodrigues.png" } ], "preview": { "src": "/images/previews/5382baf5b776f19e1c88b0f33de3328ff885e138beb9efdd11ee6aeca0825549.webp", "alt": "Tenant Properties Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tenant-properties", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tenant-properties/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-tenant-properties", "descriptionParagraphs": [ "This web part allows tenant administrators to manage tenant properties through a graphical interface. We can create, edit or delete tenant properties." ], "previews": [ { "src": "/images/previews/5382baf5b776f19e1c88b0f33de3328ff885e138beb9efdd11ee6aeca0825549.webp", "alt": "Tenant Properties Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tenant-properties/assets/TenantProperties1.jpg", "alt": "Tenant Properties Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tenant-properties/assets/TenantProperties3.jpg", "alt": "Tenant Properties Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tenant-properties/assets/TenantProperties4.jpg", "alt": "Tenant Properties Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tenant-properties/assets/TenantProperties5.jpg", "alt": "Tenant Properties Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-themes/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-themes", "title": "SharePoint Themes Client Side Web Part", "description": "This web part illustrates how to use SharePoint Theme variables in custom web parts.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2017-05-08", "updated": "2017-05-08", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" } ], "preview": { "src": "/images/previews/ffb76d662a5b4719a8df73a72ed28e629ea02a4a45cec327df695a783078b2b3.webp", "alt": "SharePoint Themes Client Side Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-themes", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-themes/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-themes", "descriptionParagraphs": [ "This web part illustrates how to use SharePoint Theme variables in custom web parts." ], "previews": [ { "src": "/images/previews/ffb76d662a5b4719a8df73a72ed28e629ea02a4a45cec327df695a783078b2b3.webp", "alt": "SharePoint Themes Client Side Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-themes/assets/SectionThemes.png", "alt": "SharePoint Themes Client Side Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-ticket-mgnt/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-ticket-mgnt", "title": "Ticket Management App", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-06-13", "updated": "2026-06-24", "authors": [ { "name": "Sudeep Ghatak", "account": "sudeepghatak", "avatar": "https://github.com/sudeepghatak.png" } ], "preview": { "src": "/images/previews/59a37f52d03cf8c3cc706b6cea7bb36c60156eef6a7fc7304866907e37d6bf3d.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-ticket-mgnt", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-ticket-mgnt/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-ticket-mgnt", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/59a37f52d03cf8c3cc706b6cea7bb36c60156eef6a7fc7304866907e37d6bf3d.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-ticket-mgnt/assets/ticket%20dashboard.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-ticket-mgnt/assets/ticket%20details.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[0].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[1].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" }, { "code": "url.normalized", "field": "thumbnails[2].url", "message": "Legacy URL whitespace or encoding was normalized to a safe HTTPS URL.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 6 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-tiles-v2/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-tiles-v2", "title": "Tiles V2 Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.11", "versionGroup": "1.11", "created": "2021-07-14", "updated": "2022-03-28", "authors": [ { "name": "Omar El-Anis", "account": "omarelanis", "avatar": "https://github.com/omarelanis.png" }, { "name": "Fredrik Thorild", "account": "fthorild", "avatar": "https://github.com/fthorild.png" }, { "name": "Jasey Waegebaert", "account": "Jwaegebaert", "avatar": "https://github.com/Jwaegebaert.png" } ], "preview": { "src": "/images/previews/6b47df366d44443ed55e286a93498c4232a7417b993226af676a6dc3596e3d81.webp", "alt": "Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tiles-v2", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tiles-v2/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-tiles-v2", "descriptionParagraphs": [ "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. By default the tiles use a fluid flex layout to use the available screen area." ], "previews": [ { "src": "/images/previews/6b47df366d44443ed55e286a93498c4232a7417b993226af676a6dc3596e3d81.webp", "alt": "Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11", "issues": [ { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-tiles/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-tiles", "title": "Tiles Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10", "versionGroup": "1.10", "created": "2018-05-01", "updated": "2018-05-01", "authors": [ { "name": "Eric Overfield", "account": "eoverfield", "avatar": "https://github.com/eoverfield.png" } ], "preview": { "src": "/images/previews/1bb969e792405c63cedf901a088b4e4a0c71a65a626b1506432175c495017865.webp", "alt": "Tiles", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tiles", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tiles/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-tiles", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/1bb969e792405c63cedf901a088b4e4a0c71a65a626b1506432175c495017865.webp", "alt": "Tiles", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10", "issues": [ { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-timeline/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-timeline", "title": "Timeline Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-07-10", "updated": "2020-07-10", "authors": [ { "name": "Nanddeep Nachan", "account": "nanddeepn", "avatar": "https://github.com/nanddeepn.png" }, { "name": "Ravi Kulkarni", "account": "ravi16a87", "avatar": "https://github.com/ravi16a87.png" } ], "preview": { "src": "/images/previews/498942d0360f31149d2e793678856d186cd1a242a60e63a7c875171268b84ac1.webp", "alt": "Timeline", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-timeline", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-timeline/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-timeline", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/498942d0360f31149d2e793678856d186cd1a242a60e63a7c875171268b84ac1.webp", "alt": "Timeline", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-timeline/assets/event-crud.gif", "alt": "Timeline", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-timeline/assets/layout-horizontal.png", "alt": "Timeline", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-timeline/assets/layout-vertical.png", "alt": "Timeline", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-timeline/assets/list-sample-data.png", "alt": "Timeline", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-timeline/assets/list-schema.png", "alt": "Timeline", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-timeline/assets/wepart-propertypane.png", "alt": "Timeline", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-tinymce/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-tinymce", "title": "TinyMCE Editor Web Part Integration with SharePoint", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2018-02-01", "updated": "2018-02-01", "authors": [ { "name": "Austin Breslin", "account": "AustinBreslinDev", "avatar": "https://avatars.githubusercontent.com/u/10480670?s=460&v=4" } ], "preview": { "src": "/images/previews/20a23f74d5e9da2c1a3c6b2f31406c2542ad2d68809cb6a217f829ec9bb58d02.webp", "alt": "TinyMCE Editor Web Part Integration with SharePoint", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tinymce", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tinymce/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-tinymce", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/20a23f74d5e9da2c1a3c6b2f31406c2542ad2d68809cb6a217f829ec9bb58d02.webp", "alt": "TinyMCE Editor Web Part Integration with SharePoint", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-todo-basic/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-todo-basic", "title": "Todo Basic Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.1.1", "versionGroup": "1.1", "created": "2017-05-04", "updated": "2017-05-04", "authors": [ { "name": "Chakkaradeep Chandran", "account": "chakkaradeep", "avatar": "https://avatars.githubusercontent.com/u/7882052?s=460&u=92d546edfe1e1b374c69f0fd9315186eea700b8f&v=4" } ], "preview": { "src": "/images/previews/b50795739665d535f27228186a5ea7b4451bc727a967022c2c1a05c0857be68c.webp", "alt": "Todo Basic", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-todo-basic", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-todo-basic/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-todo-basic", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/b50795739665d535f27228186a5ea7b4451bc727a967022c2c1a05c0857be68c.webp", "alt": "Todo Basic", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-todo-basic/assets/todo-basic-no-task-list.gif", "alt": "Todo Basic", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-todo-basic/assets/todo-basic-placeholder-edit-mode.png", "alt": "Todo Basic", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-todo-basic/assets/todo-basic-placeholder-read-mode.png", "alt": "Todo Basic", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-todo-basic/assets/todo-basic-placeholder.gif", "alt": "Todo Basic", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.1.1", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-tour-pnpjs/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-tour-pnpjs", "title": "Tour Sample Web Part", "description": "A SPFx WebPart using PnP/PnPjs, @pnp/spfx-property-controls and ReactTourJS.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.18.2", "versionGroup": "1.18", "created": "2019-11-23", "updated": "2024-03-20", "authors": [ { "name": "Federico Porceddu", "account": "fredupstair", "avatar": "https://github.com/fredupstair.png" }, { "name": "Alberto Gutierrez", "account": "albegut", "avatar": "https://github.com/albegut.png" } ], "preview": { "src": "/images/previews/8820dac336063a28ae187afddc31531ae26101d57082c748757380fe8dc6e5a7.webp", "alt": "Tour Sample", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tour-pnpjs", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tour-pnpjs/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-tour-pnpjs", "descriptionParagraphs": [ "A SPFx WebPart using PnP/PnPjs, @pnp/spfx-property-controls and ReactTourJS." ], "previews": [ { "src": "/images/previews/8820dac336063a28ae187afddc31531ae26101d57082c748757380fe8dc6e5a7.webp", "alt": "Tour Sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tour-pnpjs/assets/react-tour-pnpjs-webpart-animated-details.png", "alt": "Tour Sample", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tour-pnpjs/assets/react-tour-pnpjs-webpart-configuration.gif", "alt": "Tour Sample", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-training-checklist/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-training-checklist", "title": "Training Checklist", "description": "YSample web part to display a training checklist in a SharePoint page.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0-beta.0", "versionGroup": "1.20", "created": "2024-09-12", "updated": "2024-09-12", "authors": [ { "name": "Valeras Narbutas", "account": "ValerasNarbutas", "avatar": "https://github.com/ValerasNarbutas.png" } ], "preview": { "src": "/images/previews/7235c3b1ddcd286b4268bace112808c03b730a27009e449c9bf3b48aac59a112.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-training-checklist", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-training-checklist/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-training-checklist", "descriptionParagraphs": [ "YSample web part to display a training checklist in a SharePoint page." ], "previews": [ { "src": "/images/previews/7235c3b1ddcd286b4268bace112808c03b730a27009e449c9bf3b48aac59a112.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0-beta.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-tree-orgchart/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-tree-orgchart", "title": "Tree Organization Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.22.1", "versionGroup": "1.22", "created": "2021-02-28", "updated": "2025-12-31", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" }, { "name": "Peter Paul Kirschner", "account": "petkir", "avatar": "https://github.com/petkir.png" }, { "name": "Thomas Daly", "account": "tom-daly", "avatar": "https://github.com/tom-daly.png" } ], "preview": { "src": "/images/previews/c69953cc4d74a3b2958f3498a86a495df5264dd7387832244bad13517194ae15.webp", "alt": "Tree Organization Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tree-orgchart", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tree-orgchart/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-tree-orgchart", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/c69953cc4d74a3b2958f3498a86a495df5264dd7387832244bad13517194ae15.webp", "alt": "Tree Organization Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tree-orgchart/assets/react-tree-orgchart-2.gif", "alt": "Tree Organization Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tree-orgchart/assets/Screenshot2.png", "alt": "Tree Organization Web Part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-tree-orgchart/assets/Screenshot3.png", "alt": "Tree Organization Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.22.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-twitter/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-twitter", "title": "Twitter Timeline Web Part", "description": "Sample web part to display Twitter timeline.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.16.1", "versionGroup": "1.16", "created": "2020-01-20", "updated": "2023-02-27", "authors": [ { "name": "Alex Terentiev", "account": "AJIXuMuK", "avatar": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" }, { "name": "Reshmee Auckloo", "account": "reshmee011", "avatar": "https://github.com/reshmee011.png" } ], "preview": { "src": "/images/previews/232e78670212933027e87db919636ae74a1bd0685504ccc146d67dcdb5fa7c7f.webp", "alt": "Twitter Timeline", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-twitter", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-twitter/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-twitter", "descriptionParagraphs": [ "Sample web part to display Twitter timeline." ], "previews": [ { "src": "/images/previews/232e78670212933027e87db919636ae74a1bd0685504ccc146d67dcdb5fa7c7f.webp", "alt": "Twitter Timeline", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-uieditor/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-uieditor", "title": "React UI Editor", "description": "Provides dynamic UI Editor with sharepoint like richtext editing capabilities with source code view directly from the page.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.21.1", "versionGroup": "1.21", "created": "2025-11-03", "updated": "2025-11-03", "authors": [ { "name": "Sai Siva Ram Bandaru", "account": "saiiiiiii", "avatar": "https://github.com/saiiiiiii.png" } ], "preview": { "src": "/images/previews/8402abb9f146ae4982011769ce23a68876060dfc23b70ec1844d11eb7838cc06.webp", "alt": "Quick Links Pro demo", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-uieditor", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-uieditor/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-uieditor", "descriptionParagraphs": [ "A modern SharePoint Framework (SPFx) web part that provides dynamic UI Editor with sharepoint like richtext editing capabilities with source code view. Content authors can manage links directly from the page using a configuration panel, eliminating the need to navigate to list settings or the property pane. Features include edit mode detection, multiple display styles (card view and accordion view), CRUD operations and responsive design." ], "previews": [ { "src": "/images/previews/8402abb9f146ae4982011769ce23a68876060dfc23b70ec1844d11eb7838cc06.webp", "alt": "Quick Links Pro demo", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-uieditor/assets/cards-view.png", "alt": "Cards display style", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-uieditor/assets/accordion-view.png", "alt": "Accordion display style", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-uieditor/assets/config-panel.png", "alt": "Configuration panel", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-uieditor/assets/config-panel2.png", "alt": "Configuration panel", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Using PnP JS with SharePoint Framework", "description": "Learn how to use PnP JS library in your SharePoint Framework solutions for modern SharePoint REST API interactions.", "url": "https://pnp.github.io/pnpjs/getting-started/" }, { "title": "Fluent UI React Components", "description": "Fluent UI React is a collection of robust React-based components designed to make it simple for you to create consistent web experiences using the Fluent Design Language.", "url": "https://developer.microsoft.com/fluentui#/controls/web" } ], "products": [ "SharePoint", "Office" ], "supportedHosts": [ "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.21.1", "issues": [ { "code": "preview.duplicate-order", "field": "thumbnails[4].order", "message": "Preview order is duplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-upgrade-me/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-upgrade-me", "title": "Upgrade Me Web Part", "description": "Use this web part to test the CLI for Microsoft 365 SPFx Project Upgrade.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.4.1", "versionGroup": "1.4", "created": "2020-08-27", "updated": "2020-08-27", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" } ], "preview": { "src": "/images/previews/291ce1be5a8845cded30bc4e0a8e6816e383cfe15b07407fd53a1c08f68147ef.webp", "alt": "Upgrade Me", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-upgrade-me", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-upgrade-me/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-upgrade-me", "descriptionParagraphs": [ "Use this web part to test the CLI for Microsoft 365 SPFx Project Upgrade." ], "previews": [ { "src": "/images/previews/291ce1be5a8845cded30bc4e0a8e6816e383cfe15b07407fd53a1c08f68147ef.webp", "alt": "Upgrade Me", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.4.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-use-reducer-hook/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-use-reducer-hook", "title": "React UseReducer Hook with PnPjs", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-01-17", "updated": "2025-01-17", "authors": [ { "name": "Ahmad Jad Alhak", "account": "ahmad-jad-alhak", "avatar": "https://github.com/ahmad-jad-alhak.png" } ], "preview": { "src": "/images/previews/2168149cc85360d6f838e75199a86ae398febc6c52ea86bbd4494a49a65ca82f.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-use-reducer-hook", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-use-reducer-hook/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-use-reducer-hook", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/2168149cc85360d6f838e75199a86ae398febc6c52ea86bbd4494a49a65ca82f.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-use-reducer-hook/assets/preview_02.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-versiondisplay/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-versiondisplay", "title": "Displaying the version number in a web part", "description": "This very simple sample demonstrates three different approaches to display the version number of your SharePoint solution in your web part.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.13.1", "versionGroup": "1.13", "created": "2020-04-10", "updated": "2022-02-07", "authors": [ { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png" } ], "preview": { "src": "/images/previews/5fde21dfecb3eb47a62a3a0afbaf19ff81b88186bccbd44e050262b9e6aca9b0.webp", "alt": "Displaying the version number in a web part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-versiondisplay", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-versiondisplay/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-versiondisplay", "descriptionParagraphs": [ "This very simple sample demonstrates three different approaches to display the version number of your SharePoint solution in your web part." ], "previews": [ { "src": "/images/previews/5fde21dfecb3eb47a62a3a0afbaf19ff81b88186bccbd44e050262b9e6aca9b0.webp", "alt": "Displaying the version number in a web part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com//sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-video-banner/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-video-banner", "title": "Video Banner Web Part", "description": "Use this Web Part to add a video banner with a text on top of it to your pages.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2021-04-02", "updated": "2021-04-02", "authors": [ { "name": "Mohamed Derhalli", "account": "derhallim", "avatar": "https://github.com/derhallim.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-video-banner", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-video-banner/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-video-banner", "descriptionParagraphs": [ "Use this Web Part to add a video banner with a text on top of it to your pages." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Using single part app pages in SharePoint Online", "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [ { "code": "text.whitespace", "field": "shortDescription", "message": "Trim leading and trailing whitespace.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-videolibrary/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-videolibrary", "title": "Video Library Web Part", "description": "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", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "0.4.0", "versionGroup": "< 1.1", "created": "2016-12-31", "updated": "2016-12-31", "authors": [ { "name": "Russell Gove", "account": "russgove", "avatar": "https://github.com/russgove.png" } ], "preview": { "src": "/images/previews/06f979627e31d185e98e4e0a0751fd4aabe63e16b334a31e9ff17d1daee9fcab.webp", "alt": "Video Library", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-videolibrary", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-videolibrary/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-videolibrary", "descriptionParagraphs": [ "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" ], "previews": [ { "src": "/images/previews/06f979627e31d185e98e4e0a0751fd4aabe63e16b334a31e9ff17d1daee9fcab.webp", "alt": "Video Library", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "0.4.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-visio/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-visio", "title": "Visio Embed Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-08-25", "updated": "2020-08-25", "authors": [ { "name": "Joel Rodrigues", "account": "joelfmrodrigues", "avatar": "https://github.com/joelfmrodrigues.png" } ], "preview": { "src": "/images/previews/aa6ef194d16c23cb663a791412aa27305fbe66befc7830df865d0f4258a8d0bd.webp", "alt": "Visio Embed", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-visio", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-visio/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-visio", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/aa6ef194d16c23cb663a791412aa27305fbe66befc7830df865d0f4258a8d0bd.webp", "alt": "Visio Embed", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-weather-information/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-weather-information", "title": "Weather Information Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10", "versionGroup": "1.10", "created": "2018-05-01", "updated": "2018-05-01", "authors": [ { "name": "Eric Overfield", "account": "eoverfield", "avatar": "https://github.com/eoverfield.png" } ], "preview": { "src": "/images/previews/63597829eb8772967129e4c35058fe56fcd218335d3022c688ad6b3ae384952c.webp", "alt": "Weather Information", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-weather-information", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-weather-information/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-weather-information", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/63597829eb8772967129e4c35058fe56fcd218335d3022c688ad6b3ae384952c.webp", "alt": "Weather Information", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10", "issues": [ { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-webcam/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-webcam", "title": "Web/Mobile Camera Demo Web Part", "description": "This is sample web part to showcase how to open webcam and take photo in SPFx web part.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2019-09-05", "updated": "2019-09-05", "authors": [ { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png" } ], "preview": { "src": "/images/previews/202f0df77a8beec6df5ded42909e82b783eca363074c53cc9c255155cdafc777.webp", "alt": "Web/Mobile Camera Demo", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-webcam", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-webcam/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-webcam", "descriptionParagraphs": [ "This is sample web part to showcase how to open webcam and take photo in SPFx web part." ], "previews": [ { "src": "/images/previews/202f0df77a8beec6df5ded42909e82b783eca363074c53cc9c255155cdafc777.webp", "alt": "Web/Mobile Camera Demo", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-webcam/assets/3.png", "alt": "Web/Mobile Camera Demo", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-webhooks-realtime/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-webhooks-realtime", "title": "Webhooks Realtime", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.3.0", "versionGroup": "1.3", "created": "2017-10-29", "updated": "2017-10-29", "authors": [ { "name": "Giuliano De Luca", "account": "giuleon", "avatar": "https://github.com/giuleon.png" } ], "preview": { "src": "/images/previews/d81b5b2ee0221abafd2e14946274d04a4c10eff25b33c79034672ef44bbee07c.webp", "alt": "Webhooks Realtime", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-webhooks-realtime", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-webhooks-realtime/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-webhooks-realtime", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/d81b5b2ee0221abafd2e14946274d04a4c10eff25b33c79034672ef44bbee07c.webp", "alt": "Webhooks Realtime", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-webhooks-realtime/assets/Architecture.png", "alt": "Webhooks Realtime", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.3.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-webpartdetails/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-webpartdetails", "title": "Web Part Details", "description": "The web part illustrates how to get all the web part present in the current page, bind them in a multi-select dropdown.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-06-13", "updated": "2020-06-13", "authors": [ { "name": "Harsha Vardhini", "account": "Harshagracy", "avatar": "https://github.com/Harshagracy.png" } ], "preview": { "src": "/images/previews/e97547cec5086004c97999e631839a7e2a44889de68b898d04a06115367d123c.webp", "alt": "Web Part Details", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-webpartdetails", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-webpartdetails/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-webpartdetails", "descriptionParagraphs": [ "The web part illustrates how to get all the web part present in the current page, bind them in a multi-select dropdown." ], "previews": [ { "src": "/images/previews/e97547cec5086004c97999e631839a7e2a44889de68b898d04a06115367d123c.webp", "alt": "Web Part Details", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-wellbeing-tracker/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-wellbeing-tracker", "title": "React Wellbeing Tracker", "description": "Track personal wellbeing and engagement habits in SharePoint with daily activity completion, progress bars, and week or month views.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2026-05-01", "updated": "2026-05-06", "authors": [ { "name": "Sudeep Ghatak", "account": "sudeepghatak", "avatar": "https://github.com/sudeepghatak.png" } ], "preview": { "src": "/images/previews/c938655fc58369d2bd427e4b7dc593092868698f614364d8c4643c930544e91d.webp", "alt": "React Wellbeing Tracker activity tracking view", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-wellbeing-tracker", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-wellbeing-tracker/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-wellbeing-tracker", "descriptionParagraphs": [ "Log daily activities, filter by category, view consistency progress, add activities inline, and switch between light and dark modes in a responsive interface built with Fluent UI and PnPjs." ], "previews": [ { "src": "/images/previews/c938655fc58369d2bd427e4b7dc593092868698f614364d8c4643c930544e91d.webp", "alt": "React Wellbeing Tracker activity tracking view", "isFallback": false } ], "references": [ { "title": "Sample documentation", "description": "Summary, contributors, version history, and usage instructions.", "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-wellbeing-tracker/README.md" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-whos-in/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-whos-in", "title": "React Who's In", "description": "A web part that shows who is in the office and when:", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-06-29", "updated": "2025-11-08", "authors": [ { "name": "Sudeep Ghatak", "account": "sudeepghatak", "avatar": "https://github.com/sudeepghatak.png" } ], "preview": { "src": "/images/previews/2f19df171dfb5c07ff554404bc98e87d6660ef560e86ea7a433500d3514614ac.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-whos-in", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-whos-in/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-whos-in", "descriptionParagraphs": [ "A web part that shows who is in the office and when:" ], "previews": [ { "src": "/images/previews/2f19df171dfb5c07ff554404bc98e87d6660ef560e86ea7a433500d3514614ac.webp", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-word-game/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-word-game", "title": "Word Game Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-05-27", "updated": "2020-05-27", "authors": [ { "name": "Neil Barkhina", "account": "nbarkhina", "avatar": "https://github.com/nbarkhina.png" } ], "preview": { "src": "/images/previews/4b9069b38548de2f11054090e2baca57c688d40f247175f804083d7a0f790aff.webp", "alt": "Word Game", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-word-game", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-word-game/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-word-game", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/4b9069b38548de2f11054090e2baca57c688d40f247175f804083d7a0f790aff.webp", "alt": "Word Game", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-word-game/assets/settings.PNG", "alt": "Word Game", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-word-game/assets/wordgame_mobile.png", "alt": "Word Game", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-world-clocks/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-world-clocks", "title": "World Clocks Web Part", "description": "This sample is extension of the single World time clock sample that was provided in SP Starter Kit.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11.0", "versionGroup": "1.11", "created": "2020-09-26", "updated": "2020-09-26", "authors": [ { "name": "Jerry Yasir", "account": "jerryyasir", "avatar": "https://github.com/jerryyasir.png" } ], "preview": { "src": "/images/previews/ec7136e72d3334a3c99a9abd01dd14d5f75fb877b617a7ce7fd2be174fa71458.webp", "alt": "React World Clocks", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-world-clocks", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-world-clocks/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-world-clocks", "descriptionParagraphs": [ "This sample is extension of the single World time clock sample that was provided in SP Starter Kit." ], "previews": [ { "src": "/images/previews/ec7136e72d3334a3c99a9abd01dd14d5f75fb877b617a7ce7fd2be174fa71458.webp", "alt": "React World Clocks", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-world-clocks/assets/WebPart.png", "alt": "React World Clocks", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-world-clocks/assets/WorldClockList.png", "alt": "React World Clocks", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-world-time/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-world-time", "title": "World Time Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.10", "versionGroup": "1.10", "created": "2018-05-01", "updated": "2018-05-01", "authors": [ { "name": "Eric Overfield", "account": "eoverfield", "avatar": "https://github.com/eoverfield.png" } ], "preview": { "src": "/images/previews/11979ce21386293b31a34226b2287e10a754fc4ed0ba90c478e3b3dc397a1a56.webp", "alt": "World Time", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-world-time", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-world-time/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-world-time", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/11979ce21386293b31a34226b2287e10a754fc4ed0ba90c478e3b3dc397a1a56.webp", "alt": "World Time", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.10", "issues": [ { "code": "component.unverified", "field": "gallery.componentTypes", "message": "Repository-family fallback used; no classifiable component manifest found.", "severity": "warning" }, { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" }, { "code": "version.unverified", "field": "metadata.SPFX-VERSION", "message": "No comparable SPFx package dependency found.", "severity": "warning" }, { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 4 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-yammer-api/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-yammer-api", "title": "Yammer REST API web part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.0.0", "versionGroup": "< 1.1", "created": "2017-04-19", "updated": "2017-04-19", "authors": [ { "name": "Velin Georgiev", "account": "VelinGeorgiev", "avatar": "https://github.com/VelinGeorgiev.png" } ], "preview": { "src": "/images/previews/3fa807de2ddd79c395fb90037df64a2d5a7bed0e131b45f7a6985f4a68efcab6.webp", "alt": "Yammer REST API web part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-yammer-api", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-yammer-api/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-yammer-api", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/3fa807de2ddd79c395fb90037df64a2d5a7bed0e131b45f7a6985f4a68efcab6.webp", "alt": "Yammer REST API web part", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-yammer-api/assets/yammer-enabled-screen.png", "alt": "Yammer REST API web part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.0.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-yammer-praise/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-yammer-praise", "title": "Yammer Praise using aadTokenProvider", "description": "This sample shows how to post a praise to Yammer using aadTokenProvider (without Yammer JavaScript SDK).", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-03-23", "updated": "2020-03-23", "authors": [ { "name": "Ramin Ahmadi", "account": "AhmadiRamin", "avatar": "https://github.com/AhmadiRamin.png" } ], "preview": { "src": "/images/previews/10fda002c773cc11558104e3dda3d9642f0ef6a549ce764b03beb79426fd3b68.webp", "alt": "Yammer Praise using aadTokenProvider", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-yammer-praise", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-yammer-praise/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-yammer-praise", "descriptionParagraphs": [ "This sample shows how to post a praise to Yammer using aadTokenProvider (without Yammer JavaScript SDK)." ], "previews": [ { "src": "/images/previews/10fda002c773cc11558104e3dda3d9642f0ef6a549ce764b03beb79426fd3b68.webp", "alt": "Yammer Praise using aadTokenProvider", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-yammer-praise/assets/screenshot2.gif", "alt": "Yammer Praise using aadTokenProvider", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-yet-another-FAQ-webpart/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-yet-another-faq-webpart", "title": "SPFx FAQ Accordion Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.20.0", "versionGroup": "1.20", "created": "2025-02-23", "updated": "2025-02-23", "authors": [ { "name": "Nicolas Kheirallah", "account": "NicolasKheirallah", "avatar": "https://github.com/NicolasKheirallah.png" } ], "preview": { "src": "/images/previews/a57d34a94b00465ce7d6e65cc60c1d22ba6f31ff14e73def20d97b117d936383.webp", "alt": "FAQ Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-yet-another-FAQ-webpart", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-yet-another-FAQ-webpart/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-yet-another-FAQ-webpart", "descriptionParagraphs": [ "The Yet another FAQ Accordion Web Part is a modern solution for displaying frequently asked questions in SharePoint Online. Built with SPFx, React, and Fluent UI, it provides a responsive and user-friendly interface for managing FAQs with advanced features like real-time search, grouping, and customizable styling." ], "previews": [ { "src": "/images/previews/a57d34a94b00465ce7d6e65cc60c1d22ba6f31ff14e73def20d97b117d936383.webp", "alt": "FAQ Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-yet-another-FAQ-webpart/assets/settings.png", "alt": "FAQ Web Part Settings", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.20.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-youtube/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-youtube", "title": "Youtube Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.11", "versionGroup": "1.11", "created": "2020-10-01", "updated": "2020-10-01", "authors": [ { "name": "Giuliano De Luca", "account": "giuleon", "avatar": "https://github.com/giuleon.png" }, { "name": "Ravi Chandra", "account": "Ravikadri", "avatar": "https://github.com/Ravikadri.png" } ], "preview": { "src": "/images/previews/8aced4a4ca4231a1d200121d6cf8dc4e2ac256a4e8b84c06563e7dc263c4f1d0.webp", "alt": "Youtube Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-youtube", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-youtube/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-youtube", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/8aced4a4ca4231a1d200121d6cf8dc4e2ac256a4e8b84c06563e7dc263c4f1d0.webp", "alt": "Youtube Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.11", "issues": [ { "code": "version.patch-unspecified", "field": "metadata.SPFX-VERSION", "message": "Legacy major.minor version accepted for filtering; supply a patch version for reproducibility.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-zod/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-zod", "title": "Zod Web Part", "description": "This sample shows the usage of Zod to eliminate manual cast and validation of the data coming from external API.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2022-11-08", "updated": "2022-11-08", "authors": [ { "name": "Ari Gunawan", "account": "AriGunawan", "avatar": "https://github.com/AriGunawan.png" } ], "preview": { "src": "/images/previews/9935aa7f7f1d5ebfadb7ec446863cf027c26a473c39faf77741f79cb1b4469e9.webp", "alt": "Web Part Preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-zod", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-zod/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-zod", "descriptionParagraphs": [ "This sample shows the usage of Zod to eliminate manual cast and validation of the data coming from external API (e.g. SharePoint REST API, Graph API, etc.)." ], "previews": [ { "src": "/images/previews/9935aa7f7f1d5ebfadb7ec446863cf027c26a473c39faf77741f79cb1b4469e9.webp", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-zod/assets/result.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-zod/assets/parse-data.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-zod/assets/failed-parse.png", "alt": "Web Part Preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-zod/assets/schema.png", "alt": "Web Part Preview", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [ { "code": "preview.alt-generic", "field": "thumbnails[0].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[1].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[1].order", "message": "Preview order is duplicated.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[2].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[2].order", "message": "Preview order is duplicated.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[3].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[3].order", "message": "Preview order is duplicated.", "severity": "warning" }, { "code": "preview.alt-generic", "field": "thumbnails[4].alt", "message": "Replace generic alt text with a description of the sample.", "severity": "warning" }, { "code": "preview.duplicate-order", "field": "thumbnails[4].order", "message": "Preview order is duplicated.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 9 } }, { "id": "pnp/sp-dev-fx-webparts:samples/react-zpl-viewer/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-react-zpl-viewer", "title": "ZPL Viewer Web Part", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.9.1", "versionGroup": "1.9", "created": "2020-02-13", "updated": "2020-02-13", "authors": [ { "name": "Zach Roberts", "account": "zachroberts8668", "avatar": "https://github.com/zachroberts8668.png" } ], "preview": { "src": "/images/previews/fff56862aa9679913a4dde380e4c2e7fa7c537b049ef2ea19e6a044c8ac46ae8.webp", "alt": "ZPL Viewer", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-zpl-viewer", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/react-zpl-viewer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Freact-zpl-viewer", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/fff56862aa9679913a4dde380e4c2e7fa7c537b049ef2ea19e6a044c8ac46ae8.webp", "alt": "ZPL Viewer", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.9.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/riot-list/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-riot-list", "title": "List RiotJS Client-Side Web Part", "description": "Simplistic sample Web Part that demonstrates the use of RiotJS in creating a SharePoint Framework web part.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Other" ], "version": "1.0.0", "versionGroup": "< 1.1", "created": "2017-04-26", "updated": "2017-04-26", "authors": [ { "name": "Sébastien Levert", "account": "sebastienlevert", "avatar": "https://github.com/sebastienlevert.png" } ], "preview": { "src": "/images/previews/c8f3046cf5c7635ad252a694500f5b3020673d000d3e4ac313376ea5742c8e8b.webp", "alt": "List RiotJS Client-Side Web Part", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/riot-list", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/riot-list/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Friot-list", "descriptionParagraphs": [ "Simplistic sample Web Part that demonstrates the use of RiotJS in creating a SharePoint Framework web part." ], "previews": [ { "src": "/images/previews/c8f3046cf5c7635ad252a694500f5b3020673d000d3e4ac313376ea5742c8e8b.webp", "alt": "List RiotJS Client-Side Web Part", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.0.0", "issues": [ { "code": "version.range", "field": "metadata.SPFX-VERSION", "message": "Package ranges cannot prove the installed SPFx version.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/sp-dev-fx-webparts:samples/section-backgrounds/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-section-backgrounds", "title": "Supporting section backgrounds in your web parts", "description": "These samples show how to implement support for section backgrounds in your web parts.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.7.1-plusbeta", "versionGroup": "1.7", "created": "2019-03-13", "updated": "2019-03-13", "authors": [ { "name": "Chris Kent", "account": "thechriskent", "avatar": "https://avatars.githubusercontent.com/u/8364109?s=460&v=4" } ], "preview": { "src": "/images/previews/eb9a85b287abfc28fdd544011c0d97f6f206befde652ca300197c8103e473006.webp", "alt": "Supporting section backgrounds in your web parts", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/section-backgrounds", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/section-backgrounds/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fsection-backgrounds", "descriptionParagraphs": [ "These samples show how to implement support for section backgrounds in your web parts." ], "previews": [ { "src": "/images/previews/eb9a85b287abfc28fdd544011c0d97f6f206befde652ca300197c8103e473006.webp", "alt": "Supporting section backgrounds in your web parts", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/section-backgrounds/assets/webpartexample1.png", "alt": "Supporting section backgrounds in your web parts", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/section-backgrounds/assets/webpartexample2.png", "alt": "Supporting section backgrounds in your web parts", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Supporting section backgrounds", "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds" } ], "products": [ "SharePoint" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.7.1-plusbeta", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/sharepoint-crud/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-sharepoint-crud", "title": "SharePoint CRUD operations", "description": "Sample Web Parts illustrating performing SharePoint CRUD operations in React, Angular, JavaScript without any framework and using the @pnp/sp library.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "React" ], "version": "1.12.1", "versionGroup": "1.12", "created": "2018-11-01", "updated": "2021-09-26", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" }, { "name": "Gautam Sheth", "account": "gautamdsheth", "avatar": "https://github.com/gautamdsheth.png" }, { "name": "Ari Gunawan", "account": "AriGunawan", "avatar": "https://github.com/AriGunawan.png" } ], "preview": { "src": "/images/previews/8071180a8e95eb4c2ef1f8bbca1b8998ac1fa4e931b844b9789c99e2c4774914.webp", "alt": "SharePoint CRUD operations", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/sharepoint-crud", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/sharepoint-crud/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fsharepoint-crud", "descriptionParagraphs": [ "Sample Web Parts illustrating performing SharePoint CRUD operations in React, Angular, JavaScript without any framework and using the @pnp/sp library." ], "previews": [ { "src": "/images/previews/8071180a8e95eb4c2ef1f8bbca1b8998ac1fa4e931b844b9789c99e2c4774914.webp", "alt": "SharePoint CRUD operations", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.12.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/spfx-news/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-spfx-news", "title": "News Web Part", "description": "A SharePoint Framework (SPFx) web part that displays SharePoint news in 6 configurable layout modes, with support for data source selection, auto-refresh, card customization, and full Fluent UI v9 theming. Built with @spteck/react-controls-v2 and runs on SharePoint Online, Microsoft Teams, and Microsoft 365 (Office) hosts.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.22.2", "versionGroup": "1.22", "created": "2026-05-17", "updated": "2026-05-17", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/spfx-news", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/spfx-news/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fspfx-news", "descriptionParagraphs": [ "A SharePoint Framework (SPFx) web part that displays SharePoint news in 6 configurable layout modes, with support for data source selection, auto-refresh, card customization, and full Fluent UI v9 theming. Built with @spteck/react-controls-v2 and runs on SharePoint Online, Microsoft Teams, and Microsoft 365 (Office) hosts." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.22.2", "issues": [ { "code": "preview.missing", "field": "thumbnails", "message": "At least one image preview is required.", "severity": "error" }, { "code": "preview.unavailable", "field": "thumbnails", "message": "No usable declared image is available; a labelled fallback is shown.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/sp-dev-fx-webparts:samples/vue-js-org-chart/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-vue-js-org-chart", "title": "VueJS Org Chart Web Part", "description": "A simple Organisation Chart web part using Office UI Fabric, VueJS, REST API.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Vue.js" ], "version": "1.8.1", "versionGroup": "1.8", "created": "2019-06-11", "updated": "2019-06-11", "authors": [ { "name": "Serdar Ketenci̇", "account": "serdarketenci", "avatar": "https://github.com/serdarketenci.png" } ], "preview": { "src": "/images/previews/4231eb01f7f4d32fa93c824af1299adbca47b9b1af4360da5f9259530c7a32b1.webp", "alt": "VueJS Org Chart", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/vue-js-org-chart", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/vue-js-org-chart/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fvue-js-org-chart", "descriptionParagraphs": [ "A simple Organisation Chart web part using Office UI Fabric, VueJS, REST API." ], "previews": [ { "src": "/images/previews/4231eb01f7f4d32fa93c824af1299adbca47b9b1af4360da5f9259530c7a32b1.webp", "alt": "VueJS Org Chart", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.8.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/sp-dev-fx-webparts:samples/vuejs-todo-single-file-component/assets/sample.json:0", "slug": "pnp-sp-dev-fx-webparts-pnp-sp-dev-spfx-web-parts-vuejs-todo-single-file-component", "title": "Todo Client Web Part built with Vue.js and Vue's single-file components", "description": "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.", "repository": "pnp/sp-dev-fx-webparts", "family": "Web parts", "experiences": [ "SharePoint" ], "componentTypes": [ "Web part" ], "technologies": [ "Vue.js" ], "version": "1.10.0", "versionGroup": "1.10", "created": "2020-04-27", "updated": "2022-04-04", "authors": [ { "name": "Sergei Sergeev", "account": "s-KaiNet", "avatar": "https://github.com/s-KaiNet.png" } ], "preview": { "src": "/images/previews/ccbde1c9c871344bc5a6948b7250270b5f6f31db898c962a225fbec33c989ccc.webp", "alt": "Todo Client Web Part built with Vue.js and Vue's single-file components", "isFallback": false }, "sourceUrl": "https://github.com/pnp/sp-dev-fx-webparts/tree/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/vuejs-todo-single-file-component", "revisionUrl": "https://github.com/pnp/sp-dev-fx-webparts/commit/52e10a165aeaaacd73bd25ebdf0028d047843dc7", "metadataUrl": "https://github.com/pnp/sp-dev-fx-webparts/blob/52e10a165aeaaacd73bd25ebdf0028d047843dc7/samples/vuejs-todo-single-file-component/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmain%2Fsamples%2Fvuejs-todo-single-file-component", "descriptionParagraphs": [ "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." ], "previews": [ { "src": "/images/previews/ccbde1c9c871344bc5a6948b7250270b5f6f31db898c962a225fbec33c989ccc.webp", "alt": "Todo Client Web Part built with Vue.js and Vue's single-file components", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.10.0", "issues": [ { "code": "preview.external-unverified", "field": "thumbnails[0].url", "message": "External repository image is HTTPS but is not part of the collected source trees.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/spfx-copilot-components:samples/agents-explorer/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-components-agents-explorer", "title": "Agents Explorer - Discover Copilot Agents in Copilot Chat", "description": "SPFx Copilot Component that brings a tenant-wide, live view of Copilot Agents (Power Platform / Copilot Studio bots) into the Microsoft Copilot canvas.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.2", "versionGroup": "1.24", "created": "2026-09-06", "updated": "2026-09-06", "authors": [ { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png" } ], "preview": { "src": "/images/previews/0684ed269ccc9db87b702bd6771fec85d58809926be920cfcf00a364e55edc76.webp", "alt": "Component in Action running in Microsoft Copilot", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/agents-explorer", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/agents-explorer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fagents-explorer", "descriptionParagraphs": [ "Agents Explorer is an SPFx Copilot Component that brings a tenant-wide view of Copilot Agents (Power Platform / Copilot Studio bots) directly into the Microsoft Copilot canvas. A declarative agent (\"AgentsExplorer Agent\") calls it as a tool, and it renders a live, interactive grid of agents inline in the conversation or as a fullscreen overview, reading real Dataverse data across every Power Platform environment the signed-in user can reach.", "From the rendered UI, the signed-in user can see every Copilot Agent published across all Dataverse environments they have access to (with icon, owner, last-modified date, and published/not-published status), filter to agents they own, agents shared with them, or all agents, search by name/owner/schema name (with the search term extracted automatically from their Copilot request), open any agent directly in Copilot Studio, and expand the inline card to a fullscreen view for browsing larger agent lists." ], "previews": [ { "src": "/images/previews/0684ed269ccc9db87b702bd6771fec85d58809926be920cfcf00a364e55edc76.webp", "alt": "Component in Action running in Microsoft Copilot", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/agents-explorer/assets/1.png", "alt": "Inline Copilot Agents Explorer grid in the Copilot Component Workbench", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/agents-explorer/assets/2.png", "alt": "Debug panel showing the AgentsExplorerTool invoked with ownershipFilter and searchText arguments", "isFallback": false } ], "references": [ { "title": "Build agents for Microsoft Copilot", "description": "Extend Microsoft Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "Use Microsoft Graph in your solution", "description": "Learn how SharePoint Framework solutions can use Microsoft Graph APIs via brokered, SSO-based calls.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/apps-directory/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-apps-apps-directory", "title": "Apps directory", "description": "Apps directory - Workplace Application Catalogue", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.2", "versionGroup": "1.24", "created": "2026-07-16", "updated": "2026-07-16", "authors": [ { "name": "Saurabh Tripathi", "account": "saurabh7019", "avatar": "https://github.com/saurabh7019.png" } ], "preview": { "src": "/images/previews/d97e711f72a223d081862b94e51b318235dfe04544a6743138a0a27cbeea6bf8.webp", "alt": "Inline Apps directory card in the Copilot canvas", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/apps-directory", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/apps-directory/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fapps-directory", "descriptionParagraphs": [ "Apps directory brings your organisation's full application catalogue into Microsoft Copilot. Browse apps by category, search by name or keyword, mark your most-used apps as favourites for quick access, and launch any app directly from the Copilot chat. You can also add custom app shortcuts and filter the directory to show only your personal favourites." ], "previews": [ { "src": "/images/previews/d97e711f72a223d081862b94e51b318235dfe04544a6743138a0a27cbeea6bf8.webp", "alt": "Inline Apps directory card in the Copilot canvas", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/apps-directory/assets/screenshot-fullscreen.png", "alt": "Full-screen Apps directory view", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/apps-directory/assets/screenshot-dark.png", "alt": "Apps directory full-screen view in dark mode", "isFallback": false } ], "references": [ { "title": "Build agents for Microsoft Copilot", "description": "Extend Microsoft Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "Build SharePoint Copilot Apps", "description": "Hands-on lab for building SharePoint Copilot Apps using the SPFx Copilot component model.", "url": "https://microsoft.github.io/copilot-camp/pages/sharepoint/sharepoint-copilot-apps/" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/cafeteria/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-components-cafeteria", "title": "Cafeteria - Browse Cafeterias and Menus in Copilot", "description": "Browse cafeteria hours, menus, and dish options from Microsoft Copilot.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.5", "versionGroup": "1.24", "created": "2026-10-19", "updated": "2026-10-22", "authors": [ { "name": "Sandeep P S", "account": "Sandeep-FED", "avatar": "https://github.com/Sandeep-FED.png" } ], "preview": { "src": "/images/previews/2fddcf74e240fbe91e6dd37114a11ff9ff5e0cad95bd4df003672048f8f434d4.webp", "alt": "Cafeteria full-screen home view", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/cafeteria", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/cafeteria/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fcafeteria", "descriptionParagraphs": [ "Cafeteria brings cafeteria listings, daily menus, dish search, and cafeteria details into Microsoft Copilot through four SPFx Copilot Component tools. Users can find cafeterias by building or open status, view a menu by cafeteria and date, search dishes by name or dietary and price criteria, and check hours, contact, and payment information.", "The sample uses bundled synthetic data, supports inline and full-screen display modes, and requires no live SharePoint or Microsoft Graph connection." ], "previews": [ { "src": "/images/previews/2fddcf74e240fbe91e6dd37114a11ff9ff5e0cad95bd4df003672048f8f434d4.webp", "alt": "Cafeteria full-screen home view", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/cafeteria/assets/Screenshot-fullscreen-menu.png", "alt": "Cafeteria full-screen menu", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/cafeteria/assets/Screenshot-fullscreen-search.png", "alt": "Cafeteria full-screen menu search results", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/cafeteria/assets/Screenshot-inline-search.png", "alt": "Cafeteria inline menu search results", "isFallback": false } ], "references": [ { "title": "Microsoft Copilot extensibility", "description": "Build and extend experiences for Microsoft Copilot with agents and tools.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Overview of the SharePoint Framework", "description": "Learn about the SharePoint Framework client-side development model.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "Build your first SharePoint Copilot App", "description": "Create, test, package, and deploy an SPFx Copilot Component.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.5", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/choice-relay/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-apps-choice-relay", "title": "Choice Relay", "description": "Follow a user choice from Copilot into SPFx, back into the conversation, and into a second interactive component.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.2", "versionGroup": "1.24", "created": "2026-07-29", "updated": "2026-07-29", "authors": [ { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/458e958eb3236c6fb1b2f690b7bffe2bb27862cffb5c22c23ee6ba7dc7cd45e1.webp", "alt": "A new fact typed in the Copilot composer, and the SPFx component re-rendered with the revised next action", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/choice-relay", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/choice-relay/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fchoice-relay", "descriptionParagraphs": [ "Choice Relay is a compact teaching sample with two SharePoint Framework Copilot Components. Copilot generates typed arguments for an interactive choice component, the user selects one option locally, and the component sends that selection back as a readable user turn.", "Copilot can then select a second tool and render one grounded next action. The sample also demonstrates revisions initiated from either the SPFx component or the normal Copilot composer, with a collapsed inspector that makes tool input, host context, and outbound messages visible." ], "previews": [ { "src": "/images/previews/458e958eb3236c6fb1b2f690b7bffe2bb27862cffb5c22c23ee6ba7dc7cd45e1.webp", "alt": "A new fact typed in the Copilot composer, and the SPFx component re-rendered with the revised next action", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/choice-relay/assets/screenshot-1-prompt-to-component.png", "alt": "A situation prompt in Copilot, and the choice component rendered from it with four generated options", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/choice-relay/assets/screenshot-2-result.png", "alt": "The result component showing the selected option, the proposed next action, and the four-step trace", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/choice-relay/assets/screenshot-3-revise-in-component.png", "alt": "An adjustment typed into the component's own field with Revise with Copilot active", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Copilot Apps", "description": "Extend Microsoft Copilot with interactive experiences built with the SharePoint Framework.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/overview-copilot-apps" }, { "title": "Build your first SharePoint Copilot App", "description": "Create, test, package, and deploy a SharePoint Copilot App.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app" }, { "title": "Fluent UI React v9", "description": "Build accessible React experiences with Fluent UI components and design tokens.", "url": "https://react.fluentui.dev/" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/copilot-m365-roadmap-features/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-sp-dev-spfx-copilot-apps-copilot-m365-roadmap-features", "title": "Copilot M365 Roadmap Features", "description": "A Copilot Agent that helps teams stay informed about the latest Microsoft 365 roadmap features.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.2", "versionGroup": "1.24", "created": "2026-08-26", "updated": "2026-08-26", "authors": [ { "name": "Mohammad Amer", "account": "mohammadamer", "avatar": "https://github.com/mohammadamer.png" } ], "preview": { "src": "/images/previews/7f693b6a0d063044c7ada3effe8ac6240db3fdd4f047682a774f072d00eb63d2.webp", "alt": "Zava full-screen roadmap features dashboard", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-m365-roadmap-features", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-m365-roadmap-features/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fcopilot-m365-roadmap-features", "descriptionParagraphs": [ "Copilot M365 Roadmap Features demonstrates a SharePoint Framework-based Copilot Agent that helps teams stay informed about the latest Microsoft 365 roadmap features. This solution leverages Microsoft 365 roadmap features, enabling proactive adaptation to new releases, updates, and deployments across Microsoft Teams, SharePoint, Outlook, and other Microsoft 365 applications." ], "previews": [ { "src": "/images/previews/7f693b6a0d063044c7ada3effe8ac6240db3fdd4f047682a774f072d00eb63d2.webp", "alt": "Zava full-screen roadmap features dashboard", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-m365-roadmap-features/assets/inline-roadmap-features.png", "alt": "Zava inline roadmap features dashboard", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint Copilot App", "description": "Learn how to build and package an SPFx Copilot Component with inline and full-screen experiences.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app" }, { "title": "Microsoft Copilot", "description": "Microsoft Copilot combines large language models with organizational context and extensibility.", "url": "https://www.microsoft.com/microsoft-365/copilot" }, { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework supports client-side solutions and tenant-hosted assets for Microsoft 365 experiences.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/copilot-my-approvals/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-apps-copilot-my-approvals", "title": "MyApprovals Agent - Act on Microsoft 365 approvals from Copilot chat", "description": "View and act on your Microsoft 365 approvals directly from Copilot chat.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.2", "versionGroup": "1.24", "created": "2026-07-12", "updated": "2026-07-12", "authors": [ { "name": "Marc A. Schröder-Zhou", "account": "maschroeder-z", "avatar": "https://github.com/maschroeder-z.png" } ], "preview": { "src": "/images/previews/5ac842b1c83e62fb2b16ed7423f6dae732111b2808aeda8f6a2271b2d24b98e2.webp", "alt": "Compact inline view of the MyApprovals Copilot component inside a Microsoft Copilot chat, showing a greeting, three action buttons, and a list of pending approvals.", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-my-approvals", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-my-approvals/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fcopilot-my-approvals", "descriptionParagraphs": [ "MyApprovals brings your pending Microsoft 365 approval requests into Microsoft Copilot. Ask the MyApprovals agent about your approvals and it displays them inline or in a fullscreen overview, showing the requester, status, and details for each item. Approve, reject, or re-assign a request, and contact the requester by email, all without leaving the conversation.", "Built with a SharePoint Copilot App (SPFx 1.24.0-beta.2, @microsoft/sp-copilot-component), the same MyApprovalsCopilotComponent renders both the compact inline card and the expanded fullscreen view, reading brokered Microsoft Graph and SharePoint REST calls with zero token-acquisition code." ], "previews": [ { "src": "/images/previews/5ac842b1c83e62fb2b16ed7423f6dae732111b2808aeda8f6a2271b2d24b98e2.webp", "alt": "Compact inline view of the MyApprovals Copilot component inside a Microsoft Copilot chat, showing a greeting, three action buttons, and a list of pending approvals.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-my-approvals/assets/copilot-spfx-agent-approvals-02.png", "alt": "Expanded fullscreen view of the MyApprovals Copilot component, showing a status filter dropdown and a detailed list of approvals with Approve, Reject, and Re-assign buttons for each.", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Copilot Apps", "description": "Extend Microsoft Copilot with custom, interactive experiences built using the familiar SharePoint Framework (SPFx) tools and client-side development model.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/overview-copilot-apps" }, { "title": "Build agents for Microsoft Copilot", "description": "Extend Microsoft Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/copilot-readiness-action-centre/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-apps-copilot-readiness-action-centre", "title": "Copilot Readiness Action Centre", "description": "Review Microsoft Copilot readiness risks and create governed SharePoint remediation actions from the Copilot canvas.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.2", "versionGroup": "1.24", "created": "2026-07-14", "updated": "2026-07-14", "authors": [ { "name": "Daniel Brown", "account": "DanielBrownAG", "avatar": "https://github.com/DanielBrownAG.png" } ], "preview": { "src": "/images/previews/debc5f5101d20ad81356bec17f2f0b0949c2ba0abd43168ead9355a8b3017dfb.webp", "alt": "Copilot Readiness Action Centre showing readiness score, critical risks, open actions, and prioritized findings", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-readiness-action-centre", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-readiness-action-centre/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fcopilot-readiness-action-centre", "descriptionParagraphs": [ "Copilot Readiness Action Centre is a SharePoint Copilot App built as an SPFx 1.24 Copilot Component. It surfaces readiness scores and risk findings in the Microsoft Copilot canvas, with inline and full-screen display modes, Fluent UI v9 host-driven theming, and governed remediation actions written to SharePoint lists.", "The sample ships offline mock data for immediate demos and a swappable IReadinessDataService so a live SharePoint implementation is a drop-in path. Architecture follows the PnP agentic creation rules: thin entry component, root App selector, ThemeProvider, separate inline and full-screen views, and Zod tool inputs exported via zodToJsonSchema for Teams and agent packaging." ], "previews": [ { "src": "/images/previews/debc5f5101d20ad81356bec17f2f0b0949c2ba0abd43168ead9355a8b3017dfb.webp", "alt": "Copilot Readiness Action Centre showing readiness score, critical risks, open actions, and prioritized findings", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-readiness-action-centre/assets/preview-full.png", "alt": "Full Copilot conversation with readiness findings, risk explanations, and recommended remediation actions", "isFallback": false } ], "references": [ { "title": "Build agents for Microsoft Copilot", "description": "Extend Microsoft Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "Build your first SharePoint Copilot App", "description": "Create a SharePoint Copilot App with SPFx, test it in the Copilot Workbench, package and deploy it to the app catalog.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/copilot-recipe-finder/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-recipe-agent", "title": "Recipe Kitchen Agent - Find recipes to cook from Copilot chat", "description": "Discover and view recipes directly from Copilot chat.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0", "versionGroup": "1.24", "created": "2026-11-03", "updated": "2026-11-04", "authors": [ { "name": "Simon Doy", "account": "simondoy", "avatar": "https://github.com/simondoy.png" } ], "preview": { "src": "/images/previews/d291ad52a2e0ae153e7cb1860e06eed39c65af8e1fb5e5894f64322a582713a3.webp", "alt": "Compact inline view of the Recipe Kitchen Agent inside a Microsoft Copilot chat, showing a greeting, search options, and a list of recipes.", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-recipe-finder", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-recipe-finder/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fcopilot-recipe-finder", "descriptionParagraphs": [ "Recipe Kitchen Agent helps you find recipes by dish name directly from Copilot chat. Select a result to view source-linked ingredients and instructions with interactive checklists. Ingredient, cuisine, time, and dietary filters are not supported.", "Built with a SharePoint Copilot App (SPFx 1.24.0, @microsoft/sp-copilot-component), RecipeSearchCopilotComponent supports inline and fullscreen views. The default provider retrieves recipes from TheMealDB; a deterministic mock provider is available for local debugging." ], "previews": [ { "src": "/images/previews/d291ad52a2e0ae153e7cb1860e06eed39c65af8e1fb5e5894f64322a582713a3.webp", "alt": "Compact inline view of the Recipe Kitchen Agent inside a Microsoft Copilot chat, showing a greeting, search options, and a list of recipes.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-recipe-finder/assets/copilot-spfx-recipe-agent-04.png", "alt": "Expanded fullscreen view of the Recipe Kitchen Agent, showing detailed recipe information with ingredients, instructions, and action buttons.", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Copilot Apps", "description": "Extend Microsoft Copilot with custom, interactive experiences built using the familiar SharePoint Framework (SPFx) tools and client-side development model.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/overview-copilot-apps" }, { "title": "Build agents for Microsoft Copilot", "description": "Extend Microsoft Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/copilot-sharepoint-form-app/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-components-copilot-sharepoint-form-app", "title": "SharePoint Document Submission Form", "description": "Submit files up to 50 MB and dynamic library metadata directly to a SharePoint document library from an inline Microsoft 365 Copilot chat form or a modern SharePoint page without passing file bytes through the LLM prompt.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot", "SharePoint" ], "componentTypes": [ "Copilot component", "Web part" ], "technologies": [ "React" ], "version": "1.24.0-rc.0", "versionGroup": "1.24", "created": "2026-10-28", "updated": "2026-10-28", "authors": [ { "name": "Anand Vijayaragavan", "account": "anandragav", "avatar": "https://github.com/anandragav.png" } ], "preview": { "src": "/images/previews/033b10b5326cb599e89b6b4431cdd8ebbcf3b72b68461562c47550a71cea85cf.webp", "alt": "Inline SharePoint document submission form rendered in Microsoft 365 Copilot chat with a verified Knowledge base library, staged presentation file, and required and optional metadata columns", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-sharepoint-form-app", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-sharepoint-form-app/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fcopilot-sharepoint-form-app", "descriptionParagraphs": [ "SharePoint Document Submission Form renders an interactive document-intake form inline in Microsoft 365 Copilot chat (via BaseCopilotComponent) and on modern SharePoint pages (via BaseClientSideWebPart). When a user asks to upload or submit a document, the declarative agent calls OpenDocumentSubmissionForm and opens the SPFx form inline.", "The component verifies the target SharePoint document library (BaseTemplate 101), dynamically loads its required and optional editable columns via SharePoint REST, and uploads files up to 50 MB (direct upload up to 10 MB, chunked StartUpload/ContinueUpload/FinishUpload above 10 MB) followed by ValidateUpdateListItem under the signed-in user's delegated SharePoint permissions—without ever placing file bytes into the Copilot prompt or requesting Microsoft Graph admin consent.", "Built-in security hardening locks siteUrl overrides to HTTPS on the active SharePoint Online tenant origin and enforces a strict file extension allowlist (.pdf, .docx, .xlsx, .pptx, .md, .png, .jpg)." ], "previews": [ { "src": "/images/previews/033b10b5326cb599e89b6b4431cdd8ebbcf3b72b68461562c47550a71cea85cf.webp", "alt": "Inline SharePoint document submission form rendered in Microsoft 365 Copilot chat with a verified Knowledge base library, staged presentation file, and required and optional metadata columns", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-sharepoint-form-app/assets/copilot-chat-kb-2-submitted.png", "alt": "Document submitted confirmation state in Microsoft 365 Copilot chat showing the uploaded file, saved metadata values, and direct Open file link", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-sharepoint-form-app/assets/copilot-chat-kb-3-success-reply.png", "alt": "Follow-up confirmation message from the SharePoint document submission agent in Microsoft 365 Copilot chat", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-sharepoint-form-app/assets/copilot-sharepoint-form-page-4-embedded-masked.png", "alt": "Copilot SharePoint Form web part embedded on a two-column modern SharePoint page", "isFallback": false } ], "references": [ { "title": "Build agents for Microsoft Copilot", "description": "Extend Microsoft Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "SharePoint Framework v1.24 release notes", "description": "Release notes for SPFx 1.24 including Copilot UX components (BaseCopilotComponent) and Heft toolchain updates.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/release-1.24.0" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-rc.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/copilot-star-match-game/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-sp-dev-spfx-copilot-apps-copilot-star-match-game", "title": "Copilot Star Match Game", "description": "A SharePoint Copilot app that enables teams to play the Star Match game.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.2", "versionGroup": "1.24", "created": "2026-09-20", "updated": "2026-10-22", "authors": [ { "name": "Mohammad Amer", "account": "mohammadamer", "avatar": "https://github.com/mohammadamer.png" } ], "preview": { "src": "/images/previews/6c670453f52528f79a95717542756ef9e4b693824c3e7d96e97db90dc60c231d.webp", "alt": "Star Match Game inline", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-star-match-game", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-star-match-game/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fcopilot-star-match-game", "descriptionParagraphs": [ "Copilot Star Match Game demonstrates a SharePoint Framework-based Copilot Agent that helps teams play the Star Match game. This solution leverages interactive game mechanics, enabling engaging and fun experiences within Microsoft Teams, SharePoint, and other Microsoft 365 applications." ], "previews": [ { "src": "/images/previews/6c670453f52528f79a95717542756ef9e4b693824c3e7d96e97db90dc60c231d.webp", "alt": "Star Match Game inline", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-star-match-game/assets/inline-star-match-game02.png", "alt": "Star Match Game inline", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-star-match-game/assets/fullscreen-star-match-game.png", "alt": "Star Match Game full-screen", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint Copilot App", "description": "Learn how to build and package an SPFx Copilot Component with inline and full-screen experiences.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app" }, { "title": "Microsoft 365 Copilot", "description": "Microsoft 365 Copilot combines large language models with organizational context and extensibility.", "url": "https://www.microsoft.com/microsoft-365/copilot" }, { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework supports client-side solutions and tenant-hosted assets for Microsoft 365 experiences.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/copilot-studio-agent-map/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-components-copilot-studio-agent-map", "title": "Agent Map for Copilot Studio agents", "description": "SPFx Copilot UX component that shows an interactive map of a Copilot Studio agent in Microsoft 365 Copilot: its skills, tools, knowledge sources, connected agents, topics, triggers, and evaluation sets.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0", "versionGroup": "1.24", "created": "2026-10-29", "updated": "2026-10-30", "authors": [ { "name": "Ramakrishnan Raman", "account": "Ramakrishnan24689", "avatar": "https://github.com/Ramakrishnan24689.png" } ], "preview": { "src": "/images/previews/8e141fd8a78c722fc25ba30309788a580158cbb8639115da14be0fba83f4201b.webp", "alt": "Agent Map of a Copilot Studio agent with its skills, connector tools, knowledge source, and connected agent", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-studio-agent-map", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-studio-agent-map/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fcopilot-studio-agent-map", "descriptionParagraphs": [ "Agent Map is an SPFx Copilot UX component that shows how a Copilot Studio agent is built, directly in Microsoft 365 Copilot. A declarative agent (\"Agent Map\") calls it as a tool. The inline card shows only the map. The full-screen view adds the environment and agent selectors, search, filters, a list, and a details panel for each skill, tool, knowledge source, connected agent, topic, trigger, and evaluation set.", "The component reads the agent definition from Dataverse with the signed-in user's delegated identity through AadHttpClient, and finds the environments with the Dataverse Global Discovery Service. It is read-only and needs no backend or Azure resources." ], "previews": [ { "src": "/images/previews/8e141fd8a78c722fc25ba30309788a580158cbb8639115da14be0fba83f4201b.webp", "alt": "Agent Map of a Copilot Studio agent with its skills, connector tools, knowledge source, and connected agent", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/copilot-studio-agent-map/assets/workbench.png", "alt": "Agent Map in the Copilot Workbench, with the tool properties and the event log", "isFallback": false } ], "references": [ { "title": "Copilot UX components with the SharePoint Framework", "description": "Build interactive experiences for Microsoft 365 Copilot with SharePoint Framework Copilot UX components.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/overview-copilot-apps" }, { "title": "Build agents for Microsoft Copilot", "description": "Extend Microsoft Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "Use the Microsoft Dataverse Web API", "description": "Read and write Dataverse data with the OData v4 Web API.", "url": "https://learn.microsoft.com/power-apps/developer/data-platform/webapi/overview" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/events/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-apps-events", "title": "SharePoint Events Copilot Agent", "description": "Find SharePoint events from Microsoft Copilot and explore them in an interactive calendar.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.2", "versionGroup": "1.24", "created": "2026-08-25", "updated": "2026-08-25", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/df21aa5f138e4b5df98c2e0265180a7fb16d9c3075c91f372cbd1a7a3a963f48.webp", "alt": "Inline SharePoint Events Agent gallery displaying recent events in Microsoft Copilot.", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/events", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/events/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fevents", "descriptionParagraphs": [ "SharePoint Events Copilot Agent brings natural-language event discovery to Microsoft Copilot." ], "previews": [ { "src": "/images/previews/df21aa5f138e4b5df98c2e0265180a7fb16d9c3075c91f372cbd1a7a3a963f48.webp", "alt": "Inline SharePoint Events Agent gallery displaying recent events in Microsoft Copilot.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/events/assets/compact-calendar.png", "alt": "Inline SharePoint Events Agent displaying compact calendar of recent events in Microsoft Copilot.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/events/assets/events-home.png", "alt": "SharePoint Events Agent welcome screen showing suggested event search prompts.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/events/assets/events-expand.png", "alt": "Fullscreen masonry gallery displaying SharePoint events in Microsoft Copilot.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/events/assets/events-expand-calendar.png", "alt": "Fullscreen calendar view displaying SharePoint events in Microsoft Copilot.", "isFallback": false } ], "references": [ { "title": "Build agents for Microsoft Copilot", "description": "Extend Microsoft Copilot with declarative agents, plugins, and connectors.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Overview of the SharePoint Framework", "description": "Learn about the SharePoint Framework client-side development model.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "Use Microsoft Graph in your solution", "description": "Use Microsoft Graph from SharePoint Framework solutions to access Microsoft 365 data.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/executive-sales-dashboard/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-sp-dev-spfx-copilot-apps-executive-sales-dashboard", "title": "Executive Sales & Revenue Dashboard (Copilot Component)", "description": "An SPFx Copilot Component that renders an executive sales dashboard inline in Microsoft Copilot and expands to a rich full-screen view, entirely from offline mock data.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0", "versionGroup": "1.24", "created": "2026-07-08", "updated": "2026-10-28", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/PaoloPia.png" } ], "preview": { "src": "/images/previews/7a5b7a27d1a4557140bded93630b121d3da964817184d4c38f1d01df36b1a16c.webp", "alt": "Full-screen executive sales dashboard", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/executive-sales-dashboard", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/executive-sales-dashboard/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fexecutive-sales-dashboard", "descriptionParagraphs": [ "A SharePoint Framework Copilot Component (React 18.3.1 + Fluent UI v9) that surfaces an Executive Sales & Revenue Dashboard directly inside Microsoft Copilot. It renders a compact inline card and, on request, a rich full-screen dashboard, switching on the host displayMode. All data comes from a locally generated, Graph-shaped mock so the sample runs fully offline; a data-service interface plus a useMock flag make switching to a real backend a drop-in change.", "Features include KPI cards, an actual-vs-target revenue trend, revenue by region and by product, a quarter-forecast gauge, generated insights, host-driven light/dark theming, a gear-activated settings panel, filters (region/product/segment) that noticeably reshape the data, and a data-loading spinner. All charts are drawn with inline SVG (no external chart library)." ], "previews": [ { "src": "/images/previews/7a5b7a27d1a4557140bded93630b121d3da964817184d4c38f1d01df36b1a16c.webp", "alt": "Full-screen executive sales dashboard", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/executive-sales-dashboard/assets/screenshot-inline.png", "alt": "Inline dashboard card in Copilot", "isFallback": false } ], "references": [ { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open-source tooling.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "Microsoft Copilot", "description": "Microsoft Copilot combines the power of large language models with your organization's data to help you be more productive.", "url": "https://www.microsoft.com/microsoft-365/copilot" }, { "title": "Use Microsoft Graph in your solution", "description": "Microsoft Graph is the gateway to data and intelligence in Microsoft 365, exposing REST APIs and client libraries to access data across Microsoft 365 services.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/expert-finder/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-components-expert-finder", "title": "Expert Finder", "description": "Find colleagues by skill, explore profiles and availability, and request introduction drafts or confirmed Teams meetings in Microsoft 365 Copilot.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.1", "versionGroup": "1.24", "created": "2026-11-07", "updated": "2026-11-07", "authors": [ { "name": "Luis Mañez", "account": "luismanez", "avatar": "https://github.com/luismanez.png" } ], "preview": { "src": "/images/previews/2ac4b19b68b73da3a90545dd5dac173ea246376f9f31447c30e18507db7b5ba1.webp", "alt": "Expert Finder architecture: Copilot invokes a typed SPFx tool that renders a React directory using SharePoint or fictional profiles, with optional Graph actions and introduction drafting.", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/expert-finder", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/expert-finder/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fexpert-finder", "descriptionParagraphs": [ "An SPFx 1.24.1 Copilot UX component that renders an expert directory inline and in fullscreen using React, Fluent UI v9 and a SharePoint Experts list.", "Explore local filters, delegated Graph photos and free/busy availability, confirmed calendar-backed Teams meetings, and selected-profile introduction drafting in the Copilot conversation.", "Learn component-to-Copilot context publishing: Introduce me awaits updateModelContextAsync with a minimal selected-profile snapshot, then uses sendFollowUpMessageAsync to request a draft in the existing conversation.", "A missing Experts list selects bundled fictional profiles with local portraits. Mock profiles make no Graph calls, and live meetings require explicit confirmation." ], "previews": [ { "src": "/images/previews/2ac4b19b68b73da3a90545dd5dac173ea246376f9f31447c30e18507db7b5ba1.webp", "alt": "Expert Finder architecture: Copilot invokes a typed SPFx tool that renders a React directory using SharePoint or fictional profiles, with optional Graph actions and introduction drafting.", "isFallback": false } ], "references": [ { "title": "Copilot UX components", "description": "Build interactive experiences in Microsoft 365 Copilot with the SharePoint Framework.", "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/copilot/overview-copilot-apps" }, { "title": "Develop and deploy Copilot UX components", "description": "Understand component deployment, baseline agent synchronization and updates.", "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/copilot/development-and-deployment" }, { "title": "Provide Copilot with context from your component", "description": "Publish selected component state and request user-triggered conversational follow-ups through the Copilot Bridge.", "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/copilot/provide-context-to-copilot" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/file-uploader/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-components-file-uploader", "title": "Document Intake", "description": "A Copilot Component that files invoices and expense reports into a records library with complete, validated metadata, and shows recent filings.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.2", "versionGroup": "1.24", "created": "2026-09-08", "updated": "2026-09-24", "authors": [ { "name": "Kurt Rolland", "account": "kurt-rolland", "avatar": "https://github.com/kurt-rolland.png" } ], "preview": { "src": "/images/previews/0d58e786afd6c0c56cf88f555264ac641eaf73eb59990584c0d8eebda3094420.webp", "alt": "Inline — the confirm step: a read-only summary of every field and the exact destination path, with Back to edit and Confirm and save", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/file-uploader", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/file-uploader/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Ffile-uploader", "descriptionParagraphs": [ "Files a formal document — an invoice or an expense report — into the right document library with complete metadata, from inside a Microsoft 365 Copilot conversation. The user chooses the file, the component asks only for the fields that document kind requires, the destination is derived from kind and department, and nothing is stored until the user confirms. After saving, the user sees exactly what was stored, where, and a receipt.", "One manifest tool, fileDocuments, carries an intent discriminator: file (choose, validate, review, confirm — several files at once in a full-screen workspace) or recent (filter recent filings by kind, department, status and period; open any record). Runs on fictional sample data until a tenant admin switches on the live SharePoint store, whose content types supply the required fields; both stores sit behind IDocumentStoreService, so views and mappers are the same for either." ], "previews": [ { "src": "/images/previews/0d58e786afd6c0c56cf88f555264ac641eaf73eb59990584c0d8eebda3094420.webp", "alt": "Inline — the confirm step: a read-only summary of every field and the exact destination path, with Back to edit and Confirm and save", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/file-uploader/assets/screenshot-fullscreen.png", "alt": "Full screen — bulk filing: a file list with per-file readiness pills, shared fields applied to all four files, per-file overrides, and Save 3 ready files", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/file-uploader/assets/screenshot-dark.png", "alt": "Recent filings in dark theme: chip filters and a table of filings with semantic status pills, amounts and relative filed times", "isFallback": false } ], "references": [ { "title": "Build a Copilot Component", "description": "SPFx Copilot Components overview and the BaseCopilotComponent API.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-first-copilot-component" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/holiday-planner/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-apps-holiday-planner", "title": "Holiday Planner - Working Days, Long Weekends, and Regional Holidays in Copilot Chat", "description": "Five SPFx Copilot Components and one declarative agent that calculate working days, find long weekends with bridge-day suggestions, list holidays, check dates, and compare office calendars directly in Copilot chat.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.1", "versionGroup": "1.24", "created": "2026-09-24", "updated": "2026-09-30", "authors": [ { "name": "Harminder Singh", "account": "HarminderSethi", "avatar": "https://github.com/HarminderSethi.png" } ], "preview": { "src": "/images/previews/3b729eed41333db0efecaa9115ce6a754b316148a31ba0aba07a8a210e673a32.webp", "alt": "Expanded Holiday Planner dashboard with next holiday, next long weekend, working-day summary, holiday calendar, and holiday details.", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/holiday-planner", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/holiday-planner/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fholiday-planner", "descriptionParagraphs": [ "Holiday Planner is a SharePoint Copilot App built as five SPFx 1.24 Copilot Components under a single declarative agent. Each tool renders a live React card in the Copilot conversation: an inclusive working-day count, the next long weekend with the working days until it and any bridge-day suggestion, a full-year, month, or upcoming holiday list, a working-day check for a specific date or named holiday, and a side-by-side comparison of regional calendars.", "Expanding a card opens a shared dashboard with calendar tabs, holiday details, and a Vacation Optimizer. Holiday data is read from a SharePoint list under the signed-in user's delegated identity, configured through a tenant storage entity, with demo data as a labelled fallback. The default country resolves from the query, a OneDrive-saved preference, the user's profile, or browser hints, and the pure planning calculations are unit tested." ], "previews": [ { "src": "/images/previews/3b729eed41333db0efecaa9115ce6a754b316148a31ba0aba07a8a210e673a32.webp", "alt": "Expanded Holiday Planner dashboard with next holiday, next long weekend, working-day summary, holiday calendar, and holiday details.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/holiday-planner/assets/InlineView-HolidayPlanner.png", "alt": "Inline Copilot card listing all holidays in the year for the selected country with fixed and optional badges.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/holiday-planner/assets/longWeekendInlineView.png", "alt": "Inline Copilot card showing the next long weekend, days off, working days until the break, and bridge-day status.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/holiday-planner/assets/HolidaysComparison.png", "alt": "Inline Copilot card comparing holidays side by side for different regions.", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Copilot Apps", "description": "Extend Microsoft Copilot with interactive experiences built with the SharePoint Framework.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/overview-copilot-apps" }, { "title": "Build agents for Microsoft Copilot", "description": "Extend Microsoft Copilot with declarative agents, plugins, and connectors.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "OneDrive app folder for Microsoft Graph", "description": "Store per-user application settings in a dedicated OneDrive folder with the Files.ReadWrite.AppFolder permission.", "url": "https://learn.microsoft.com/graph/onedrive-sharepoint-appfolder" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/kudos-recognition-wall/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-apps-kudos-recognition-wall", "title": "Kudos & Recognition Wall - Recognise colleagues from Microsoft Copilot chat", "description": "Give kudos and browse your organization's recognition wall directly from Microsoft Copilot chat.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.2", "versionGroup": "1.24", "created": "2026-08-12", "updated": "2026-08-12", "authors": [ { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png" } ], "preview": { "src": "/images/previews/fc124e0e5bcd4ef074435753ff303aa57f31e8fb3c7a34f55b4c9e4f3261f22d.webp", "alt": "Inline Kudos card inside a Microsoft Copilot chat, showing a digest of recent recognitions with Give kudos and Open the wall actions.", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/kudos-recognition-wall", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/kudos-recognition-wall/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fkudos-recognition-wall", "descriptionParagraphs": [ "Kudos & Recognition Wall brings peer recognition into Microsoft Copilot. Ask the Kudos and Recognition Wall agent to show the wall and it renders an inline card of recent recognitions, or an expanded fullscreen wall with team, value, and time filters plus Most recognised and Top givers leaderboards. Name a colleague and a reason and it opens a pre-filled compose card so you can give kudos without leaving the conversation.", "Built as a SharePoint Copilot App (SPFx 1.24.0-beta.2, @microsoft/sp-copilot-component), the same component renders both the compact inline card and the expanded wall. It reads and writes a SharePoint Kudos list via RenderListDataAsStream and brokers Microsoft Graph for colleague search and department enrichment, with a built-in mock backend for zero-setup demos and Fluent UI v9 runtime theming that follows the Copilot host." ], "previews": [ { "src": "/images/previews/fc124e0e5bcd4ef074435753ff303aa57f31e8fb3c7a34f55b4c9e4f3261f22d.webp", "alt": "Inline Kudos card inside a Microsoft Copilot chat, showing a digest of recent recognitions with Give kudos and Open the wall actions.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/kudos-recognition-wall/assets/kudos-recognition-wall-expanded.png", "alt": "Expanded recognition wall with a filterable feed of kudos and Most recognised and Top givers leaderboards.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/kudos-recognition-wall/assets/kudos-recognition-wall-give-kudos.png", "alt": "Give kudos dialog for choosing a colleague, team, and recognised value, with a message field.", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Copilot Apps", "description": "Extend Microsoft Copilot with custom, interactive experiences built using the familiar SharePoint Framework (SPFx) tools and client-side development model.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/overview-copilot-apps" }, { "title": "Build agents for Microsoft Copilot", "description": "Extend Microsoft Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/m365-roadmap/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-components-m365-roadmap", "title": "M365 Product Roadmap", "description": "An SPFx 1.24 Copilot UX component for discovering Microsoft 365 roadmap features through the public Microsoft Release Communications MCP server.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.4", "versionGroup": "1.24", "created": "2026-09-22", "updated": "2026-09-22", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/7c406f96d4ced76540d53af7de7fa70eb78f7859723fa5b8435ee76c4c6025f7.webp", "alt": "M365 Product Roadmap component gallery preview showing roadmap feature cards in Microsoft Copilot.", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/m365-roadmap", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/m365-roadmap/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fm365-roadmap", "descriptionParagraphs": [ "M365 Product Roadmap is a SharePoint Framework 1.24 Copilot UX component that helps users discover and explore Microsoft 365 roadmap features through the public Microsoft Release Communications (MRC) MCP server. The component provides both compact inline views and fullscreen responsive card grids for browsing upcoming Microsoft 365 releases.", "The component supports advanced filtering and search capabilities including debounced search, product picker, status dropdown, exact roadmap ID input, and multi-select filters for release phase, platform, and cloud. It features lazy-loading detail dialogs with overview information, rollout timelines, metadata, and direct links to Microsoft source documentation.", "Built with React and TypeScript using the SharePoint Framework 1.24, the component leverages @spteck/react-controls-v2 for UI controls and @emotion/css for styling with Fluent design tokens. It demonstrates best practices for integrating Copilot components with remote MCP endpoints, including offset paging with deduplication, stale-request protection, and light/dark theme support." ], "previews": [ { "src": "/images/previews/7c406f96d4ced76540d53af7de7fa70eb78f7859723fa5b8435ee76c4c6025f7.webp", "alt": "M365 Product Roadmap component gallery preview showing roadmap feature cards in Microsoft Copilot.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/m365-roadmap/assets/expand.png", "alt": "Fullscreen M365 Product Roadmap component displaying expanded roadmap feature card with details.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/m365-roadmap/assets/filters.png", "alt": "M365 Product Roadmap component with filtering options including product picker and status dropdown.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/m365-roadmap/assets/details.png", "alt": "M365 Product Roadmap component detail dialog showing roadmap feature overview and rollout timeline.", "isFallback": false } ], "references": [ { "title": "Build agents for Microsoft Copilot", "description": "Extend Microsoft Copilot with declarative agents, plugins, and connectors.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Overview of the SharePoint Framework", "description": "Learn about the SharePoint Framework client-side development model.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "Microsoft Copilot", "description": "Microsoft Copilot combines large language models with organizational context and extensibility.", "url": "https://www.microsoft.com/microsoft-365/copilot" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.4", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/m365-service-health/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-apps-m365-service-health", "title": "M365 Service Health - Live Microsoft 365 Service Health in Copilot Chat", "description": "An SPFx Copilot Component that displays live Microsoft 365 service health in Copilot chat, with interactive inline and full-screen views powered by Microsoft Graph.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.2", "versionGroup": "1.24", "created": "2026-07-31", "updated": "2026-07-31", "authors": [ { "name": "Harminder Singh", "account": "HarminderSethi", "avatar": "https://github.com/HarminderSethi.png" } ], "preview": { "src": "/images/previews/eb390b2f74c9b246fb0fda1abb596f4260148197e0c79dd6020977babd19b6df.webp", "alt": "M365 Service Health overview showing current Microsoft 365 service status", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/m365-service-health", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/m365-service-health/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fm365-service-health", "descriptionParagraphs": [ "M365 Service Health is a SharePoint Copilot App built as an SPFx 1.24 Copilot Component. Its declarative agent answers service availability questions by rendering live Microsoft 365 service health data from the Microsoft Graph service health API directly in the Copilot conversation.", "The React component supports inline and full-screen display modes, service search, active-issue filtering, natural-language service name resolution, and issue details with impact and status updates. It also demonstrates brokered Microsoft Graph access, retry with exponential backoff, classified error handling, host-driven theming, and graceful degradation." ], "previews": [ { "src": "/images/previews/eb390b2f74c9b246fb0fda1abb596f4260148197e0c79dd6020977babd19b6df.webp", "alt": "M365 Service Health overview showing current Microsoft 365 service status", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/m365-service-health/assets/copilot_component_rendering.png", "alt": "M365 Service Health component rendered in a Copilot conversation", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/m365-service-health/assets/full%20page%20view.png", "alt": "Full-screen M365 Service Health overview with filtering and issue details", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Copilot Apps", "description": "Extend Microsoft Copilot with interactive experiences built with the SharePoint Framework.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/overview-copilot-apps" }, { "title": "Microsoft Graph service communications API overview", "description": "Access Microsoft 365 service health and service announcement information through Microsoft Graph.", "url": "https://learn.microsoft.com/graph/service-communications-concept-overview" }, { "title": "Overview of the SharePoint Framework", "description": "Build extensible client-side solutions for SharePoint and Microsoft 365.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/multilingual-story-card/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-components-multilingual-story-card", "title": "CosmoPolite - multilingual story card", "description": "Ask in any language or dialect and get a story card in that language: labels, reading direction, fonts, photo credit and a read-aloud voice all follow the story, including right-to-left scripts.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "TypeScript" ], "version": "1.24.0", "versionGroup": "1.24", "created": "2026-10-18", "updated": "2026-10-29", "authors": [ { "name": "Stefan Bauer", "account": "StfBauer", "avatar": "https://github.com/StfBauer.png" } ], "preview": { "src": "/images/previews/21fb8c35730dc9e3c8c9893c15b785224afa5d019c950e4f2effc6e34847946f.webp", "alt": "Inline CosmoPolite card in Microsoft 365 Copilot answering an Arabic question about Copilot UX components in SPFx, written and labelled in Arabic, right to left", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/multilingual-story-card", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/multilingual-story-card/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fmultilingual-story-card", "descriptionParagraphs": [ "CosmoPolite is a Copilot UX Component, packaged with a declarative agent, that answers in the language you ask in. The agent detects the language of every message, dialects included, and the card shows a short story written in that language with a photo from open collections (Wikipedia, Wikimedia Commons, Openverse, The Met, NASA) and its credit.", "Everything on the card follows the story's language: UI labels in 58 languages, lang and dir on every part and on the frame's html element, right-to-left layout for Arabic, Hebrew, Persian and Urdu, a Nastaliq font for Urdu, and read-aloud with a matching Web Speech voice and word highlighting.", "Users can switch between five designs, three photo layouts and light or dark, open the card fullscreen, and translate the story, after which the agent continues and suggests follow-ups in the new language. The component uses no framework and no Microsoft Graph permissions." ], "previews": [ { "src": "/images/previews/21fb8c35730dc9e3c8c9893c15b785224afa5d019c950e4f2effc6e34847946f.webp", "alt": "Inline CosmoPolite card in Microsoft 365 Copilot answering an Arabic question about Copilot UX components in SPFx, written and labelled in Arabic, right to left", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/multilingual-story-card/assets/cosmopolite-translate.png", "alt": "A CosmoPolite card translated from German into Spanish on request, with Spanish labels and a Spanish voice", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/multilingual-story-card/assets/cosmopolite-read-aloud.png", "alt": "An English CosmoPolite card being read aloud: the current sentence is marked and the spoken word highlighted", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/multilingual-story-card/assets/cosmopolite-fullscreen.png", "alt": "Fullscreen CosmoPolite card in Japanese in the Magazine design, dark theme, with a large photo above the headline", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/multilingual-story-card/assets/cosmopolite-greek.png", "alt": "A CosmoPolite card in Greek with Greek labels and a Greek read-aloud voice", "isFallback": false } ], "references": [ { "title": "Build agents for Microsoft Copilot", "description": "Extend Microsoft Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "Web Speech API", "description": "Speech synthesis in the browser: voices, utterances and word boundary events used for read-aloud.", "url": "https://developer.mozilla.org/docs/Web/API/Web_Speech_API" }, { "title": "WCAG 2.2: Language of Page and Language of Parts", "description": "Why the lang attribute matters for screen readers and speech (success criteria 3.1.1 and 3.1.2).", "url": "https://www.w3.org/WAI/WCAG22/Understanding/language-of-page.html" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/my-day/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-sp-dev-spfx-copilot-components-my-day", "title": "My Day — Personalized Intranet Copilot App", "description": "A SharePoint Copilot App (SPFx 1.24 Copilot Component) that renders a personal 'My Day' cockpit inside the Microsoft Copilot canvas — a compact inline card that expands to a full-screen dashboard with agenda, tasks, mail, news, a 'Plan my day' briefing and session-persisted settings.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0", "versionGroup": "1.24", "created": "2026-07-02", "updated": "2026-10-28", "authors": [ { "name": "Vesa Juvonen", "account": "vesajuvonen", "avatar": "https://github.com/vesajuvonen.png" } ], "preview": { "src": "/images/previews/d3efe3849d250ba0b797cca82dac2bb42e911236fc7a7520cf7cdc806b5a0685.webp", "alt": "Inline My Day card in the Copilot canvas", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/my-day", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/my-day/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fmy-day", "descriptionParagraphs": [ "My Day is a SharePoint Copilot App built as an SPFx 1.24 Copilot Component (not a classic web part). The same React component renders in two display modes inside the Microsoft Copilot canvas: a compact inline card and an immersive full-screen dashboard. Inline shows a time-aware greeting, the next meeting, tasks due today and the top news headline; it can request expansion via requestDisplayModeAsync('fullscreen').", "The full-screen experience is a responsive dashboard — agenda timeline, tasks completion ring, important mail with sender face avatars, a news wall, quick actions and a hero weather card. A 'Plan my day' banner opens a read-only, deterministically generated focus briefing (no chat, no real AI/WorkIQ call), and a settings drawer lets the user switch temperature units, edit location and show/hide panels.", "Settings are intentionally persisted to the browser session (sessionStorage) to demonstrate how configuration can shape the dashboard live without server-side storage; the layout re-flows dynamically to the number of visible panels. The sample ships with mocked, Microsoft Graph-shaped data behind a swappable IMyDayDataService interface, so a live Graph / SharePoint implementation is a drop-in replacement. Built with the Heft build system, React 18.3.1 and Fluent UI v9 with host-driven light/dark theming." ], "previews": [ { "src": "/images/previews/d3efe3849d250ba0b797cca82dac2bb42e911236fc7a7520cf7cdc806b5a0685.webp", "alt": "Inline My Day card in the Copilot canvas", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/my-day/assets/screenshot-fullscreen.png", "alt": "Full-screen My Day dashboard", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/my-day/assets/screenshot-settings.png", "alt": "My Day settings drawer (session-persisted)", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/my-day/assets/screenshot-dark.png", "alt": "My Day full-screen dashboard in dark mode", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/my-day/assets/screenshot-meetings.png", "alt": "My Day focused agenda opened directly by the next-meeting starter, with the current sample meeting timeline and a path back to the daily overview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/my-day/assets/screenshot-tasks.png", "alt": "My Day due-today task focus with a completion ring and local demo checkboxes retained across host display-mode changes", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/my-day/assets/screenshot-plan.png", "alt": "My Day read-only focus briefing with prioritized evidence from sample meetings, tasks and mail, without an AI service call or external action", "isFallback": false } ], "references": [ { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open-source tooling.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "Microsoft Copilot", "description": "Microsoft Copilot combines the power of large language models with your organization's data to help you be more productive.", "url": "https://www.microsoft.com/microsoft-365/copilot" }, { "title": "Use Microsoft Graph in your solution", "description": "Microsoft Graph is the gateway to data and intelligence in Microsoft 365, exposing REST APIs and client libraries to access data across Microsoft 365 services.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/my-planner-projects/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-components-my-planner-projects", "title": "My Planner Projects Agent", "description": "An SPFx 1.24 Copilot declarative agent that reads the current user's Microsoft Planner projects and prepares new projects for explicit creation.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.3", "versionGroup": "1.24", "created": "2026-09-21", "updated": "2026-11-06", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/095b12ebd350a50fce95358b601bf9c80c1b64cf972603a17be7275497189b7d.webp", "alt": "My Planner Projects Agent gallery preview showing Planner project discovery interface in Microsoft Copilot.", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/my-planner-projects", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/my-planner-projects/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fmy-planner-projects", "descriptionParagraphs": [ "My Planner Projects Agent is a Microsoft Copilot declarative agent built with SharePoint Framework 1.24 that helps users discover and manage their Microsoft Planner projects through natural language interactions.", "The agent lists accessible Planner projects in an interactive DetailsList when multiple projects match a query, shows a focused summary card when a single project matches, and highlights projects with incomplete tasks that are overdue or due within seven days. It supports filtering by creation date, task activity, and due-date periods, and can find recently active, newly created, or next-due projects with optional result limits.", "Beyond project discovery, the agent prepares new projects for explicit creation using natural-language requests. It supports creating blank Basic plans or editable templates including Simple Plan, Project Management, Software Development, Business Plan, and Employee Onboarding. The agent creates the selected plan, buckets, scheduled tasks, and optional self-assignments only after an explicit button click, reporting partial creation progress and continuing remaining setup without duplicating blueprint buckets or tasks." ], "previews": [ { "src": "/images/previews/095b12ebd350a50fce95358b601bf9c80c1b64cf972603a17be7275497189b7d.webp", "alt": "My Planner Projects Agent gallery preview showing Planner project discovery interface in Microsoft Copilot.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/my-planner-projects/assets/expand.png", "alt": "Fullscreen My Planner Projects Agent displaying detailed project view with tasks in Microsoft Copilot.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/my-planner-projects/assets/gantt.png", "alt": "My Planner Projects Agent Gantt chart view showing project timeline and task scheduling in Microsoft Copilot.", "isFallback": false } ], "references": [ { "title": "Build agents for Microsoft Copilot", "description": "Extend Microsoft Copilot with declarative agents, plugins, and connectors.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Overview of the SharePoint Framework", "description": "Learn about the SharePoint Framework client-side development model.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "Use Microsoft Graph in your solution", "description": "Use Microsoft Graph from SharePoint Framework solutions to access Microsoft 365 data.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis" }, { "title": "Microsoft Planner documentation", "description": "Learn how to use Microsoft Planner to organize team tasks and projects.", "url": "https://learn.microsoft.com/microsoft-365/planner/" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.3", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/my-sites-groups-info/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-apps-my-sites-groups-info", "title": "My Sites & Groups Info - Explore SharePoint Sites and Microsoft 365 Groups in Copilot Chat", "description": "An SPFx Copilot Component that helps users discover and manage followed and accessible SharePoint sites and Microsoft 365 Groups directly in Copilot chat.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.2", "versionGroup": "1.24", "created": "2026-08-25", "updated": "2026-08-25", "authors": [ { "name": "Harminder Singh", "account": "HarminderSethi", "avatar": "https://github.com/HarminderSethi.png" } ], "preview": { "src": "/images/previews/2f86e678b4ab92b232b8809966c1dec2a645ae87a5e5820a3b0ec99e76766b9c.webp", "alt": "My Sites and Groups overview showing SharePoint sites and Microsoft 365 Groups in Copilot.", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/my-sites-groups-info", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/my-sites-groups-info/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fmy-sites-groups-info", "descriptionParagraphs": [ "My Sites & Groups Info is a SharePoint Copilot App built as an SPFx 1.24 Copilot Component. Its declarative agent renders live SharePoint site and Microsoft 365 Group information from Microsoft Graph and SharePoint Search directly in the Copilot conversation.", "The React component supports followed sites, accessible sites, and groups the user belongs to, direct site links, follow and unfollow actions, fullscreen rendering, and permission-aware group membership management for viewing, adding, and removing members." ], "previews": [ { "src": "/images/previews/2f86e678b4ab92b232b8809966c1dec2a645ae87a5e5820a3b0ec99e76766b9c.webp", "alt": "My Sites and Groups overview showing SharePoint sites and Microsoft 365 Groups in Copilot.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/my-sites-groups-info/assets/FullScreenView.png", "alt": "Fullscreen view of followed and accessible SharePoint sites and Microsoft 365 Groups.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/my-sites-groups-info/assets/AddRemoveGroupUsers.png", "alt": "Microsoft 365 Group membership view with controls to search, add, and remove users.", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Copilot Apps", "description": "Extend Microsoft Copilot with interactive experiences built with the SharePoint Framework.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/overview-copilot-apps" }, { "title": "Microsoft Graph site resource type", "description": "Access SharePoint site information through Microsoft Graph.", "url": "https://learn.microsoft.com/graph/api/resources/site?view=graph-rest-1.0" }, { "title": "Microsoft Graph group resource type", "description": "Access Microsoft 365 Group information and membership through Microsoft Graph.", "url": "https://learn.microsoft.com/graph/api/resources/group?view=graph-rest-1.0" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/negotiation-lab/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-components-negotiation-lab", "title": "Negotiation Lab", "description": "Augment SPFx React components with Copilot conversations, structured replies and APVEE-provisioned SharePoint storage.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.3", "versionGroup": "1.24", "created": "2026-08-03", "updated": "2026-09-06", "authors": [ { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png" } ], "preview": { "src": "/images/previews/5f28cd2d7c9226f334733f65433e1b8e1b23b23b98ab45cc66daf81ffbcadbdb.webp", "alt": "Counteroffer preview showing CHF 108,000, 24 months and 16 support hours with explicit confirmation actions", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/negotiation-lab", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/negotiation-lab/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fnegotiation-lab", "descriptionParagraphs": [ "Learn how to provision SharePoint lists with APVEE from an SPFx Copilot component, send messages and structured context to Microsoft Copilot, and display generated answers and proposals inside React. Built with SPFx 1.24.0-beta.3 and React 18.", "Negotiation Lab demonstrates the integration through SaaS renewal, total job offer and service recovery scenarios. Users ask questions, edit terms and confirm outcomes, with a saved Cool, Medium or Hard counterpart style and practice state stored in two SharePoint lists." ], "previews": [ { "src": "/images/previews/5f28cd2d7c9226f334733f65433e1b8e1b23b23b98ab45cc66daf81ffbcadbdb.webp", "alt": "Counteroffer preview showing CHF 108,000, 24 months and 16 support hours with explicit confirmation actions", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/negotiation-lab/assets/ask-counterpart.png", "alt": "Copilot answers a renewal question inside the Negotiation Lab React component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/negotiation-lab/assets/agreement.png", "alt": "Recorded agreement with the same terms as the confirmed counteroffer", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/negotiation-lab/assets/choose-scenario.png", "alt": "Three negotiation scenarios and the Cool, Medium or Hard style selector", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/negotiation-lab/assets/ask-question.png", "alt": "Question entered in the component before asking the counterpart", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/negotiation-lab/assets/make-offer.png", "alt": "Separate offer-editing example with an unsent draft of CHF 90,000, 36 months and 16 support hours", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Copilot Apps", "description": "Extend Microsoft Copilot with interactive experiences built with the SharePoint Framework.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/overview-copilot-apps" }, { "title": "Build your first SharePoint Copilot App", "description": "Create, test, package, and deploy a SharePoint Copilot App.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app" }, { "title": "Tenant-scoped deployment", "description": "Deploy a SharePoint Framework solution once and make it available across the tenant.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/tenant-scoped-deployment" }, { "title": "APVEE M365 Actionable Provisioning", "description": "Provision a small SharePoint schema from a declarative action plan.", "url": "https://www.npmjs.com/package/@apvee/m365-actionable-provisioning" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.3", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/people-directory/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-sp-dev-spfx-copilot-apps-people-directory", "title": "People Directory - Find Microsoft 365 People in Copilot Chat", "description": "An SPFx Copilot Component that searches Microsoft 365 users in Copilot chat, with inline and fullscreen results, filters, and direct Teams/email actions.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.2", "versionGroup": "1.24", "created": "2026-07-13", "updated": "2026-07-13", "authors": [ { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png" } ], "preview": { "src": "/images/previews/cc6333f009327a2d8e42a908efb79260fc1b563bc2d4a55b558573eb178a93d4.webp", "alt": "Inline people search results rendered in Microsoft Copilot chat.", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/people-directory", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/people-directory/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fpeople-directory", "descriptionParagraphs": [ "People Directory is a SharePoint Framework Copilot Component that brings Microsoft 365 people search directly into the Copilot canvas. A declarative agent calls the component as a tool and it renders a live, interactive people search experience in both inline and fullscreen display modes.", "The sample reads real tenant directory data through the SPFx-brokered Microsoft Graph client using /users (beta), supports internal-only and active-only filters, shows profile photos and key identity details, and provides direct actions to start a Teams chat or send email to selected users." ], "previews": [ { "src": "/images/previews/cc6333f009327a2d8e42a908efb79260fc1b563bc2d4a55b558573eb178a93d4.webp", "alt": "Inline people search results rendered in Microsoft Copilot chat.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/people-directory/assets/2.png", "alt": "Fullscreen People Directory overview in Microsoft Copilot.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/people-directory/assets/3.png", "alt": "Person result row with profile details and Teams chat/email actions.", "isFallback": false } ], "references": [ { "title": "Getting started with SharePoint Framework", "description": "Set up your development environment and start building SharePoint Framework solutions.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment" }, { "title": "Microsoft Copilot extensibility", "description": "Build and extend experiences for Microsoft Copilot with agents and tools.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Use Microsoft Graph in your solution", "description": "Use Microsoft Graph from SharePoint Framework solutions to access Microsoft 365 data.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/personal-links/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-components-personal-links", "title": "Personal Links", "description": "One UX across Copilot and SharePoint, with cross-device App Folder storage", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot", "Teams", "SharePoint" ], "componentTypes": [ "Copilot component", "Web part" ], "technologies": [ "React" ], "version": "1.24.0", "versionGroup": "1.24", "created": "2026-10-08", "updated": "2026-10-28", "authors": [ { "name": "Vesa Juvonen", "account": "VesaJuvonen", "avatar": "https://github.com/VesaJuvonen.png" } ], "preview": { "src": "/images/previews/0ecdce5a2cea64e648b650301fa499263b82e35fd01a12b8c5611399ded06e27.webp", "alt": "Compact Personal Links experience showing six temporary demonstration links in a Fluent UI card grid.", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/personal-links", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/personal-links/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fpersonal-links", "descriptionParagraphs": [ "Personal Links demonstrates two reusable patterns together: render one shared Fluent UI experience in Copilot and SharePoint, and store each user's component state in the least-privilege OneDrive App Folder so the same personal link collection follows them across hosts and devices." ], "previews": [ { "src": "/images/previews/0ecdce5a2cea64e648b650301fa499263b82e35fd01a12b8c5611399ded06e27.webp", "alt": "Compact Personal Links experience showing six temporary demonstration links in a Fluent UI card grid.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/personal-links/assets/personal-links-full.png", "alt": "Full Personal Links experience showing the shared link collection, search, ordering actions, and always-available link editor.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/personal-links/assets/personal-links-editor.png", "alt": "Add a personal link dialog with title, web address, description, and a curated Fluent icon picker.", "isFallback": false } ], "references": [ { "title": "Using app folder in OneDrive and SharePoint", "description": "Microsoft Graph guidance for least-privilege application storage.", "url": "https://learn.microsoft.com/graph/onedrive-sharepoint-appfolder" }, { "title": "Build Microsoft 365 Copilot extensibility", "description": "Microsoft 365 Copilot extensibility documentation.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "SharePoint Framework overview", "description": "SharePoint Framework architecture and development guidance.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" } ], "products": [ "SharePoint", "Microsoft Copilot", "Microsoft Teams" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/photos/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-apps-photos", "title": "SharePoint Photos Copilot Agent", "description": "Find SharePoint and OneDrive photos from Microsoft Copilot and explore them in an interactive gallery.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.2", "versionGroup": "1.24", "created": "2026-08-24", "updated": "2026-08-24", "authors": [ { "name": "João Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png" } ], "preview": { "src": "/images/previews/e40dc528bf40a427f348a19de36696439fd59db621a5dbedd5ad2dc144a05806.webp", "alt": "Inline SharePoint Photos Agent gallery displaying recent event photos in Microsoft Copilot.", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/photos", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/photos/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fphotos", "descriptionParagraphs": [ "SharePoint Photos Copilot Agent brings natural-language photo discovery to Microsoft Copilot. It searches SharePoint document libraries and, when requested, personal OneDrive by using Microsoft Graph Search, then presents matching images in an interactive gallery.", "The gallery supports responsive layouts, fullscreen browsing, pagination, zoom, thumbnails, slideshow controls, date filtering, and relevance, modified-date, or name sorting. Search scopes can target a SharePoint site, document library, folder, or explicitly requested OneDrive content." ], "previews": [ { "src": "/images/previews/e40dc528bf40a427f348a19de36696439fd59db621a5dbedd5ad2dc144a05806.webp", "alt": "Inline SharePoint Photos Agent gallery displaying recent event photos in Microsoft Copilot.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/photos/assets/screenshot-agent-home.png", "alt": "SharePoint Photos Agent welcome screen showing suggested photo search prompts.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/photos/assets/screenshot-fullscreen-gallery.png", "alt": "Fullscreen masonry gallery displaying SharePoint event photos in Microsoft Copilot.", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/photos/assets/screenshot-photo-lightbox.png", "alt": "Photo lightbox with image navigation, zoom, slideshow, fullscreen, and thumbnail controls.", "isFallback": false } ], "references": [ { "title": "Build agents for Microsoft Copilot", "description": "Extend Microsoft Copilot with declarative agents, plugins, and connectors.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Overview of the SharePoint Framework", "description": "Learn about the SharePoint Framework client-side development model.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "Use Microsoft Graph in your solution", "description": "Use Microsoft Graph from SharePoint Framework solutions to access Microsoft 365 data.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/portfolio-carryover-review/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-apps-portfolio-carryover-review", "title": "Portfolio Carryover Review", "description": "Review initiatives carried over between fiscal years, including their status, ownership, and carryover rationale.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0", "versionGroup": "1.24", "created": "2026-10-31", "updated": "2026-10-31", "authors": [ { "name": "Antonio Villarruel", "account": "a-villarruel", "avatar": "https://github.com/a-villarruel.png" } ], "preview": { "src": "/images/previews/8f9765947e705ead2c441a7451a8256fd9973ac3cc63e8d93c2253864c5d8cb0.webp", "alt": "Portfolio Carryover Review component preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/portfolio-carryover-review", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/portfolio-carryover-review/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fportfolio-carryover-review", "descriptionParagraphs": [ "Portfolio Carryover Review helps IT portfolio managers review initiatives carried over from previous fiscal years. It provides a consolidated view of initiative status, ownership, reasons for carryover, and planned review dates. The sample uses mock data to demonstrate how portfolio carryover information can be explored directly in Microsoft Copilot." ], "previews": [ { "src": "/images/previews/8f9765947e705ead2c441a7451a8256fd9973ac3cc63e8d93c2253864c5d8cb0.webp", "alt": "Portfolio Carryover Review component preview", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Copilot Apps", "description": "Build and deploy interactive SharePoint Copilot Apps with SPFx Copilot components and declarative agents.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/overview-copilot-apps" }, { "title": "Build your first SharePoint Copilot App", "description": "Step-by-step guide to scaffold, build, and deploy SPFx Copilot components.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/release-readiness-board/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-apps-release-readiness-board", "title": "Release readiness board", "description": "Track blockers, overdue checks, and go-live confidence directly in Copilot.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.2", "versionGroup": "1.24", "created": "2026-08-02", "updated": "2026-08-02", "authors": [ { "name": "Valeras Narbutas", "account": "ValerasNarbutas", "avatar": "https://github.com/ValerasNarbutas.png" } ], "preview": { "src": "/images/previews/8291a7c7ff6059971fbc55a691cfbfd8f4575c948a3ae09edbc398097b7463b3.webp", "alt": "Inline release readiness summary card", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/release-readiness-board", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/release-readiness-board/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Frelease-readiness-board", "descriptionParagraphs": [ "Release readiness board gives delivery teams a compact inline release-health snapshot and a full-screen execution board in Microsoft Copilot. Teams can filter by release and owner, focus on blockers, update checklist status, and post a readiness summary back to chat. The sample ships mock-first and includes a real-data adapter mode via an external HTTPS API." ], "previews": [ { "src": "/images/previews/8291a7c7ff6059971fbc55a691cfbfd8f4575c948a3ae09edbc398097b7463b3.webp", "alt": "Inline release readiness summary card", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/release-readiness-board/assets/screenshot-fullscreen.png", "alt": "Full-screen release readiness checklist board", "isFallback": false } ], "references": [ { "title": "Overview of SharePoint Copilot Apps", "description": "Build and deploy interactive SharePoint Copilot Apps with SPFx Copilot components and declarative agents.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/overview-copilot-apps" }, { "title": "Build your first SharePoint Copilot App", "description": "Step-by-step guide to scaffold, build, and deploy SPFx Copilot components.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/sharepoint-governance-copilot/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-components-sharepoint-governance-copilot", "title": "Governance Risk Advisor — Executive Tenant Governance Dashboard", "description": "A SharePoint Copilot App (SPFx 1.24 Copilot Component) that turns tenant governance findings into an executive briefing: a governance score with trend, an AI-generated executive summary, prioritized remediation actions, explainable findings, and a tenant-wide insights panel.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.5", "versionGroup": "1.24", "created": "2026-10-03", "updated": "2026-10-03", "authors": [ { "name": "Maycon de Novaes Batista", "account": "mnbatista", "avatar": "https://github.com/mnbatista.png" } ], "preview": { "src": "/images/previews/8d15d5107cd5f6bcfcbf1fe142ae78a2674d2763ebac1b379bc717c98a5bbcc7.webp", "alt": "Governance Risk Advisor executive dashboard — score, executive summary, priority actions, and findings", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/sharepoint-governance-copilot", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/sharepoint-governance-copilot/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fsharepoint-governance-copilot", "descriptionParagraphs": [ "Governance Risk Advisor is a SharePoint Copilot App built as an SPFx 1.24 Copilot Component (not a classic web part). Instead of a flat list of governance risks, it opens with a 0-100 governance score and a trend indicator (Improving, Stable, Declining), an AI-style executive summary of the tenant's posture, and the top 3-5 prioritized remediation actions ranked by severity-weighted impact.", "Findings are shown severity-first: high and medium findings are always visible, while low-priority findings are collapsed behind a 'Show low-priority findings' toggle. Every finding explains the Risk, Impact, Why this matters, and Recommended action in business language, with a primary remediation call-to-action (for example Assign Owner, Review Permissions, Review Guest Access, Start Access Review) that sends a follow-up message back into the Copilot conversation, plus a secondary Open site link.", "A tenant-wide insights panel (sites without owners, sites inactive 180+ days, sites with anonymous sharing, sites with excessive guest access, expiring reviews) and an estimated risk reduction projection round out the executive story. The sample ships with mocked data behind a swappable IGovernanceService interface, so a live Microsoft Graph / SharePoint Admin API implementation can be dropped in without touching the UI. Built with the Heft build system, React and Fluent UI v9 with host-driven light/dark theming." ], "previews": [ { "src": "/images/previews/8d15d5107cd5f6bcfcbf1fe142ae78a2674d2763ebac1b379bc717c98a5bbcc7.webp", "alt": "Governance Risk Advisor executive dashboard — score, executive summary, priority actions, and findings", "isFallback": false } ], "references": [ { "title": "Build agents for Microsoft Copilot", "description": "Extend Microsoft Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.5", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/site-snapshot/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-components-site-snapshot", "title": "Site Snapshot - SharePoint Site Health Copilot App", "description": "On-demand health snapshot of a SharePoint site inside Microsoft 365 Copilot: a transparent health score, stale documents, external sharing, duplicates, large and empty files, and a file-type breakdown.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.3", "versionGroup": "1.24", "created": "2026-10-02", "updated": "2026-10-02", "authors": [ { "name": "Tanel Vahk", "account": "tvahk", "avatar": "https://github.com/tvahk.png" } ], "preview": { "src": "/images/previews/e45f63419a2c23cba2a15b9cf61c04b4e7739e6dfd57d0727598adbae548e037.webp", "alt": "Inline Site Snapshot score card in Microsoft 365 Copilot showing the health score and headline numbers", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/site-snapshot", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/site-snapshot/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fsite-snapshot", "descriptionParagraphs": [ "Site Snapshot is a Copilot UX Component that scans every user document library on a SharePoint site through the brokered Microsoft Graph client and returns a 0-100 health score built from five explained sub-scores: storage, freshness, sharing exposure, activity and tidiness.", "Inline, it renders a compact score card in the chat. In fullscreen it opens a dashboard with tabs for file types, owners, duplicates, stale files, external and Anyone sharing, empty files and the largest files. The agent can open straight to the view the user asked about.", "Users can export the results to CSV or email themselves a summary, and ask the agent follow-up questions answered from the snapshot results. The component is read-only." ], "previews": [ { "src": "/images/previews/e45f63419a2c23cba2a15b9cf61c04b4e7739e6dfd57d0727598adbae548e037.webp", "alt": "Inline Site Snapshot score card in Microsoft 365 Copilot showing the health score and headline numbers", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/site-snapshot/assets/site-snapshot-fullscreen.png", "alt": "Fullscreen Site Snapshot dashboard with sub-score bars, export and email actions, and detail tabs", "isFallback": false } ], "references": [ { "title": "Build agents for Microsoft Copilot", "description": "Extend Microsoft Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "Use Microsoft Graph in SPFx", "description": "Connect to Microsoft Graph from SharePoint Framework solutions using MSGraphClientV3.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/use-msgraph" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.3", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/sp-permissions-explorer/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-sp-dev-spfx-copilot-apps-sp-permissions-explorer", "title": "SP Permissions Explorer - SharePoint Access Review Copilot App", "description": "An SPFx Copilot Component that lets users review SharePoint access, inspect principals and permission levels, and perform guarded write operations from Microsoft Copilot.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.2", "versionGroup": "1.24", "created": "2026-07-15", "updated": "2026-07-15", "authors": [ { "name": "Aimery Thomas", "account": "a1mery", "avatar": "https://github.com/a1mery.png" } ], "preview": { "src": "/images/previews/42f9e0599ab7f9cbee451559a9bbbd8849072a46e8d4578f7e19ee4a9de61c07.webp", "alt": "Inline permissions review overview in Microsoft Copilot", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/sp-permissions-explorer", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/sp-permissions-explorer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fsp-permissions-explorer", "descriptionParagraphs": [ "SP Permissions Explorer is a SharePoint Copilot App built as an SPFx 1.24 Copilot Component. It lets the signed-in user ask Microsoft Copilot who has access to a site and get back an interactive permissions experience with users, groups, external or guest users, and permission levels.", "The same React component renders in inline and full-screen display modes inside the Copilot canvas. It queries SharePoint using the user's delegated identity, supports filtering and principal lookup, and exposes write operations such as grant or remove access and change permission levels, with every write confirmed in the UI before it runs." ], "previews": [ { "src": "/images/previews/42f9e0599ab7f9cbee451559a9bbbd8849072a46e8d4578f7e19ee4a9de61c07.webp", "alt": "Inline permissions review overview in Microsoft Copilot", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/sp-permissions-explorer/assets/SharePointAccessReview_Grant.png", "alt": "Guarded grant access dialog in the permissions explorer", "isFallback": false } ], "references": [ { "title": "Getting started with SharePoint Framework", "description": "Set up your development environment and start building SharePoint Framework solutions.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment" }, { "title": "Introducing SharePoint Copilot Apps", "description": "Learn how SharePoint Copilot Apps can extend Microsoft Copilot with interactive experiences.", "url": "https://devblogs.microsoft.com/microsoft365dev/going-beyond-text-in-microsoft-365-copilot-introducing-sharepoint-copilot-apps/" }, { "title": "Overview of SharePoint Copilot Apps", "description": "Overview of the Copilot app model for SharePoint Framework solutions.", "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/copilot/overview-copilot-apps" }, { "title": "SharePoint REST API", "description": "Use the SharePoint REST API to read and manage SharePoint data.", "url": "https://learn.microsoft.com/sharepoint/dev/sp-add-ins/get-to-know-the-sharepoint-rest-service" }, { "title": "Heft Documentation", "description": "Build and package the solution using the Heft build system.", "url": "https://heft.rushstack.io/" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/time-off-absence/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-sp-dev-spfx-copilot-apps-time-off-absence", "title": "My Time Off — Time-Off & Absence Copilot App", "description": "A SharePoint Copilot App (SPFx 1.24 Copilot Components) that brings the employee time-off (PTO) experience inside the Microsoft Copilot canvas — a personal overview, a request form with an Outlook conflict pre-check, and a team view with manager approvals and a full-screen absence calendar, all powered by delegated, client-side SharePoint REST and Microsoft Graph calls.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0", "versionGroup": "1.24", "created": "2026-07-06", "updated": "2026-10-28", "authors": [ { "name": "Bert Jansen", "account": "jansenbe", "avatar": "https://github.com/jansenbe.png" } ], "preview": { "src": "/images/previews/94e9bc2740409a378c47ccfcef2417e49177500c6759f570883c566637cbb816.webp", "alt": "My Time Off scenario — inline balance card and full-screen team absence calendar", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/time-off-absence", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/time-off-absence/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Ftime-off-absence", "descriptionParagraphs": [ "My Time Off is a SharePoint Copilot App built as an SPFx 1.24 Copilot Components sample (not a classic web part). It ships three components that render directly in the Microsoft Copilot chat: timeOffOverview (GetMyTimeOff) shows the signed-in user's balances, upcoming leave and request history; timeOffRequest (RequestTimeOff) is a booking form that checks the user's Outlook calendar for conflicts before writing a new request; and timeOffTeam (GetTeamTimeOff) surfaces who's out, a manager approvals inbox and a full-screen team absence calendar.", "The headline capability the sample highlights is authenticated, delegated client-side API calls — something the MCP app specification itself does not provide. Every component reads and writes with the signed-in user's own identity, calling SharePoint REST (three lists: TimeOffRequests, LeaveBalances, CompanyHolidays) and Microsoft Graph (calendar conflict pre-check, manager and team roster resolution, and 48x48 profile photos) directly from the browser — no MCP server, no middle tier, no app-only secrets. New requests are routed to the submitter's line manager resolved via Graph (/me/manager) with a self-approval fallback that keeps single-user demo tenants working.", "The data services call SharePoint and Graph live but never throw: on any failure they fall back to an in-memory data set so the components always render, and the team calendar self-heals to a demo roster when User.Read.All is not consented. A PnP PowerShell provisioning script creates and seeds the lists, and a TimeOffSite tenant property lets an admin repoint the components at a different lists site without rebuilding. Built with the Heft build system, React 18.3.1 and Fluent UI v9 with host-driven theming inside Copilot's sandboxed iframe." ], "previews": [ { "src": "/images/previews/94e9bc2740409a378c47ccfcef2417e49177500c6759f570883c566637cbb816.webp", "alt": "My Time Off scenario — inline balance card and full-screen team absence calendar", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/time-off-absence/assets/my%20time%20off%20-%20light.png", "alt": "My Time Off personal overview (light theme)", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/time-off-absence/assets/request%20time%20off%20-%20light.png", "alt": "Request Time Off form with Outlook conflict pre-check (light theme)", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/time-off-absence/assets/manager%20view%20-%20light.png", "alt": "Team view with manager approvals and absence calendar (light theme)", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/time-off-absence/assets/my%20time%20off%20-%20dark.png", "alt": "My Time Off personal overview (dark theme)", "isFallback": false } ], "references": [ { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open-source tooling.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "Microsoft Copilot", "description": "Microsoft Copilot combines the power of large language models with your organization's data to help you be more productive.", "url": "https://www.microsoft.com/microsoft-365/copilot" }, { "title": "Use Microsoft Graph in your solution", "description": "Microsoft Graph is the gateway to data and intelligence in Microsoft 365, exposing REST APIs and client libraries to access data across Microsoft 365 services.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis" }, { "title": "PnP PowerShell", "description": "PnP PowerShell is a cross-platform PowerShell module providing cmdlets to manage and provision SharePoint Online artifacts such as the lists this sample uses.", "url": "https://pnp.github.io/powershell/" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/tutorial-access-data/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-components-tutorial-access-data", "title": "Access data with the SharePoint REST API and Microsoft Graph", "description": "Two Copilot UX components that show the lists on a site with the SharePoint REST API, and the user's profile, mail, and calendar with Microsoft Graph.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.5", "versionGroup": "1.24", "created": "2026-10-04", "updated": "2026-10-04", "authors": [ { "name": "Andrew Connell", "account": "andrewconnell", "avatar": "https://github.com/andrewconnell.png" } ], "preview": { "src": "/images/previews/05711d549f00c4a8c3f39ad5e2e2b70cff38ea4bc93c99f4cfbb37d3202db383.webp", "alt": "The SharePointLists component in Microsoft 365 Copilot showing the lists on a SharePoint site with the number of items in each list", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/tutorial-access-data", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/tutorial-access-data/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Ftutorial-access-data", "descriptionParagraphs": [ "The finished solution for the article Access data from a Copilot UX component. One declarative agent has two Copilot UX components. SharePointLists uses spHttpClient to show the lists and libraries on a SharePoint site and the items in a selected list. MyProfile uses msGraphClientFactory to show the signed-in user's profile, recent email, and calendar events for the next 7 days.", "Both components load data in the view so they render right away with a loading state, show a message when a Microsoft Graph permission isn't approved, and follow the Copilot light and dark themes. All code runs in the browser; the solution package is the only thing to deploy." ], "previews": [ { "src": "/images/previews/05711d549f00c4a8c3f39ad5e2e2b70cff38ea4bc93c99f4cfbb37d3202db383.webp", "alt": "The SharePointLists component in Microsoft 365 Copilot showing the lists on a SharePoint site with the number of items in each list", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/tutorial-access-data/assets/copilot-my-profile-calendar.png", "alt": "The MyProfile component in Microsoft 365 Copilot showing the user's profile and upcoming calendar events", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/tutorial-access-data/assets/no-permission.png", "alt": "The MyProfile component showing a message that the Mail.Read permission isn't approved", "isFallback": false } ], "references": [ { "title": "Access data from a Copilot UX component", "description": "Call the SharePoint REST API and Microsoft Graph from a Copilot UX component.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/access-data" }, { "title": "Build your first SharePoint Copilot App", "description": "Create a SharePoint Copilot App with SPFx, test it in the Copilot Workbench, and use it in Microsoft 365 Copilot.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app" }, { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.5", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/tutorial-connect-to-sharepoint-data/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-components-tutorial-connect-to-sharepoint-data", "title": "Lists and items on a site", "description": "The tutorial project that shows the lists on a SharePoint site, and the items in the list the user selects, from a site URL the agent passes to the tool.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "JavaScript" ], "version": "1.24.0-beta.5", "versionGroup": "1.24", "created": "2026-10-04", "updated": "2026-10-04", "authors": [ { "name": "Andrew Connell", "account": "andrewconnell", "avatar": "https://github.com/andrewconnell.png" } ], "preview": { "src": "/images/previews/b350a976b4aec07fd79c88b267a00454968b47f24a1741136eba811bbdd58743.webp", "alt": "Microsoft 365 Copilot showing the lists on a SharePoint site in the MyCopilotApp component after the user asked for the lists on the site", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/tutorial-connect-to-sharepoint-data", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/tutorial-connect-to-sharepoint-data/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Ftutorial-connect-to-sharepoint-data", "descriptionParagraphs": [ "The finished project for the tutorial Connect your Copilot UX component to SharePoint data. It's the my-copilot-app project from Build your first SharePoint Copilot App with the tutorial changes applied.", "The agent passes a site URL to the MyCopilotAppTool tool in the siteUrl parameter. The MyCopilotApp component uses spHttpClient to show the lists on that site and the first 25 items of the list the user selects. It handles a missing URL, a URL that isn't a site, a site the user can't access, and a site that doesn't exist. The component uses no framework, and all code runs in the browser." ], "previews": [ { "src": "/images/previews/b350a976b4aec07fd79c88b267a00454968b47f24a1741136eba811bbdd58743.webp", "alt": "Microsoft 365 Copilot showing the lists on a SharePoint site in the MyCopilotApp component after the user asked for the lists on the site", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/tutorial-connect-to-sharepoint-data/assets/copilot-items.png", "alt": "The MyCopilotApp component showing the items in the Apollo Missions list with a Back to lists button", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/tutorial-connect-to-sharepoint-data/assets/workbench.png", "alt": "The MyCopilotApp component showing the lists on a site in the Copilot Workbench", "isFallback": false } ], "references": [ { "title": "Connect your Copilot UX component to SharePoint data", "description": "Tutorial: pass a site URL to the tool and show the lists and items on the site with the SharePoint REST API.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/connect-to-sharepoint-data" }, { "title": "Build your first SharePoint Copilot App", "description": "Create a SharePoint Copilot App with SPFx, test it in the Copilot Workbench, and use it in Microsoft 365 Copilot.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app" }, { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.5", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/tutorial-theme-and-design/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-components-tutorial-theme-and-design", "title": "Theme and design for the Copilot canvas", "description": "A Copilot UX component with sample project cards that follows the Copilot light and dark themes and adapts to the inline and fullscreen display modes.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.5", "versionGroup": "1.24", "created": "2026-10-11", "updated": "2026-10-11", "authors": [ { "name": "Andrew Connell", "account": "andrewconnell", "avatar": "https://github.com/andrewconnell.png" } ], "preview": { "src": "/images/previews/ee02045a1695a91d926d413dd075ef2276e4e0cc86dc878418e7cbeb1f927dbc.webp", "alt": "The DesignShowcase component in Microsoft 365 Copilot in the fullscreen display mode and light theme, with a selected project card and its details", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/tutorial-theme-and-design", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/tutorial-theme-and-design/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Ftutorial-theme-and-design", "descriptionParagraphs": [ "The finished solution for the article Theme and design for the Copilot canvas. The DesignShowcase component shows sample project cards built with Fluent UI. It follows the Copilot light and dark themes, adapts its layout to the inline and fullscreen display modes and to the width of the canvas, and keeps the selected card when the display mode changes.", "The component uses bundled sample data. It makes no network calls and requests no API permissions; the solution package is the only thing to deploy." ], "previews": [ { "src": "/images/previews/ee02045a1695a91d926d413dd075ef2276e4e0cc86dc878418e7cbeb1f927dbc.webp", "alt": "The DesignShowcase component in Microsoft 365 Copilot in the fullscreen display mode and light theme, with a selected project card and its details", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/tutorial-theme-and-design/assets/theme-and-design-inline-light.png", "alt": "The DesignShowcase component in the inline display mode and light theme, showing four project cards and a button to view all eight projects", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/tutorial-theme-and-design/assets/theme-and-design-inline-dark.png", "alt": "The DesignShowcase component in the inline display mode and dark theme", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/tutorial-theme-and-design/assets/theme-and-design-fullscreen-dark.png", "alt": "The DesignShowcase component in the fullscreen display mode and dark theme, showing all eight project cards and an empty details pane", "isFallback": false } ], "references": [ { "title": "Theme and design for the Copilot canvas", "description": "Follow the Copilot theme and adapt a Copilot UX component to the inline and fullscreen display modes.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/theme-and-design" }, { "title": "Display modes in SharePoint Copilot components", "description": "How the inline and fullscreen display modes work in SharePoint Copilot components.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/displayMode" }, { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.5", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/viva-engage-explorer/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-components-viva-engage-explorer", "title": "Viva Engage Community Explorer", "description": "Discover, search and explore live Viva Engage communities inside Microsoft 365 Copilot.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-rc.0", "versionGroup": "1.24", "created": "2026-10-16", "updated": "2026-10-19", "authors": [ { "name": "Nanddeep Nachan", "account": "nanddeepn", "avatar": "https://github.com/nanddeepn.png" }, { "name": "Smita Nachan", "account": "smitanachan", "avatar": "https://github.com/smitanachan.png" } ], "preview": { "src": "/images/previews/725a501466eba04fefcb5de4e7741478266715be02f02b05457dca1bd099b4ad.webp", "alt": "Architecture illustration: Copilot to SPFx to live Microsoft Graph. Not an application screenshot.", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/viva-engage-explorer", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/viva-engage-explorer/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fviva-engage-explorer", "descriptionParagraphs": [ "A read-only SPFx Copilot UX Component using delegated Microsoft Graph Community.Read.All access.", "Includes inline and fullscreen experiences, name and description search, privacy filtering, alphabetical sorting, retrieved community counts and on-demand details.", "Uses live Graph data only, with pagination, session caching, explicit refresh and actionable authentication and API error states." ], "previews": [ { "src": "/images/previews/725a501466eba04fefcb5de4e7741478266715be02f02b05457dca1bd099b4ad.webp", "alt": "Architecture illustration: Copilot to SPFx to live Microsoft Graph. Not an application screenshot.", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint Copilot App", "description": "SPFx Copilot UX Component architecture, build and deployment.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app" }, { "title": "List communities", "description": "Microsoft Graph v1.0 Viva Engage community collection and supported query parameters.", "url": "https://learn.microsoft.com/graph/api/employeeexperience-list-communities?view=graph-rest-1.0" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-rc.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/weekly-pulse-quiz/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-components-weekly-pulse-quiz", "title": "Weekly Pulse Quiz", "description": "One multiple-choice question a week on a SharePoint page and inline in Microsoft 365 Copilot chat, with private answers stored in a SharePoint list that uses item-level security.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot", "SharePoint" ], "componentTypes": [ "Copilot component", "Web part" ], "technologies": [ "React" ], "version": "1.24.0", "versionGroup": "1.24", "created": "2026-10-29", "updated": "2026-10-29", "authors": [ { "name": "Anand Vijayaragavan", "account": "anandragav", "avatar": "https://github.com/anandragav.png" } ], "preview": { "src": "/images/previews/17b961c0da54cd41fa324271c03cf2f87e401af7c646e4c1b447a16eee4687ca.webp", "alt": "Weekly Pulse Quiz web part on a SharePoint page after a correct answer, with a check mark and a Why B is right? link", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/weekly-pulse-quiz", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/weekly-pulse-quiz/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fweekly-pulse-quiz", "descriptionParagraphs": [ "Weekly Pulse Quiz shows one multiple-choice question per ISO week from a SharePoint list, both as a web part (BaseClientSideWebPart) and as a Copilot UX component (BaseCopilotComponent) called by a declarative agent through the show_weekly_quiz tool with static tool discovery.", "Answers are saved as the signed-in user to a Responses list with item-level security and unique permissions, so colleagues can't see each other's answers. Feedback is calm and accessible: a check mark or the correct answer, an optional justification (dialog on the page, inline Why? panel in Copilot) and reduced-motion support.", "A Set up lists button (site owners, edit mode) and equivalent PnP PowerShell and CLI for Microsoft 365 scripts create the lists idempotently. No API permissions are requested; model-supplied site URLs must be https on the same tenant, list titles pass an allowlist, and nothing is sent back to the model. Colours follow the SharePoint site theme with optional hex overrides and automatic WCAG AA text contrast." ], "previews": [ { "src": "/images/previews/17b961c0da54cd41fa324271c03cf2f87e401af7c646e4c1b447a16eee4687ca.webp", "alt": "Weekly Pulse Quiz web part on a SharePoint page after a correct answer, with a check mark and a Why B is right? link", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/weekly-pulse-quiz/assets/weekly-pulse-quiz-justification.png", "alt": "The Why B is right dialog on a SharePoint page, explaining the correct answer", "isFallback": false } ], "references": [ { "title": "Build agents for Microsoft Copilot", "description": "Extend Microsoft Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "SharePoint Framework v1.24 release notes", "description": "Release notes for SPFx 1.24 including Copilot UX components (BaseCopilotComponent) and Heft toolchain updates.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/release-1.24.0" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [ "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/work-iq-answers/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-spfx-copilot-apps-work-iq-answers", "title": "Work IQ Answers", "description": "Turns a Work IQ answer into structured UI: entity chips inline and every citation grouped into a clickable source panel.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0-beta.2", "versionGroup": "1.24", "created": "2026-08-21", "updated": "2026-08-21", "authors": [ { "name": "Ramin Ahmadi", "account": "AhmadiRamin", "avatar": "https://github.com/AhmadiRamin.png" } ], "preview": { "src": "/images/previews/be5613eb1f4aa20cdd37ba58e786325c5d23b87b6e267db37ab3a5380ed6ff58.webp", "alt": "Work IQ Answers rendering a cited answer with entity chips and a grouped source panel", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/work-iq-answers", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/work-iq-answers/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fwork-iq-answers", "descriptionParagraphs": [ "Work IQ Answers sends the user's natural-language question to the Work IQ Chat API and renders the response as structured UI instead of plain text. The people, meetings, and files that Work IQ tags inline in its answer become clickable chips, and every citation it returns is grouped into a source panel that deep-links into Teams, SharePoint, or a person's profile. Follow-up questions reuse the same conversation, so multi-turn works as the API intends.", "The sample is the only one in this repository that calls Work IQ rather than Microsoft Graph, and it demonstrates the SPFx AadHttpClient pattern for a non-Graph Entra-secured API: a single webApiPermissionRequests entry for the delegated WorkIQAgent.Ask permission, approved once by a tenant admin, with no middle tier and no client secret.", "It ships with useMock enabled, so the full experience (inline card, fullscreen view, grouped sources, entity chips, sensitivity badge) runs with zero live dependencies. The mock responses are the exact wire shape of the real API and flow through the same parsing code, so switching to the live endpoint changes no UI code." ], "previews": [ { "src": "/images/previews/be5613eb1f4aa20cdd37ba58e786325c5d23b87b6e267db37ab3a5380ed6ff58.webp", "alt": "Work IQ Answers rendering a cited answer with entity chips and a grouped source panel", "isFallback": false } ], "references": [ { "title": "Work IQ REST API overview", "description": "Multi-turn conversations with Microsoft Copilot over HTTP, with enterprise and web search grounding.", "url": "https://learn.microsoft.com/microsoft-365/copilot/extensibility/work-iq/rest/overview" }, { "title": "Work IQ - copilotConversation: chat", "description": "The chat endpoint used by this sample, including the attributions and sensitivityLabel response shapes.", "url": "https://learn.microsoft.com/microsoft-365/copilot/extensibility/work-iq/rest/copilotconversation-chat" }, { "title": "Connect to Entra ID-secured APIs in SharePoint Framework solutions", "description": "How webApiPermissionRequests and AadHttpClient let an SPFx solution call a non-Graph Entra-secured API without a middle tier.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/use-aadhttpclient" }, { "title": "Build agents for Microsoft Copilot", "description": "Extend Microsoft Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.", "url": "https://learn.microsoft.com/microsoft-365-copilot/extensibility/" }, { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" } ], "products": [ "SharePoint", "Microsoft Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0-beta.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/zava-customer-resolution-center/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-sp-dev-spfx-copilot-components-zava-customer-resolution-center", "title": "Zava Customer Resolution Center", "description": "An evidence-led customer resolution Copilot App with 23 tools and four connected workspaces.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0", "versionGroup": "1.24", "created": "2026-08-31", "updated": "2026-10-28", "authors": [ { "name": "Vesa Juvonen", "account": "vesajuvonen", "avatar": "https://github.com/vesajuvonen.png" } ], "preview": { "src": "/images/previews/33678935b127f8cf7e94639b956be0ab567df7af34b4d7e95ff558096c881e8a.webp", "alt": "Resolution Room connecting verified and contrary evidence to a safe resolution path, SLA clock, incident signal, and expert swarm", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-customer-resolution-center", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-customer-resolution-center/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fzava-customer-resolution-center", "descriptionParagraphs": [ "Zava Customer Resolution Center turns fragmented customer exceptions into inspectable resolution work across triage, diagnostics, planning, incidents, recovery, communication, verification, and learning.", "Twenty-two operational components and one capability explorer continue into My Queue, Customer 360, Resolution Room, and Service Operations through one coherent reference story.", "The sample is deterministic, offline, responsive, and explicit that confirmed actions are session-only. Verified facts, calculations, inferences, recommendations, human decisions, and actions remain distinct." ], "previews": [ { "src": "/images/previews/33678935b127f8cf7e94639b956be0ab567df7af34b4d7e95ff558096c881e8a.webp", "alt": "Resolution Room connecting verified and contrary evidence to a safe resolution path, SLA clock, incident signal, and expert swarm", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-customer-resolution-center/assets/fullscreen-service-operations.png", "alt": "Service Operations command view with demand river, projected global customer map, driver Pareto, and recovery outcome matrix", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-customer-resolution-center/assets/fullscreen-customer-360.png", "alt": "Customer 360 relationship view with promise constellation, commitment runway, timeline, and recovery consequences", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-customer-resolution-center/assets/fullscreen-my-queue.png", "alt": "My Queue judgment cockpit with ranked customer cases, SLA consequence clock, and agent-prepared work", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-customer-resolution-center/assets/inline-triage-customer-issue.png", "alt": "Inline customer issue triage with resolved customer, product, impact, language, and reviewed case rationale", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-customer-resolution-center/assets/inline-diagnose-case-evidence.png", "alt": "Inline diagnostic evidence ledger comparing firmware, network, and entitlement hypotheses", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-customer-resolution-center/assets/inline-service-recovery.png", "alt": "Inline recovery decision comparing cost, authority, precedent, and expected trust outcome", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-customer-resolution-center/assets/inline-service-performance.png", "alt": "Inline service performance analysis with demand river and recurring driver Pareto", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-customer-resolution-center/assets/inline-capability-explorer.png", "alt": "Searchable customer resolution scenario explorer with safe prompt preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-customer-resolution-center/assets/fullscreen-service-operations-dark.png", "alt": "Dark Service Operations view with projected global map and exact-value analytical tables", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint Copilot App", "description": "Build and package an SPFx Copilot Component.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app" }, { "title": "D3", "description": "Data-driven scales, shapes, and geographic projections used by the offline visualizations.", "url": "https://d3js.org/" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/zava-employee-agent/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-sp-dev-spfx-copilot-apps-zava-employee-agent", "title": "Zava Employee Agent", "description": "An employee-first Copilot App with 20 operational HR components, a dedicated feature explorer, and one shared ten-family workspace.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0", "versionGroup": "1.24", "created": "2026-08-21", "updated": "2026-11-09", "authors": [ { "name": "Vesa Juvonen", "account": "vesajuvonen", "avatar": "https://github.com/vesajuvonen.png" } ], "preview": { "src": "/images/previews/c7254cd3cd04c24cc8c1fca6dfc5527d4c5eeeb52df644594f41bc9f18332a51.webp", "alt": "Zava full-screen My HR Dashboard", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fzava-employee-agent", "descriptionParagraphs": [ "Zava Employee Agent demonstrates intent-driven employee experiences inside Microsoft Copilot. Twenty operational SPFx Copilot Components and a dedicated feature explorer independently route natural-language HR requests to purpose-built summaries, comparisons, timelines, forms, decision queues, and organization experiences.", "Every operational component expands into one responsive ten-family HR workspace covering Home, Policy, Time, Money, Benefits, Support, Learning, Rewards, Team, and People. The shared shell preserves the owning family and prompt-derived context while providing fifty complete internal routes for deeper work. The independent feature explorer retains its catalog in both host modes.", "The sample is deterministic, offline, and safe for demonstrations. Prompt values may prefill or filter UX but never submit a request, open a case, or decide an approval without explicit review and confirmation. One optimized production bundle emits shared React, Fluent UI, services, icons, and bundled persona media once, with automated generated-plugin and final-package audits.", "The time-off workflow turns a vacation prompt into an editable request: choose leave type, compare start and end dates side by side, inspect working days and team coverage, then explicitly review and confirm. The shared form also appears in the full-screen Leave workspace and stacks on narrow screens." ], "previews": [ { "src": "/images/previews/c7254cd3cd04c24cc8c1fca6dfc5527d4c5eeeb52df644594f41bc9f18332a51.webp", "alt": "Zava full-screen My HR Dashboard", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/fullscreen-policy.png", "alt": "Zava full-screen Policy Q and A workspace", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/fullscreen-time.png", "alt": "Zava full-screen time and leave workspace with paired start and end date pickers", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/fullscreen-money.png", "alt": "Zava full-screen payroll explanation workspace", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/fullscreen-benefits.png", "alt": "Zava full-screen benefits and life events workspace", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/fullscreen-support.png", "alt": "Zava full-screen private HR support workspace", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/fullscreen-learning.png", "alt": "Zava full-screen learning and compliance workspace", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/fullscreen-rewards.png", "alt": "Zava full-screen total rewards workspace", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/fullscreen-team.png", "alt": "Zava full-screen manager team workspace", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/fullscreen-people.png", "alt": "Zava full-screen organization and people workspace", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/fullscreen-home-mobile.png", "alt": "Zava My HR Dashboard at mobile width", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/fullscreen-people-dark.png", "alt": "Zava people workspace in dark mode", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-get-my-hr-dashboard.png", "alt": "Inline employee HR dashboard summary component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-get-profile-health.png", "alt": "Inline employee profile health component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-get-next-best-actions.png", "alt": "Inline next best HR actions component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-get-worklife-snapshot.png", "alt": "Inline employee worklife snapshot component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-get-employee-milestones.png", "alt": "Inline employee milestones component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-policy-answer.png", "alt": "Inline cited HR policy answer component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-policy-comparison.png", "alt": "Inline HR policy comparison component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-leave-balance.png", "alt": "Inline employee leave balance component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-request-time-off.png", "alt": "Inline time off request with leave type above paired start and end date pickers", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-latest-pay.png", "alt": "Inline employee latest pay component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-explain-pay-change.png", "alt": "Inline employee pay change explanation component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-compare-benefit-plans.png", "alt": "Inline employee benefit plan comparison component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-start-life-event.png", "alt": "Inline employee benefits life event component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-create-hr-case.png", "alt": "Inline private HR case intake component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-required-learning.png", "alt": "Inline required employee learning component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-total-rewards-summary.png", "alt": "Inline employee total rewards component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-approval-inbox.png", "alt": "Inline manager approval inbox component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-team-absence-calendar.png", "alt": "Inline manager team absence calendar component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-find-expert.png", "alt": "Inline employee expert search component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-explore-organization.png", "alt": "Inline employee organization explorer component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-employee-agent/assets/inline-explore-agent-capabilities.png", "alt": "Employee feature explorer with search, family filtering, and dedicated HR scenario prompts", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint Copilot App", "description": "Build and package an SPFx Copilot Component with inline and full-screen experiences.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app" }, { "title": "Microsoft Copilot", "description": "Microsoft Copilot combines models with organizational context and extensibility.", "url": "https://www.microsoft.com/microsoft-365/copilot" }, { "title": "SharePoint Framework overview", "description": "Overview of SharePoint Framework client-side solutions for Microsoft 365.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/zava-innovation-portfolio/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-sp-dev-spfx-copilot-components-zava-innovation-portfolio", "title": "Zava Innovation Hub", "description": "An intent-routed innovation portfolio Copilot App with 17 inline components and five connected workspaces.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0", "versionGroup": "1.24", "created": "2026-08-28", "updated": "2026-11-06", "authors": [ { "name": "Vesa Juvonen", "account": "vesajuvonen", "avatar": "https://github.com/vesajuvonen.png" } ], "preview": { "src": "/images/previews/052acf6124471f1e6b7835b7aad4e3dabb1c6c1bfc88e03cc6907d9b847428d1.webp", "alt": "Full-screen Enterprise Insights command center with stage-gate funnel, portfolio charts, themes, and realized value", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-innovation-portfolio", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-innovation-portfolio/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fzava-innovation-portfolio", "descriptionParagraphs": [ "Zava Innovation Hub demonstrates how Microsoft Copilot can turn natural-language intent into focused innovation work. Seventeen independently routed components cover idea intake, personal progress, business cases, reviews, funding, experiments, portfolio analysis, value realization, global participation, recognition, and capability discovery.", "Every operational component can continue into a shared My Innovation, Programs and Pilots, Reviews and Gates, Investment, or Enterprise Insights workspace. The full-screen experience preserves the originating scenario while adding coordinated stage-gate, impact, balance, budget, growth, geography, and realized-value evidence.", "The sample is deterministic, offline, and safe for demonstrations. Prompt values prefill or scope the experience, while consequential mock actions require visible review and confirmation. Production validation covers catalog routing, generated plugin alignment, local media, current-source visual evidence, tests, and final SharePoint package contents." ], "previews": [ { "src": "/images/previews/052acf6124471f1e6b7835b7aad4e3dabb1c6c1bfc88e03cc6907d9b847428d1.webp", "alt": "Full-screen Enterprise Insights command center with stage-gate funnel, portfolio charts, themes, and realized value", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-innovation-portfolio/assets/ux-inline-ExploreGlobalInnovation.png", "alt": "Inline global innovation view with a Natural Earth world map, regional participation markers, and conversion comparison", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-innovation-portfolio/assets/ux-inline-SubmitInnovationIdea.png", "alt": "Inline innovation idea canvas with controlled problem, audience, baseline, target, strategic theme, owner, evidence, and validation", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-innovation-portfolio/assets/ux-inline-GetInnovationReviewQueue.png", "alt": "Inline innovation review queue with phase buckets, status filters, evidence signals, and pending decisions", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-innovation-portfolio/assets/ux-inline-ExploreAgentCapabilities.png", "alt": "Inline searchable catalog of Zava Innovation Hub operational scenarios and safe prompt previews", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-innovation-portfolio/assets/ux-fullscreen-my.png", "alt": "Full-screen My Innovation workspace with signed-in personal idea stages, impact, effort, and next actions", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-innovation-portfolio/assets/ux-fullscreen-programs.png", "alt": "Full-screen Programs and Pilots workspace with innovation growth, participation, and conversion evidence", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-innovation-portfolio/assets/ux-fullscreen-reviews.png", "alt": "Full-screen Reviews and Gates workspace with prioritized submissions and evidence-backed decision controls", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-innovation-portfolio/assets/ux-fullscreen-investment.png", "alt": "Full-screen Investment workspace with budget stewardship, funding position, and portfolio allocation evidence", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-innovation-portfolio/assets/ux-fullscreen-enterprise-mobile.png", "alt": "Enterprise Insights command center adapted to a narrow mobile viewport with accessible icon navigation", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-innovation-portfolio/assets/ux-enterprise-dark.png", "alt": "Enterprise Insights command center in dark theme with readable analytical charts and semantic status colors", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint Copilot App", "description": "Build and package an SPFx Copilot Component with inline and full-screen experiences.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app" }, { "title": "Microsoft Copilot", "description": "Microsoft Copilot extensibility and organizational context.", "url": "https://www.microsoft.com/microsoft-365/copilot" }, { "title": "SharePoint Framework overview", "description": "Overview of SharePoint Framework client-side solutions.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/zava-it-concierge/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-sp-dev-spfx-copilot-apps-zava-it-concierge", "title": "Zava IT Concierge", "description": "An IT self-service Copilot App with 31 intent-routed components and three connected operational dashboards.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0", "versionGroup": "1.24", "created": "2026-08-22", "updated": "2026-10-28", "authors": [ { "name": "Vesa Juvonen", "account": "vesajuvonen", "avatar": "https://github.com/vesajuvonen.png" } ], "preview": { "src": "/images/previews/e9ce98e1b232db4cc809508ff581895d6e8c07522ec70b4d73311082d0afa681.webp", "alt": "Zava Personal IT dashboard with Surface device health, support, requests, and replacement options", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fzava-it-concierge", "descriptionParagraphs": [ "Zava IT Concierge demonstrates employee device support, manager approvals, and company IT operations directly in Microsoft Copilot. Thirty operational tools and one capability explorer route natural-language requests to purpose-built status, form, decision, journey, and analytical components.", "Every component can expand into one shared Personal, Team, or IT Portfolio dashboard. The full-screen shell preserves the originating intent and prompt-derived context while combining device continuity, approval and budget evidence, service health, estate risk, spend, licenses, and refresh capacity.", "The sample is deterministic, offline, and safe for demonstrations. Prompt values filter or prefill the experience but never submit, approve, decline, delegate, declare, or apply a plan without visible review and confirmation. Production validation covers the generated 31-function plugin, all catalog entries, local media, gallery evidence, tests, and the final package." ], "previews": [ { "src": "/images/previews/e9ce98e1b232db4cc809508ff581895d6e8c07522ec70b4d73311082d0afa681.webp", "alt": "Zava Personal IT dashboard with Surface device health, support, requests, and replacement options", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/fullscreen-team.png", "alt": "Zava Team IT dashboard with approval queue, people readiness, hardware budget, and support load", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/fullscreen-portfolio.png", "alt": "Zava IT control center with global estate risk map, incident command, spend, service, and lifecycle evidence", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/fullscreen-personal-mobile.png", "alt": "Zava Personal IT dashboard stacked for a mobile viewport", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/fullscreen-portfolio-dark.png", "alt": "Zava IT control center rendered in dark mode", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-my-device-status.png", "alt": "Inline assigned Surface status and health component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-get-device-health.png", "alt": "Inline detailed Surface battery, storage, performance, and patch health component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-get-refresh-eligibility.png", "alt": "Inline device refresh eligibility timeline component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-explore-device-catalog.png", "alt": "Inline approved Microsoft Surface catalog comparison component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-configure-device-request.png", "alt": "Inline Surface request configuration and review form", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-draft-device-justification.png", "alt": "Inline evidence-grounded device justification editor", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-report-it-issue.png", "alt": "Inline IT issue report form with severity, diagnostics, and review", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-run-device-diagnostics.png", "alt": "Inline Surface diagnostic checks and findings component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-get-my-requests.png", "alt": "Inline personal IT requests and tickets timeline", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-find-knowledge-match.png", "alt": "Inline ranked IT knowledge article match component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-track-device-shipment.png", "alt": "Inline Surface imaging, shipment, delivery, and setup tracker", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-review-device-approval.png", "alt": "Inline evidence-backed standard device approval component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-get-approval-queue.png", "alt": "Inline manager approval queue with pending and completed submissions", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-get-team-budget.png", "alt": "Inline team IT budget allocation and remaining forecast component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-get-team-assets.png", "alt": "Inline team people, device, compliance, and refresh risk roster", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-preview-request-cost.png", "alt": "Inline request cost and before-after budget impact component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-review-policy-exception.png", "alt": "Inline policy exception evidence, safeguard, and decision component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-get-team-ticket-trend.png", "alt": "Inline team IT ticket volume and category trend component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-delegate-approval.png", "alt": "Inline approval delegation form with person, scope, and rationale", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-get-fleet-health.png", "alt": "Inline global device fleet health and regional risk map", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-get-device-age-distribution.png", "alt": "Inline company device age cohort distribution component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-get-ticket-deflection-trend.png", "alt": "Inline self-service ticket deflection and handled volume trend", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-get-top-it-issues.png", "alt": "Inline ranked IT issue categories and cumulative impact component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-get-service-health.png", "alt": "Inline Microsoft 365 service health and incident status board", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-get-license-reclaim.png", "alt": "Inline inactive license cohorts and annual reclaim opportunity component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-get-it-spend-bridge.png", "alt": "Inline company IT budget-to-forecast spend bridge", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-plan-refresh-waves.png", "alt": "Inline device refresh wave capacity and budget plan", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-correlate-major-incident.png", "alt": "Inline major incident signal correlation component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-get-process-journey.png", "alt": "Inline request process stage, owner, blocker, and next-step journey", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-generate-it-brief.png", "alt": "Inline company IT brief with priorities, evidence, and decisions", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-explore-agent-capabilities.png", "alt": "Inline searchable catalog of thirty Zava IT Concierge operational tools", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-approval-queue-detail.png", "alt": "Inline approval queue detail with requester, policy, budget, evidence, and decision fields", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-review-device-approval-confirmation.png", "alt": "Inline device approval explicit confirmation state before applying the session decision", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-it-concierge/assets/inline-configure-device-request-receipt.png", "alt": "Inline configured Surface request receipt after explicit review and confirmation", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint Copilot App", "description": "Build and package an SPFx Copilot Component with inline and full-screen experiences.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app" }, { "title": "Microsoft Copilot", "description": "Microsoft Copilot combines models with organizational context and extensibility.", "url": "https://www.microsoft.com/microsoft-365/copilot" }, { "title": "SharePoint Framework overview", "description": "Overview of SharePoint Framework client-side solutions for Microsoft 365.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/zava-one-hub/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-sp-dev-spfx-copilot-apps-zava-one-hub", "title": "Zava One - Employee Experience Hub", "description": "A fixture-first employee hub with 35 paired SharePoint web parts and Copilot Components for company communications, personal work, services, decisions, and business insights.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot", "Teams", "SharePoint" ], "componentTypes": [ "Copilot component", "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.24.0", "versionGroup": "1.24", "created": "2026-09-26", "updated": "2026-10-28", "authors": [ { "name": "Vesa Juvonen", "account": "vesajuvonen", "avatar": "https://github.com/vesajuvonen.png" } ], "preview": { "src": "/images/previews/2199d5c0286952da88c94e80849ea997cbbb04cd47139c5b1666b757b90a4466.webp", "alt": "Searchable Zava One capability explorer with safe prompt preview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-one-hub", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-one-hub/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fzava-one-hub", "descriptionParagraphs": [ "Zava One is an SPFx 1.24 employee experience that pairs 35 independently configurable SharePoint web parts with 35 intent-specific Copilot Components over shared React implementations. Three composed workspace web parts provide Combined, Company, and Personal experiences across SharePoint and Microsoft Teams.", "The sample demonstrates company news, trusted knowledge, personal work, employee services, approval workflows, charts, and a selectable world office map. Six conversation starters showcase information, verified answers, praise, sales visualization, global offices, and a capability explorer.", "All business data and actions are deterministic fixtures for reliable offline demonstrations. The production SPPKG, generated agent package, 42 automated tests, 4,080 responsive browser states, and 39-image engineering gallery support repeatable evaluation. The 15-image publication gallery includes authenticated captures of the three separate Teams personal apps." ], "previews": [ { "src": "/images/previews/2199d5c0286952da88c94e80849ea997cbbb04cd47139c5b1666b757b90a4466.webp", "alt": "Searchable Zava One capability explorer with safe prompt preview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-one-hub/assets/screenshot-company-workspace.png", "alt": "Complete Zava One combined workspace showing the Company experience", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-one-hub/assets/screenshot-personal.png", "alt": "Zava One combined workspace showing the Personal experience", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-one-hub/assets/screenshot-company-news.png", "alt": "Zava One Company News experience", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-one-hub/assets/screenshot-recognition-compose.png", "alt": "Zava One praise composer with recipient, message, value, and audience", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-one-hub/assets/screenshot-sales-performance.png", "alt": "Zava One sales performance chart and exact values", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-one-hub/assets/screenshot-office-map.png", "alt": "Zava One global office map with equivalent office list and selected details", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-one-hub/assets/screenshot-vacation-approvals.png", "alt": "Zava One vacation request approvals queue", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-one-hub/assets/screenshot-vacation-detail.png", "alt": "Vacation request detail with balance impact and team coverage", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-one-hub/assets/screenshot-vacation-decision.png", "alt": "Vacation request decision review before confirmation", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-one-hub/assets/screenshot-vacation-receipt.png", "alt": "Session-only simulated vacation approval receipt", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-one-hub/assets/screenshot-vacation-updated-list.png", "alt": "Vacation approval queue with updated pending and processed counts", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-one-hub/assets/screenshot-teams-combined.png", "alt": "Zava One combined personal app in Microsoft Teams, showing Company content and Company/Personal navigation without a duplicate web part header", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-one-hub/assets/screenshot-teams-company.png", "alt": "Zava One Company personal app in Microsoft Teams with Company content and workspace controls, without a tab switcher or duplicate web part header", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-one-hub/assets/screenshot-teams-personal.png", "alt": "Zava One Personal personal app in Microsoft Teams with the daily briefing, agenda, mail, and tasks, without a duplicate web part header", "isFallback": false } ], "references": [ { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework is the extensibility model used by the web parts and Copilot Components in this sample.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "Build your first SharePoint Copilot App", "description": "Learn how to build and test SPFx Copilot Components for Microsoft Copilot.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app" } ], "products": [ "SharePoint", "Copilot", "Teams" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/zava-procurement-command-center/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-sp-dev-spfx-copilot-components-zava-procurement-command-center", "title": "ZavaCore Procurement Command Center", "description": "Evidence-led procurement with value Sankeys, world maps and grounded Copilot continuation.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0", "versionGroup": "1.24", "created": "2026-08-31", "updated": "2026-11-03", "authors": [ { "name": "Vesa Juvonen", "account": "vesajuvonen", "avatar": "https://github.com/vesajuvonen.png" } ], "preview": { "src": "/images/previews/339337980dab8aae2985fecd79567a7171e50a8f4b6e529c645730f0effdc335.webp", "alt": "Full-screen Sourcing Workbench with total-value supplier landscape, exact bid evidence, policy readiness, and award milestones", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-procurement-command-center", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-procurement-command-center/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fzava-procurement-command-center", "descriptionParagraphs": [ "ZavaCore Procurement Command Center connects natural-language business cases to human review, supplier deal evaluation, governed awards, global investment maps, delivery progress and verified procurement value.", "Twenty-one operational components and one capability explorer have 22 named business destinations inside My Requests, Sourcing Workbench, Supplier 360, and Spend Command. Twelve business-language starters, deliberate Copilot continuation and current-view context connect questions to accountable work.", "The sample is deterministic, offline, responsive, and explicit that confirmed actions are session-only demonstrations. Reconciled value Sankeys, supplier landscapes, dependency pathways, allocation and investment maps have keyboard interaction and exact-value alternatives. Commitment is never presented as delivery or verified savings." ], "previews": [ { "src": "/images/previews/339337980dab8aae2985fecd79567a7171e50a8f4b6e529c645730f0effdc335.webp", "alt": "Full-screen Sourcing Workbench with total-value supplier landscape, exact bid evidence, policy readiness, and award milestones", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-procurement-command-center/assets/ux-inline-CreatePurchaseIntent.png", "alt": "Inline purchase intent experience for a rugged-device outcome with governed draft and review progression", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-procurement-command-center/assets/ux-inline-CompareSupplierBids.png", "alt": "Inline D3 supplier total-value landscape with editable risk weight, confidence bubbles, and exact bid table", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-procurement-command-center/assets/ux-inline-ReviewSupplierAward.png", "alt": "Inline split-award review showing cost, blended risk, delivery confidence, policy evidence, and confirmation control", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-procurement-command-center/assets/ux-inline-ResolveInvoiceException.png", "alt": "Inline invoice exception review reconciling purchase order, receipt, invoice, freight variance, and tolerance", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-procurement-command-center/assets/ux-supplier-360.png", "alt": "Full-screen Supplier 360 workspace connecting contract notice, quality, evidence, ownership, and supply dependency", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-procurement-command-center/assets/ux-spend-command.png", "alt": "Full-screen Spend Command workspace tracing identified opportunity through negotiated, contracted, and realized value", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-procurement-command-center/assets/ux-my-requests.png", "alt": "Full-screen My Requests workspace showing the rugged-device outcome path, evidence status, approval, and delivery promise", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-procurement-command-center/assets/ux-sourcing-mobile.png", "alt": "Sourcing Workbench adapted to a narrow mobile viewport with scrollable navigation and readable supplier evidence", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-procurement-command-center/assets/ux-sourcing-dark.png", "alt": "Sourcing Workbench in dark theme with accessible supplier geometry, policy states, evidence table, and milestones", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-procurement-command-center/assets/ux-inline-ExploreAgentCapabilities.png", "alt": "Inline searchable catalog of twenty-one procurement operations with role questions and safe capability previews", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-procurement-command-center/assets/ux-ReviewSupplierAward-review.png", "alt": "Supplier award review with exact primary and resilient shares, cost, risk, on-time confidence, decision and human rationale before explicit confirmation", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-procurement-command-center/assets/ux-inline-ExploreSpendPerformance.png", "alt": "Interactive conserved EUR Sankey from region through intervention to verified and unverified evidence states, with exact values and grounded Copilot continuation", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-procurement-command-center/assets/ux-inline-TrackSupplierRisk.png", "alt": "Modeled supplier dependency pathway with selectable component, assembly, corridor and field-readiness assumptions, exposure controls and Copilot continuation", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-procurement-command-center/assets/ux-inline-DetectSpendLeakage.png", "alt": "Ranked addressable leakage bars separating identified opportunity, verified value and disputed exclusions with exact selected-intervention Copilot handoff", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-procurement-command-center/assets/ux-ReviewSupplierAward-receipt.png", "alt": "Confirmed offline award receipt with the matching sourcing event, supplier shares, human rationale and an explicit statement that no external system changed", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint Copilot App", "description": "Build and package an SPFx Copilot Component.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app" }, { "title": "SharePoint Framework overview", "description": "Overview of SharePoint Framework solutions.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "D3", "description": "Data-driven scales and shapes used by the local decision visualizations.", "url": "https://d3js.org/" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/zava-project-tracker/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-sp-dev-spfx-copilot-apps-zava-project-tracker", "title": "Zava AI Project Portfolio Agent", "description": "A leadership-ready SharePoint Copilot App with 31 intent-routed UX components for personal work, project delivery, portfolio governance, AI investment, capacity, submissions, and approvals.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0", "versionGroup": "1.24", "created": "2026-08-21", "updated": "2026-10-28", "authors": [ { "name": "Vesa Juvonen", "account": "vesajuvonen", "avatar": "https://github.com/vesajuvonen.png" } ], "preview": { "src": "/images/previews/3665e443ac63ca88b69ce1bb8ea9b2b8e0a38709c0bc2c2e3640c12b78b0d88e.webp", "alt": "Zava full-screen My Work dashboard", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fzava-project-tracker", "descriptionParagraphs": [ "Zava demonstrates dynamic UX resolution inside Microsoft Copilot. Thirty operational SPFx Copilot Components independently route natural-language intents to purpose-built information, comparison, submission, and decision experiences. A thirty-first capability explorer helps users discover the complete scenario catalog through business outcomes and safe previews.", "Operational components expand into one responsive full-screen application with My Work, Project, Portfolio, and Decisions dashboards. Project selection coordinates delivery, budget, AI spend, milestones, risk, team load, and benefits. Portfolio views show company investment, run-rate, value, capacity, and systemic exposure. Decisions uses one evidence-first inbox backed by the same records as the inline review components.", "The sample is deterministic, offline, and safe for worldwide demonstrations. Prompt values prefill or filter UX but never submit or decide automatically. Confirmed sample actions create browser-session receipts and never write to an external system. The production package uses one optimized shared bundle, bundled personas, Fluent UI v9, React 18, Griffel owner-document styling, focused D3 visualizations, and automated plugin/package-output validation." ], "previews": [ { "src": "/images/previews/3665e443ac63ca88b69ce1bb8ea9b2b8e0a38709c0bc2c2e3640c12b78b0d88e.webp", "alt": "Zava full-screen My Work dashboard", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/fullscreen-project.png", "alt": "Zava full-screen Project delivery dashboard", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/fullscreen-portfolio.png", "alt": "Zava full-screen Portfolio investment command center", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/fullscreen-decisions.png", "alt": "Zava full-screen Decisions inbox", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/fullscreen-capability-explorer.png", "alt": "Zava full-screen capability explorer", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/fullscreen-mobile.png", "alt": "Zava full-screen workspace at mobile width", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/fullscreen-portfolio-dark.png", "alt": "Zava Portfolio dashboard in dark mode", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/fullscreen-decision-receipt.png", "alt": "Zava Decisions session-only confirmation receipt", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-get-my-work-summary.png", "alt": "Inline personal work summary component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-get-my-tasks.png", "alt": "Inline grouped tasks component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-get-my-capacity.png", "alt": "Inline personal capacity component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-get-my-goal-contributions.png", "alt": "Inline goal contribution component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-submit-weekly-update.png", "alt": "Inline weekly update submission component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-submit-timesheet.png", "alt": "Inline timesheet submission component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-get-project-health.png", "alt": "Inline project health component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-get-project-timeline.png", "alt": "Inline project timeline component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-get-project-milestones.png", "alt": "Inline project milestones component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-get-project-risks.png", "alt": "Inline project risk matrix component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-get-project-budget.png", "alt": "Inline project budget component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-get-project-ai-spend.png", "alt": "Inline project AI spend control tower", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-get-project-team-capacity.png", "alt": "Inline project team capacity component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-submit-project-status.png", "alt": "Inline project status submission component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-submit-ai-usage.png", "alt": "Inline AI usage submission component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-submit-project-request.png", "alt": "Inline project request component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-request-ai-budget.png", "alt": "Inline AI budget request component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-compare-projects.png", "alt": "Inline project comparison component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-get-portfolio-health.png", "alt": "Inline portfolio health component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-get-strategic-alignment.png", "alt": "Inline strategic alignment component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-get-portfolio-roadmap.png", "alt": "Inline portfolio roadmap component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-get-portfolio-budget-forecast.png", "alt": "Inline portfolio budget forecast component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-get-portfolio-ai-spend.png", "alt": "Inline portfolio AI spend component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-get-portfolio-capacity.png", "alt": "Inline portfolio capacity component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-get-portfolio-risk-exposure.png", "alt": "Inline portfolio risk exposure component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-get-approval-inbox.png", "alt": "Inline approval inbox component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-review-project-request.png", "alt": "Inline project request review component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-review-project-budget.png", "alt": "Inline project budget review component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-review-resource-assignment.png", "alt": "Inline resource assignment review component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-review-stage-gate.png", "alt": "Inline stage-gate review component", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-project-tracker/assets/inline-explore-agent-capabilities.png", "alt": "Inline Zava capability explorer component", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint Copilot App", "description": "Learn how to build and package an SPFx Copilot Component with inline and full-screen experiences.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app" }, { "title": "Microsoft Copilot", "description": "Microsoft Copilot combines large language models with organizational context and extensibility.", "url": "https://www.microsoft.com/microsoft-365/copilot" }, { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework supports client-side solutions and tenant-hosted assets for Microsoft 365 experiences.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/zava-retail-store/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-sp-dev-spfx-copilot-apps-zava-retail-store", "title": "Zava Retail Store — Retail Performance Copilot App", "description": "A SharePoint Copilot App (SPFx 1.24 Copilot Component) that renders an executive retail cockpit inside the Microsoft Copilot canvas — a compact inline performance card that expands to a full-screen dashboard covering sales, category mix, customer satisfaction, feedback, top products and store comparisons.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0", "versionGroup": "1.24", "created": "2026-07-06", "updated": "2026-10-28", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/PaoloPia.png" } ], "preview": { "src": "/images/previews/d7ec8515654dd6e2ab71d4d695b13383a29fae9b0ab7b91e845ced5548d8f5c0.webp", "alt": "Zava Retail Store scenario — inline card and full-screen dashboard", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-retail-store", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-retail-store/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fzava-retail-store", "descriptionParagraphs": [ "Zava Retail Store is a SharePoint Copilot App built as an SPFx 1.24 Copilot Component (not a classic web part). The same React component renders in two display modes inside the Microsoft Copilot canvas: a compact inline card and an immersive full-screen executive dashboard. Copilot opens to a compact performance card — headline metrics and a sales trend — then can request expansion via requestDisplayModeAsync('fullscreen') to reveal the full experience.", "The full-screen experience is an executive dashboard shell (app rail + top bar) composed of modular sections: a metrics row (sales vs target, transactions, avg basket, CSAT, NPS, conversion rate), a sales trend panel, sales by category, a customer satisfaction gauge, recent customer feedback, a top-products carousel and store/region comparison. A Filters dialog lets the user pick the target store and date and enable/disable individual panels, and the whole dashboard re-flows live to match the selection.", "The sample ships with mocked, Microsoft Graph-shaped data behind a swappable data service exposing a useMock flag (true for fully offline demos, false to read a live data service and Microsoft Graph for the signed-in user), so a live implementation is a drop-in replacement. The Copilot Component is surfaced as a tool (ZavaRetailTool) a declarative agent can call, rendering its own React UI inside the Copilot host. Built with the Heft build system, React 18.3.1 and Fluent UI v9 with host-driven light/dark theming." ], "previews": [ { "src": "/images/previews/d7ec8515654dd6e2ab71d4d695b13383a29fae9b0ab7b91e845ced5548d8f5c0.webp", "alt": "Zava Retail Store scenario — inline card and full-screen dashboard", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-retail-store/assets/screenshot-inline.png", "alt": "Inline Zava Retail performance card in the Copilot canvas", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-retail-store/assets/screenshot-fullscreen.png", "alt": "Full-screen Zava Retail executive dashboard", "isFallback": false } ], "references": [ { "title": "Overview of the SharePoint Framework", "description": "The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open-source tooling.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "Microsoft Copilot", "description": "Microsoft Copilot combines the power of large language models with your organization's data to help you be more productive.", "url": "https://www.microsoft.com/microsoft-365/copilot" }, { "title": "Use Microsoft Graph in your solution", "description": "Microsoft Graph is the gateway to data and intelligence in Microsoft 365, exposing REST APIs and client libraries to access data across Microsoft 365 services.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-copilot-components:samples/zava-revenue-deal-room/assets/sample.json:0", "slug": "pnp-spfx-copilot-components-pnp-sp-dev-spfx-copilot-components-zava-revenue-deal-room", "title": "ZavaMesh Revenue Deal Room", "description": "27 revenue Copilot Components with four contextual workspaces, country maps, value flows and human-governed approvals.", "repository": "pnp/spfx-copilot-components", "family": "Copilot components", "experiences": [ "Copilot" ], "componentTypes": [ "Copilot component" ], "technologies": [ "React" ], "version": "1.24.0", "versionGroup": "1.24", "created": "2026-08-31", "updated": "2026-11-02", "authors": [ { "name": "Vesa Juvonen", "account": "vesajuvonen", "avatar": "https://github.com/vesajuvonen.png" } ], "preview": { "src": "/images/previews/26f0a4a3581c20bc3c2c50b159006e5592f961af7bc25bb63625fd2167348eb3.webp", "alt": "Focused Germany opportunity detail with exact headquarters-attributed catalog values and links to inspect opportunities", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-copilot-components/tree/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room", "revisionUrl": "https://github.com/pnp/spfx-copilot-components/commit/8c89400277408b9640a32b7d08d4f81501e92b19", "metadataUrl": "https://github.com/pnp/spfx-copilot-components/blob/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-copilot-components%2Ftree%2Fmain%2Fsamples%2Fzava-revenue-deal-room", "descriptionParagraphs": [ "ZavaMesh Revenue Deal Room turns natural-language sales intent into focused, inspectable work across account discovery, qualification, buyer influence, risk, commitments, proposals, commercial scenarios, exceptions, forecast, and customer success handoff.", "Twenty-six operational components and one capability explorer support personal-priority revenue briefs, country opportunity and recorded-spend maps, pipeline and approval value flows, exact commercial-to-submission handoffs and independent approval. Four polished full-screen workspaces separate purposeful landings from explicitly selected work, preserve exact scenario context and carry a keynote story from seller priority to accountable decision.", "The sample is deterministic, offline, responsive, and explicit that confirmed actions are session-only demonstrations. Buyer facts, seller judgment, stale evidence, deterministic output, contrary evidence, and inference remain visibly distinct." ], "previews": [ { "src": "/images/previews/26f0a4a3581c20bc3c2c50b159006e5592f961af7bc25bb63625fd2167348eb3.webp", "alt": "Focused Germany opportunity detail with exact headquarters-attributed catalog values and links to inspect opportunities", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/inline-country-spend-map.png", "alt": "Country spending bubble map using a separate recorded expense ledger with exact country totals and focused drill-down", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/inline-qualification-gate.png", "alt": "Buyer-proof qualification ring showing sourced, missing, contrary, inferred and stale dimensions without claiming pursuit permission", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/inline-competitive-decision-drivers.png", "alt": "Competitive decision-driver importance chart with explicit workshop proposal weights, missing vendor evidence and focused source inspection", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/inline-pipeline-sankey.png", "alt": "Interactive pipeline value flow connecting regional USD allocations, buyer readiness and next actions with conserved connections and selectable details", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/inline-approval-sankey.png", "alt": "Interactive approval value flow connecting intake routes, current independent reviewer stages and stage outcomes without implying final approval", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/inline-my-priorities.png", "alt": "Personal action cockpit with owned-book totals, evidence-linked priorities and exact deal links rather than numerical priority scores", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/inline-deal-details.png", "alt": "Inline selected-deal detail view with exact economics, buyer coverage, evidence gaps, a back action, and focused Copilot handoffs", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/inline-deal-attention.png", "alt": "Scoped deal value versus observable attention flags with exact deal inspection and contextual Copilot questions, not predicted loss probabilities", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/inline-deal-submission.png", "alt": "Inline guided deal story form with commercial summary, evidence stages, explicit confirmation, and context-aware Copilot suggestions", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/inline-deal-approvals.png", "alt": "Inline deal approval inbox with exact request economics, independent reviewer authority, rationale, and explicit simulated decisions", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/fullscreen-deal-room.png", "alt": "Full-screen Deal Room workspace coordinating Contoso relationship influence, evidence, and credible close range", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/inline-commercial-scenario.png", "alt": "Inline commercial scenario studio with editable inputs, margin guardrail, authority, forecast, and outcome contour", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/inline-buying-committee.png", "alt": "Recorded buyer-role network with portraits, stance and stored influence assessments; membership does not establish decision authority", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/inline-capability-explorer.png", "alt": "Inline searchable Revenue Deal Room capability catalog with business outcomes and safe scenario previews", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/fullscreen-deal-room-mobile.png", "alt": "Deal Room workspace adapted to a narrow mobile viewport with scrollable navigation and readable evidence", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/fullscreen-deal-room-dark.png", "alt": "Full-screen Deal Room in dark theme with accessible relationship orbit, evidence provenance, and status colors", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/inline-global-opportunity-map.png", "alt": "Country opportunity choropleth with scoped catalog totals, explicit headquarters attribution and accessible country drill-down", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/inline-pipeline-quality.png", "alt": "Scoped pipeline health matrix with actual stage record counts, catalog value and recorded buyer-proof coverage, plus separate country spending analysis", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/fullscreen-my-deals-analytics.png", "alt": "Full-width country opportunity map in My Deals with actual portfolio totals, headquarters attribution and relevant geographic context", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/fullscreen-revenue-command.png", "alt": "Revenue Command selected forecast scenario with buyer-proof constraints, exact opportunity context and an explicit next business step", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/fullscreen-my-deals-home.png", "alt": "My Deals landing with owned-book outlook, evidence-linked next action and explicit opportunity selection instead of an unrelated task", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/fullscreen-deal-room-home.png", "alt": "Deal Room landing with scoped opportunity choices and recorded buyer-proof coverage before selecting one deal to work", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/fullscreen-commercial-desk-home.png", "alt": "Commercial Desk landing with independent review workload, proposed-offer entry and exact stored requests", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/fullscreen-revenue-command-home.png", "alt": "Revenue Command landing with country opportunity, a separate recorded-spend ledger and explicit pipeline interventions", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/fullscreen-country-spend.png", "alt": "Full-width recorded-spend bubbles from a separate expense ledger with exact country values and geographic drill-down", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/fullscreen-pipeline-value-flow.png", "alt": "Revenue Command pipeline value flow with conserved regional USD allocations, buyer readiness and next actions", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-copilot-components/8c89400277408b9640a32b7d08d4f81501e92b19/samples/zava-revenue-deal-room/assets/fullscreen-approval-progress.png", "alt": "Commercial Desk approval value flow with independent-review semantics and an exact named-request continuation", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint Copilot App", "description": "Build and package an SPFx Copilot Component.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/copilot/get-started/build-your-first-copilot-app" }, { "title": "SharePoint Framework overview", "description": "Overview of SharePoint Framework solutions.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview" }, { "title": "D3", "description": "Data-driven scales, shapes, and geographic projections used by the local visualizations.", "url": "https://d3js.org/" } ], "products": [ "SharePoint", "Copilot" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.24.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-reference-scenarios:samples/ace-application-state/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-ace-application-state", "title": "Managing application state in Adaptive Card Extensions", "description": "Demonstrates initializing and updating shared ACE state across card views and quick views, with local storage and deferred loading of item details.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension", "Reference scenario" ], "technologies": [ "TypeScript" ], "version": "1.13.1", "versionGroup": "1.13", "created": "2022-01-18", "updated": "2026-11-06", "authors": [ { "name": "Patrick Rodgers", "account": "patrick-rodgers", "avatar": "https://github.com/patrick-rodgers.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-application-state", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-application-state/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Face-application-state", "descriptionParagraphs": [ "Demonstrates initializing and updating shared ACE state across card views and quick views, with local storage and deferred loading of item details." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Build an Adaptive Card Extension", "description": "Develop Adaptive Card Extensions with SharePoint Framework for Viva Connections.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.1", "issues": [ { "code": "preview.missing", "field": "thumbnails", "message": "At least one image preview is required.", "severity": "error" }, { "code": "preview.unavailable", "field": "thumbnails", "message": "No usable declared image is available; a labelled fallback is shown.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/spfx-reference-scenarios:samples/ace-basiccard/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-ace-basiccard", "title": "Teams Chat ACE basiccard", "description": "This example shows a basic ACE with a single card view.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension", "Reference scenario" ], "technologies": [ "TypeScript" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2021-09-07", "updated": "2021-11-18", "authors": [ { "name": "Patrick Rogers", "account": "patrick-rodgers", "avatar": "https://github.com/patrick-rodgers.png" } ], "preview": { "src": "/images/previews/d97ed6635744545e1612b8ddbf27359522517d368f06ef0b2d7c5c5c4fc7a0cd.webp", "alt": "Basic ACE Card View", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-basiccard", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-basiccard/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Face-basiccard", "descriptionParagraphs": [ "This example shows a basic ACE with a single card view. The settings allow you to set the link launched by the card. You can set the URL to anything you like and the card will launch it. For Teams links, paste in the link from 'Get link to channel' and select the 'Is Teams Deep Link'." ], "previews": [ { "src": "/images/previews/d97ed6635744545e1612b8ddbf27359522517d368f06ef0b2d7c5c5c4fc7a0cd.webp", "alt": "Basic ACE Card View", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-basiccard/assets/settings.png", "alt": "Basic ACE Settings", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/spfx-reference-scenarios:samples/ace-chart/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-ace-chart", "title": "Dynamic SVG charts in Adaptive Card Extensions", "description": "Generates data-bound SVG bar charts for an Adaptive Card Extension quick view and demonstrates a generated SVG image in the card view.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension", "Reference scenario" ], "technologies": [ "TypeScript" ], "version": "1.15.2", "versionGroup": "1.15", "created": "2022-08-11", "updated": "2026-11-06", "authors": [ { "name": "Patrick Rodgers", "account": "patrick-rodgers", "avatar": "https://github.com/patrick-rodgers.png" } ], "preview": { "src": "/images/previews/94e3c8dcbc237fc93f59d0ada085bf17a6cfb49fb6165f6077b18bdc2c25a0fc.webp", "alt": "Adaptive Card Extension card view displaying a generated SVG image", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-chart", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-chart/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Face-chart", "descriptionParagraphs": [ "Generates data-bound SVG bar charts for an Adaptive Card Extension quick view and demonstrates a generated SVG image in the card view." ], "previews": [ { "src": "/images/previews/94e3c8dcbc237fc93f59d0ada085bf17a6cfb49fb6165f6077b18bdc2c25a0fc.webp", "alt": "Adaptive Card Extension card view displaying a generated SVG image", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-chart/assets/quick-view.png", "alt": "Adaptive Card Extension quick view displaying a dynamically generated SVG bar chart", "isFallback": false } ], "references": [ { "title": "Build an Adaptive Card Extension", "description": "Develop Adaptive Card Extensions with SharePoint Framework for Viva Connections.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-reference-scenarios:samples/ace-chat/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-ace-chat", "title": "Teams Chat ACE", "description": "This example shows how to build and ACE with multiple card and quick views allowing chat interaction with a Microsoft Teams channel.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension", "Reference scenario" ], "technologies": [ "TypeScript" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2021-09-07", "updated": "2021-11-18", "authors": [ { "name": "Patrick Rogers", "account": "patrick-rodgers", "avatar": "https://github.com/patrick-rodgers.png" } ], "preview": { "src": "/images/previews/21b8165ed686759b3ce93551b78f34d4456fd046559122b4b108ae6bdfeb69d5.webp", "alt": "Teams Chat ACE Card View", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-chat", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-chat/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Face-chat", "descriptionParagraphs": [ "This example shows how to build and ACE with multiple card and quick views allowing chat interaction with a Microsoft Teams channel." ], "previews": [ { "src": "/images/previews/21b8165ed686759b3ce93551b78f34d4456fd046559122b4b108ae6bdfeb69d5.webp", "alt": "Teams Chat ACE Card View", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-chat/assets/messagelistview.png", "alt": "Teams Chat ACE Message List View", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-chat/assets/messagedetailview.png", "alt": "Teams Chat ACE Message Detail View", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/spfx-reference-scenarios:samples/ace-companynews/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-ace-companynews", "title": "Company News ACE", "description": "This example shows an ACE which provides a news article rotator with Quick View for full article details.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension", "Reference scenario" ], "technologies": [ "TypeScript" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2021-09-07", "updated": "2021-11-18", "authors": [ { "name": "Patrick Rogers", "account": "patrick-rodgers", "avatar": "https://github.com/patrick-rodgers.png" } ], "preview": { "src": "/images/previews/9dbe792ee4494125a5fc905349f6538c42d0853e778f6dfb9cd542422e48062e.webp", "alt": "Company News ACE Card View", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-companynews", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-companynews/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Face-companynews", "descriptionParagraphs": [ "This example shows an ACE which provides a news article rotator with Quick View for full article details. It shows previous/next buttons, and how to launch the Quick View for the current article. Additionally, you can like/unlike articles directly from the QuickView." ], "previews": [ { "src": "/images/previews/9dbe792ee4494125a5fc905349f6538c42d0853e778f6dfb9cd542422e48062e.webp", "alt": "Company News ACE Card View", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-companynews/assets/quickview.png", "alt": "Company News ACE Quick View", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard", "SharePointWebPart" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/spfx-reference-scenarios:samples/ace-designtemplate-gallery/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-ace-designtemplate-gallery", "title": "Adaptive Card Extentions Design Template Gallery and Personal App", "description": "This solution showcases twelve sample Adaptive Card Extensions and deploys a personal app to demonstrate deep linking to Teams. It is designed to show the art of the possible for ACE development and allow for a quick start.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Teams", "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension", "Reference scenario", "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.14.0", "versionGroup": "1.14", "created": "2022-03-01", "updated": "2026-11-06", "authors": [ { "name": "Derek Cash-Peterson", "account": "dcashpeterson", "avatar": "https://github.com/dcashpeterson.png" } ], "preview": { "src": "/images/previews/a5163bfe3dbf0d44d5779651b74c9414356f7af0e8a7dc1c103970d4a4dd8eaa.webp", "alt": "ACE Design Template Gallery", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-designtemplate-gallery", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-designtemplate-gallery/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Face-designtemplate-gallery", "descriptionParagraphs": [ "This solution showcases 12 Adaptive Card Extensions with visually appealing QuickView layouts. It shows the art of the possible with quick view layouts. Some ACEs have deep linking capabilities to the included Teams Personal App. The Personal App handles the deep links but also serves as a gallery of the provided samples." ], "previews": [ { "src": "/images/previews/a5163bfe3dbf0d44d5779651b74c9414356f7af0e8a7dc1c103970d4a4dd8eaa.webp", "alt": "ACE Design Template Gallery", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-designtemplate-gallery/assets/PersonalApp.gif", "alt": "ACE Design Template Personal App", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/integrate-with-teams-introduction" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" }, { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "Microsoft Teams", "Viva" ], "supportedHosts": [ "Dashboard", "TeamsPersonalApp" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/spfx-reference-scenarios:samples/ace-dynamic-card/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-ace-dynamic-card", "title": "Dynamic content in Adaptive Card Extensions", "description": "Shows three Adaptive Card Extensions that use timer-driven state updates, generated SVG images and rotating content to make card views dynamic.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension", "Reference scenario" ], "technologies": [ "TypeScript" ], "version": "1.13.1", "versionGroup": "1.13", "created": "2022-02-07", "updated": "2026-11-06", "authors": [ { "name": "Patrick Rodgers", "account": "patrick-rodgers", "avatar": "https://github.com/patrick-rodgers.png" } ], "preview": { "src": "/images/previews/6d87dd1bdd9d3b4a4e98364bc84934145ac76cf7c4208dfee3171ddb829d4023.webp", "alt": "Three Adaptive Card Extensions demonstrating dynamic text, generated images and rotating card content", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-dynamic-card", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-dynamic-card/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Face-dynamic-card", "descriptionParagraphs": [ "Shows three Adaptive Card Extensions that use timer-driven state updates, generated SVG images and rotating content to make card views dynamic." ], "previews": [ { "src": "/images/previews/6d87dd1bdd9d3b4a4e98364bc84934145ac76cf7c4208dfee3171ddb829d4023.webp", "alt": "Three Adaptive Card Extensions demonstrating dynamic text, generated images and rotating card content", "isFallback": false } ], "references": [ { "title": "Build an Adaptive Card Extension", "description": "Develop Adaptive Card Extensions with SharePoint Framework for Viva Connections.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.1", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-reference-scenarios:samples/ace-expense-report/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-samples-ace-expense-report", "title": "Expense Reports ACE", "description": "This is a sample end-to-end application, to see how to create a Microsoft Viva Connections Adaptive Card Extension for expense reports that uploads receipts via Microsoft Graph through a back-end Azure Function secured with Microsoft Entra ID.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Teams", "Connections" ], "componentTypes": [ "Adaptive Card Extension", "Reference scenario" ], "technologies": [ "React", "TypeScript" ], "version": "1.18.2", "versionGroup": "1.18", "created": "2024-01-11", "updated": "2024-01-11", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/paolopia.png" } ], "preview": { "src": "/images/previews/4b9e50f0d3deea52ba59fcf6ba9aaeb8ab4b88b71807e782e60d360f83c8c68a.webp", "alt": "The Microsoft Viva Connections Dashboard on the desktop", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-expense-report", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-expense-report/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Face-expense-report", "descriptionParagraphs": [ "This is a sample end-to-end application, to see how to create a Microsoft Viva Connections Adaptive Card Extension for expense reports that uploads receipts via Microsoft Graph through a back-end Azure Function secured with Microsoft Entra ID." ], "previews": [ { "src": "/images/previews/4b9e50f0d3deea52ba59fcf6ba9aaeb8ab4b88b71807e782e60d360f83c8c68a.webp", "alt": "The Microsoft Viva Connections Dashboard on the desktop", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-expense-report/assets/Viva-Connections-Dashboard-Mobile.PNG", "alt": "The Microsoft Viva Connections Dashboard on mobile", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-expense-report/assets/ACE-QuickView-Mobile.PNG", "alt": "The ACE Quick View on mobile", "isFallback": false } ], "references": [ { "title": "Getting started with SharePoint Framework", "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant" }, { "title": "Build your first SharePoint Adaptive Card Extension", "description": "Learn how to develop your first Adaptive Card Extension (ACE) using SharePoint Framework (SPFx).", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension" }, { "title": "Use Microsoft Graph in your solution", "description": "Learn how to consume Microsoft Graph using SharePoint Framework (SPFx).", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis" }, { "title": "Microsoft 365 Patterns and Practices", "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.", "url": "https://aka.ms/m365pnp" } ], "products": [ "SharePoint", "Viva", "Microsoft Teams" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/spfx-reference-scenarios:samples/ace-mymail/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-ace-mymail", "title": "My Mail Adaptive Card Extension", "description": "Uses Microsoft Graph to display the current user's email count and a quick view of message subjects, received times and previews, with configurable refresh intervals.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension", "Reference scenario" ], "technologies": [ "TypeScript" ], "version": "1.14.0", "versionGroup": "1.14", "created": "2022-07-05", "updated": "2026-11-06", "authors": [ { "name": "Derek Cash-Peterson", "account": "dcashpeterson", "avatar": "https://github.com/dcashpeterson.png" } ], "preview": { "src": "/images/previews/f6f3bacc18af855a7222d0aceef550dd74aa58a5650646981b95c0340436505a.webp", "alt": "My Mail card views displaying the current user's email count", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-mymail", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-mymail/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Face-mymail", "descriptionParagraphs": [ "Uses Microsoft Graph to display the current user's email count and a quick view of message subjects, received times and previews, with configurable refresh intervals." ], "previews": [ { "src": "/images/previews/f6f3bacc18af855a7222d0aceef550dd74aa58a5650646981b95c0340436505a.webp", "alt": "My Mail card views displaying the current user's email count", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-mymail/assets/quickview.png", "alt": "My Mail quick view displaying email subjects and message previews", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-mymail/assets/aceconfig.png", "alt": "My Mail configuration for card size, mail type and refresh rate", "isFallback": false } ], "references": [ { "title": "Build an Adaptive Card Extension", "description": "Develop Adaptive Card Extensions with SharePoint Framework for Viva Connections.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension" } ], "products": [ "SharePoint", "Viva", "Microsoft Graph" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.14.0", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-reference-scenarios:samples/ace-pnp-contoso-orders/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-ace-pnp-contoso-orders", "title": "Contoso Orders ACE", "description": "This example shows an end to end solution with a couple of ACEs which interact with a back-end multi-tenant API.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension", "Reference scenario" ], "technologies": [ "TypeScript" ], "version": "1.18.2", "versionGroup": "1.18", "created": "2021-11-04", "updated": "2023-11-21", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/paolopia.png" } ], "preview": { "src": "/images/previews/fcaf9eaa7840da9a868b16b185c2ecf1a36e71aa207ed44e03a149bed40ea302.webp", "alt": "List Orders ACE Quick View", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-pnp-contoso-orders", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-pnp-contoso-orders/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Face-pnp-contoso-orders", "descriptionParagraphs": [ "This example shows an end to end solution with a couple of ACEs which interact with a back-end multi-tenant API. The ACEs are ListOrders, to see a read-only list of orders, and ManageOrders, to list/add/update/delete orders. The solution relies on a back-end multi-tenant API, implemented as an Azure Function App. The source code of the Function App is available in the solution folder, too." ], "previews": [ { "src": "/images/previews/fcaf9eaa7840da9a868b16b185c2ecf1a36e71aa207ed44e03a149bed40ea302.webp", "alt": "List Orders ACE Quick View", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-pnp-contoso-orders/assets/Contoso-Manage-Orders-QuickView-List.png", "alt": "Manage Orders ACE Quick View", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-pnp-contoso-orders/assets/Contoso-Manage-Orders-QuickView-Add.png", "alt": "Add New Order ACE Quick View", "isFallback": false } ], "references": [ { "title": "Introduction to PnP Contoso Orders solution", "description": "Introduction about the PnP Contoso Orders solution", "url": "https://github.com/pnp/spfx-reference-scenarios/raw/main/samples/ace-pnp-contoso-orders/docs/Introduction.md" }, { "title": "ACEs Implementation Details", "description": "Technical documentation about how the ACEs of the PnP Contoso Orders solution are implemented.", "url": "https://github.com/pnp/spfx-reference-scenarios/raw/main/samples/ace-pnp-contoso-orders/docs/ACEs-Implementation-Details.md" }, { "title": "APIs Implementation Details", "description": "Technical documentation about how the APIs of the PnP Contoso Orders solution are implemented.", "url": "https://github.com/pnp/spfx-reference-scenarios/raw/main/samples/ace-pnp-contoso-orders/docs/APIs-Implementation-Details.md" }, { "title": "Getting started with SharePoint Framework", "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant" }, { "title": "Build your first SharePoint Adaptive Card Extension", "description": "Learn how to develop your first Adaptive Card Extension (ACE) using SharePoint Framework (SPFx).", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/spfx-reference-scenarios:samples/ace-shared-state/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-ace-shared-state", "title": "Sharing state across Adaptive Card Extensions", "description": "Demonstrates coordinating data fetching and shared caching across multiple Adaptive Card Extensions through a SharePoint Framework library component.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Connections" ], "componentTypes": [ "Adaptive Card Extension", "Library component", "Reference scenario" ], "technologies": [ "TypeScript" ], "version": "1.13.1", "versionGroup": "1.13", "created": "2022-03-17", "updated": "2026-11-06", "authors": [ { "name": "Patrick Rodgers", "account": "patrick-rodgers", "avatar": "https://github.com/patrick-rodgers.png" } ], "preview": { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-shared-state", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-shared-state/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Face-shared-state", "descriptionParagraphs": [ "Demonstrates coordinating data fetching and shared caching across multiple Adaptive Card Extensions through a SharePoint Framework library component." ], "previews": [ { "src": "/images/sample-preview-fallback.png", "alt": "Preview unavailable", "isFallback": true } ], "references": [ { "title": "Build an Adaptive Card Extension", "description": "Develop Adaptive Card Extensions with SharePoint Framework for Viva Connections.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [ "Dashboard" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.1", "issues": [ { "code": "preview.missing", "field": "thumbnails", "message": "At least one image preview is required.", "severity": "error" }, { "code": "preview.unavailable", "field": "thumbnails", "message": "No usable declared image is available; a labelled fallback is shown.", "severity": "warning" } ], "quality": { "needsReview": true, "issueCount": 2 } }, { "id": "pnp/spfx-reference-scenarios:samples/ace-teams-covid/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-ace-teams-covid", "title": "Covid Self-Attestation Microsoft Teams personal app", "description": "This solution depicts how you can build a teams based custom form that collects information from users and provides a custom dashboard for working with the results.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Teams", "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension", "Reference scenario", "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2021-09-07", "updated": "2026-11-06", "authors": [ { "name": "Julie Turner", "account": "juliemturner", "avatar": "https://github.com/juliemturner.png" }, { "name": "Derek Cash-Peterson", "account": "dcashpeterson", "avatar": "https://github.com/dcashpeterson.png" }, { "name": "Stefan Bauer", "account": "StfBauer", "avatar": "https://github.com/StfBauer.png" } ], "preview": { "src": "/images/previews/c2c583c40638f28d0ec49567a8985320e0d5423fca70b8ec56c20823df713bfe.webp", "alt": "Covid Attestation Check-In", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-teams-covid", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-teams-covid/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Face-teams-covid", "descriptionParagraphs": [ "This solution depicts how you can build a teams based custom form that collects information from users and provides a custom dashboard for working with the results." ], "previews": [ { "src": "/images/previews/c2c583c40638f28d0ec49567a8985320e0d5423fca70b8ec56c20823df713bfe.webp", "alt": "Covid Attestation Check-In", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-teams-covid/assets/administration.gif", "alt": "Covid Attestation Administration", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-teams-covid/assets/front-desk.gif", "alt": "Covid Attestation Front Desk", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-teams-covid/assets/covidace.gif", "alt": "Covid Attestation ACE", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint", "Microsoft Teams", "Viva" ], "supportedHosts": [ "Dashboard", "SharePointWebPart", "TeamsPersonalApp" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/spfx-reference-scenarios:samples/ace-teams-roomreservation/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-ace-teams-roomreservation", "title": "Room reservation Microsoft Teams Personal App/Teams Tab", "description": "The Executive Room Reservation application is an executive scheduling sample application.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Teams", "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension", "Reference scenario", "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2021-09-07", "updated": "2021-11-18", "authors": [ { "name": "Julie Turner", "account": "juliemturner", "avatar": "https://github.com/juliemturner.png" }, { "name": "Derek Cash-Peterson", "account": "dcashpeterson", "avatar": "https://github.com/dcashpeterson.png" }, { "name": "Stefan Bauer", "account": "StfBauer", "avatar": "https://github.com/StfBauer.png" } ], "preview": { "src": "/images/previews/b8eba4abe726a1956fed8f0374757824c6214928a633c9e5649eeb8d9740d884.webp", "alt": "Exectuive Meeting Overview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-teams-roomreservation", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-teams-roomreservation/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Face-teams-roomreservation", "descriptionParagraphs": [ "The Executive Room Reservation application is an executive scheduling application that allows users to see upcoming meetings, select and book a room based on availability dates and the number of participants. Users can see a photo of the room where the meeting is booked, get an address to the building to put in the meeting invite, and get directions to the building. It provides a seamless way for executive assistants to schedule meeting rooms for executive meetings. The application demonstrates the ability to create a visually engaging Microsoft Teams based solution." ], "previews": [ { "src": "/images/previews/b8eba4abe726a1956fed8f0374757824c6214928a633c9e5649eeb8d9740d884.webp", "alt": "Exectuive Meeting Overview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-teams-roomreservation/assets/execmeetingace.gif", "alt": "Executive Meeting ACE", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint", "Microsoft Teams", "Viva" ], "supportedHosts": [ "Dashboard", "SharePointWebPart", "TeamsPersonalApp" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/spfx-reference-scenarios:samples/ace-teams-worldclock/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-ace-teams-worldclock", "title": "World Clock Microsoft Teams Personal App/Teams Tab", "description": "The World Clock solution helps teams and managers deal with geographically dispersed team members.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Teams", "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension", "Reference scenario", "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2021-09-07", "updated": "2021-09-07", "authors": [ { "name": "Julie Turner", "account": "juliemturner", "avatar": "https://github.com/juliemturner.png" }, { "name": "Derek Cash-Peterson", "account": "dcashpeterson", "avatar": "https://github.com/dcashpeterson.png" }, { "name": "Stefan Bauer", "account": "StfBauer", "avatar": "https://github.com/StfBauer.png" } ], "preview": { "src": "/images/previews/0a44aa29637b59192b18e6a41efc02f77fa3262aa9feaec8495dd66846a29b72.webp", "alt": "World Clock Overview", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-teams-worldclock", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-teams-worldclock/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Face-teams-worldclock", "descriptionParagraphs": [ "The World Clock solution helps teams and managers deal with geographically dispersed team members helping make it easier to reconcile working times and meeting schedules with all the members. The solution can be added as a Teams tab to help members of a Team work together but also as a Personal App to help you manage your personal 'teams' who may live in various time zones." ], "previews": [ { "src": "/images/previews/0a44aa29637b59192b18e6a41efc02f77fa3262aa9feaec8495dd66846a29b72.webp", "alt": "World Clock Overview", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-teams-worldclock/assets/worldclockace.gif", "alt": "World Clock ACE", "isFallback": false } ], "references": [ { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/integrate-with-teams-introduction" } ], "products": [ "SharePoint", "Microsoft Teams", "Viva" ], "supportedHosts": [ "Dashboard", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/spfx-reference-scenarios:samples/ace-wellbeing/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-ace-wellbeing", "title": "Wellbeing days requests and reminder - Adaptive Cards Extensions and Teams personal app", "description": "This sample allows booking and managing well being days for users. By using the wellbeing reminder Adaptive Card Extension (ACE), a user (requestor) can submit a request for a well being day. Another user (manager) can then action this request using the combination of the wellbeing requests Adaptive Card Extension and the well being requests Teams personal app.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Teams", "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension", "Reference scenario", "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.13.0", "versionGroup": "1.13", "created": "2022-03-08", "updated": "2026-11-06", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" }, { "name": "Anoop Tatti", "account": "anoopt", "avatar": "https://github.com/anoopt.png" } ], "preview": { "src": "/images/previews/9386ded077c85b1b32f42b71d2c406ba32e59392f7056ede6a2fa038d71371f6.webp", "alt": "ACE to request time off", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-wellbeing", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-wellbeing/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Face-wellbeing", "descriptionParagraphs": [ "This sample allows booking and managing well being days for users. By using the wellbeing reminder Adaptive Card Extension (ACE), a user (requestor) can submit a request for a well being day. Another user (manager) can then action this request using the combination of the wellbeing requests Adaptive Card Extension and the well being requests Teams personal app.", "While actioning a request, the app shows the calendar of a group to the manager, so that the manager can take a decision based on the events occuring on or around the submiited wellbeing day of the request. The data for the sample is driven from SharePoint lists and a calendar associated with a team (underlying group)." ], "previews": [ { "src": "/images/previews/9386ded077c85b1b32f42b71d2c406ba32e59392f7056ede6a2fa038d71371f6.webp", "alt": "ACE to request time off", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-wellbeing/assets/wellbeing_requests_ace.png", "alt": "ACE for managing requests", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/ace-wellbeing/assets/wellbeing_requests_pa.png", "alt": "Microsoft Teams personal app for request details", "isFallback": false } ], "references": [ { "title": "Viva Connections Extensibility guidance", "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.", "url": "https://aka.ms/viva/connections/extensibility" }, { "title": "Building Microsoft Teams Tabs using SharePoint Framework", "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/integrate-with-teams-introduction" }, { "title": "Adaptive Card Documentation", "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.", "url": "https://adaptivecards.io/" }, { "title": "Adaptive Card Extension Design Guidance", "description": "Design guidance for laying out Adaptive Card Extensions.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro" }, { "title": "Build your first SharePoint client-side web part", "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part" } ], "products": [ "Microsoft Teams", "Viva", "SharePoint" ], "supportedHosts": [ "Dashboard", "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.13.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/spfx-reference-scenarios:samples/contoso-retail-demo/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-samples-react-retail-dashboard", "title": "Contoso Retail Dashboard", "description": "This is a sample end-to-end application, based on demo sample data, that shows you how to create a Microsoft Teams personal app with SharePoint Framework, hosting the solution also in Outlook.com and in the Office portal as a Microsoft 365 app. The solution also provides a sample Adaptive Card Extension (ACE) for Microsoft Viva Connection, still built with SharePoint Framework. The sample illustrates how to connect the ACE with the Teams personal app, providing custom arguments to the Teams personal app via deep links defined in the ACE. Last but not least, the solution illustrates how to create a Teams Message Extension for Search using Microsoft Teams Toolkit.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Teams", "Connections", "SharePoint" ], "componentTypes": [ "Adaptive Card Extension", "Reference scenario", "Teams tab", "Web part" ], "technologies": [ "React", "TypeScript" ], "version": "1.18.2", "versionGroup": "1.18", "created": "2023-05-26", "updated": "2023-11-23", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/paolopia.png" } ], "preview": { "src": "/images/previews/04b0d4052e6502385fd9148382819ebc5094f05d8a990037f59cd1ab45368fc0.webp", "alt": "The Microsoft Teams personal app", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/contoso-retail-demo", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/contoso-retail-demo/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Fcontoso-retail-demo", "descriptionParagraphs": [ "This is a sample end-to-end application, based on demo sample data, that shows you how to create a Microsoft Teams personal app with SharePoint Framework, hosting the solution also in Outlook.com and in the Office portal as a Microsoft 365 app. The solution also provides a sample Adaptive Card Extension (ACE) for Microsoft Viva Connection, still built with SharePoint Framework. The sample illustrates how to connect the ACE with the Teams personal app, providing custom arguments to the Teams personal app via deep links defined in the ACE. Last but not least, the solution illustrates how to create a Teams Message Extension for Search using Microsoft Teams Toolkit." ], "previews": [ { "src": "/images/previews/04b0d4052e6502385fd9148382819ebc5094f05d8a990037f59cd1ab45368fc0.webp", "alt": "The Microsoft Teams personal app", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/contoso-retail-demo/assets/outlook-hosted.png", "alt": "The application hosted in Outlook.com", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/contoso-retail-demo/assets/office-hosted.png", "alt": "The application hosted in the Office Portal as a Microsoft 365 app", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/contoso-retail-demo/assets/viva-connection-ace.png", "alt": "The ACE hosted in Microsoft Viva Connection", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/contoso-retail-demo/assets/teams-search-extension-signin.png", "alt": "The Teams Message Extension prompting the user to sign in", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/contoso-retail-demo/assets/teams-search-extension-search.png", "alt": "The Teams Message Extension with search capabilities in action", "isFallback": false } ], "references": [ { "title": "Getting started with SharePoint Framework", "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant" }, { "title": "Build your first SharePoint Adaptive Card Extension", "description": "Learn how to develop your first Adaptive Card Extension (ACE) using SharePoint Framework (SPFx).", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension" }, { "title": "Building for Microsoft teams", "description": "Learn how to develop for Microsoft Teams using SharePoint Framework.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview" }, { "title": "Use Microsoft Graph in your solution", "description": "Learn how to consume Microsoft Graph using SharePoint Framework (SPFx).", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis" }, { "title": "Teams Toolkit Overview", "description": "Microsoft Teams Toolkit Overview.", "url": "https://learn.microsoft.com/en-us/microsoftteams/platform/toolkit/teams-toolkit-fundamentals?pivots=visual-studio-code-v5" }, { "title": "Add single sign-on to Teams app", "description": "Add single sign-on to Teams app.", "url": "https://learn.microsoft.com/en-us/microsoftteams/platform/toolkit/add-single-sign-on?pivots=visual-studio-code-v5" }, { "title": "Microsoft 365 Patterns and Practices", "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.", "url": "https://aka.ms/m365pnp" } ], "products": [ "SharePoint", "Viva", "Microsoft Teams" ], "supportedHosts": [ "Dashboard", "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-reference-scenarios:samples/spfx-formcustomizer-basics/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-spfx-formcustomizer-basics", "title": "SPFx form customizer basics", "description": "This example shows the basic implementation of a form customizer using SharePoint Framework.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "SharePoint" ], "componentTypes": [ "Form customizer", "Reference scenario" ], "technologies": [ "TypeScript" ], "version": "1.15.0-rc.0", "versionGroup": "1.15", "created": "2022-06-21", "updated": "2026-11-06", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/0365d0606740081a5503bed706d20540d1bbf30daff713eb995dd3cedc1d7994.webp", "alt": "Custom edit form implemented using SharePoint Framework", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/spfx-formcustomizer-basics", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/spfx-formcustomizer-basics/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Fspfx-formcustomizer-basics", "descriptionParagraphs": [ "This example shows the basic implementation of a form customizer using SharePoint Framework." ], "previews": [ { "src": "/images/previews/0365d0606740081a5503bed706d20540d1bbf30daff713eb995dd3cedc1d7994.webp", "alt": "Custom edit form implemented using SharePoint Framework", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/spfx-formcustomizer-basics/assets/newForm.png", "alt": "Custom new form implemented using SharePoint Framework", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/spfx-formcustomizer-basics/assets/viewForm.png", "alt": "Custom view form implemented using SharePoint Framework", "isFallback": false } ], "references": [ { "title": "Build your first Form Customizer extension", "description": "Form customizers are SharePoint Framework components giving you an option to override the form experience in a list or library level by associating the component to the used content type. Form customizer components can be used in SharePoint Online, and you build them using modern JavaScript tools and libraries.", "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-form-customizer" } ], "products": [ "SharePoint", "Viva" ], "supportedHosts": [], "framework": "SharePoint Framework", "frameworkVersion": "1.15.0-rc.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/spfx-reference-scenarios:samples/spfx-formcustomizer-saleslead/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-spfx-formcustomizer-saleslead", "title": "Sales Lead System with a Form Customizer", "description": "Manages solar-energy sales leads with a React web part and Form Customizer that share list provisioning, lead filtering and create, read, update and delete forms.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Form customizer", "Reference scenario", "Teams tab", "Web part" ], "technologies": [ "React" ], "version": "1.23.2", "versionGroup": "1.23", "created": "2026-07-01", "updated": "2026-11-06", "authors": [ { "name": "Sympraxis Consulting", "account": "SympraxisConsulting", "avatar": "https://github.com/SympraxisConsulting.png" } ], "preview": { "src": "/images/previews/e9d8f2b960b23efabd5e6e64665987bf032f37dee791c0d84b1b454225d54cd2.webp", "alt": "Sales Lead System showing a filterable list of sales leads and shared custom forms", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/spfx-formcustomizer-saleslead", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/spfx-formcustomizer-saleslead/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Fspfx-formcustomizer-saleslead", "descriptionParagraphs": [ "Manages solar-energy sales leads with a React web part and Form Customizer that share list provisioning, lead filtering and create, read, update and delete forms." ], "previews": [ { "src": "/images/previews/e9d8f2b960b23efabd5e6e64665987bf032f37dee791c0d84b1b454225d54cd2.webp", "alt": "Sales Lead System showing a filterable list of sales leads and shared custom forms", "isFallback": false } ], "references": [ { "title": "Build a Form Customizer extension", "description": "Develop custom SharePoint list forms with SharePoint Framework.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-form-customizer" } ], "products": [ "SharePoint" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.23.2", "issues": [], "quality": { "needsReview": false, "issueCount": 0 } }, { "id": "pnp/spfx-reference-scenarios:samples/spfx-middleware/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-spfx-middleware", "title": "SPFx Middleware API Pattern", "description": "This is a sample solution that illustrates how to consume backend services like Microsoft Graph, SharePoint Online, or any 3rd Party APIs via OBO (on-behalf-of) flow via a middleware from a SPFx solution.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Reference scenario", "Teams tab", "Web part" ], "technologies": [ "React", "TypeScript" ], "version": "1.18.0", "versionGroup": "1.18", "created": "2023-10-04", "updated": "2023-10-04", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/paolopia.png" } ], "preview": { "src": "/images/previews/4177f726d71c87239b75a851ee058df898b32c92f1832d65fbee5d20566aef6e.webp", "alt": "SPFx Web Part UI", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/spfx-middleware", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/spfx-middleware/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Fspfx-middleware", "descriptionParagraphs": [ "This is a sample solution that illustrates how to consume backend services like Microsoft Graph, SharePoint Online, or any 3rd Party APIs via OBO (on-behalf-of) flow via a middleware from a SPFx solution." ], "previews": [ { "src": "/images/previews/4177f726d71c87239b75a851ee058df898b32c92f1832d65fbee5d20566aef6e.webp", "alt": "SPFx Web Part UI", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/spfx-middleware/assets/OBO-Functional-Diagram.png", "alt": "On-Behalf-Of Flow Functional Diagram", "isFallback": false } ], "references": [ { "title": "Getting started with SharePoint Framework", "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant" }, { "title": "Build your first SharePoint Adaptive Card Extension", "description": "Learn how to develop your first Adaptive Card Extension (ACE) using SharePoint Framework (SPFx).", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension" }, { "title": "Building for Microsoft teams", "description": "Learn how to develop for Microsoft Teams using SharePoint Framework.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview" }, { "title": "Use Microsoft Graph in your solution", "description": "Learn how to consume Microsoft Graph using SharePoint Framework (SPFx).", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis" }, { "title": "Connect to Azure AD-secured APIs in SharePoint Framework solutions", "description": "Learn how to consume Azure AD-secured APIs using SharePoint Framework (SPFx).", "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/use-aadhttpclient" }, { "title": "Microsoft identity platform and OAuth 2.0 On-Behalf-Of flow", "description": "Learn the On-Behalf-Of grant flow in Azure AD.", "url": "https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-on-behalf-of-flow" }, { "title": "Microsoft 365 Patterns and Practices", "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.", "url": "https://aka.ms/m365pnp" } ], "products": [ "SharePoint", "Viva", "Microsoft Teams", "AzureAD", "Microsoft Graph" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.18.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/spfx-reference-scenarios:samples/spfx-obo/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-spfx-obo", "title": "SPFx On-Behalf-Of flow", "description": "This is a sample solution that illustrates how to consume a backend API via OBO flow when invoking a middleware from SPFx solution.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Reference scenario", "Teams tab", "Web part" ], "technologies": [ "React", "TypeScript" ], "version": "1.15.0", "versionGroup": "1.15", "created": "2022-10-20", "updated": "2022-10-20", "authors": [ { "name": "Paolo Pialorsi", "account": "PaoloPia", "avatar": "https://github.com/paolopia.png" } ], "preview": { "src": "/images/previews/c643e15ed5d94cab62041961458de5115f1f9a1c5355edec15333ac4b65c78c0.webp", "alt": "OBO Consumer UI", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/spfx-obo", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/spfx-obo/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Fspfx-obo", "descriptionParagraphs": [ "This is a sample solution that illustrates how to invoke a middleware Web API/service, from a SharePoint Framework solution, relying on the On-Behalf-Of (OBO) flow in order to consume a backend Web API/service." ], "previews": [ { "src": "/images/previews/c643e15ed5d94cab62041961458de5115f1f9a1c5355edec15333ac4b65c78c0.webp", "alt": "OBO Consumer UI", "isFallback": false }, { "src": "https://raw.githubusercontent.com/pnp/spfx-reference-scenarios/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/spfx-obo/assets/OBO-Functional-Diagram.png", "alt": "On-Behalf-Of Flow Functional Diagram", "isFallback": false } ], "references": [ { "title": "Getting started with SharePoint Framework", "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant" }, { "title": "Build your first SharePoint Adaptive Card Extension", "description": "Learn how to develop your first Adaptive Card Extension (ACE) using SharePoint Framework (SPFx).", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension" }, { "title": "Building for Microsoft teams", "description": "Learn how to develop for Microsoft Teams using SharePoint Framework.", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview" }, { "title": "Use Microsoft Graph in your solution", "description": "Learn how to consume Microsoft Graph using SharePoint Framework (SPFx).", "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis" }, { "title": "Connect to Azure AD-secured APIs in SharePoint Framework solutions", "description": "Learn how to consume Azure AD-secured APIs using SharePoint Framework (SPFx).", "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/use-aadhttpclient" }, { "title": "Microsoft identity platform and OAuth 2.0 On-Behalf-Of flow", "description": "Learn the On-Behalf-Of grant flow in Azure AD.", "url": "https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-on-behalf-of-flow" }, { "title": "Microsoft 365 Patterns and Practices", "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.", "url": "https://aka.ms/m365pnp" } ], "products": [ "SharePoint", "Viva", "Microsoft Teams", "AzureAD", "Microsoft Graph" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.15.0", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } }, { "id": "pnp/spfx-reference-scenarios:samples/spfx-productivity-dashboard/assets/sample.json:0", "slug": "pnp-spfx-reference-scenarios-pnp-spfx-reference-scenarios-spfx-productivity-dashboard", "title": "One Productivity Hub powered by SharePoint Framework", "description": "This is a demo application that helps you keep track of your activities planned for the day.", "repository": "pnp/spfx-reference-scenarios", "family": "Reference scenarios", "experiences": [ "Teams", "SharePoint" ], "componentTypes": [ "Reference scenario", "Teams tab", "Web part" ], "technologies": [ "TypeScript" ], "version": "1.16.0-beta.2", "versionGroup": "1.16", "created": "2022-11-01", "updated": "2022-11-01", "authors": [ { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png" } ], "preview": { "src": "/images/previews/939747405f16cae2da2a413a900b39b139f23436b9fab1ae8b68b6d890373800.webp", "alt": "One Productivity Hub powered by SharePoint Framework", "isFallback": false }, "sourceUrl": "https://github.com/pnp/spfx-reference-scenarios/tree/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/spfx-productivity-dashboard", "revisionUrl": "https://github.com/pnp/spfx-reference-scenarios/commit/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f", "metadataUrl": "https://github.com/pnp/spfx-reference-scenarios/blob/746c2fcb69cec30e7a9182ed7dd99c09bb02a83f/samples/spfx-productivity-dashboard/assets/sample.json", "downloadUrl": "https://pnp.github.io/download-partial/?url=https%3A%2F%2Fgithub.com%2Fpnp%2Fspfx-reference-scenarios%2Ftree%2Fmain%2Fsamples%2Fspfx-productivity-dashboard", "descriptionParagraphs": [ "This is a demo application that helps you keep track of your activities planned for the day." ], "previews": [ { "src": "/images/previews/939747405f16cae2da2a413a900b39b139f23436b9fab1ae8b68b6d890373800.webp", "alt": "One Productivity Hub powered by SharePoint Framework", "isFallback": false } ], "references": [ { "title": "Build a SharePoint web part with the Microsoft Graph Toolkit", "description": "Using Microsoft Graph Toolkit in SharePoint Framework solutions to connect to Microsoft Graph", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-web-part-microsoft-graph-toolkit?WT.mc_id=m365-80548-wmastyka" }, { "title": "Microsoft Graph Toolkit overview", "description": "Retrieving data from Microsoft 365 using Microsoft Graph and Microsoft Graph Toolkit", "url": "https://learn.microsoft.com/graph/toolkit/overview?WT.mc_id=m365-80548-wmastyka" }, { "title": "Getting started with SharePoint Framework", "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant?WT.mc_id=m365-80548-wmastyka" }, { "title": "Build for Microsoft Teams using SharePoint Framework", "description": "How to build Microsoft Teams applications using SharePoint Framework", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/build-for-teams-overview?WT.mc_id=m365-80548-wmastyka" }, { "title": "Use Microsoft Graph Toolkit in your web parts", "description": "Build a SharePoint web part with the Microsoft Graph Toolkit", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-web-part-microsoft-graph-toolkit?WT.mc_id=m365-80548-wmastyka" }, { "title": "Use Microsoft Graph in your solution", "description": "How to use Microsoft Graph in your SharePoint Framework solutions", "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis?WT.mc_id=m365-80548-wmastyka" } ], "products": [ "SharePoint", "Viva", "Microsoft Teams", "AzureAD", "Microsoft Graph" ], "supportedHosts": [ "SharePointFullPage", "SharePointWebPart", "TeamsPersonalApp", "TeamsTab" ], "framework": "SharePoint Framework", "frameworkVersion": "1.16.0-beta.2", "issues": [ { "code": "download.missing", "field": "downloadUrl", "message": "No download link; derive one explicitly in the future gallery.", "severity": "warning" } ], "quality": { "needsReview": false, "issueCount": 1 } } ], "contributors": [ { "name": "João José Mendes", "account": "joaojmendes", "avatar": "https://github.com/joaojmendes.png", "id": "github:joaojmendes", "count": 56 }, { "name": "Hugo Bernier", "account": "hugoabernier", "avatar": "https://github.com/hugoabernier.png", "id": "github:hugoabernier", "count": 37 }, { "name": "Waldek Mastykarz", "account": "waldekmastykarz", "avatar": "https://github.com/waldekmastykarz.png", "id": "github:waldekmastykarz", "count": 30 }, { "name": "Alex Terentiev", "account": "ajixumuk", "avatar": "https://avatars.githubusercontent.com/u/17036219?v=4", "id": "github:ajixumuk", "count": 23 }, { "name": "Paolo Pialorsi", "account": "paolopia", "avatar": "https://github.com/paolopia.png", "id": "github:paolopia", "count": 23 }, { "name": "Ejaz Hussain", "account": "ejazhussain", "avatar": "https://github.com/ejazhussain.png", "id": "github:ejazhussain", "count": 22 }, { "name": "Nello D'Andrea", "account": "ferrarirosso", "avatar": "https://github.com/ferrarirosso.png", "id": "github:ferrarirosso", "count": 22 }, { "name": "Luis Manez", "account": "luismanez", "avatar": "https://github.com/luismanez.png", "id": "github:luismanez", "count": 21 }, { "name": "Siddharth Vaghasia", "account": "siddharth-vaghasia", "avatar": "https://github.com/siddharth-vaghasia.png", "id": "github:siddharth-vaghasia", "count": 19 }, { "name": "Aimery Thomas", "account": "a1mery", "avatar": "https://github.com/a1mery.png", "id": "github:a1mery", "count": 18 }, { "name": "Anoop Tatti", "account": "anoopt", "avatar": "https://github.com/anoopt.png", "id": "github:anoopt", "count": 18 }, { "name": "Ari Gunawan", "account": "arigunawan", "avatar": "https://github.com/AriGunawan.png", "id": "github:arigunawan", "count": 17 }, { "name": "Eric Overfield", "account": "eoverfield", "avatar": "https://github.com/eoverfield.png", "id": "github:eoverfield", "count": 17 }, { "name": "Harminder Singh", "account": "harmindersethi", "avatar": "https://github.com/HarminderSethi.png", "id": "github:harmindersethi", "count": 16 }, { "name": "Nicolas Kheirallah", "account": "nicolaskheirallah", "avatar": "https://github.com/NicolasKheirallah.png", "id": "github:nicolaskheirallah", "count": 15 }, { "name": "sudeepghatak", "account": "sudeepghatak", "avatar": "https://github.com/sudeepghatak.png", "id": "github:sudeepghatak", "count": 15 }, { "name": "Peter Paul Kirschner", "account": "petkir", "avatar": "https://github.com/petkir.png", "id": "github:petkir", "count": 14 }, { "name": "Sudharsan Kesavanarayanan", "account": "sudharsank", "avatar": "https://github.com/sudharsank.png", "id": "github:sudharsank", "count": 14 }, { "name": "Vesa Juvonen", "account": "vesajuvonen", "avatar": "https://github.com/vesajuvonen.png", "id": "github:vesajuvonen", "count": 14 }, { "name": "Nanddeep Nachan", "account": "nanddeepn", "avatar": "https://github.com/nanddeepn.png", "id": "github:nanddeepn", "count": 12 }, { "name": "@saiiiiiii", "account": "saiiiiiii", "avatar": "https://github.com/saiiiiiii.png", "id": "github:saiiiiiii", "count": 12 }, { "name": "Valeras Narbutas", "account": "valerasnarbutas", "avatar": "https://github.com/ValerasNarbutas.png", "id": "github:valerasnarbutas", "count": 12 }, { "name": "Ramin Ahmadi", "account": "ahmadiramin", "avatar": "https://github.com/AhmadiRamin.png", "id": "github:ahmadiramin", "count": 11 }, { "name": "Velin Georgiev", "account": "velingeorgiev", "avatar": "https://github.com/VelinGeorgiev.png", "id": "github:velingeorgiev", "count": 11 }, { "name": "Abderahman Moujahid", "account": "abderahman88", "avatar": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4", "id": "github:abderahman88", "count": 10 }, { "name": "Giuliano De Luca", "account": "giuleon", "avatar": "https://github.com/giuleon.png", "id": "github:giuleon", "count": 10 }, { "name": "Russell Gove", "account": "russgove", "avatar": "https://github.com/russgove.png", "id": "github:russgove", "count": 10 }, { "name": "Sandeep P S", "account": "sandeep-fed", "avatar": "https://github.com/sandeep-fed.png", "id": "github:sandeep-fed", "count": 10 }, { "name": "Derek Cash-Peterson", "account": "dcashpeterson", "avatar": "https://github.com/dcashpeterson.png", "id": "github:dcashpeterson", "count": 9 }, { "name": "Guido Zambarda", "account": "guidozam", "avatar": "https://github.com/GuidoZam.png", "id": "github:guidozam", "count": 9 }, { "name": "Joel Rodrigues", "account": "joelfmrodrigues", "avatar": "https://github.com/joelfmrodrigues.png", "id": "github:joelfmrodrigues", "count": 9 }, { "name": "NIshkalank Bezawada (MVP)", "account": "nishkalankbezawada", "avatar": "https://github.com/NishkalankBezawada.png", "id": "github:nishkalankbezawada", "count": 9 }, { "name": "Dan Toft (Code Reviews)", "account": "tanddant", "avatar": "https://github.com/Tanddant.png", "id": "github:tanddant", "count": 9 }, { "name": "Adam Wójcik", "account": "adam-it", "avatar": "https://github.com/Adam-it.png", "id": "github:adam-it", "count": 8 }, { "name": "Kunj Sangani", "account": "kunj-sangani", "avatar": "https://github.com/kunj-sangani.png", "id": "github:kunj-sangani", "count": 8 }, { "name": "Patrick Rodgers", "account": "patrick-rodgers", "avatar": "https://github.com/patrick-rodgers.png", "id": "github:patrick-rodgers", "count": 8 }, { "name": "Zach Roberts", "account": "zachroberts8668", "avatar": "https://github.com/zachroberts8668.png", "id": "github:zachroberts8668", "count": 8 }, { "name": "Aakash Bhardwaj", "account": "aakashbhardwaj619", "avatar": "https://github.com/aakashbhardwaj619.png", "id": "github:aakashbhardwaj619", "count": 7 }, { "name": "Marcin Wojciechowski", "account": "mgwojciech", "avatar": "https://github.com/mgwojciech.png", "id": "github:mgwojciech", "count": 7 }, { "name": "Markus Moeller", "account": "mmsharepoint", "avatar": "https://github.com/mmsharepoint.png", "id": "github:mmsharepoint", "count": 7 }, { "name": "Stefan Bauer", "account": "stfbauer", "avatar": "https://github.com/StfBauer.png", "id": "github:stfbauer", "count": 7 }, { "name": "Nick Brown", "account": "techienickb", "avatar": "https://github.com/techienickb.png", "id": "github:techienickb", "count": 7 }, { "name": "Federico Porceddu", "account": "fredupstair", "avatar": "https://github.com/fredupstair.png", "id": "github:fredupstair", "count": 6 }, { "name": "Marc André Schröder-Zhou", "account": "maschroeder-z", "avatar": "https://github.com/maschroeder-z.png", "id": "github:maschroeder-z", "count": 6 }, { "name": "David Warner II", "account": "popwarner", "avatar": "https://avatars.githubusercontent.com/u/10676147?s=460&u=9e4e74223c4ffb430fb77c97892a84b286df1921&v=4", "id": "github:popwarner", "count": 6 }, { "name": "Chris Kent", "account": "thechriskent", "avatar": "https://avatars.githubusercontent.com/u/8364109?s=460&v=4", "id": "github:thechriskent", "count": 6 }, { "name": "Mikael Svenson", "account": "wobba", "avatar": "https://github.com/wobba.png", "id": "github:wobba", "count": 6 }, { "name": "André Lage", "account": "aaclage", "avatar": "https://github.com/aaclage.png", "id": "github:aaclage", "count": 5 }, { "name": "Ahmad Jad Alhak", "account": "ahmad-jad-alhak", "avatar": "https://github.com/ahmad-jad-alhak.png", "id": "github:ahmad-jad-alhak", "count": 5 }, { "name": "Harsha Vardhini", "account": "harshagracy", "avatar": "https://github.com/Harshagracy.png", "id": "github:harshagracy", "count": 5 }, { "name": "Jethro Seghers", "account": "jesegher", "avatar": "https://github.com/jesegher.png", "id": "github:jesegher", "count": 5 }, { "name": "Mohammad Amer", "account": "mohammadamer", "avatar": "https://github.com/mohammadamer.png", "id": "github:mohammadamer", "count": 5 }, { "name": "Ravi Kulkarni", "account": "ravi16a87", "avatar": "https://github.com/ravi16a87.png", "id": "github:ravi16a87", "count": 5 }, { "name": "Saurabh Tripathi", "account": "saurabh7019", "avatar": "https://github.com/Saurabh7019.png", "id": "github:saurabh7019", "count": 5 }, { "name": "Sébastien Levert", "account": "sebastienlevert", "avatar": "https://github.com/sebastienlevert.png", "id": "github:sebastienlevert", "count": 5 }, { "name": "Smita Nachan", "account": "smitanachan", "avatar": "https://github.com/SmitaNachan.png", "id": "github:smitanachan", "count": 5 }, { "name": "Andrew Connell", "account": "andrewconnell", "avatar": "https://github.com/andrewconnell.png", "id": "github:andrewconnell", "count": 4 }, { "name": "Beau Cameron", "account": "bcameron1231", "avatar": "https://avatars.githubusercontent.com/u/7944457?s=460&u=cbea276e0125f71a183f8ad94475dbd1984c6afa&v=4", "id": "github:bcameron1231", "count": 4 }, { "name": "David Hartman", "account": "davidhartman", "avatar": "https://avatars.githubusercontent.com/u/11304394?s=460&v=4", "id": "github:davidhartman", "count": 4 }, { "name": "Qiong Wu", "account": "dingmaomaobjtu", "avatar": "https://github.com/DingmaomaoBJTU.png", "id": "github:dingmaomaobjtu", "count": 4 }, { "name": "Dipen Shah", "account": "dips365", "avatar": "https://github.com/dips365.png", "id": "github:dips365", "count": 4 }, { "name": "Elio Struyf", "account": "estruyf", "avatar": "https://github.com/estruyf.png", "id": "github:estruyf", "count": 4 }, { "name": "Fabio Franzini", "account": "fabiofranzini", "avatar": "https://github.com/fabiofranzini.png", "id": "github:fabiofranzini", "count": 4 }, { "name": "Franck Cornu", "account": "franckyc", "avatar": "https://github.com/FranckyC.png", "id": "github:franckyc", "count": 4 }, { "name": "Jose Quinto", "account": "jquintozamora", "avatar": "https://github.com/jquintozamora.png", "id": "github:jquintozamora", "count": 4 }, { "name": "Joao Livio", "account": "jtlivio", "avatar": "https://github.com/jtlivio.png", "id": "github:jtlivio", "count": 4 }, { "name": "Julie Turner", "account": "juliemturner", "avatar": "https://github.com/juliemturner.png", "id": "github:juliemturner", "count": 4 }, { "name": "Takashi Shinohara", "account": "karamem0", "avatar": "https://github.com/karamem0.png", "id": "github:karamem0", "count": 4 }, { "name": "Christophe Humbert", "account": "pathtosharepoint", "avatar": "https://github.com/PathToSharePoint.png", "id": "github:pathtosharepoint", "count": 4 }, { "name": "Arun Kumar Perumal", "account": "arunkumarperumal", "avatar": "https://github.com/arunkumarperumal.png", "id": "github:arunkumarperumal", "count": 3 }, { "name": "Austin Breslin", "account": "austinbreslindev", "avatar": "https://avatars.githubusercontent.com/u/10480670?s=460&v=4", "id": "github:austinbreslindev", "count": 3 }, { "name": "Bob German", "account": "bobgerman", "avatar": "https://avatars.githubusercontent.com/u/4664072?s=460&u=29310fd67417ec5f81dc8881dc6eb5dc0065da2d&v=4", "id": "github:bobgerman", "count": 3 }, { "name": "Chakkaradeep Chandran", "account": "chakkaradeep", "avatar": "https://avatars.githubusercontent.com/u/7882052?s=460&u=92d546edfe1e1b374c69f0fd9315186eea700b8f&v=4", "id": "github:chakkaradeep", "count": 3 }, { "name": "Fredrik Thorild", "account": "fthorild", "avatar": "https://github.com/fthorild.png", "id": "github:fthorild", "count": 3 }, { "name": "Gautam Sheth", "account": "gautamdsheth", "avatar": "https://github.com/gautamdsheth.png", "id": "github:gautamdsheth", "count": 3 }, { "name": "Azores", "account": "gretchunkim", "avatar": "https://github.com/gretchunkim.png", "id": "github:gretchunkim", "count": 3 }, { "name": "Jerry Yasir", "account": "jerryyasir", "avatar": "https://github.com/jerryyasir.png", "id": "github:jerryyasir", "count": 3 }, { "name": "Martin Lingstuyl", "account": "martinlingstuyl", "avatar": "https://github.com/martinlingstuyl.png", "id": "github:martinlingstuyl", "count": 3 }, { "name": "Nico De Cleyre", "account": "nicodecleyre", "avatar": "https://github.com/nicodecleyre.png", "id": "github:nicodecleyre", "count": 3 }, { "name": "Sergei Sergeev", "account": "s-kainet", "avatar": "https://github.com/s-KaiNet.png", "id": "github:s-kainet", "count": 3 }, { "name": "Simon Ågren", "account": "simonagren", "avatar": "https://github.com/simonagren.png", "id": "github:simonagren", "count": 3 }, { "name": "Bill Ayers", "account": "spdoctor", "avatar": "https://avatars.githubusercontent.com/u/10207194?s=460&v=4", "id": "github:spdoctor", "count": 3 }, { "name": "Swaminathan Sriram", "account": "swaminathan-sriram", "avatar": "https://github.com/Swaminathan-Sriram.png", "id": "github:swaminathan-sriram", "count": 3 }, { "name": "Tobias Maestrini", "account": "tmaestrini", "avatar": "https://github.com/tmaestrini.png", "id": "github:tmaestrini", "count": 3 }, { "name": "Vipul Kelkar", "account": "vipulkelkar", "avatar": "https://github.com/vipulkelkar.png", "id": "github:vipulkelkar", "count": 3 }, { "name": "Vardhaman Deshpande", "account": "vman", "avatar": "https://github.com/vman.png", "id": "github:vman", "count": 3 }, { "name": "Yves Habersaat", "account": "yhabersaat", "avatar": "https://github.com/yhabersaat.png", "id": "github:yhabersaat", "count": 3 }, { "name": "Adrián Díaz", "account": "adriandiaz81", "avatar": "https://github.com/AdrianDiaz81.png", "id": "github:adriandiaz81", "count": 2 }, { "name": "Robin Agten", "account": "agtenr", "avatar": "https://github.com/agtenr.png", "id": "github:agtenr", "count": 2 }, { "name": "Alberto Gutierrez perez", "account": "albegut", "avatar": "https://github.com/albegut.png", "id": "github:albegut", "count": 2 }, { "name": "Anand Vijayaragavan", "account": "anandragav", "avatar": "https://github.com/anandragav.png", "id": "github:anandragav", "count": 2 }, { "name": "Arijit Mondal", "account": "arijitcloud", "avatar": "https://github.com/ArijitCloud.png", "id": "github:arijitcloud", "count": 2 }, { "name": "Vincent Biret", "account": "baywet", "avatar": "https://github.com/baywet.png", "id": "github:baywet", "count": 2 }, { "name": "Bo George", "account": "bogeorge", "avatar": "https://avatars.githubusercontent.com/u/10885472?s=460&u=74d23f4289cd555aa530e1c2c6156a382c373f2f&v=4", "id": "github:bogeorge", "count": 2 }, { "name": "Clavin Fernandes", "account": "cfernandes-muhimbi", "avatar": "https://github.com/cfernandes-muhimbi.png", "id": "github:cfernandes-muhimbi", "count": 2 }, { "name": "Chandani Prajapati", "account": "chandaniprajapati", "avatar": "https://github.com/chandaniprajapati.png", "id": "github:chandaniprajapati", "count": 2 }, { "name": "Mohamed Derhalli", "account": "derhallim", "avatar": "https://github.com/derhallim.png", "id": "github:derhallim", "count": 2 }, { "name": "Don Kirkham", "account": "donkirkham", "avatar": "https://avatars.githubusercontent.com/u/8630351?s=460&u=669abb2aac55f383a318d3ca6b1cb13467cada59&v=4", "id": "github:donkirkham", "count": 2 }, { "name": "David Ramalho", "account": "dramalho92", "avatar": "https://github.com/DRamalho92.png", "id": "github:dramalho92", "count": 2 }, { "name": "Eli H. Schei", "account": "eli-schei", "avatar": "https://github.com/Eli-Schei.png", "id": "github:eli-schei", "count": 2 }, { "name": "Vijay Kumar G", "account": "gvijaikumar9", "avatar": "https://github.com/gvijaikumar9.png", "id": "github:gvijaikumar9", "count": 2 }, { "name": "Jeremy Coleman", "account": "jcoleman-pcprofessional", "avatar": "https://github.com/jcoleman-pcprofessional.png", "id": "github:jcoleman-pcprofessional", "count": 2 }, { "name": "João Ferreira", "account": "joaoferreira", "avatar": "https://github.com/joaoferreira.png", "id": "github:joaoferreira", "count": 2 }, { "name": "Jasey Waegebaert", "account": "jwaegebaert", "avatar": "https://github.com/Jwaegebaert.png", "id": "github:jwaegebaert", "count": 2 }, { "name": "Kinga Kazala", "account": "kkazala", "avatar": "https://github.com/kkazala.png", "id": "github:kkazala", "count": 2 }, { "name": "Kevin Mees", "account": "kmees", "avatar": "https://github.com/kmees.png", "id": "github:kmees", "count": 2 }, { "name": "Luis Valencia", "account": "levalencia", "avatar": "https://github.com/levalencia.png", "id": "github:levalencia", "count": 2 }, { "name": "Mike Zimmerman", "account": "mikezimm", "avatar": "https://github.com/mikezimm.png", "id": "github:mikezimm", "count": 2 }, { "name": "Michał Romiszewski", "account": "mromiszewski", "avatar": "https://github.com/mromiszewski.png", "id": "github:mromiszewski", "count": 2 }, { "name": "Soumit Mukherjee", "account": "msoumit", "avatar": "https://github.com/msoumit.png", "id": "github:msoumit", "count": 2 }, { "name": "Omar El-Anis", "account": "omarelanis", "avatar": "https://github.com/omarelanis.png", "id": "github:omarelanis", "count": 2 }, { "name": "Elliot Margot", "account": "ownoptic", "avatar": "https://github.com/OwnOptic.png", "id": "github:ownoptic", "count": 2 }, { "name": "Rabia Williams", "account": "rabwill", "avatar": "https://github.com/rabwill.png", "id": "github:rabwill", "count": 2 }, { "name": "Rahul Suryawanshi", "account": "rahulsuryawanshi", "avatar": "https://github.com/rahulsuryawanshi.png", "id": "github:rahulsuryawanshi", "count": 2 }, { "name": "Ramakrishnan Raman", "account": "ramakrishnan24689", "avatar": "https://github.com/Ramakrishnan24689.png", "id": "github:ramakrishnan24689", "count": 2 }, { "name": "Ram Prasad Meenavalli", "account": "ramprasadmeenavalli", "avatar": "https://github.com/RamPrasadMeenavalli.png", "id": "github:ramprasadmeenavalli", "count": 2 }, { "name": "Ravi Chandra", "account": "ravikadri", "avatar": "https://github.com/Ravikadri.png", "id": "github:ravikadri", "count": 2 }, { "name": "Alison Collins", "account": "reactintern", "avatar": "https://github.com/ReactIntern.png", "id": "github:reactintern", "count": 2 }, { "name": "Reshmee Auckloo", "account": "reshmee011", "avatar": "https://github.com/reshmee011.png", "id": "github:reshmee011", "count": 2 }, { "name": "Rishabh Shukla", "account": "rishabhshukla12", "avatar": "https://github.com/rishabhshukla12.png", "id": "github:rishabhshukla12", "count": 2 }, { "name": "Serdar Ketenci", "account": "serdarketenci", "avatar": "https://github.com/serdarketenci.png", "id": "github:serdarketenci", "count": 2 }, { "name": "Ryan Schouten", "account": "sharepointknight", "avatar": "https://github.com/sharepointknight.png", "id": "github:sharepointknight", "count": 2 }, { "name": "Eric Skaggs", "account": "skaggej", "avatar": "https://github.com/skaggej.png", "id": "github:skaggej", "count": 2 }, { "name": "Sajal Maity", "account": "smaity", "avatar": "https://github.com/smaity.png", "id": "github:smaity", "count": 2 }, { "name": "Soumyadeep Mukherjee", "account": "soumyadeep2207", "avatar": "https://github.com/soumyadeep2207.png", "id": "github:soumyadeep2207", "count": 2 }, { "name": "Sergej Schwabauer", "account": "spfxappdev", "avatar": "https://github.com/SPFxAppDev.png", "id": "github:spfxappdev", "count": 2 }, { "name": "Stephan Bisser", "account": "stephanbisser", "avatar": "https://github.com/stephanbisser.png", "id": "github:stephanbisser", "count": 2 }, { "name": "tvahk", "account": "tvahk", "avatar": "https://github.com/tvahk.png", "id": "github:tvahk", "count": 2 }, { "name": "Xiao Li", "account": "xiao-lix", "avatar": "https://github.com/xiao-lix.png", "id": "github:xiao-lix", "count": 2 }, { "name": "Sourav Paul", "account": "xlr8-0", "avatar": "https://github.com/XLR8-0.png", "id": "github:xlr8-0", "count": 2 }, { "name": "Michele Catena", "account": "10xmike", "avatar": "https://github.com/10xMike.png", "id": "github:10xmike", "count": 1 }, { "name": "Sven Sieverding", "account": "365knoten", "avatar": "https://github.com/365knoten.png", "id": "github:365knoten", "count": 1 }, { "name": "Lukas Bänsch", "account": "7l0uk", "avatar": "https://github.com/7l0uk.png", "id": "github:7l0uk", "count": 1 }, { "name": "Antonio Villarruel", "account": "a-villarruel", "avatar": "https://github.com/a-villarruel.png", "id": "github:a-villarruel", "count": 1 }, { "name": "Abhishek Garg", "account": "abhishekgarg", "avatar": "https://avatars.githubusercontent.com/u/5449154?s=400&v=4", "id": "github:abhishekgarg", "count": 1 }, { "name": "Alec Tecson", "account": "alecwantstobattle", "avatar": "https://github.com/alecwantstobattle.png", "id": "github:alecwantstobattle", "count": 1 }, { "name": "Alessia De Martino", "account": "alessiademartino", "avatar": "https://github.com/AlessiaDeMartino.png", "id": "github:alessiademartino", "count": 1 }, { "name": "Anthony Hopkins", "account": "anthonyrhopkins", "avatar": "https://github.com/anthonyrhopkins.png", "id": "github:anthonyrhopkins", "count": 1 }, { "name": "Arjun U Menon", "account": "arjunumenon", "avatar": "https://github.com/arjunumenon.png", "id": "github:arjunumenon", "count": 1 }, { "name": "Ashok Swain", "account": "ashokswain7", "avatar": "https://avatars.githubusercontent.com/u/26612087?s=460&v=4", "id": "github:ashokswain7", "count": 1 }, { "name": "Antanina Druzhkina", "account": "ateina", "avatar": "https://github.com/Ateina.png", "id": "github:ateina", "count": 1 }, { "name": "Babak Danyal", "account": "babakdanyal", "avatar": "https://github.com/babakdanyal.png", "id": "github:babakdanyal", "count": 1 }, { "name": "Bill Brockbank", "account": "billbrockbank", "avatar": "https://github.com/billbrockbank.png", "id": "github:billbrockbank", "count": 1 }, { "name": "Jonathan Adcox", "account": "blayderunner123", "avatar": "https://github.com/blayderunner123.png", "id": "github:blayderunner123", "count": 1 }, { "name": "joshua", "account": "brayjosh", "avatar": "https://github.com/brayjosh.png", "id": "github:brayjosh", "count": 1 }, { "name": "Brian McCullough", "account": "brianpmccullough", "avatar": "https://github.com/brianpmccullough.png", "id": "github:brianpmccullough", "count": 1 }, { "name": "Ravi Kumar Bomma", "account": "brk114", "avatar": "https://github.com/brk114.png", "id": "github:brk114", "count": 1 }, { "name": "Brad Schlintz", "account": "bschlintz", "avatar": "https://github.com/bschlintz.png", "id": "github:bschlintz", "count": 1 }, { "name": "Lew Chin Hoong", "account": "chinhoonglew", "avatar": "https://github.com/ChinHoongLew.png", "id": "github:chinhoonglew", "count": 1 }, { "name": "Chris Lizon", "account": "chrislizon", "avatar": "https://github.com/ChrisLizon.png", "id": "github:chrislizon", "count": 1 }, { "name": "Dan Turley", "account": "d-turley", "avatar": "https://github.com/d-turley.png", "id": "github:d-turley", "count": 1 }, { "name": "Daniel Brown", "account": "danielbrownag", "avatar": "https://github.com/DanielBrownAG.png", "id": "github:danielbrownag", "count": 1 }, { "name": "Daniel Watford", "account": "danwatford", "avatar": "https://avatars.githubusercontent.com/u/5949502?s=460&u=01688c475aa5c94da6a292473ff80ffe1a7975cb&v=4", "id": "github:danwatford", "count": 1 }, { "name": "Dany Wyss", "account": "danywyss", "avatar": "https://github.com/DanyWyss.png", "id": "github:danywyss", "count": 1 }, { "name": "Daniel Gaeta", "account": "dgaeta", "avatar": "https://avatars.githubusercontent.com/u/1770329?s=460&v=4", "id": "github:dgaeta", "count": 1 }, { "name": "Dhananjay Pant", "account": "dhananjay-12", "avatar": "https://github.com/Dhananjay-12.png", "id": "github:dhananjay-12", "count": 1 }, { "name": "Dhaval Shah", "account": "dhavalshah01", "avatar": "https://avatars.githubusercontent.com/u/13947393?s=460&u=38d18e840d22f5567d508027515c728025bae8cb&v=4", "id": "github:dhavalshah01", "count": 1 }, { "name": "dhiabedoui", "account": "dhiabedoui", "avatar": "https://github.com/dhiabedoui.png", "id": "github:dhiabedoui", "count": 1 }, { "name": "Diksha Bhura", "account": "diksha-bhura", "avatar": "https://github.com/Diksha-Bhura.png", "id": "github:diksha-bhura", "count": 1 }, { "name": "Dimcho Tsanov", "account": "dimchotsanov", "avatar": "https://avatars.githubusercontent.com/u/9058087?s=460&u=43820d97a5aaf5719a4c98be59c673fb460f0001&v=4", "id": "github:dimchotsanov", "count": 1 }, { "name": "Atish Kumar Dipongkor", "account": "dipongkor", "avatar": "https://github.com/dipongkor.png", "id": "github:dipongkor", "count": 1 }, { "name": "Divya Akula", "account": "divya-akula", "avatar": "https://github.com/divya-akula.png", "id": "github:divya-akula", "count": 1 }, { "name": "Divyanshu Barania", "account": "divyanshubarania", "avatar": "https://github.com/divyanshubarania.png", "id": "github:divyanshubarania", "count": 1 }, { "name": "Kalle Mansikkaniemi", "account": "djsladi", "avatar": "https://github.com/djsladi.png", "id": "github:djsladi", "count": 1 }, { "name": "Dmitry Vorobyov", "account": "dmitryvorobyov", "avatar": "https://github.com/DmitryVorobyov.png", "id": "github:dmitryvorobyov", "count": 1 }, { "name": "Erik Benke", "account": "ejbenke", "avatar": "https://github.com/ejbenke.png", "id": "github:ejbenke", "count": 1 }, { "name": "Eric Scherlinger", "account": "ericsche", "avatar": "https://github.com/ericsche.png", "id": "github:ericsche", "count": 1 }, { "name": "Felix Bohnacker", "account": "felixbohnacker", "avatar": "https://github.com/felixbohnacker.png", "id": "github:felixbohnacker", "count": 1 }, { "name": "Linda K", "account": "flowerbot", "avatar": "https://github.com/flowerbot.png", "id": "github:flowerbot", "count": 1 }, { "name": "Garry Trinder", "account": "garrytrinder", "avatar": "https://github.com/garrytrinder.png", "id": "github:garrytrinder", "count": 1 }, { "name": "Gary Pretty", "account": "garypretty", "avatar": "https://github.com/garypretty.png", "id": "github:garypretty", "count": 1 }, { "name": "Gaurav Goyal", "account": "gauravgoyal5", "avatar": "https://github.com/gauravgoyal5.png", "id": "github:gauravgoyal5", "count": 1 }, { "name": "Guillaume Sellier", "account": "gsellier", "avatar": "https://github.com/GSellier.png", "id": "github:gsellier", "count": 1 }, { "name": "Harsh Bhavsar", "account": "harsh24491", "avatar": "https://github.com/Harsh24491.png", "id": "github:harsh24491", "count": 1 }, { "name": "Niklas Wilhelm", "account": "ictniklaswilhelm", "avatar": "https://github.com/ICTNiklasWilhelm.png", "id": "github:ictniklaswilhelm", "count": 1 }, { "name": "Jack Vinitsky", "account": "jack-vinitsky", "avatar": "https://github.com/jack-vinitsky.png", "id": "github:jack-vinitsky", "count": 1 }, { "name": "Bert Jansen", "account": "jansenbe", "avatar": "https://github.com/jansenbe.png", "id": "github:jansenbe", "count": 1 }, { "name": "Jayakumar Balasubramaniam", "account": "jayakumarb", "avatar": "https://github.com/JayakumarB.png", "id": "github:jayakumarb", "count": 1 }, { "name": "Jeffin Jacob", "account": "jeffinjacob", "avatar": "https://github.com/jeffinjacob.png", "id": "github:jeffinjacob", "count": 1 }, { "name": "Jeppe Spanggaard", "account": "jeppesc11", "avatar": "https://github.com/jeppesc11.png", "id": "github:jeppesc11", "count": 1 }, { "name": "Jonas Bjerke Hansen", "account": "jonasbjerke89", "avatar": "https://github.com/JonasBjerke89.png", "id": "github:jonasbjerke89", "count": 1 }, { "name": "Emanuele Bartolesi", "account": "kasuken", "avatar": "https://github.com/kasuken.png", "id": "github:kasuken", "count": 1 }, { "name": "Kemal Sinanagic", "account": "kemicza", "avatar": "https://github.com/KEMiCZA.png", "id": "github:kemicza", "count": 1 }, { "name": "Andrew Koltyakov", "account": "koltyakov", "avatar": "https://avatars.githubusercontent.com/u/7816483?s=460&u=d77bbdeda1e5fc389b11899f93b62a7d00475835&v=4", "id": "github:koltyakov", "count": 1 }, { "name": "Lauri Koskimies", "account": "koskimiesl", "avatar": "https://github.com/koskimiesl.png", "id": "github:koskimiesl", "count": 1 }, { "name": "Kurt Rolland", "account": "kurt-rolland", "avatar": "https://github.com/kurt-rolland.png", "id": "github:kurt-rolland", "count": 1 }, { "name": "Laura Kokkarinen", "account": "laurakokkarinen", "avatar": "https://github.com/LauraKokkarinen.png", "id": "github:laurakokkarinen", "count": 1 }, { "name": "Luise Freese", "account": "luisefreese", "avatar": "https://github.com/LuiseFreese.png", "id": "github:luisefreese", "count": 1 }, { "name": "Mohammad Mahyar Pourabdollah Khadar", "account": "mahyar915", "avatar": "https://github.com/Mahyar915.png", "id": "github:mahyar915", "count": 1 }, { "name": "Marcus Castro", "account": "marcus-castro-sp", "avatar": "https://github.com/marcus-castro-sp.png", "id": "github:marcus-castro-sp", "count": 1 }, { "name": "Martin Hatch", "account": "martinhatch", "avatar": "https://github.com/MartinHatch.png", "id": "github:martinhatch", "count": 1 }, { "name": "Mai Mostafa", "account": "maya-mostafa", "avatar": "https://github.com/Maya-Mostafa.png", "id": "github:maya-mostafa", "count": 1 }, { "name": "Mike Homol", "account": "mhomol", "avatar": "https://github.com/mhomol.png", "id": "github:mhomol", "count": 1 }, { "name": "Michaël Maillot", "account": "michaelmaillot", "avatar": "https://github.com/michaelmaillot.png", "id": "github:michaelmaillot", "count": 1 }, { "name": "Milan Holemans", "account": "milanholemans", "avatar": "https://github.com/milanholemans.png", "id": "github:milanholemans", "count": 1 }, { "name": "Matt Jimison", "account": "mjimison", "avatar": "https://github.com/mjimison.png", "id": "github:mjimison", "count": 1 }, { "name": "Michał Kornet", "account": "mkm17", "avatar": "https://github.com/mkm17.png", "id": "github:mkm17", "count": 1 }, { "name": "Maycon de Novaes Batista", "account": "mnbatista", "avatar": "https://github.com/mnbatista.png", "id": "github:mnbatista", "count": 1 }, { "name": "Matti Paukkonen", "account": "mpaukkon", "avatar": "https://github.com/mpaukkon.png", "id": "github:mpaukkon", "count": 1 }, { "name": "mrkhandev", "account": "mrkhandev", "avatar": "https://github.com/mrkhandev.png", "id": "github:mrkhandev", "count": 1 }, { "name": "Malathi Sekkappan", "account": "msekkappan", "avatar": "https://github.com/msekkappan.png", "id": "github:msekkappan", "count": 1 }, { "name": "Rodrigo Silva", "account": "na", "avatar": "https://github.com/RodrigoSilva.png", "id": "github:na", "count": 1 }, { "name": "Nader Hadjebi", "account": "naderhadjebi", "avatar": "https://github.com/NaderHadjebi.png", "id": "github:naderhadjebi", "count": 1 }, { "name": "Neil Barkhina", "account": "nbarkhina", "avatar": "https://github.com/nbarkhina.png", "id": "github:nbarkhina", "count": 1 }, { "name": "nemortu", "account": "nemortu", "avatar": "https://github.com/nemortu.png", "id": "github:nemortu", "count": 1 }, { "name": "Alexandr Abdulca", "account": "niacrisss", "avatar": "https://github.com/Niacrisss.png", "id": "github:niacrisss", "count": 1 }, { "name": "Oleg Rumiancev", "account": "olegrumiancev", "avatar": "https://github.com/olegrumiancev.png", "id": "github:olegrumiancev", "count": 1 }, { "name": "Olivier Carpentier", "account": "oliviercc", "avatar": "https://github.com/OlivierCC.png", "id": "github:oliviercc", "count": 1 }, { "name": "Paul Ryan", "account": "paulryan", "avatar": "https://github.com/paulryan.png", "id": "github:paulryan", "count": 1 }, { "name": "Passoli Mirko", "account": "paxol", "avatar": "https://github.com/Paxol.png", "id": "github:paxol", "count": 1 }, { "name": "Perry Kankam", "account": "perr124", "avatar": "https://github.com/perr124.png", "id": "github:perr124", "count": 1 }, { "name": "Pieter Heemeryck", "account": "pieterheemeryck", "avatar": "https://github.com/PieterHeemeryck.png", "id": "github:pieterheemeryck", "count": 1 }, { "name": "Paul Matthews", "account": "pmatthews05", "avatar": "https://github.com/pmatthews05.png", "id": "github:pmatthews05", "count": 1 }, { "name": "Microsoft 365 & Power Platform Community", "account": "pnp", "avatar": "https://github.com/pnp.png", "id": "github:pnp", "count": 1 }, { "name": "Paul Schaeflein", "account": "pschaeflein", "avatar": "https://github.com/pschaeflein.png", "id": "github:pschaeflein", "count": 1 }, { "name": "Ramin Ahmadi", "account": "ramin-ahmadi", "avatar": "https://github.com/ramin-ahmadi.png", "id": "github:ramin-ahmadi", "count": 1 }, { "name": "Ravichandran Krishnasamy", "account": "ravichandran-blog", "avatar": "https://github.com/ravichandran-blog.png", "id": "github:ravichandran-blog", "count": 1 }, { "name": "Renato Romão", "account": "renatoromao", "avatar": "https://github.com/renatoromao.png", "id": "github:renatoromao", "count": 1 }, { "name": "Robert Schouten", "account": "rfjschouten", "avatar": "https://github.com/rfjschouten.png", "id": "github:rfjschouten", "count": 1 }, { "name": "Rajesh Sitaraman", "account": "rjesh-git", "avatar": "https://github.com/rjesh-git.png", "id": "github:rjesh-git", "count": 1 }, { "name": "Robin Meure", "account": "robinmeure", "avatar": "https://github.com/robinmeure.png", "id": "github:robinmeure", "count": 1 }, { "name": "Roland Oldengarm", "account": "roldengarm", "avatar": "https://github.com/roldengarm.png", "id": "github:roldengarm", "count": 1 }, { "name": "ruslan-s", "account": "ruslan-s", "avatar": "https://github.com/ruslan-s.png", "id": "github:ruslan-s", "count": 1 }, { "name": "Rick Wenz", "account": "rwenz02", "avatar": "https://github.com/rwenz02.png", "id": "github:rwenz02", "count": 1 }, { "name": "salascz", "account": "salascz", "avatar": "https://github.com/salascz.png", "id": "github:salascz", "count": 1 }, { "name": "Sam Collins", "account": "samc148", "avatar": "https://github.com/SamC148.png", "id": "github:samc148", "count": 1 }, { "name": "Sandeep Unnikrishnan", "account": "sandeepdev365", "avatar": "https://github.com/SandeepDev365.png", "id": "github:sandeepdev365", "count": 1 }, { "name": "Saulo Oliveira", "account": "sauslash", "avatar": "https://github.com/sauslash.png", "id": "github:sauslash", "count": 1 }, { "name": "Simon Doy", "account": "simondoy", "avatar": "https://github.com/simondoy.png", "id": "github:simondoy", "count": 1 }, { "name": "SlowRobot", "account": "slowrobot", "avatar": "https://github.com/SlowRobot.png", "id": "github:slowrobot", "count": 1 }, { "name": "David Opdendries", "account": "spdavid", "avatar": "https://github.com/spdavid.png", "id": "github:spdavid", "count": 1 }, { "name": "Simon-Pierre Plante", "account": "spplante", "avatar": "https://github.com/spplante.png", "id": "github:spplante", "count": 1 }, { "name": "Matteo Serpi", "account": "srpmtt", "avatar": "https://github.com/srpmtt.png", "id": "github:srpmtt", "count": 1 }, { "name": "Sudhir Rawat", "account": "sudhir007rawat", "avatar": "https://github.com/sudhir007rawat.png", "id": "github:sudhir007rawat", "count": 1 }, { "name": "Swami Nawale", "account": "swaminawale", "avatar": "https://github.com/swaminawale.png", "id": "github:swaminawale", "count": 1 }, { "name": "Sympraxis Consulting", "account": "sympraxisconsulting", "avatar": "https://github.com/SympraxisConsulting.png", "id": "github:sympraxisconsulting", "count": 1 }, { "name": "Todd Baginski", "account": "tbag", "avatar": "https://github.com/TBag.png", "id": "github:tbag", "count": 1 }, { "name": "Mike Myers", "account": "thespooler", "avatar": "https://github.com/thespooler.png", "id": "github:thespooler", "count": 1 }, { "name": "Thomas Daly", "account": "tom-daly", "avatar": "https://github.com/tom-daly.png", "id": "github:tom-daly", "count": 1 }, { "name": "Tristian O'brien", "account": "tristian2", "avatar": "https://github.com/tristian2.png", "id": "github:tristian2", "count": 1 }, { "name": "Venkadesh Sundaramurthy", "account": "venkadeshsundaramurthy", "avatar": "https://github.com/VenkadeshSundaramurthy.png", "id": "github:venkadeshsundaramurthy", "count": 1 }, { "name": "Vivek Chand", "account": "vivekrajput20", "avatar": "https://github.com/Vivekrajput20.png", "id": "github:vivekrajput20", "count": 1 }, { "name": "Daniel Westerdale", "account": "westerdaled", "avatar": "https://avatars.githubusercontent.com/u/937208?s=460&v=4", "id": "github:westerdaled", "count": 1 }, { "name": "Sergey Shiroky", "account": "wideserg", "avatar": "https://github.com/wideserg.png", "id": "github:wideserg", "count": 1 }, { "name": "W. Kevin Wolff", "account": "wkwolff", "avatar": "https://github.com/wkwolff.png", "id": "github:wkwolff", "count": 1 }, { "name": "Yannick Reekmans", "account": "yannickre", "avatar": "https://github.com/YannickRe.png", "id": "github:yannickre", "count": 1 }, { "name": "Davide Mauri", "account": "yorek", "avatar": "https://github.com/yorek.png", "id": "github:yorek", "count": 1 }, { "name": "AOAI SDK", "account": null, "avatar": "https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/openai/openai.png", "id": "name:ae4abfb8254d2aa34bbc5ad5d6baba8aba3e11eed56efb8d6c8ce56bb2aadb80", "count": 1 } ], "facets": { "experiences": [ { "value": "Copilot", "label": "Copilot", "count": 48 }, { "value": "Teams", "label": "Teams", "count": 234 }, { "value": "Connections", "label": "Connections", "count": 105 }, { "value": "SharePoint", "label": "SharePoint", "count": 666 } ], "types": [ { "value": "Adaptive Card Extension", "label": "Adaptive Card Extension", "count": 105 }, { "value": "Application customizer", "label": "Application customizer", "count": 75 }, { "value": "Copilot component", "label": "Copilot component", "count": 48 }, { "value": "Extension (unclassified)", "label": "Extension (unclassified)", "count": 4 }, { "value": "Field customizer", "label": "Field customizer", "count": 15 }, { "value": "Form customizer", "label": "Form customizer", "count": 5 }, { "value": "Library component", "label": "Library component", "count": 4 }, { "value": "ListView command set", "label": "ListView command set", "count": 56 }, { "value": "Reference scenario", "label": "Reference scenario", "count": 21 }, { "value": "Teams tab", "label": "Teams tab", "count": 229 }, { "value": "Web part", "label": "Web part", "count": 508 } ], "technologies": [ { "value": "Angular", "label": "Angular", "count": 13 }, { "value": "JavaScript", "label": "JavaScript", "count": 51 }, { "value": "jQuery", "label": "jQuery", "count": 7 }, { "value": "Knockout", "label": "Knockout", "count": 3 }, { "value": "Other", "label": "Other", "count": 2 }, { "value": "React", "label": "React", "count": 692 }, { "value": "TypeScript", "label": "TypeScript", "count": 23 }, { "value": "Vue.js", "label": "Vue.js", "count": 2 } ], "versions": [ { "value": "1.24", "label": "1.24", "count": 49 }, { "value": "1.23", "label": "1.23", "count": 25 }, { "value": "1.22", "label": "1.22", "count": 26 }, { "value": "1.21", "label": "1.21", "count": 88 }, { "value": "1.20", "label": "1.20", "count": 88 }, { "value": "1.19", "label": "1.19", "count": 6 }, { "value": "1.18", "label": "1.18", "count": 39 }, { "value": "1.17", "label": "1.17", "count": 22 }, { "value": "1.16", "label": "1.16", "count": 34 }, { "value": "1.15", "label": "1.15", "count": 31 }, { "value": "1.14", "label": "1.14", "count": 28 }, { "value": "1.13", "label": "1.13", "count": 47 }, { "value": "1.12", "label": "1.12", "count": 27 }, { "value": "1.11", "label": "1.11", "count": 42 }, { "value": "1.10", "label": "1.10", "count": 67 }, { "value": "1.9", "label": "1.9", "count": 22 }, { "value": "1.8", "label": "1.8", "count": 24 }, { "value": "1.7", "label": "1.7", "count": 17 }, { "value": "1.6", "label": "1.6", "count": 9 }, { "value": "1.5", "label": "1.5", "count": 6 }, { "value": "1.4", "label": "1.4", "count": 38 }, { "value": "1.3", "label": "1.3", "count": 7 }, { "value": "1.2", "label": "1.2", "count": 5 }, { "value": "1.1", "label": "1.1", "count": 11 }, { "value": "< 1.1", "label": "< 1.1", "count": 34 }, { "value": "Unknown", "label": "Unknown", "count": 1 }, { "value": "Not applicable", "label": "Not applicable", "count": 2 } ], "sources": [ { "value": "pnp/sp-dev-fx-aces", "label": "Adaptive Card Extensions", "count": 84 }, { "value": "pnp/spfx-copilot-components", "label": "Copilot components", "count": 48 }, { "value": "pnp/sp-dev-fx-extensions", "label": "Extensions", "count": 147 }, { "value": "pnp/spfx-reference-scenarios", "label": "Reference scenarios", "count": 21 }, { "value": "pnp/sp-dev-fx-webparts", "label": "Web parts", "count": 495 } ] }, "totals": { "samples": 795, "contributors": 248, "metadataFiles": 775, "candidateFolders": 778, "eligibleFolders": 776, "missingMetadata": 1, "errors": 107, "warnings": 1098 } }