From 98ec9f9f0cacbd5bb7d4c75b6771c5cb90b60b9b Mon Sep 17 00:00:00 2001 From: Adam-it Date: Sun, 7 May 2023 09:20:50 +0000 Subject: [PATCH] Updates sample data --- data/sp-dev-fx-aces-samples.json | 14 - data/sp-dev-fx-extensions-samples.json | 1518 +++++ .../sp-dev-fx-library-components-samples.json | 3 + data/sp-dev-fx-webparts-samples.json | 5144 +++++++++++++++++ 4 files changed, 6665 insertions(+), 14 deletions(-) create mode 100644 data/sp-dev-fx-extensions-samples.json create mode 100644 data/sp-dev-fx-library-components-samples.json create mode 100644 data/sp-dev-fx-webparts-samples.json diff --git a/data/sp-dev-fx-aces-samples.json b/data/sp-dev-fx-aces-samples.json index 08de9d9..cc5aeae 100644 --- a/data/sp-dev-fx-aces-samples.json +++ b/data/sp-dev-fx-aces-samples.json @@ -344,20 +344,6 @@ "tags": null, "createDate": "2022-03-24" }, - { - "title": "Weather Adaptive Card Extension", - "url": "https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ImageCard-Weather", - "description": "This Adaptive Card Extension allows users to display information about the weather in a specific location.", - "image": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ImageCard-Weather/assets/demo.gif", - "authors": [ - { - "name": "Aakash Bhardwaj", - "pictureUrl": "https://github.com/aakashbhardwaj619.png" - } - ], - "tags": null, - "createDate": "2022-03-24" - }, { "title": "COVID-19 Indicator", "url": "https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-Covid-Indicator", diff --git a/data/sp-dev-fx-extensions-samples.json b/data/sp-dev-fx-extensions-samples.json new file mode 100644 index 0000000..941598a --- /dev/null +++ b/data/sp-dev-fx-extensions-samples.json @@ -0,0 +1,1518 @@ +{ + "samples": [ + { + "title": "Toastr Application Customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/jquery-application-toastr", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/jquery-application-toastr/assets/spfxToastr-Preview.PNG", + "authors": [ + { + "name": "Chris Kent", + "pictureUrl": "https://avatars.githubusercontent.com/u/8364109?s=460&v=4" + } + ], + "tags": [], + "createDate": "2018-02-01" + }, + { + "title": "Item Order", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/jquery-field-itemorder", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/jquery-field-itemorder/assets/spfxItemOrder-Animation.gif", + "authors": [ + { + "name": "Chris Kent", + "pictureUrl": "https://avatars.githubusercontent.com/u/8364109?s=460&v=4" + } + ], + "tags": [], + "createDate": "2019-10-10" + }, + { + "title": "Application Alert Message", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-alert-message", + "description": "This application customizer will display the alert message based on the items from the list.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-alert-message/assets/GlobalAlerts.gif", + "authors": [ + { + "name": "Sudharsan Kesavanarayanan", + "pictureUrl": "https://github.com/sudharsank.png" + } + ], + "tags": [], + "createDate": "2020-07-09" + }, + { + "title": "Google Analytics Application Customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-analytics", + "description": "In this sample is possible to see how to implement Google Analytics through SPFx Extensions Application Customizers", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-analytics/assets/js-application-google-analytics.gif", + "authors": [ + { + "name": "Giuliano De Luca", + "pictureUrl": "https://github.com/giuleon.png" + }, + { + "name": "Hugo Bernier", + "pictureUrl": "https://github.com/hugoabernier.png" + } + ], + "tags": [], + "createDate": "2020-10-07" + }, + { + "title": "Injecting Javascript with Sharepoint Framework Extensions - Azure Application Insights", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-appinsights", + "description": "Sample SharePoint Framework extension project injecting Javascript code to enable Azure App Insights monitoring and statistics.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-appinsights/assets/appinsights-1.png", + "authors": [ + { + "name": "Guillaume Sellier", + "pictureUrl": "https://github.com/GSellier.png" + }, + { + "name": "Luis Valencia", + "pictureUrl": "https://github.com/levalencia.png" + }, + { + "name": "Xiao Li", + "pictureUrl": "https://github.com/xiao-lix.png" + } + ], + "tags": [], + "createDate": "2019-08-29" + }, + { + "title": "JS Application AppInsights Advanced", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-appinsights-advanced/assets/Performance.png", + "authors": [ + { + "name": "Sudharsan Kesavanarayanan", + "pictureUrl": "https://github.com/sudharsank.png" + }, + { + "name": "Xiao Li", + "pictureUrl": "https://github.com/xiao-lix.png" + } + ], + "tags": [], + "createDate": "2020-09-23" + }, + { + "title": "Optimize CSS/SCSS Style Bundling and Dynamic Loading of Styles", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-dynamically-importing-styles", + "description": "This example illustrates how style files can be dynamically bundled into multiple .js bundle files and then be individually imported at runtime.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-dynamically-importing-styles/assets/DynamicImportingResultsInBrwoser.png", + "authors": [ + { + "name": "David Warner II", + "pictureUrl": "https://avatars.githubusercontent.com/u/10676147?s=460&u=9e4e74223c4ffb430fb77c97892a84b286df1921&v=4" + } + ], + "tags": [], + "createDate": "2019-01-21" + }, + { + "title": "GraphClient from Modern Teamsite", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-graph-client", + "description": "Simple example to call the Graph via the new GraphHttpClient (No ADAL) for getting the group title, mail, and description.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-graph-client/assets/screenshot.png", + "authors": [ + { + "name": "Simon Ågren", + "pictureUrl": "https://github.com/simonagren.png" + } + ], + "tags": [], + "createDate": "2017-06-09" + }, + { + "title": "Site Header Toggler", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-header-toggler/assets/screenshot.gif", + "authors": [ + { + "name": "Ram Prasad Meenavalli", + "pictureUrl": "https://github.com/RamPrasadMeenavalli.png" + } + ], + "tags": [], + "createDate": "2019-09-19" + }, + { + "title": "Intranet Search Box", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-intranet-searchbox", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-intranet-searchbox/assets/IntranetSearchBox.gif", + "authors": [ + { + "name": "Martin Hatch", + "pictureUrl": "https://github.com/MartinHatch.png" + } + ], + "tags": [], + "createDate": "2019-05-16" + }, + { + "title": "List-Driven Placeholders", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-listdrivenplaceholders", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-listdrivenplaceholders/assets/placeholders.jpg", + "authors": [ + { + "name": "Matt Jimison", + "pictureUrl": "https://github.com/mjimison.png" + } + ], + "tags": [], + "createDate": "2017-09-05" + }, + { + "title": "Microsoft Clarity for modern SharePoint", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-microsoft-clarity", + "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", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-microsoft-clarity/assets/dashboard.gif", + "authors": [ + { + "name": "João Ferreira", + "pictureUrl": "https://github.com/joaoferreira.png" + } + ], + "tags": [], + "createDate": "2021-11-23" + }, + { + "title": "Redirect Application Customizers", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-redirect", + "description": "Redirect from URL based on mapping from a list on the site. Can be used to automatically redirect from pages to other locations.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/ext-redirects.gif?raw=true", + "authors": [ + { + "name": "Paolo Pialorsi", + "pictureUrl": "https://github.com/PaoloPia.png" + }, + { + "name": "Sébastien Levert", + "pictureUrl": "https://github.com/sebastienlevert.png" + } + ], + "tags": [], + "createDate": "2019-12-29" + }, + { + "title": "Run Once SharePoint Framework application customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-run-once", + "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.", + "image": null, + "authors": [ + { + "name": "Mikael Svenson", + "pictureUrl": "https://github.com/wobba.png" + } + ], + "tags": [], + "createDate": "2017-10-10" + }, + { + "title": "Clone ListView Command Set", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-command-clone", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-command-clone/assets/spfxClone-Animation.gif", + "authors": [ + { + "name": "Chris Kent", + "pictureUrl": "https://avatars.githubusercontent.com/u/8364109?s=460&v=4" + } + ], + "tags": [], + "createDate": "2019-05-27" + }, + { + "title": "Convert documents to PDF using Azure function", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-command-convert-to-pdf", + "description": "Sample SPFx list view command set extension that converts the selected documents to PDF using Microsoft Graph.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-command-convert-to-pdf/demo/convert-docs-to-pdf.gif", + "authors": [ + { + "name": "Anoop Tatti", + "pictureUrl": "https://avatars.githubusercontent.com/u/9694225?s=460&u=fbb4b27ed944935800d5f6dbc91e71911ce0d4ec&v=4" + } + ], + "tags": [], + "createDate": "2018-10-29" + }, + { + "title": "Copy Classic Link Extension", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-command-copy-classic-link", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-command-copy-classic-link/demo/copy-classic-link.gif", + "authors": [ + { + "name": "Anoop Tatti", + "pictureUrl": "https://avatars.githubusercontent.com/u/9694225?s=460&u=fbb4b27ed944935800d5f6dbc91e71911ce0d4ec&v=4" + }, + { + "name": "Aakash Bhardwaj", + "pictureUrl": "https://avatars.githubusercontent.com/u/33526902?s=460&u=e780f4ef1da922c84f2c5c66c59cecbff2300581&v=4" + } + ], + "tags": [], + "createDate": "2021-01-03" + }, + { + "title": "Hide Commands", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-command-hide-commands", + "description": "This command-set can be used to hide other 'out-of-the-box' commands on list views.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-command-hide-commands/CssSelector.PNG", + "authors": [ + { + "name": "Russell Gove", + "pictureUrl": "https://github.com/russgove.png" + } + ], + "tags": [], + "createDate": "2020-04-27" + }, + { + "title": "Unique Item Permissions Command Set Customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-command-item-permissions", + "description": "The sample illustrates creation of a shortcut command to redirect user to selected item's permission page.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-command-item-permissions/assets/item-permissions.png", + "authors": [ + { + "name": "Alex Terentiev", + "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" + } + ], + "tags": [], + "createDate": "2017-10-15" + }, + { + "title": "Lock Item Command Set Customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-command-lock-item", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-command-lock-item/assets/lock-item.png", + "authors": [ + { + "name": "Alex Terentiev", + "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" + } + ], + "tags": [], + "createDate": "2017-12-20" + }, + { + "title": "Export Selected Items to Excel", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-command-selecteditems-export", + "description": "Exports selected items to excel spreadsheet in xlsx format, with the columns from the current modern list view.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-command-selecteditems-export/assets/excel-export-preview.png", + "authors": [ + { + "name": "Rajesh Sitaraman", + "pictureUrl": "https://github.com/rjesh-git.png" + } + ], + "tags": [], + "createDate": "2018-02-16" + }, + { + "title": "Animated Progress Field", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-field-animated-progress", + "description": "Displays an animated progress bar component", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-field-animated-progress/assets/preview.gif", + "authors": [ + { + "name": "Ari Gunawan", + "pictureUrl": "https://github.com/AriGunawan.png" + } + ], + "tags": [], + "createDate": "2021-10-10" + }, + { + "title": "Conditional formatting SharePoint Framework field customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-field-conditionalformatting", + "description": "Sample SharePoint Framework field customizer that applies Excel-like conditional formatting to numeric fields based on their values.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-field-conditionalformatting/assets/conditionalformatting-preview.png", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + } + ], + "tags": [], + "createDate": "2017-06-29" + }, + { + "title": "Priority Field SharePoint Framework field customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-field-taskpriority", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-field-taskpriority/assets/js-field-taskpriority-preview.jpg", + "authors": [ + { + "name": "Todd Baginski", + "pictureUrl": "https://github.com/TBag.png" + } + ], + "tags": [], + "createDate": "2017-08-24" + }, + { + "title": "Weather SharePoint Framework field customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-field-weather", + "description": "Sample SharePoint Framework field customizer showing weather conditions for the given location.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-field-weather/assets/weather-preview.png", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + } + ], + "tags": [], + "createDate": "2018-01-20" + }, + { + "title": "Guest Message", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-guest-message", + "description": "SharePoint Application customizer that allow you to display a message to your External users.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-guest-message/assets/externalmessage.png", + "authors": [ + { + "name": "David Ramalho", + "pictureUrl": "https://github.com/DRamalho92.png" + } + ], + "tags": [], + "createDate": "2019-09-22" + }, + { + "title": "Share to Teams", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-share-to-teams/assets/sendToTeams.gif", + "authors": [ + { + "name": "Kunj Sangani", + "pictureUrl": "https://github.com/kunj-sangani.png" + } + ], + "tags": [], + "createDate": "2021-08-14" + }, + { + "title": "AAD Token Provider Bot Extension", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-aadtokenprovider-bot", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-aadtokenprovider-bot/images/react-aadtokenprovider-bot.gif", + "authors": [ + { + "name": "Franck Cornu", + "pictureUrl": "https://github.com/FranckyC.png" + } + ], + "tags": [], + "createDate": "2018-11-05" + }, + { + "title": "Announcements SharePoint Framework application customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-app-announcements", + "description": "Sample SharePoint Framework application customizer showing urgent organizational announcements.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-app-announcements/assets/announcements-preview.png", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + } + ], + "tags": [], + "createDate": "2017-06-30" + }, + { + "title": "Alerts Application Customizers", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-alerts", + "description": "This application customizer provides you the ability to show notifications on the pages in the top / header area.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/ext-alert.gif", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + }, + { + "name": "Robert Schouten", + "pictureUrl": "https://github.com/rfjschouten.png" + } + ], + "tags": [], + "createDate": "2019-12-25" + }, + { + "title": "Announcements SharePoint Framework Application Customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-announcements", + "description": "SharePoint Framework application customizer displaying an information banner using office-fabric-ui MessageBar.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-announcements/assets/announcements-MUI.png", + "authors": [ + { + "name": "Mike Myers", + "pictureUrl": "https://github.com/thespooler.png" + } + ], + "tags": [], + "createDate": "2020-06-18" + }, + { + "title": "Bot Framework Chat App Customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-botframework-chat", + "description": "SPFx application extension that uses the Bot Framework React Webchat Component to render a Bot Framework chat window", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-botframework-chat/assets/bf_app_customizer01.png", + "authors": [ + { + "name": "Stephan Bisser", + "pictureUrl": "https://github.com/stephanbisser.png" + } + ], + "tags": [], + "createDate": "2019-10-19" + }, + { + "title": "Breadcrumb application customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-breadcrumb", + "description": "This sample shows how to create a breadcrumb element and append it to your site via the SharePoint Framework Application Customizer extension.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-breadcrumb/assets/breadcrumb-sample.png", + "authors": [ + { + "name": "Elio Struyf", + "pictureUrl": "https://github.com/estruyf.png" + }, + { + "name": "Swaminathan Sriram", + "pictureUrl": "https://github.com/Swaminathan-Sriram.png" + } + ], + "tags": [], + "createDate": "2020-10-03" + }, + { + "title": "Collaboration Footer Application Customizers", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-collab-footer", + "description": "This application customizer provides you the ability to include a footer designed for normal and group associated teams sites.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/ext-collab-footer.gif", + "authors": [ + { + "name": "Paolo Pialorsi", + "pictureUrl": "https://github.com/PaoloPia.png" + }, + { + "name": "David Opdendries", + "pictureUrl": "https://github.com/spdavid.png" + } + ], + "tags": [], + "createDate": "2020-01-01" + }, + { + "title": "Overdue Tasks Application Customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-duetasks", + "description": "The sample illustrates how to display a warning message that current user has overdue tasks.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-duetasks/assets/app-customizer.png", + "authors": [ + { + "name": "Alex Terentiev", + "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" + } + ], + "tags": [], + "createDate": "2017-12-26" + }, + { + "title": "Festivals Extension", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-festivals", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-festivals/demo/festivals.gif", + "authors": [ + { + "name": "Arjun U Menon", + "pictureUrl": "https://github.com/arjunumenon.png" + } + ], + "tags": [], + "createDate": "2020-05-19" + }, + { + "title": "Groups external links", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-grouplinks", + "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...", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-grouplinks/assets/react-application-grouplinks.jpg", + "authors": [ + { + "name": "Luis Mañez", + "pictureUrl": "https://github.com/luismanez.png" + } + ], + "tags": [], + "createDate": "2018-02-16" + }, + { + "title": "CSS Injection", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-injectcss", + "description": "This sample shows how to inject a custom Cascading Style Sheet (CSS) on modern pages.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-injectcss/assets/sampleresults.png", + "authors": [ + { + "name": "Hugo Bernier", + "pictureUrl": "https://github.com/hugoabernier.png" + } + ], + "tags": [], + "createDate": "2018-03-28" + }, + { + "title": "Logo Festoon", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-logo-festoon/assets/festoon-shot.png", + "authors": [ + { + "name": "Rabia Williams", + "pictureUrl": "https://github.com/rabwill.png" + } + ], + "tags": [], + "createDate": "2019-03-17" + }, + { + "title": "Machine Translations", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-machine-translations", + "description": "This application customizer lets you translate the text on a SharePoint page using the Translator Text API of Microsoft Azure.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-machine-translations/assets/sample.gif", + "authors": [ + { + "name": "Robin Agten", + "pictureUrl": "https://github.com/agtenr.png" + }, + { + "name": "Michał Romiszewski", + "pictureUrl": "https://github.com/mromiszewski.png" + } + ], + "tags": [], + "createDate": "2021-01-20" + }, + { + "title": "React Message Banner", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-messagebanner", + "description": "A react Message Banner sample, allows to add a custom banner message to your SharePoint Online modern sites.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-messagebanner/assets/BannerMessageAdminView.png", + "authors": [ + { + "name": "Paul Matthews", + "pictureUrl": "https://github.com/pmatthews05.png" + }, + { + "name": "Brad Schlintz", + "pictureUrl": "https://github.com/bschlintz.png" + } + ], + "tags": null, + "createDate": "2022-11-09" + }, + { + "title": "My Flows List", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-my-flows-list", + "description": "Application extension that allows the user to check list of flows and their current status and details.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-my-flows-list/assets/HowItWorks.gif", + "authors": [ + { + "name": "Adam Wójcik", + "pictureUrl": "https://github.com/Adam-it.png" + } + ], + "tags": [], + "createDate": "2021-10-03" + }, + { + "title": "My Lists Notifications", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-my-lists-notifications", + "description": "This application extension alows user receive notifications from selected lists or libraries", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-my-lists-notifications/assets/myListsNotifications.gif", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": [], + "createDate": "2021-07-08" + }, + { + "title": "My Favourites Application Customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-myfavourites", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-myfavourites/assets/spfx-myfavourites.gif", + "authors": [ + { + "name": "Anoop Tatti", + "pictureUrl": "https://avatars.githubusercontent.com/u/9694225?s=460&u=fbb4b27ed944935800d5f6dbc91e71911ce0d4ec&v=4" + } + ], + "tags": [], + "createDate": "2020-04-14" + }, + { + "title": "My Followed Sites Application Customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-myfollowedsites", + "description": "Sample SharePoint Framework application customizer extension that shows current user followed sites across tenant using office ui fabric panel.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-myfollowedsites/assets/spfx-react-myFollowedSites.gif", + "authors": [ + { + "name": "Rahul Suryawanshi", + "pictureUrl": "https://github.com/rahulsuryawanshi.png" + } + ], + "tags": [], + "createDate": "2020-06-12" + }, + { + "title": "News Ticker", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-news-ticker", + "description": "An SPFx Extension that displays news as a running text at the top of every modern page.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-news-ticker/assets/react-application-news-ticker.gif", + "authors": [ + { + "name": "Ari Gunawan", + "pictureUrl": "https://github.com/AriGunawan.png" + } + ], + "tags": null, + "createDate": "2021-04-19" + }, + { + "title": "Modern Team Sites (Office Groups) Navigation", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-office-groups-nav", + "description": "The sample illustrates how to use AadHttpClient to request Groups information from Microsoft Graph", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-office-groups-nav/assets/office-groups-nav.png", + "authors": [ + { + "name": "Alex Terentiev", + "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" + } + ], + "tags": [], + "createDate": "2018-02-17" + }, + { + "title": "Application Customiser sample using Text Analytics API", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-page-comments-sentiment", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-page-comments-sentiment/assets/react-application-page-comments-sentiment.png", + "authors": [ + { + "name": "Luis Mañez", + "pictureUrl": "https://github.com/luismanez.png" + } + ], + "tags": [], + "createDate": "2020-03-06" + }, + { + "title": "Application Customiser sample using Bing Search API", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-page-related-bing-news", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-page-related-bing-news/assets/related-bing-news.png", + "authors": [ + { + "name": "Luis Mañez", + "pictureUrl": "https://github.com/luismanez.png" + } + ], + "tags": [], + "createDate": "2019-10-25" + }, + { + "title": "Portal Footer Application Customizers", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-portal-footer", + "description": "This application customizer provides you the ability to include a footer designed for communication sites.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/ext-portal-footer.gif", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + }, + { + "name": "Paolo Pialorsi", + "pictureUrl": "https://github.com/PaoloPia.png" + }, + { + "name": "David Opdendries", + "pictureUrl": "https://github.com/spdavid.png" + } + ], + "tags": [], + "createDate": "2019-01-12" + }, + { + "title": "Power Virtual Agents Bot Host", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-pva-bot", + "description": "Adds footer to launch a Power Virtual Agents chatbot window from any page.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-pva-bot/assets/preview.gif", + "authors": [ + { + "name": "Hugo Bernier", + "pictureUrl": "https://github.com/hugoabernier.png" + }, + { + "name": "Dmitry Vorobyov", + "pictureUrl": "https://github.com/DmitryVorobyov.png" + }, + { + "name": "Renato Romão", + "pictureUrl": "https://github.com/renatoromao.png" + } + ], + "tags": [], + "createDate": "2021-06-06" + }, + { + "title": "QnA Chatbot", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-qna-chat", + "description": "SPFx application extension that uses Azure QnA cognitive services to efficiently answer FAQs.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-qna-chat/assets/qnachatbot.png", + "authors": [ + { + "name": "Rodrigo Silva", + "pictureUrl": "https://githob.com/Rodrigo Silva.png" + } + ], + "tags": [], + "createDate": "2017-02-23" + }, + { + "title": "Regions Footer Application Customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-regions-footer", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-regions-footer/assets/Regions-Footer.png", + "authors": [ + { + "name": "Paolo Pialorsi", + "pictureUrl": "https://github.com/PaoloPia.png" + } + ], + "tags": [], + "createDate": "2017-09-28" + }, + { + "title": "Connecting SPFx Extensions with Web Parts using Dynamic Data", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-search-dynamicdata", + "description": "This example shows how to connect Spfx extensions with Spfx Webparts using Dynamic Data Feature", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-search-dynamicdata/assets/samplepnpExtensions.gif", + "authors": [ + { + "name": "Adrián Díaz", + "pictureUrl": "https://github.com/AdrianDiaz81.png" + } + ], + "tags": [], + "createDate": "2018-07-15" + }, + { + "title": "Tenant Global NavBar", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-sitepagecoremetadata", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-sitepagecoremetadata/assets/SitePageMetadataExtension.png", + "authors": [ + { + "name": "Vipul Kelkar", + "pictureUrl": "https://github.com/vipulkelkar.png" + } + ], + "tags": [], + "createDate": "2018-08-15" + }, + { + "title": "Sites in Hub site switcher", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-sites-hubsite-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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-sites-hubsite-switcher/assets/react-application-sites-hubsite-switcher.png", + "authors": [ + { + "name": "Luis Mañez", + "pictureUrl": "https://github.com/luismanez.png" + } + ], + "tags": [], + "createDate": "2018-04-24" + }, + { + "title": "Displaying notification if a team is set as archived", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-team-archived-notification", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-team-archived-notification/assets/screenshot.png", + "authors": [ + { + "name": "Matti Paukkonen", + "pictureUrl": "https://github.com/mpaukkon.png" + } + ], + "tags": [], + "createDate": "2019-01-02" + }, + { + "title": "Tenant Global NavBar Application Customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-tenant-global-navbar", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-tenant-global-navbar/assets/Tenant-Global-NavBar.png", + "authors": [ + { + "name": "Paolo Pialorsi", + "pictureUrl": "https://github.com/PaoloPia.png" + } + ], + "tags": [], + "createDate": "2017-09-28" + }, + { + "title": "Weather Application Customizer Extension", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-weather-widget", + "description": "SPFx Weather Application Customizer Extension in the top placeholder", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-weather-widget/assets/weatherwidget.PNG", + "authors": [ + { + "name": "Rishabh Shukla", + "pictureUrl": "https://github.com/rishabhshukla12.png" + } + ], + "tags": [], + "createDate": "2023-03-12" + }, + { + "title": "Webhooks Notification Application Customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-webhooks-notification", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-webhooks-notification/assets/spfx-react-webhooks-notification.gif", + "authors": [ + { + "name": "Giuliano De Luca", + "pictureUrl": "https://github.com/giuleon.png" + } + ], + "tags": [], + "createDate": "2017-11-05" + }, + { + "title": "Bot Framework Secure", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-bot-framework-secure", + "description": "This sample will show you how to embed a Bot Framework bot into a SharePoint web site with security consideration.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-bot-framework-secure/assets/sp-ex-secure.gif", + "authors": [ + { + "name": "Qiong Wu", + "pictureUrl": "https://github.com/DingmaomaoBJTU.png" + } + ], + "tags": [], + "createDate": "2020-11-10" + }, + { + "title": "Bot Framework SSO", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-bot-framework-sso", + "description": "This sample will show you how to embed a Bot Framework bot into a SharePoint web site with SSO.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-bot-framework-sso/assets/sp-ex-sso.gif", + "authors": [ + { + "name": "Qiong Wu", + "pictureUrl": "https://github.com/DingmaomaoBJTU.png" + } + ], + "tags": [], + "createDate": "2020-11-10" + }, + { + "title": "Add Folders Command", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-addfolders", + "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).", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-addfolders/assets/preview.gif", + "authors": [ + { + "name": "Michaël Maillot", + "pictureUrl": "https://github.com/michaelmaillot.png" + } + ], + "tags": [], + "createDate": "2021-01-17" + }, + { + "title": "Change Page Layout Command Extension", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-change-page-layouttype", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-change-page-layouttype/assets/FileSelection.png", + "authors": [ + { + "name": "Sudharsan K.", + "pictureUrl": "https://github.com/sudharsank.png" + } + ], + "tags": [], + "createDate": "2021-10-25" + }, + { + "title": "Save and convert as PDF by PnP", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-convert-to-pdf", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-convert-to-pdf/screenshot.gif", + "authors": [ + { + "name": "Mikael Svenson", + "pictureUrl": "https://github.com/wobba.png" + } + ], + "tags": [], + "createDate": "2021-02-23" + }, + { + "title": "Copy/Move Item(s)", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-copy-move-items", + "description": "Displays a command button named **Copy/Move Item(s)** in all the custom lists", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-copy-move-items/assets/CopyMoveItems.png", + "authors": [ + { + "name": "Sudharsan Kesavanarayanan", + "pictureUrl": "https://github.com/sudharsank.png" + } + ], + "tags": [], + "createDate": "2021-09-13" + }, + { + "title": "Copy PnP search results webpart settings", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-copy-pnp-search-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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-copy-pnp-search-webpart-settings/assets/copy_pnp_search_results_settings.gif", + "authors": [ + { + "name": "Anoop Tatti", + "pictureUrl": "https://github.com/anoopt.png" + } + ], + "tags": [], + "createDate": "2021-06-11" + }, + { + "title": "Custom Command Bar Command Set Customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-custom-command-bar", + "description": "The sample illustrates how to display custom Command Bar when Command Set Button is pressed.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-custom-command-bar/assets/command-bar.png", + "authors": [ + { + "name": "Alex Terentiev", + "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" + } + ], + "tags": [], + "createDate": "2017-09-27" + }, + { + "title": "Demote News to Page", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-demote-news", + "description": "Sample SharePoint Framework list view command set extension to demote a previously promoted News page.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-demote-news/assets/preview.gif", + "authors": [ + { + "name": "Mikael Svenson", + "pictureUrl": "https://github.com/wobba.png" + } + ], + "tags": [], + "createDate": "2021-02-22" + }, + { + "title": "Custom Dialog Sample with Command View Set", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-dialog", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-dialog/assets/screenshot.png", + "authors": [ + { + "name": "Malathi Sekkappan", + "pictureUrl": "https://github.com/msekkappan.png" + } + ], + "tags": [], + "createDate": "2019-09-01" + }, + { + "title": "Get a direct link to a document or folder", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-direct-link", + "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.", + "image": "https://camo.githubusercontent.com/b65cbd290ecf800f79481174196e527ccb36aa15/68747470733a2f2f6a6f6e6173626a65726b652e66696c65732e776f726470726573732e636f6d2f323031392f30312f636f70796469726563746c696e6b2e706e673f773d343530", + "authors": [], + "tags": [], + "createDate": "2019-01-06" + }, + { + "title": "Directions SharePoint Framework list view command set", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-directions", + "description": "Sample SharePoint Framework list view command set showing travel directions to the given location using Google Maps.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-directions/assets/directions-preview.png", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + } + ], + "tags": [], + "createDate": "2017-06-29" + }, + { + "title": "Discuss Now Command Set", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-discuss-now", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-discuss-now/assets/Discuss-Now-Command-Set.png", + "authors": [ + { + "name": "Paolo Pialorsi", + "pictureUrl": "https://github.com/PaoloPia.png" + } + ], + "tags": [], + "createDate": "2018-07-18" + }, + { + "title": "File Size Viewer sample with Command View Set", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-file-size-viewer", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-file-size-viewer/assets/FileSizeViewer.gif", + "authors": [ + { + "name": "Jose Quinto", + "pictureUrl": "https://github.com/jquintozamora.png" + }, + { + "name": "Sudharsan Kesavanarayanan", + "pictureUrl": "https://github.com/sudharsank.png" + } + ], + "tags": [], + "createDate": "2021-02-21" + }, + { + "title": "Folder Selection", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-folder-select", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-folder-select/assets/folderselect.gif", + "authors": [ + { + "name": "Zach Roberts", + "pictureUrl": "https://github.com/zachroberts8668.png" + } + ], + "tags": [], + "createDate": "2020-01-03" + }, + { + "title": "Follow Document", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-command-follow-document/Assets/FollowDocumentSample1.gif?raw=true", + "authors": [ + { + "name": "André Lage", + "pictureUrl": "https://github.com/aaclage.png" + } + ], + "tags": [], + "createDate": "2021-06-13" + }, + { + "title": "Form Settings Command View Set", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-form-settings", + "description": "This sample shows how you can redirect default SharePoint list forms (New,Edit,Display) to different pages.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-form-settings/assets/screenshot.gif", + "authors": [ + { + "name": "Ramin Ahmadi", + "pictureUrl": "https://github.com/AhmadiRamin.png" + } + ], + "tags": [], + "createDate": "2019-06-30" + }, + { + "title": "Get Thumbnail List Item Command View Set", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-get-thumbnail", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-get-thumbnail/assets/GetThumbnail.gif", + "authors": [ + { + "name": "Aakash Bhardwaj", + "pictureUrl": "https://avatars.githubusercontent.com/u/33526902?s=460&u=e780f4ef1da922c84f2c5c66c59cecbff2300581&v=4" + } + ], + "tags": [], + "createDate": "2019-10-25" + }, + { + "title": "Image Editor Command Set", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-image-editor", + "description": "This command set allows quick edit images located in Document Library.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-image-editor/assets/Screenshot1.png", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": [], + "createDate": "2020-06-16" + }, + { + "title": "Mail Current View as Image", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-mail-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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-mail-view-as-image/demo/Mail_this_view.gif", + "authors": [ + { + "name": "Anoop Tatti", + "pictureUrl": "https://avatars.githubusercontent.com/u/9694225?s=460&u=fbb4b27ed944935800d5f6dbc91e71911ce0d4ec&v=4" + } + ], + "tags": [], + "createDate": "2018-11-13" + }, + { + "title": "Modern Page Model with PnP/PnPjs", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-page-model-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", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-page-model-pnpjs/assets/use-Modern-Page-Template-extension.gif", + "authors": [ + { + "name": "Federico Porceddu", + "pictureUrl": "https://github.com/fredupstair.png" + }, + { + "name": "Mohammad Amer", + "pictureUrl": "https://github.com/mohammadamer.png" + } + ], + "tags": [], + "createDate": "2019-03-23" + }, + { + "title": "Print List Item Command View Set", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-print", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-print/assets/screenshot.gif", + "authors": [ + { + "name": "Ramin Ahmadi", + "pictureUrl": "https://github.com/AhmadiRamin.png" + } + ], + "tags": [], + "createDate": "2018-12-05" + }, + { + "title": "Generate QR Code List Item Command View Set", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-qrcode", + "description": "Generates a printable QR code which links to a SharePoint list item.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-qrcode/assets/QRCode.gif", + "authors": [ + { + "name": "Hugo Bernier", + "pictureUrl": "https://github.com/hugoabernier.png" + } + ], + "tags": [], + "createDate": "2019-09-01" + }, + { + "title": "Multishare Command Extension with PnPJs", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-share-pnpjs", + "description": "The sample is an custom action only active when multiple items are selected.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-share-pnpjs/assets/share.png", + "authors": [ + { + "name": "Simon Ågren", + "pictureUrl": "https://github.com/simonagren.png" + } + ], + "tags": [], + "createDate": "2018-09-19" + }, + { + "title": "Associated Sites Links", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-share-to-teams", + "description": "Web part that will display links to all associated sites that registered to the current site. Current site should be a hub site.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-share-to-teams/assets/preview.PNG", + "authors": [ + { + "name": "Russell Gove", + "pictureUrl": "https://github.com/russgove.png" + } + ], + "tags": null, + "createDate": "2021-04-19" + }, + { + "title": "configure a Page as Single App Part page", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-singlepartapppage", + "description": "Custom Command Set that set a Page layout to use the Single App Part page Layout", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-singlepartapppage/assets/demo.gif", + "authors": [ + { + "name": "Luis Mañez", + "pictureUrl": "https://github.com/luismanez.png" + } + ], + "tags": [], + "createDate": "2019-01-29" + }, + { + "title": "Image Metadata from Cognitive Services Vision API List View Command Set", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-vision-api", + "description": "Custom Command Set that gets metadata information from MS Cognitive Services Vision API for the selected Image", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-vision-api/assets/react-command-vision-api.png", + "authors": [ + { + "name": "Luis Mañez", + "pictureUrl": "https://github.com/luismanez.png" + } + ], + "tags": [], + "createDate": "2019-09-01" + }, + { + "title": "Field Attachment Info", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-attachment-info", + "description": "This field customizer will display the attachment related information for a listitem.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-attachment-info/assets/react-field-attachment-info.png", + "authors": [ + { + "name": "Sudharsan Kesavanarayanan", + "pictureUrl": "https://github.com/sudharsank.png" + } + ], + "tags": [], + "createDate": "2020-04-02" + }, + { + "title": "PnP Field Renderer Helper", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-pnp-field-renderer-helper", + "description": "This field customizer shows how to use PnP FieldRendererHelper utility.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-pnp-field-renderer-helper/assets/FieldRendererHelper.gif", + "authors": [ + { + "name": "Alex Terentiev", + "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" + } + ], + "tags": [], + "createDate": "2020-09-13" + }, + { + "title": "PnP File Type Renderer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-pnp-file-type-renderer", + "description": "This field customizer shows how to use PnP FieldFileTypeRenderer controls.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-pnp-file-type-renderer/assets/file-type-renderer.png", + "authors": [ + { + "name": "Alex Terentiev", + "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" + } + ], + "tags": [], + "createDate": "2020-10-01" + }, + { + "title": "Slider Field Customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-slider", + "description": "The sample illustrates how to use Office UI Fabric React Slider in Field Customizer with permissions-base inline editing", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-slider/assets/slider.png", + "authors": [ + { + "name": "Alex Terentiev", + "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" + } + ], + "tags": [], + "createDate": "2017-08-30" + }, + { + "title": "Field Customiser sample using Text Analytics API", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-text-analytics-api/assets/react-field-text-analytics-api.png", + "authors": [ + { + "name": "Luis Mañez", + "pictureUrl": "https://github.com/luismanez.png" + } + ], + "tags": [], + "createDate": "2018-01-18" + }, + { + "title": "Toggle Field Customizer", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-toggle", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-toggle/assets/react-field-toggle.gif", + "authors": [ + { + "name": "Giuliano De Luca", + "pictureUrl": "https://github.com/giuleon.png" + } + ], + "tags": [], + "createDate": "2017-10-04" + }, + { + "title": "Displaying the current user permission with PNPJs", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-user-permission", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-user-permission/assets/react-field-user-permission.png", + "authors": [ + { + "name": "Simon Ågren", + "pictureUrl": "https://github.com/simonagren.png" + } + ], + "tags": [], + "createDate": "2018-10-12" + }, + { + "title": "Field Votes", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-votes", + "description": "An extension that displays Vote counter and button to vote or unvote.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-votes/assets/preview.gif", + "authors": [], + "tags": null, + "createDate": "2021-04-19" + }, + { + "title": "React Form Customizer (Customers)", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-formcustomizer-customers", + "description": "A sample of an SPFx Form Customizer built with React for managing items of a custom list of customers.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-formcustomizer-customers/assets/viewform.png", + "authors": [ + { + "name": "Ejaz Hussain", + "pictureUrl": "https://github.com/ejazhussain.png" + } + ], + "tags": null, + "createDate": "2022-11-09" + }, + { + "title": "Application Customizer Extension that is hidden from tenant guest users", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-hidefrom-externalusers", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-hidefrom-externalusers/assets/SharePoint-hidefrom-guest-user.gif", + "authors": [ + { + "name": "Velin Georgiev", + "pictureUrl": "https://github.com/VelinGeorgiev.png" + } + ], + "tags": [], + "createDate": "2019-06-21" + }, + { + "title": "Item History", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-item-History", + "description": "This listview command is used to show the past versions of the selected list item in a grid.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-item-History/Capture.PNG", + "authors": [ + { + "name": "Russell Gove", + "pictureUrl": "https://github.com/russgove.png" + } + ], + "tags": [], + "createDate": "2018-06-15" + }, + { + "title": "Jump to folder extension", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-jump-to-folder", + "description": "Sample solution that facilitates navigation between large collections of SharePoint library folders.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-jump-to-folder/assets/jump-to-folder.gif", + "authors": [ + { + "name": "Joel Rodrigues", + "pictureUrl": "https://github.com/joelfmrodrigues.png" + } + ], + "tags": [], + "createDate": "2021-03-15" + }, + { + "title": "Mega Menu Application Customizer Extension", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-mega-menu", + "description": "This sample shows site mega menu. Application customizer is used along with SharePoint List to store the menu items.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-mega-menu/assets/menu.gif", + "authors": [ + { + "name": "Velin Georgiev", + "pictureUrl": "https://github.com/VelinGeorgiev.png" + } + ], + "tags": [], + "createDate": "2018-12-10" + }, + { + "title": "Menu Footer Classic Modern", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-menu-footer-classic-modern/Documentation/images/ClassicFullHeaderFooter.png", + "authors": [ + { + "name": "Bob German", + "pictureUrl": "https://avatars.githubusercontent.com/u/4664072?s=460&u=29310fd67417ec5f81dc8881dc6eb5dc0065da2d&v=4" + } + ], + "tags": [], + "createDate": "2018-04-04" + }, + { + "title": "MSAL Bot Extension", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-msal-bot", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-msal-bot/images/react-msal-bot.gif", + "authors": [ + { + "name": "Franck Cornu", + "pictureUrl": "https://github.com/FranckyC.png" + } + ], + "tags": [], + "createDate": "2018-08-04" + }, + { + "title": "Send Document With E-Mail", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-send-document", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-send-document/assets/preview.PNG", + "authors": [ + { + "name": "Serdar Ketenci", + "pictureUrl": "https://github.com/serdarketenci.png" + } + ], + "tags": [], + "createDate": "2019-02-10" + }, + { + "title": "Send-To-Teams - Command Set", + "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-send-to-teams", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-send-to-teams/assets/SendToTeams.gif", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": [], + "createDate": "2021-04-05" + } + ] +} diff --git a/data/sp-dev-fx-library-components-samples.json b/data/sp-dev-fx-library-components-samples.json new file mode 100644 index 0000000..213b8dc --- /dev/null +++ b/data/sp-dev-fx-library-components-samples.json @@ -0,0 +1,3 @@ +{ + "samples": [] +} diff --git a/data/sp-dev-fx-webparts-samples.json b/data/sp-dev-fx-webparts-samples.json new file mode 100644 index 0000000..08cbb7e --- /dev/null +++ b/data/sp-dev-fx-webparts-samples.json @@ -0,0 +1,5144 @@ +{ + "samples": [ + { + "title": "Call custom APIs secured with Azure Active Directory without ADAL JS", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/aad-api-spo-cookie", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/aad-api-spo-cookie/assets/preview-orders.png", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + } + ], + "tags": null, + "createDate": "2017-05-05" + }, + { + "title": "Call custom Web API secured with AAD from SharePoint Framework client-side web part using Angular v1.x", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-aad-webapi", + "description": "Sample SharePoint Framework client-side web part illustrating communication with a custom Web API secured with Azue Active Directory using Angular v1.x", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-aad-webapi/assets/preview.jpg", + "authors": [ + { + "name": "David Hartman", + "pictureUrl": "https://avatars.githubusercontent.com/u/11304394?s=460&v=4" + } + ], + "tags": null, + "createDate": "2017-03-21" + }, + { + "title": "Greeting client-side web part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-greeting", + "description": "This is Greeting web part which shows greeting to the current logged in user.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-greeting/assets/captured.gif", + "authors": [ + { + "name": "Gaurav Goyal", + "pictureUrl": "https://github.com/gauravgoyal5.png" + } + ], + "tags": null, + "createDate": "2020-02-15" + }, + { + "title": "Migrating existing Angular applications to SharePoint Framework sample", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-migration", + "description": "This is a sample Angular application before and after it has been migrated to a SharePoint Framework client-side web part.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-migration/assets/angular-todo-spfx-preview.png", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + } + ], + "tags": null, + "createDate": "2016-10-21" + }, + { + "title": "Angular MS Graph Web Part Built with Angular v1.x", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-msgraph", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-msgraph/assets/Connect.png", + "authors": [ + { + "name": "David Hartman", + "pictureUrl": "https://avatars.githubusercontent.com/u/11304394?s=460&v=4" + } + ], + "tags": null, + "createDate": "2017-04-19" + }, + { + "title": "Angular multi-page client-side web part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-multipage", + "description": "This is a sample SharePoint Framework client-side web part built using Angular, illustrating building multi-page web parts.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-multipage/assets/poll-preview.gif", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + } + ], + "tags": null, + "createDate": "2016-11-01" + }, + { + "title": "File Upload using AngularJs", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-ngofficeuifabric-file-upload", + "description": "File Update/Delete web part using AngularJs and ngOfficeUIFabric with the SharePoint Framework.", + "image": "https://camo.githubusercontent.com/674cb6e830d597e1ab9bb89992b6fe7f0359b80f/687474703a2f2f692e696d6775722e636f6d2f553571673449492e706e67", + "authors": [ + { + "name": "Atish Kumar Dipongkor", + "pictureUrl": "https://avatars.githubusercontent.com/u/4987425?s=460&u=998935621b0e998dc9bcd0fc26267623a8e5512c&v=4" + }, + { + "name": "Gautam Sheth", + "pictureUrl": "https://github.com/gautamdsheth.png" + } + ], + "tags": null, + "createDate": "2017-07-17" + }, + { + "title": "Angular & ngOfficeUIFabric Client-Side Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-ngofficeuifabric-todo", + "description": "Illustrates the use of Angular and ngOfficeUIFabric with the SharePoint Framework.", + "image": "https://avatars2.githubusercontent.com/u/11164679?s=460&v=4", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + } + ], + "tags": null, + "createDate": "2016-09-09" + }, + { + "title": "Search Client-Side Web Part Built with Angular v1.x", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-search", + "description": "This is a sample search web part that illustrates how you can use Angular within the new SharePoint Framework", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-search/assets/angularSearch.png", + "authors": [ + { + "name": "David Hartman", + "pictureUrl": "https://avatars.githubusercontent.com/u/11304394?s=460&v=4" + } + ], + "tags": null, + "createDate": "2017-02-04" + }, + { + "title": "Angular client-side web part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-todo", + "description": "Sample Web Part illustrating using Angular with the SharePoint Framework.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-todo/assets/preview.png", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + } + ], + "tags": null, + "createDate": "2017-03-10" + }, + { + "title": "Angular2 Web Part Prototype", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular2-prototype", + "description": "Sample To Do Web Part built with Angular2. This sample illustrates how you can use Angular2 with the SharePoint Framework.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular2-prototype/assets/preview.png", + "authors": [ + { + "name": "Daniel Gaeta", + "pictureUrl": "https://avatars.githubusercontent.com/u/1770329?s=460&v=4" + } + ], + "tags": null, + "createDate": "2017-01-20" + }, + { + "title": "Angular Elements in SharePoint Framework", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angularelements-helloworld", + "description": "Set of sample web parts illustrating how to use Angular Elements in the SharePoint Framework.", + "image": "https://github.com/pnp/media/raw/master/parker/pnp/300w/parker.png", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + }, + { + "name": "Sébastien Levert", + "pictureUrl": "https://github.com/sebastienlevert.png" + } + ], + "tags": null, + "createDate": "2018-06-01" + }, + { + "title": "Angular Elements with HTML Template File in SharePoint Framework", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angularelements-html-templatefile", + "description": "A sample web part illustrating how to use Angular Elements in the SharePoint Framework with the help of separate template HTML File.", + "image": "https://github.com/pnp/media/raw/master/parker/pnp/300w/parker.png", + "authors": [ + { + "name": "Jayakumar Balasubramaniam", + "pictureUrl": "https://github.com/JayakumarB.png" + } + ], + "tags": null, + "createDate": "2019-01-08" + }, + { + "title": "Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/bootstrap-slider", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/bootstrap-slider/assets/slider_image_1.png", + "authors": [ + { + "name": "David Hartman", + "pictureUrl": "https://avatars.githubusercontent.com/u/11304394?s=460&v=4" + } + ], + "tags": null, + "createDate": "2017-04-25" + }, + { + "title": "Sample with Handlebars.js", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/handlebarsjs-webpack-loader", + "description": "This sample demonstrate how to set up SPFX to use Handlebars through webpack loader.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/gh-pages/img/_nopreview.png", + "authors": [ + { + "name": "Stefan Bauer", + "pictureUrl": "https://github.com/StfBauer.png" + } + ], + "tags": null, + "createDate": "2018-03-21" + }, + { + "title": "Using jQuery loaded from CDN", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/jquery-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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/jquery-cdn/assets/preview_weather.png", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + } + ], + "tags": null, + "createDate": "2016-09-16" + }, + { + "title": "JQuery, Photopile.JS & Office UI Fabric Client-Side Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/jquery-photopile", + "description": "This is a sample web part that illustrated the use of JQuery and Photopile.Js with the SharePoint Framework.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/jquery-photopile/assets/photopileoverview.gif", + "authors": [ + { + "name": "Olivier Carpentier", + "pictureUrl": "https://github.com/OlivierCC.png" + } + ], + "tags": null, + "createDate": "2016-09-09" + }, + { + "title": "Advanced Comments Box", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-advanced-commenting", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-advanced-commenting/assets/Advanced-Comments-Box.gif", + "authors": [ + { + "name": "Sudharsan Kesavanarayanan", + "pictureUrl": "https://github.com/sudharsank.png" + }, + { + "name": "Aimery Thomas", + "pictureUrl": "https://github.com/a1mery.png" + } + ], + "tags": null, + "createDate": "2020-02-05" + }, + { + "title": "Display List JavaScript Client-Side Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-display-list", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-display-list/assets/display-list-preview.png", + "authors": [ + { + "name": "Velin Georgiev", + "pictureUrl": "https://github.com/VelinGeorgiev.png" + }, + { + "name": "Ryan Schouten", + "pictureUrl": "https://github.com/sharepointknight.png" + } + ], + "tags": null, + "createDate": "2020-08-29" + }, + { + "title": "Dynamic Bundling & Loading of SPFx Packages", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-dynamic-bundling-libraries", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-dynamic-bundling-libraries/assets/WebPart-Preview-PostjQueryClick.jpg", + "authors": [ + { + "name": "David Warner II", + "pictureUrl": "https://avatars.githubusercontent.com/u/10676147?s=460&u=9e4e74223c4ffb430fb77c97892a84b286df1921&v=4" + } + ], + "tags": null, + "createDate": "2018-12-03" + }, + { + "title": "Display Employee Spotlight JavaScript Client-Side Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-employee-spotlight", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-employee-spotlight/assets/Employee-spotlight-priview.png", + "authors": [ + { + "name": "Ravi Kumar Bomma", + "pictureUrl": "https://github.com/brk114.png" + } + ], + "tags": null, + "createDate": "2017-06-12" + }, + { + "title": "Integrating custom gulp tasks to SharePoint Framwork toolchain", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-extend-gulp", + "description": "SharePoint client-side development tools use gulp as the build process task runner to...", + "image": "https://avatars3.githubusercontent.com/u/7882052?s=460&v=4", + "authors": [ + { + "name": "Chakkaradeep Chandran", + "pictureUrl": "https://avatars.githubusercontent.com/u/7882052?s=460&u=92d546edfe1e1b374c69f0fd9315186eea700b8f&v=4" + } + ], + "tags": null, + "createDate": "2017-01-25" + }, + { + "title": "Extending webpack in the SharePoint Framework toolchain", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-extend-webpack", + "description": "This sample shows how to use the webpack markdown-loader to preprocess markdown files to HTML string.", + "image": "https://github.com/pnp/media/raw/master/parker/pnp/300w/parker.png", + "authors": [ + { + "name": "Velin Georgiev", + "pictureUrl": "https://github.com/VelinGeorgiev.png" + }, + { + "name": "Chakkaradeep Chandran", + "pictureUrl": "https://avatars.githubusercontent.com/u/7882052?s=460&u=92d546edfe1e1b374c69f0fd9315186eea700b8f&v=4" + } + ], + "tags": null, + "createDate": "2017-01-25" + }, + { + "title": "GitHub Badge", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-gitHubbadge", + "description": "", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/e92d0dac567cc4d59cdfc94186a52a3b776c6d21/samples/js-gitHubBadge/assets/1.png", + "authors": [ + { + "name": "Eric Skaggs", + "pictureUrl": "https://github.com/skaggej.png" + } + ], + "tags": null, + "createDate": "2019-04-18" + }, + { + "title": "Modern Calendar", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-modern-calendar", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-modern-calendar/assets/14b88f34-0121-11e7-8c91-56ecff9343e1.png", + "authors": [ + { + "name": "Jeremy Coleman", + "pictureUrl": "https://github.com/jcoleman-pcprofessional.png" + }, + { + "name": "Nanddeep Nachan", + "pictureUrl": "https://github.com/nanddeepn.png" + }, + { + "name": "Peter Paul Kirschner", + "pictureUrl": "https://github.com/petkir.png" + } + ], + "tags": null, + "createDate": "2020-06-05" + }, + { + "title": "Thumbnail/preview of pages and files", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-msgraph-thumbnail", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-msgraph-thumbnail/preview.gif", + "authors": [ + { + "name": "Mikael Svenson", + "pictureUrl": "https://github.com/wobba.png" + } + ], + "tags": null, + "createDate": "2020-01-21" + }, + { + "title": "My Flows Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-myflows", + "description": "Manage current user flows in SharePoint or Teams Tab, this web part use the msflowsdk-1.1.js", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-myflows/assets/Screenshot4.png", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": null, + "createDate": "2019-08-13" + }, + { + "title": "Embed a PowerBI report in a Client-Side Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-powerbi-embedded", + "description": "This sample SharePoint Framework client-side web part embedding a PowerBI report using PowerBI Embedded without any server-side code.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-powerbi-embedded/assets/screenshot_powerbi_embedded_spfx.png", + "authors": [ + { + "name": "Roland Oldengarm", + "pictureUrl": "https://github.com/roldengarm.png" + } + ], + "tags": null, + "createDate": "2016-09-13" + }, + { + "title": "JS Property Controls SVG", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-propertycontrols-svg", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-propertycontrols-svg/assets/js-propertycontrols-svg.gif", + "authors": [ + { + "name": "Chris Kent", + "pictureUrl": "https://avatars.githubusercontent.com/u/8364109?s=460&v=4" + } + ], + "tags": null, + "createDate": "2017-11-12" + }, + { + "title": "Public teams I'm not a member of", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-public-unjoined-teams", + "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).", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-public-unjoined-teams/assets/js-public-unjoined-teams.gif", + "authors": [ + { + "name": "Laura Kokkarinen", + "pictureUrl": "https://github.com/LauraKokkarinen.png" + } + ], + "tags": null, + "createDate": "2019-02-05" + }, + { + "title": "JavaScript Skype Status Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-skype-status", + "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", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-skype-status/images/demo.gif", + "authors": [ + { + "name": "Vincent Biret", + "pictureUrl": "https://github.com/baywet.png" + } + ], + "tags": null, + "createDate": "2019-03-27" + }, + { + "title": "Handling Multiple Editions of SPFx Solution", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-solution-editions", + "description": "This sample shows possible approach of handling multiple editions (e.g. trial, lite, full) of SharePoint Framework solution.", + "image": "https://avatars3.githubusercontent.com/u/17036219?s=460&v=4", + "authors": [ + { + "name": "Alex Terentiev", + "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" + } + ], + "tags": null, + "createDate": "2017-08-23" + }, + { + "title": "Modern Experience Theme Manager", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-theme-manager", + "description": "This sample web part provides a user interface for creating, updating, deleting and applying a Modern Experience SharePoint theme in SharePoint Online.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-theme-manager/assets/create-a-theme.png", + "authors": [ + { + "name": "David Warner II", + "pictureUrl": "https://avatars.githubusercontent.com/u/10676147?s=460&u=9e4e74223c4ffb430fb77c97892a84b286df1921&v=4" + }, + { + "name": "Beau Cameron", + "pictureUrl": "https://avatars.githubusercontent.com/u/7944457?s=460&u=cbea276e0125f71a183f8ad94475dbd1984c6afa&v=4" + }, + { + "name": "Hugo Bernier", + "pictureUrl": "https://github.com/hugoabernier.png" + } + ], + "tags": null, + "createDate": "2020-06-01" + }, + { + "title": "Modern Experience Theme Manager 2019", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-theme-manager-2019", + "description": "This sample web part provides a user interface for applying a Modern Experience theme in SharePoint 2019 on-premises.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-theme-manager-2019/assets/apply-a-theme.png", + "authors": [ + { + "name": "David Warner II", + "pictureUrl": "https://avatars.githubusercontent.com/u/10676147?s=460&u=9e4e74223c4ffb430fb77c97892a84b286df1921&v=4" + }, + { + "name": "Beau Cameron", + "pictureUrl": "https://avatars.githubusercontent.com/u/7944457?s=460&u=cbea276e0125f71a183f8ad94475dbd1984c6afa&v=4" + }, + { + "name": "Eric Skaggs", + "pictureUrl": "https://github.com/skaggej.png" + } + ], + "tags": null, + "createDate": "2019-06-17" + }, + { + "title": "Workbench customizer", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-workbench-customizer", + "description": "This sample shows how the Workbench page can be customized to display in a way that better mimics a modern SharePoint page.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-workbench-customizer/assets/Preview.png", + "authors": [ + { + "name": "Joel Rodrigues", + "pictureUrl": "https://github.com/joelfmrodrigues.png" + } + ], + "tags": null, + "createDate": "2020-11-02" + }, + { + "title": "Knockout Dependent Properties", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/knockout-dependent-properties", + "description": "Sample Web Part illustrating...", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/knockout-dependent-properties/assets/dep-props.png", + "authors": [ + { + "name": "Alex Terentiev", + "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" + } + ], + "tags": null, + "createDate": "2017-05-20" + }, + { + "title": "Sample showing the use of @pnp/sp library with Knockoutjs", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/knockout-sp-pnp-js", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/knockout-sp-pnp-js/assets/screenshot.png", + "authors": [ + { + "name": "Patrick Rodgers", + "pictureUrl": "https://github.com/patrick-rodgers.png" + } + ], + "tags": null, + "createDate": "2018-11-14" + }, + { + "title": "Taxonomy Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/knockout-taxonomy", + "description": "Sample Web Part illustrating Reading taxonomy term stores' hierarchy from SharePoint, Loading JavaScript Object Model scripts, creating Knockout components", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/knockout-taxonomy/assets/Taxonomy.png", + "authors": [ + { + "name": "Alex Terentiev", + "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" + } + ], + "tags": null, + "createDate": "2017-05-05" + }, + { + "title": "Consuming Third Party APIs secured with Azure Active Directory within SharePoint Framework", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-3rd-party-api", + "description": "This sub folders contains a client-side project that shows how to consume a 3rd party API within SharePoint Framework.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-3rd-party-api/images/react-3rd-party-api-ui-sample.gif", + "authors": [ + { + "name": "Paolo Pialorsi", + "pictureUrl": "https://github.com/PaoloPia.png" + } + ], + "tags": null, + "createDate": "2018-02-19" + }, + { + "title": "Azure Active Directory implicit flow authentication samples", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-aad-implicitflow", + "description": "Sample SharePoint Framework web parts built using React illustrating different scenarios using implicit OAuth flow with Azure Active Directory.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-aad-implicitflow/assets/upcoming-meetings-preview.png", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + } + ], + "tags": null, + "createDate": "2017-03-17" + }, + { + "title": "Call custom Web API secured with AAD from SharePoint Framework client-side web part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-aad-webapi", + "description": "Sample SharePoint Framework client-side web part illustrating communication with a custom Web API secured with Azure Active Directory.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-aad-webapi/assets/preview.png", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + } + ], + "tags": null, + "createDate": "2016-10-10" + }, + { + "title": "Accordion Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-accordion", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-accordion/assets/AccordionPreview.png", + "authors": [ + { + "name": "Gautam Sheth", + "pictureUrl": "https://github.com/gautamdsheth.png" + }, + { + "name": "Abhishek Garg", + "pictureUrl": "https://avatars.githubusercontent.com/u/5449154?s=400&v=4" + } + ], + "tags": null, + "createDate": "2020-06-22" + }, + { + "title": "Dynamic Accordion - FAQ Builder web part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-accordion-dynamic-section", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-accordion-dynamic-section/assets/react-accordion-section.gif", + "authors": [ + { + "name": "Jerry Yasir", + "pictureUrl": "https://github.com/jerryyasir.png" + }, + { + "name": "Jack Vinitsky", + "pictureUrl": "https://github.com/jack-vinitsky.png" + }, + { + "name": "Ravi Chandra", + "pictureUrl": "https://github.com/Ravikadri.png" + } + ], + "tags": null, + "createDate": "2021-01-05" + }, + { + "title": "Accordion Section FAQ Builder", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-accordion-section", + "description": "Adds a collapsible accordion section to an Office 365 SharePoint page or Teams Tab. Ideal for creating FAQs.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-accordion-section/assets/react-accordion-section.gif", + "authors": [ + { + "name": "Erik Benke", + "pictureUrl": "https://github.com/ejbenke.png" + }, + { + "name": "Mike Zimmerman", + "pictureUrl": "https://github.com/mikezimm.png" + } + ], + "tags": null, + "createDate": "2020-09-02" + }, + { + "title": "Tab Accordion", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-accordion-with-richtext", + "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", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-accordion-with-richtext/assets/TabAccordionWebpart.PNG", + "authors": [ + { + "name": "Arun Kumar Perumal", + "pictureUrl": "https://github.com/arunkumarperumal.png" + } + ], + "tags": null, + "createDate": "2022-03-30" + }, + { + "title": "Adaptive Card Host control", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-adaptive-card-host-control", + "description": "This web part provides an example of how to use the AdaptiveCardHost component present in the PnP React Controls library.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-adaptive-card-host-control/assets/AdaptiveCardHost.gif", + "authors": [ + { + "name": "Fabio Franzini", + "pictureUrl": "https://github.com/fabiofranzini.png" + } + ], + "tags": null, + "createDate": "2022-03-09" + }, + { + "title": "Image Gallery Web Part Built with Adaptive Cards", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-adaptive-cards-image-gallery", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-adaptive-cards-image-gallery/assets/sharepoint-run.gif", + "authors": [ + { + "name": "Nanddeep Nachan", + "pictureUrl": "https://github.com/nanddeepn.png" + }, + { + "name": "Ravi Kulkarni", + "pictureUrl": "https://github.com/ravi16a87.png" + } + ], + "tags": null, + "createDate": "2020-06-15" + }, + { + "title": "Adaptive Cards Host", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-adaptivecards", + "description": "This sample creates an Adaptive Cards Host web part that you can use to display Adaptive Cards in your SharePoint applications.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-adaptivecards/assets/AdaptiveCardsHostAllSamples.gif", + "authors": [ + { + "name": "Hugo Bernier", + "pictureUrl": "https://github.com/hugoabernier.png" + } + ], + "tags": null, + "createDate": "2021-02-23" + }, + { + "title": "Adaptive Cards Viewer using Hooks", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-adaptivecards-hooks", + "description": "A version of react-adaptivecards using React Hooks.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-adaptivecards-hooks/assets/preview.png", + "authors": [ + { + "name": "Paul Schaeflein", + "pictureUrl": "https://github.com/pschaeflein.png" + } + ], + "tags": null, + "createDate": "2020-08-25" + }, + { + "title": "Add Form Customizer to List", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-add-formcustomizer-to-list", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-add-formcustomizer-to-list/assets/webpartinaction-form.gif", + "authors": [ + { + "name": "Siddharth Vaghasia", + "pictureUrl": "https://github.com/siddharth-vaghasia.png" + } + ], + "tags": null, + "createDate": "2022-09-05" + }, + { + "title": "Add JS and CSS reference on Modern Pages", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-add-js-css-ref", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-add-js-css-ref/assets/webpartinaction.gif", + "authors": [ + { + "name": "Siddharth Vaghasia", + "pictureUrl": "https://github.com/siddharth-vaghasia.png" + } + ], + "tags": null, + "createDate": "2020-06-11" + }, + { + "title": "Site Collection App Catalogs", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-admin-sc-catalog-pnpjs", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-admin-sc-catalog-pnpjs/assets/react-admin-sc-catalog-pnpjs-webpart-animated.gif", + "authors": [ + { + "name": "Federico Porceddu", + "pictureUrl": "https://github.com/fredupstair.png" + } + ], + "tags": null, + "createDate": "2019-11-07" + }, + { + "title": "Advanced Page Properties", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-advanced-page-properties", + "description": "Replicates the functionality of Page Properties with improvements", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-advanced-page-properties/assets/diff-screencap.png", + "authors": [ + { + "name": "Valeras Narbutas", + "pictureUrl": "https://avatars.githubusercontent.com/u/16476453?v=4" + }, + { + "name": "Mike Homol", + "pictureUrl": "https://github.com/mhomol.png" + }, + { + "name": "Abderahman Moujahid", + "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4" + } + ], + "tags": null, + "createDate": "2021-03-30" + }, + { + "title": "Aggregated Calendar Web part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-aggregated-calendar", + "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", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-aggregated-calendar/assets/react-aggregated-calendar.gif", + "authors": [ + { + "name": "Dhaval Shah", + "pictureUrl": "https://avatars.githubusercontent.com/u/13947393?s=460&u=38d18e840d22f5567d508027515c728025bae8cb&v=4" + } + ], + "tags": null, + "createDate": "2018-07-16" + }, + { + "title": "App settings web part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-app-settings", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-app-settings/assets/app-settings-class.PNG", + "authors": [ + { + "name": "Velin Georgiev", + "pictureUrl": "https://github.com/VelinGeorgiev.png" + } + ], + "tags": null, + "createDate": "2019-03-03" + }, + { + "title": "React AppInsights Dashboard", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-appinsights-dashboard", + "description": "This web part displays different statistics data captured in the Azure Application Insights in a graphical representation.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-appinsights-dashboard/assets/AppInsights_Dashboard.gif", + "authors": [ + { + "name": "Sudharsan Kesavanarayanan", + "pictureUrl": "https://github.com/sudharsank.png" + } + ], + "tags": null, + "createDate": "2020-06-17" + }, + { + "title": "Associated Sites Links", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-associated-sites-links/assets/result.png", + "authors": [ + { + "name": "Ari Gunawan", + "pictureUrl": "https://github.com/AriGunawan.png" + } + ], + "tags": null, + "createDate": "2021-04-19" + }, + { + "title": "Using @pnp/js with Async / Await", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-async-await-sp-pnp-js", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-async-await-sp-pnp-js/assets/async-await-sp-pnp-js.png", + "authors": [ + { + "name": "Jose Quinto", + "pictureUrl": "https://github.com/jquintozamora.png" + } + ], + "tags": null, + "createDate": "2018-07-20" + }, + { + "title": "At a Glance", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-at-a-glance", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-at-a-glance/assets/demo.gif", + "authors": [ + { + "name": "Anoop Tatti", + "pictureUrl": "https://github.com/anoopt.png" + } + ], + "tags": null, + "createDate": "2021-09-07" + }, + { + "title": "SPFx Avatar", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-avatar", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-avatar/assets/reactAvatarOutcome.gif", + "authors": [ + { + "name": "Kunj Sangani", + "pictureUrl": "https://github.com/kunj-sangani.png" + }, + { + "name": "Joel Rodrigues", + "pictureUrl": "https://github.com/joelfmrodrigues.png" + } + ], + "tags": null, + "createDate": "2020-08-01" + }, + { + "title": "Local Azure Function and SPFx Web Part Development to consume third party APIs", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-azfunc-vimeo", + "description": "This sample shows how to consume third-party APIs through an Azure Functions by a Web Part.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/gh-pages/img/_nopreview.png", + "authors": [ + { + "name": "Stefan Bauer", + "pictureUrl": "https://github.com/StfBauer.png" + } + ], + "tags": null, + "createDate": "2018-07-24" + }, + { + "title": "Azure DevOps Tasks", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-azure-devops-tasks", + "description": "This Adaptive Card Extension demonstrates displaying the number of assigned tasks of Azure DevOps.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-azure-devops-tasks/assets/react-azure-devops-tasks.png", + "authors": [ + { + "name": "Takashi Shinohara", + "pictureUrl": "https://github.com/karamem0.png" + } + ], + "tags": null, + "createDate": "2023-03-19" + }, + { + "title": "Consume Northwind Microsoft database from Azure using a Function App ", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-azurefunction-northwind2", + "description": "This web part consume an anonymous Function App from an HTTP Trigger using the templates from the Northwind Microsoft DBs", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-azurefunction-northwind2/assets/FAPP.png", + "authors": [ + { + "name": "Joao Livio", + "pictureUrl": "https://github.com/jtlivio.png" + } + ], + "tags": null, + "createDate": "2022-08-15" + }, + { + "title": "Banner Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-banner", + "description": "This web part provides you the ability to add a variable height image banner with a linkable title.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-banner.gif", + "authors": [ + { + "name": "Eric Overfield", + "pictureUrl": "https://github.com/eoverfield.png" + } + ], + "tags": null, + "createDate": "2018-05-01" + }, + { + "title": "Birthdays Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-birthdays", + "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.\"", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-birthdays/assets/birthdays.gif", + "authors": [ + { + "name": "Valeras Narbutas", + "pictureUrl": "https://github.com/ValerasNarbutas.png" + }, + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + }, + { + "name": "Sajal Maity", + "pictureUrl": "https://github.com/smaity.png" + } + ], + "tags": null, + "createDate": "2019-07-23" + }, + { + "title": "Birthdays Per Month", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-birthdays-per-month", + "description": "Display employees birthday per month in an accordion.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-birthdays-per-month/assets/app.png", + "authors": [ + { + "name": "Ari Gunawan", + "pictureUrl": "https://github.com/AriGunawan.png" + } + ], + "tags": null, + "createDate": "2022-12-03" + }, + { + "title": "Microsoft Bot Framework Web Chat", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-bot-framework", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-bot-framework/assets/bot-frameworkv4-webpart-preview.png", + "authors": [ + { + "name": "Gary Pretty", + "pictureUrl": "https://github.com/garypretty.png" + }, + { + "name": "Stephan Bisser", + "pictureUrl": "https://github.com/stephanbisser.png" + }, + { + "name": "Harsha Vardhini", + "pictureUrl": "https://github.com/Harshagracy.png" + } + ], + "tags": null, + "createDate": "2020-04-15" + }, + { + "title": "Secure Bot Framework", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-bot-framework-secure", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-bot-framework-secure/assets/sp-wp-secure.gif", + "authors": [ + { + "name": "Qiong Wu", + "pictureUrl": "https://github.com/DingmaomaoBJTU.png" + } + ], + "tags": null, + "createDate": "2020-11-06" + }, + { + "title": "Single-Sign On Bot Framework", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-bot-framework-sso", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-bot-framework-secure/assets/sp-wp-secure.gif", + "authors": [ + { + "name": "Qiong Wu", + "pictureUrl": "https://github.com/DingmaomaoBJTU.png" + } + ], + "tags": null, + "createDate": "2020-11-06" + }, + { + "title": "Calendar", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-calendar", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-calendar/assets/animatevideo.gif", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + }, + { + "name": "Mohamed Derhalli", + "pictureUrl": "https://github.com/derhallim.png" + }, + { + "name": "Hugo Bernier", + "pictureUrl": "https://github.com/hugoabernier.png" + }, + { + "name": "Nanddeep Nachan", + "pictureUrl": "https://github.com/nanddeepn.png" + }, + { + "name": "Abderahman Moujahid", + "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4" + }, + { + "name": "Mohammed Amer", + "pictureUrl": "https://avatars.githubusercontent.com/u/19314043?s=460&u=79acb7fd0ad466e1040ddd8a739fa93385018b81&v=4" + }, + { + "name": "Eli H. Schei", + "pictureUrl": "https://github.com/Eli-Schei" + } + ], + "tags": null, + "createDate": "2020-12-04" + }, + { + "title": "Calendar Feed Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-calendar-feed", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-calendar-feed/assets/react-calendar-feed-demo.gif", + "authors": [ + { + "name": "Hugo Bernier", + "pictureUrl": "https://github.com/hugoabernier.png" + }, + { + "name": "Peter Paul Kirschner", + "pictureUrl": "https://github.com/petkir.png" + } + ], + "tags": null, + "createDate": "2020-07-16" + }, + { + "title": "CAML to Table", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-caml2table", + "description": "Let's the user test CAML queries at ease.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-caml2table/assets/Demo.gif", + "authors": [ + { + "name": "Dan Toft", + "pictureUrl": "https://github.com/Tanddant.png" + } + ], + "tags": null, + "createDate": "2022-11-26" + }, + { + "title": "Carousel Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-carousel", + "description": "This web part show images and videos in carousel", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-carousel/assets/carousel.gif", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + }, + { + "name": "Rahul Suryawanshi", + "pictureUrl": "https://github.com/rahulsuryawanshi.png" + }, + { + "name": "Harsha Vardhini", + "pictureUrl": "https://github.com/Harshagracy.png" + }, + { + "name": "Don Kirkham", + "pictureUrl": "https://avatars.githubusercontent.com/u/8630351?s=460&u=669abb2aac55f383a318d3ca6b1cb13467cada59&v=4" + }, + { + "name": "Giuliano De Luca", + "pictureUrl": "https://github.com/giuleon.png" + } + ], + "tags": null, + "createDate": "2020-10-31" + }, + { + "title": "Chart Control Samples", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-chartcontrol", + "description": "This sample contains several web parts that demonstrate how to use the ChartControl from @pnp/spfx-controls-react.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-chartcontrol/assets/WebPartList.png", + "authors": [ + { + "name": "Hugo Bernier", + "pictureUrl": "https://github.com/hugoabernier.png" + } + ], + "tags": null, + "createDate": "2020-12-13" + }, + { + "title": "Chat GPT inside SPFx", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-chat-gpt", + "description": "This webpart uses Chat GPT in an SPFx web part. You can ask questions from the web part and you will see the answers, most recent answers first.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-chat-gpt/assets/example2.png", + "authors": [ + { + "name": "Nico De Cleyre", + "pictureUrl": "https://github.com/nicodecleyre.png" + } + ], + "tags": null, + "createDate": "2023-02-04" + }, + { + "title": "Chat GPT App", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-chatgpt-app", + "description": "This App is a implementation of OpenAI ChatGPT-3. It runs on SharePoint, Teams as Personal or Teams App and Message Extension.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-chatgpt-app/assets/ChatGPT.png", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": null, + "createDate": "2023-02-19" + }, + { + "title": "Check Flows", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-check-flows", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-check-flows/assets/CheckFlows.gif", + "authors": [ + { + "name": "Aakash Bhardwaj", + "pictureUrl": "https://avatars.githubusercontent.com/u/33526902?s=460&u=e780f4ef1da922c84f2c5c66c59cecbff2300581&v=4" + } + ], + "tags": null, + "createDate": "2019-09-17" + }, + { + "title": "Check User Group", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-check-user-group", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-check-user-group/assets/CheckUserGroup.gif", + "authors": [ + { + "name": "Aakash Bhardwaj", + "pictureUrl": "https://avatars.githubusercontent.com/u/33526902?s=460&u=e780f4ef1da922c84f2c5c66c59cecbff2300581&v=4" + } + ], + "tags": null, + "createDate": "2020-03-09" + }, + { + "title": "Cherry picked content", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-cherry-picked-content", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-cherry-picked-content/assets/React-Cherry-Picked-Content-Sample.png", + "authors": [ + { + "name": "Christophe Humbert", + "pictureUrl": "https://github.com/PathToSharePoint.png" + } + ], + "tags": null, + "createDate": "2022-02-21" + }, + { + "title": "Company Stories", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-company-stories", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-company-stories/assets/react-company-stories.gif", + "authors": [ + { + "name": "Luis Mañez", + "pictureUrl": "https://github.com/luismanez.png" + } + ], + "tags": null, + "createDate": "2021-03-31" + }, + { + "title": "Comparer with File Picker", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-comparer", + "description": "Allows users to compare Before and After pictures, with a draggable slider. Implements a custom file picker.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-comparer/assets/ComparerWebPart.gif", + "authors": [ + { + "name": "Hugo Bernier", + "pictureUrl": "https://github.com/hugoabernier.png" + } + ], + "tags": null, + "createDate": "2019-01-27" + }, + { + "title": "Code Splitting in SharePoint Framework", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-components-dynamicloading", + "description": "Load React components and third party packages on demand in SPFx", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-components-dynamicloading/assets/cs3.gif", + "authors": [ + { + "name": "Vardhaman Deshpande", + "pictureUrl": "https://github.com/vman.png" + } + ], + "tags": null, + "createDate": "2018-10-09" + }, + { + "title": "Content Query Web Part (SharePoint Online)", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-content-query-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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-content-query-online/assets/toolpart.gif", + "authors": [ + { + "name": "David Warner II", + "pictureUrl": "https://avatars.githubusercontent.com/u/10676147?s=460&u=9e4e74223c4ffb430fb77c97892a84b286df1921&v=4" + }, + { + "name": "Hugo Bernier", + "pictureUrl": "https://github.com/hugoabernier.png" + }, + { + "name": "Paolo Pialorsi", + "pictureUrl": "https://github.com/PaoloPia.png" + }, + { + "name": "Abderahman Moujahid", + "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4" + } + ], + "tags": null, + "createDate": "2021-01-07" + }, + { + "title": "Content Query Web Part (On-Premises SharePoint)", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-content-query-onprem", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-content-query-onprem/Misc/toolpart.gif?raw=true", + "authors": [ + { + "name": "Simon-Pierre Plante", + "pictureUrl": "https://github.com/spplante.png" + } + ], + "tags": null, + "createDate": "2018-05-22" + }, + { + "title": "Copy Views", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-copy-views", + "description": "The Copy Views solution enables a user to copy views from one list/library to another across site collections.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-copy-views/assets/copy-views.gif", + "authors": [ + { + "name": "Martin Lingstuyl", + "pictureUrl": "https://avatars.githubusercontent.com/u/5267487?v=4" + } + ], + "tags": null, + "createDate": "2022-08-29" + }, + { + "title": "COVID 19 information web part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-covid19-info", + "description": "This web part displays info about the COVID-19 virus for a given country.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-covid19-info/assets/covid-counter.gif", + "authors": [ + { + "name": "Robin Agten", + "pictureUrl": "https://github.com/agtenr.png" + } + ], + "tags": null, + "createDate": "2020-03-25" + }, + { + "title": "Cross-Device Data", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-cross-device-data", + "description": "This solution demonstrates how to use the OneDrive special folder Apps in order to save user's preferencies cross-device.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-cross-device-data/assets/Preview.jpg", + "authors": [ + { + "name": "Giuliano De Luca", + "pictureUrl": "https://github.com/giuleon.png" + } + ], + "tags": null, + "createDate": "2021-07-26" + }, + { + "title": "CSS in JS with SharePoint Framework and TypeStyle", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-css-in-js-typestyle", + "description": "The web part demonstrates the usage of \"CSS in JS\" pattern with SharePoint Framework. \"CSS in JS\" is implemented using TypeStyle library.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-css-in-js-typestyle/assets/dynamic-styles.gif", + "authors": [ + { + "name": "Sergei Sergeev", + "pictureUrl": "https://github.com/s-KaiNet.png" + } + ], + "tags": null, + "createDate": "2020-04-24" + }, + { + "title": "Custom Links", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-custom-links", + "description": "In this web part you can full customize the background and foreground color, font size, width and height of links.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-custom-links/assets/customlinks.gif", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": null, + "createDate": "2020-10-05" + }, + { + "title": "Custom property pane controls", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-custompropertypanecontrols", + "description": "Sample custom property pane controls built in React for use with SharePoint Framework client-side web parts.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-custompropertypanecontrols/assets/async-dropdown-preview.gif", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + }, + { + "name": "Alex Terentiev", + "pictureUrl": "https://github.com/AJIXuMuK.png" + } + ], + "tags": null, + "createDate": "2017-05-01" + }, + { + "title": "Image generation using DALL-E API", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-dall-e-image-generation", + "description": "This web part allows you to generate some images using the recently released API of DALL-E image generation.", + "image": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/main/samples/react-dall-e-image-generation/assets/react-dall-e-image-generation.gif", + "authors": [ + { + "name": "Luis Mañez", + "pictureUrl": "https://github.com/luismanez.png" + } + ], + "tags": null, + "createDate": "2022-11-08" + }, + { + "title": "Data Table", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-datatable", + "description": "This web part provides easy way to render SharePoint custom list in data table view with all the necessary features.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-datatable/assets/preview.png", + "authors": [ + { + "name": "Chandani Prajapati", + "pictureUrl": "https://github.com/chandaniprajapati.png" + } + ], + "tags": null, + "createDate": "2021-03-01" + }, + { + "title": "DataTable Using MUI table", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-datatable-using-mui-tables", + "description": "This web part provides mui datatable features for your lists.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-datatable-using-mui-tables/assets/first.png", + "authors": [ + { + "name": "Jeffin Jacob", + "pictureUrl": "https://github.com/jeffinjacob.png" + } + ], + "tags": null, + "createDate": "2022-01-30" + }, + { + "title": "Date range picker in SPFx", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-daterangepicker", + "description": "This web part used the date range picker in the SharePoint Framework (SPFx) web part", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-daterangepicker/assets/daterange1.png", + "authors": [ + { + "name": "Ravichandran Krishnasamy", + "pictureUrl": "https://github.com/ravichandran-blog.png" + } + ], + "tags": null, + "createDate": "2020-07-04" + }, + { + "title": "Design Patterns applied to Sharepoint Framework", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-designpatterns-typescript", + "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.", + "image": "https://avatars3.githubusercontent.com/u/6962857?s=460&v=4", + "authors": [ + { + "name": "Luis Valencia", + "pictureUrl": "https://github.com/levalencia.png" + } + ], + "tags": null, + "createDate": "2018-05-10" + }, + { + "title": "Dev-Radar for SharePoint Online", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-dev-radar", + "description": "The web part Use PnPjs library and Axios", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-dev-radar/dev-radar.png", + "authors": [ + { + "name": "Saulo Oliveira", + "pictureUrl": "https://github.com/sauslash.png" + } + ], + "tags": null, + "createDate": "2020-03-01" + }, + { + "title": "Organization Directory Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-directory", + "description": "Search People from Organization Directory and show live persona card on hover.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-directory/assets/react-directory7.png", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + }, + { + "name": "Peter Paul Kirschner", + "pictureUrl": "https://github.com/petkir.png" + }, + { + "name": "Sudharsan Kesavanarayanan", + "pictureUrl": "https://github.com/sudharsank.png" + }, + { + "name": "Abderahman Moujahid", + "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4" + } + ], + "tags": null, + "createDate": "2021-03-04" + }, + { + "title": "Web part displaying hierarchical information from SharePoint list", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-display-hierarchy", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-display-hierarchy/assets/local-sharepoint-workbench-run.png", + "authors": [ + { + "name": "Nanddeep Nachan", + "pictureUrl": "https://github.com/nanddeepn.png" + }, + { + "name": "Ravi Kulkarni", + "pictureUrl": "https://github.com/ravi16a87.png" + } + ], + "tags": null, + "createDate": "2020-11-21" + }, + { + "title": "Document Card FAQ", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-doccard-faq", + "description": "React FAQ Document Card Web Part", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-doccard-faq/assets/FAQdocCardPreview.gif", + "authors": [ + { + "name": "Sam Collins", + "pictureUrl": "https://github.com/SamC148.png" + } + ], + "tags": null, + "createDate": "2021-04-05" + }, + { + "title": "Documents Links Accordion", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-document-links-accordion", + "description": "This web part allows user create a accordion with documents links grouped by any column of document library.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-document-links-accordion/assets/documentsLinksAccordion.gif", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": null, + "createDate": "2021-10-10" + }, + { + "title": "Documents Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-documents-detailslist", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-documents-detailslist/assets/Preview.gif", + "authors": [ + { + "name": "Dimcho Tsanov", + "pictureUrl": "https://avatars.githubusercontent.com/u/9058087?s=460&u=43820d97a5aaf5719a4c98be59c673fb460f0001&v=4" + }, + { + "name": "Harsha Vardhini", + "pictureUrl": "https://github.com/Harshagracy.png" + } + ], + "tags": null, + "createDate": "2020-04-28" + }, + { + "title": "Using Dynamics CRM API", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-dynamics-crm-api", + "description": "This sample shows how to consume Dynamics CRM API using AadTokenProvider class.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-dynamics-crm-api/assets/screenshot.gif", + "authors": [ + { + "name": "Ramin Ahmadi", + "pictureUrl": "https://github.com/AhmadiRamin.png" + } + ], + "tags": null, + "createDate": "2020-07-12" + }, + { + "title": "Edit Application Customizers", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-edit-applicationcustomizer", + "description": "This web part will allow users to view/update application customizers properties across any web where the current user has access to.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-edit-applicationcustomizer/assets/react-all-applicationcustomizers.gif", + "authors": [ + { + "name": "Kunj Sangani", + "pictureUrl": "https://github.com/kunj-sangani.png" + }, + { + "name": "Siddharth Vaghasia", + "pictureUrl": "https://github.com/siddharth-vaghasia.png" + } + ], + "tags": null, + "createDate": "2020-11-07" + }, + { + "title": "Emoji Ratings", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-emoji-ratings", + "description": "Take emoji-based reactions or feedback for a given news/article/post", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-emoji-ratings/assets/EmojiWPinAction.gif", + "authors": [ + { + "name": "Siddharth Vaghasia", + "pictureUrl": "https://github.com/siddharth-vaghasia.png" + } + ], + "tags": null, + "createDate": "2021-09-24" + }, + { + "title": "Enhanced List Formatting", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-enhanced-list-formatting", + "description": "This web part allows you to add custom CSS on a page to enhance list formatting.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-enhanced-list-formatting/assets/EnhancedListFormatting.gif", + "authors": [ + { + "name": "Hugo Bernier", + "pictureUrl": "https://github.com/hugoabernier.png" + }, + { + "name": "David Warner II", + "pictureUrl": "https://avatars.githubusercontent.com/u/10676147?s=460&u=9e4e74223c4ffb430fb77c97892a84b286df1921&v=4" + } + ], + "tags": null, + "createDate": "2020-03-18" + }, + { + "title": "Enhanced Power Apps", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-enhanced-powerapps", + "description": "Adds dynamic resizing, theme awareness, and dynamic data to embedded Power Apps", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-enhanced-powerapps/assets/enhanced-power-apps.gif", + "authors": [ + { + "name": "Hugo Bernier", + "pictureUrl": "https://github.com/hugoabernier.png" + }, + { + "name": "Kunj Balkrishna Sangani", + "pictureUrl": "https://github.com/kunj-sangani.png" + } + ], + "tags": null, + "createDate": "2020-07-26" + }, + { + "title": "Event Aggregator Sample (DEPRECATED)", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-events-aggregator", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-events-aggregator/assets/spfx-event-aggregator.gif", + "authors": [ + { + "name": "Velin Georgiev", + "pictureUrl": "https://github.com/VelinGeorgiev.png" + }, + { + "name": "Austin Breslin", + "pictureUrl": "https://avatars.githubusercontent.com/u/10480670?s=460&v=4" + } + ], + "tags": null, + "createDate": "2018-11-18" + }, + { + "title": "Dynamic data", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-events-dynamicdata", + "description": "Sample web parts illustrating using the SharePoint Framework Dynamic data capability.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-events-dynamicdata/assets/dynamic-data-webparts.png", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + }, + { + "name": "Hugo Bernier", + "pictureUrl": "https://github.com/hugoabernier.png" + } + ], + "tags": null, + "createDate": "2020-07-08" + }, + { + "title": "SharePoint Framework Facebook Page Social Plugin web part sample", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-facebook-plugin", + "description": "This sample shows how to implement iFrame-based web parts with a dynamic responsive behavior on the example of Facebook Page Social Plugin.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-facebook-plugin/assets/preview.png", + "authors": [ + { + "name": "Andrew Koltyakov", + "pictureUrl": "https://avatars.githubusercontent.com/u/7816483?s=460&u=d77bbdeda1e5fc389b11899f93b62a7d00475835&v=4" + }, + { + "name": "Ari Gunawan", + "pictureUrl": "https://github.com/AriGunawan.png" + } + ], + "tags": null, + "createDate": "2018-08-26" + }, + { + "title": "Frequently Asked Questions", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-faqapp", + "description": "Allows users to create Frequently Asked Questions(Faq App) in modern and classic SharePoint pages.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-faqapp/assets/FAQWebpart.png", + "authors": [ + { + "name": "Ashok Swain", + "pictureUrl": "https://avatars.githubusercontent.com/u/26612087?s=460&v=4" + }, + { + "name": "Abderahman Moujahid", + "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4" + } + ], + "tags": null, + "createDate": "2020-10-28" + }, + { + "title": "Frequently Asked Questions", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-faqs", + "description": "Allows users to create Frequently Asked Questions using Property Field Collection Data", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-faqs/assets/FAQWebpart.png", + "authors": [ + { + "name": "Arun Kumar Perumal", + "pictureUrl": "https://avatars.githubusercontent.com/u/39132298?v=4" + } + ], + "tags": null, + "createDate": "2022-03-07" + }, + { + "title": "Deployment of SharePoint assets as part of SPFx package", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-feature-framework", + "description": "Simplistic solution demonstrating how to provision SharePoint assets using Feature Framework elements when SharePoint Framework solution is being deployed to a SharePoint site.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-feature-framework/assets/screenshot.png", + "authors": [ + { + "name": "Vesa Juvonen", + "pictureUrl": "https://github.com/VesaJuvonen.png" + } + ], + "tags": null, + "createDate": "2017-02-27" + }, + { + "title": "Feedback", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-feedback", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-feedback/assets/feedbackwebpart.gif", + "authors": [ + { + "name": "Perry Kankam", + "pictureUrl": "https://github.com/perr124.png" + }, + { + "name": "Abderahman Moujahid", + "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4" + } + ], + "tags": null, + "createDate": "2021-03-03" + }, + { + "title": "Feedback Sidebar", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-feedback-sidebar", + "description": "This web part displays a sidebar that allows users to provide feedback on various sections of your site.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-feedback-sidebar/assets/preview.gif", + "authors": [ + { + "name": "Matteo Serpi", + "pictureUrl": "https://github.com/srpmtt.png" + }, + { + "name": "Alessia De Martino", + "pictureUrl": "https://github.com/AlessiaDeMartino.png" + }, + { + "name": "Michele Catena", + "pictureUrl": "https://github.com/10xMike.png" + } + ], + "tags": null, + "createDate": "2022-09-14" + }, + { + "title": "File Upload Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-file-upload", + "description": "The file upload web part allowing users to upload multiple files to a document library or as item attachments.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-file-upload/assets/SPFileUploadPreview.gif", + "authors": [ + { + "name": "Ramin Ahmadi", + "pictureUrl": "https://github.com/AhmadiRamin.png" + } + ], + "tags": null, + "createDate": "2018-02-14" + }, + { + "title": "Find Parker", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-find-parker", + "description": "This webpart is a simple find object game.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-find-parker/assets/parker.gif", + "authors": [ + { + "name": "Adam Wojcik", + "pictureUrl": "https://github.com/Adam-it.png" + } + ], + "tags": null, + "createDate": "2021-10-31" + }, + { + "title": "Flight Tracker", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-flighttracker", + "description": "Sample Web Part to track all flights from a selected airport, date and information type.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-flighttracker/assets/Flight-Tracker-Preview-01.png", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": null, + "createDate": "2022-11-14" + }, + { + "title": "Flow Button", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-flow-button", + "description": "This web part demonstrates displaying the list of flow button of Power Automate.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-flow-button/assets/react-flow-button.gif", + "authors": [ + { + "name": "Takashi Shinohara", + "pictureUrl": "https://github.com/karamem0.png" + } + ], + "tags": null, + "createDate": "2022-02-09" + }, + { + "title": "Using Fluent UI 9 in SPFx web part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-fluentui-9", + "description": "description", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-fluentui-9/assets/FQzNLB4XwAIFMRh.jpg", + "authors": [ + { + "name": "Nick Brown", + "pictureUrl": "https://github.com/techienickb.png" + } + ], + "tags": null, + "createDate": "2022-04-20" + }, + { + "title": "Fluent UI Theme Variant", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-fluentui-theme-variant", + "description": "An example of how to apply a custom theme or a variation of the current SharePoint theme directly to the web part", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-fluentui-theme-variant/assets/preview.gif", + "authors": [ + { + "name": "Fabio Franzini", + "pictureUrl": "https://github.com/fabiofranzini.png" + } + ], + "tags": null, + "createDate": "2021-08-09" + }, + { + "title": "react-follow-document", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-follow-document", + "description": "react-follow-document", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-follow-document/assets/FollowDocumentSample1.gif", + "authors": [ + { + "name": "André Lage", + "pictureUrl": "https://github.com/aaclage.png" + }, + { + "name": "Mai Mostafa", + "pictureUrl": "https://github.com/Maya-Mostafa.png" + } + ], + "tags": null, + "createDate": "2021-06-21" + }, + { + "title": "Followed Drag and Drop Grid", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-followed-drag-and-drop-grid", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-followed-drag-and-drop-grid/assets/mainImage.png", + "authors": [ + { + "name": "Adam Wójcik", + "pictureUrl": "https://github.com/Adam-it.png" + } + ], + "tags": null, + "createDate": "2022-01-09" + }, + { + "title": "Followed Sites", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-followedsites", + "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.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-followed-sites.gif", + "authors": [ + { + "name": "Eric Overfield", + "pictureUrl": "https://github.com/eoverfield.png" + } + ], + "tags": null, + "createDate": "2020-05-13" + }, + { + "title": "React Functional Component web part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-functional-component", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-functional-component/Screenshot.png", + "authors": [ + { + "name": "Bill Ayers", + "pictureUrl": "https://avatars.githubusercontent.com/u/10207194?s=460&v=4" + } + ], + "tags": null, + "createDate": "2019-06-05" + }, + { + "title": "React Functional Component web part with data fetch", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-functional-component-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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-functional-component-with-data-fetch/assets/Screenshot.png", + "authors": [ + { + "name": "Bill Ayers", + "pictureUrl": "https://avatars.githubusercontent.com/u/10207194?s=460&v=4" + }, + { + "name": "Don Kirkham", + "pictureUrl": "https://github.com/DonKirkham.png" + } + ], + "tags": null, + "createDate": "2019-06-14" + }, + { + "title": "Consuming SPFX Service Scopes using React Hooks", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-functional-servicescope-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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-functional-servicescope-hooks/webpart.png", + "authors": [ + { + "name": "Garry Trinder", + "pictureUrl": "https://github.com/garrytrinder.png" + } + ], + "tags": null, + "createDate": "2020-03-25" + }, + { + "title": "React Functional Stateful Component web part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-functional-stateful-component", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-functional-stateful-component/Screenshot.png", + "authors": [ + { + "name": "Bill Ayers", + "pictureUrl": "https://avatars.githubusercontent.com/u/10207194?s=460&v=4" + } + ], + "tags": null, + "createDate": "2019-06-05" + }, + { + "title": "GitHub Badge (React)", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-github-badge", + "description": "Displays information about a GitHub user.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-github-badge/assets/githubbadge.png", + "authors": [ + { + "name": "Hugo Bernier", + "pictureUrl": "https://github.com/hugoabernier.png" + } + ], + "tags": null, + "createDate": "2019-06-06" + }, + { + "title": "Global News", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-global-news", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-global-news/assets/GlobalNews.png", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": null, + "createDate": "2020-04-14" + }, + { + "title": "Global News", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-global-news-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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-global-news-sp2019/assets/GlobalNews02.png", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": null, + "createDate": "2021-05-22" + }, + { + "title": "Web part displaying Google Fit information", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-google-fit", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-google-fit/assets/webpart-preview.png", + "authors": [ + { + "name": "Nanddeep Nachan", + "pictureUrl": "https://github.com/nanddeepn.png" + } + ], + "tags": null, + "createDate": "2019-01-14" + }, + { + "title": "Applications Secrets Expiration", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-app-secret-expiration", + "description": "This sample web part shows the list of your applications registered in Azure AD along with their associated client secret/certificate expiration date.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-app-secret-expiration/assets/react-graph-app-secret-expiration-animated.gif", + "authors": [ + { + "name": "Aimery Thomas", + "pictureUrl": "https://github.com/a1mery.png" + } + ], + "tags": null, + "createDate": "2021-09-17" + }, + { + "title": "Graph auto batching", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-auto-batching", + "description": "This sample shows how to abstract batching graph requests", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/gh-pages/img/_nopreview.png", + "authors": [ + { + "name": "Marcin Wojciechowski", + "pictureUrl": "https://github.com/mgwojciech.png" + } + ], + "tags": null, + "createDate": "2022-02-03" + }, + { + "title": "Graph Calendar Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-calendar", + "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.).", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-calendar/assets/react-graph-calendar-spo.gif", + "authors": [ + { + "name": "Sébastien Levert", + "pictureUrl": "https://github.com/sebastienlevert.png" + }, + { + "name": "Abderahman Moujahid", + "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4" + } + ], + "tags": null, + "createDate": "2020-11-06" + }, + { + "title": "Cascading managed metadata using Graph API", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-cascading-managed-metadata", + "description": "Shows how to use the Microsoft Graph APIs (beta) for Taxonomy to get the data.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-cascading-managed-metadata/assets/cmmd.gif", + "authors": [ + { + "name": "Anoop Tatti", + "pictureUrl": "https://avatars.githubusercontent.com/u/9694225?s=460&u=fbb4b27ed944935800d5f6dbc91e71911ce0d4ec&v=4" + } + ], + "tags": null, + "createDate": "2020-09-02" + }, + { + "title": "Web part showing Url validation for SharePoint using Office Graph", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-evalurl", + "description": "This sample contains a class that evaluates the url input of a text field against the Microsoft Graph.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-evalurl/assets/url-graph-eval.gif", + "authors": [ + { + "name": "Stefan Bauer", + "pictureUrl": "https://github.com/StfBauer.png" + } + ], + "tags": null, + "createDate": "2018-04-15" + }, + { + "title": "Feedback Form", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-feedback-form", + "description": "Sample SPFx React web part which allows sending emails using Microsoft Graph.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-feedback-form/assets/preview.gif", + "authors": [ + { + "name": "Hugo Bernier", + "pictureUrl": "https://github.com/hugoabernier.png" + } + ], + "tags": null, + "createDate": "2020-05-15" + }, + { + "title": "Graph Group Viewer", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-groupviewer", + "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", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-groupviewer/assets/preview.gif", + "authors": [ + { + "name": "Zach Roberts", + "pictureUrl": "https://github.com/zachroberts8668.png" + } + ], + "tags": null, + "createDate": "2021-09-27" + }, + { + "title": "Graph MGT Client", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-mgt-client", + "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. ", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-mgt-client/assets/DemoGraphClient.gif", + "authors": [ + { + "name": "Sébastien Levert", + "pictureUrl": "https://github.com/sebastienlevert.png" + } + ], + "tags": null, + "createDate": "2021-04-18" + }, + { + "title": "Personal e-mail", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-personalemail", + "description": "Sample React web part showing how to retrieve and display personal e-mail retrieved using the Microsoft Graph.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-personalemail/assets/preview.png", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + } + ], + "tags": null, + "createDate": "2018-10-03" + }, + { + "title": "Using PnPJS with MS Graph", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-pnpjs", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-pnpjs/assets/summary.png", + "authors": [ + { + "name": "Sergei Sergeev", + "pictureUrl": "https://github.com/s-KaiNet.png" + } + ], + "tags": null, + "createDate": "2019-01-09" + }, + { + "title": "My Awards", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-profile-awards", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-profile-awards/assets/react-graph-profile-awards.gif", + "authors": [ + { + "name": "Luis Mañez", + "pictureUrl": "https://github.com/luismanez.png" + } + ], + "tags": null, + "createDate": "2022-06-02" + }, + { + "title": "Graph Usage Reports", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-reports", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-reports/assets/react-graph-reports.gif", + "authors": [ + { + "name": "Ejaz Hussain", + "pictureUrl": "https://github.com/ejazhussain.png" + } + ], + "tags": null, + "createDate": "2019-04-09" + }, + { + "title": "Read / update MS Graph Custom Schema Extensions", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-schema-extensions", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-schema-extensions/assets/webpart.png", + "authors": [ + { + "name": "Luis Mañez", + "pictureUrl": "https://github.com/luismanez.png" + } + ], + "tags": null, + "createDate": "2018-07-03" + }, + { + "title": "Telephone Directory using React, Ms Graph and SPFx", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-telephonedirectory", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-telephonedirectory/assets/Preview.gif", + "authors": [ + { + "name": "Dipen Shah", + "pictureUrl": "https://avatars.githubusercontent.com/u/40450958?s=460&u=77f108fb56adbed4f87304f15ce71033df667aaf&v=4" + }, + { + "name": "Aimery Thomas", + "pictureUrl": "https://avatars.githubusercontent.com/u/7100077?s=460&v=4" + }, + { + "name": "mrkhandev", + "pictureUrl": "https://github.com/mrkhandev.png" + } + ], + "tags": null, + "createDate": "2020-11-07" + }, + { + "title": "Group Membership Manager", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-group-membership-manager", + "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", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-group-membership-manager/assets/group-membership-manager.gif", + "authors": [ + { + "name": "Nick Brown", + "pictureUrl": "https://github.com/techienickb.png" + } + ], + "tags": null, + "createDate": "2022-08-25" + }, + { + "title": "All Microsoft 365 Groups and Teams", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-groups-teams", + "description": "Web part pulls all Microsoft 365 Groups and Teams that the logged in user has access to view.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-groups-teams/assets/Groups-in-my-organization.png", + "authors": [ + { + "name": "Alison Collins", + "pictureUrl": "https://github.com/ReactIntern.png" + }, + { + "name": "Christophe Humbert", + "pictureUrl": "https://github.com/PathToSharePoint.png" + } + ], + "tags": null, + "createDate": "2021-05-06" + }, + { + "title": "Hero Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-hero-webpart", + "description": "This solution creates a customisable Hero web part, it uses a stored collection from the PnP PropertyFieldCollectionData control ", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-hero-webpart/assets/Hero-Webpart.gif", + "authors": [ + { + "name": "Omar El-Anis", + "pictureUrl": "https://github.com/omarelanis.png" + } + ], + "tags": null, + "createDate": "2021-04-02" + }, + { + "title": "Holiday calendar", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-holidays-calendar", + "description": "Holiday calendar solution contains SPFx web part and Adaptive card extension for Viva connections.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-holidays-calendar/assets/209691198-4d0cbc31-f0d4-49c8-a1b5-ae8701406221.png", + "authors": [ + { + "name": "Harminder Singh", + "pictureUrl": "https://github.com/HarminderSethi.png" + } + ], + "tags": null, + "createDate": "2023-01-09" + }, + { + "title": "React Hooks Form Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-hooks", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-hooks/assets/webpart.PNG", + "authors": [ + { + "name": "Adrian Diaz Cervera", + "pictureUrl": "https://github.com/AdrianDiaz81.png" + } + ], + "tags": null, + "createDate": "2019-08-19" + }, + { + "title": "HTM (Hyperscript Tagged Markup) Templating", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-htm-templating", + "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", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-htm-templating/assets/preview.gif", + "authors": [ + { + "name": "Fabio Franzini", + "pictureUrl": "https://github.com/fabiofranzini.png" + } + ], + "tags": null, + "createDate": "2021-08-04" + }, + { + "title": "Image Editor", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-image-editor", + "description": "This solution contains an SPFx web part that shows an HTML Image Editor based on canvas and Office UI Fabric", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-image-editor/assets/react-image-editor.gif", + "authors": [ + { + "name": "Peter Paul Kirschner", + "pictureUrl": "https://github.com/petkir.png" + } + ], + "tags": null, + "createDate": "2021-03-17" + }, + { + "title": "Filterable Image Gallery Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-image-gallery", + "description": "This sample describe a SPFX application which implement an image gallery with taxonomy base filtering and typed search. This application also implement pagination.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-image-gallery/assets/image-gallery.gif", + "authors": [ + { + "name": "Ejaz Hussain", + "pictureUrl": "https://github.com/ejazhussain.png" + } + ], + "tags": null, + "createDate": "2019-03-01" + }, + { + "title": "Image Magnifier", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-image-magnifier", + "description": "This web part allow to magnify an image, displaying a resolution more detailed through a lens.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-image-magnifier/assets/spfx-react-image-magnifier.gif", + "authors": [ + { + "name": "Giuliano De Luca", + "pictureUrl": "https://github.com/giuleon.png" + } + ], + "tags": null, + "createDate": "2017-09-17" + }, + { + "title": "Image Slider from Photo Gallery using Taxonomy Filter", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-image-slider-list-taxonomy-filter", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-image-slider-list-taxonomy-filter/assets/ImageSlider.gif", + "authors": [ + { + "name": "Sudhir Rawat", + "pictureUrl": "https://github.com/sudhir007rawat.png" + } + ], + "tags": null, + "createDate": "2019-03-01" + }, + { + "title": "Instagram Feed", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-instagram", + "description": "Sample web part to showcase an Instagram feed.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-instagram/assets/instagram-feed.png", + "authors": [ + { + "name": "Reshmee Auckloo", + "pictureUrl": "https://github.com/reshmee011.png" + } + ], + "tags": null, + "createDate": "2023-03-12" + }, + { + "title": "Interactive Map", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-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.", + "image": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/main/samples/react-interactive-map/assets/WPPreview.png", + "authors": [ + { + "name": "Sergej Schwabauer", + "pictureUrl": "https://github.com/SPFxAppDev.png" + } + ], + "tags": null, + "createDate": "2023-01-31" + }, + { + "title": "Azure Active Directory invitation manager Graph API samples", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-invitation-manager", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-invitation-manager/assets/SPFx-Invitation-Manager.gif", + "authors": [ + { + "name": "Giuliano De Luca", + "pictureUrl": "https://github.com/giuleon.png" + } + ], + "tags": null, + "createDate": "2017-10-09" + }, + { + "title": "React Inversion Of Control Web Part with Unit Tests using Jest and Enzyme", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-ioc-tests", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-ioc-tests/assets/preview.jpg", + "authors": [ + { + "name": "Paul Ryan", + "pictureUrl": "https://github.com/paulryan.png" + } + ], + "tags": null, + "createDate": "2019-03-20" + }, + { + "title": "Item History", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-item-History", + "description": "This listview command is used to show the past versions of the selected list item in a grid.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-item-History/Capture.PNG", + "authors": [ + { + "name": "Russell Gove", + "pictureUrl": "https://github.com/russgove.png" + } + ], + "tags": null, + "createDate": "2018-06-15" + }, + { + "title": "React Jest Testing sample", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-jest-testing", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-jest-testing/assets/Jest-Typescript-VSCode-debugging.png", + "authors": [ + { + "name": "Velin Georgiev", + "pictureUrl": "https://github.com/VelinGeorgiev.png" + } + ], + "tags": null, + "createDate": "2019-06-23" + }, + { + "title": "Kanban Board Web part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-kanban-board", + "description": "This solution contains an SPFx web part which shows a Kanban board using jqxKanban ReactJS component (from JQWidgets). The web part uses the default columns of the SharePoint Tasks list for showing the board's columns and the tasks.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-kanban-board/assets/kanbanofficeUI.gif", + "authors": [ + { + "name": "Ram Prasad Meenavalli", + "pictureUrl": "https://github.com/RamPrasadMeenavalli.png" + }, + { + "name": "Daniel Westerdale", + "pictureUrl": "https://avatars.githubusercontent.com/u/937208?s=460&v=4" + }, + { + "name": "Peter Paul Kirschner", + "pictureUrl": "https://github.com/petkir.png" + }, + { + "name": "Alex Terentiev", + "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" + } + ], + "tags": null, + "createDate": "2020-07-02" + }, + { + "title": "React Kiota Custom API Client", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-kiota-custom-api-client", + "description": "Using Kiota to generate a client to your AzureAd API and use it from a SPFx webpart.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-kiota-custom-api-client/assets/react-kiota-custom-api-client.png", + "authors": [ + { + "name": "Luis Manez", + "pictureUrl": "https://github.com/luismanez.png" + } + ], + "tags": null, + "createDate": "2022-11-11" + }, + { + "title": "Links web part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-links", + "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.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-links.gif", + "authors": [ + { + "name": "Eric Overfield", + "pictureUrl": "https://github.com/eoverfield.png" + } + ], + "tags": null, + "createDate": "2018-05-01" + }, + { + "title": "List Form Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-list-form", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-list-form/assets/React-ListForm-Overview.gif", + "authors": [ + { + "name": "Dany Wyss", + "pictureUrl": "https://github.com/DanyWyss.png" + }, + { + "name": "Harsha Vardhini", + "pictureUrl": "https://github.com/Harshagracy.png" + }, + { + "name": "Ryan Schouten", + "pictureUrl": "https://github.com/sharepointknight.png" + }, + { + "name": "Abderahman Moujahid", + "pictureUrl": "https://github.com/Abderahman88.png" + }, + { + "name": "Fredrik Thorild", + "pictureUrl": "https://github.com/fthorild.png" + }, + { + "name": "Ari Gunawan", + "pictureUrl": "https://github.com/AriGunawan.png" + } + ], + "tags": null, + "createDate": "2017-11-24" + }, + { + "title": "List Items Menu", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-list-items-menu", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-list-items-menu/assets/ListMenuDocs.gif", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + }, + { + "name": "Mohammed Amer", + "pictureUrl": "https://avatars.githubusercontent.com/u/19314043?s=460&u=79acb7fd0ad466e1040ddd8a739fa93385018b81&v=4" + } + ], + "tags": null, + "createDate": "2021-02-18" + }, + { + "title": "List Items Menu (SP2019 Version)", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-list-items-menu-sp2019", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-list-items-menu-sp2019/assets/react-list-item-menu.gif", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": null, + "createDate": "2021-05-06" + }, + { + "title": "List Search", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-list-search", + "description": "This list search web part allows the user to show data from lists or libraries.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-list-search/assets/differentSources.gif", + "authors": [ + { + "name": "Alberto Gutierrez perez", + "pictureUrl": "https://github.com/albegut.png" + } + ], + "tags": null, + "createDate": "2020-12-20" + }, + { + "title": "Hide Lists", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-lists-hide", + "description": "SPFx Web part to Hide/UnHide lists in a Site Collection's Site Contents Page.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-lists-hide/assets/ListHideWebPart.jpg", + "authors": [ + { + "name": "Sandeep Unnikrishnan", + "pictureUrl": "https://github.com/SandeepDev365.png" + } + ], + "tags": null, + "createDate": "2022-02-27" + }, + { + "title": "Employee ListView Contextual Menu", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-listview-context-ecb", + "description": "This small sample illustrates how to extend the PnP React SPFx ListView control with a contextual menu.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-listview-context-ecb/assets/02_employeelistview_ecb3.png", + "authors": [ + { + "name": "Markus Moeller", + "pictureUrl": "https://github.com/mmsharepoint.png" + } + ], + "tags": null, + "createDate": "2023-01-01" + }, + { + "title": "LOB Integration web part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-lob-integration", + "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.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-lob-integration.png", + "authors": [], + "tags": null, + "createDate": "2018-05-01" + }, + { + "title": "Service Health for Microsoft 365", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-m365-services-health", + "description": "Service Health for Microsoft 365 solution show the health status for all the Microsoft 365 services", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-m365-services-health/assets/M365ServiceHealthDetail.png", + "authors": [ + { + "name": "Harminder Singh", + "pictureUrl": "https://github.com/HarminderSethi.png" + } + ], + "tags": null, + "createDate": "2023-02-03" + }, + { + "title": "Manage Office 365 Groups with SPFx", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-manage-o365-groups", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-manage-o365-groups/assets/web-part-preview.gif", + "authors": [ + { + "name": "Nanddeep Nachan", + "pictureUrl": "https://github.com/nanddeepn.png" + }, + { + "name": "Smita Nachan", + "pictureUrl": "https://github.com/SmitaNachan.png" + } + ], + "tags": null, + "createDate": "2020-01-01" + }, + { + "title": "Manage Profile Card Properties", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-manage-profile-card-properties", + "description": "This web part allows tenant administrators to manage profile card properties.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-manage-profile-card-properties/assets/Screenshot5.png", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": null, + "createDate": "2020-10-05" + }, + { + "title": "Site Designs Manager", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-manage-sitedesigns", + "description": "This web part allows tenant administrators to manage site designs through a graphical interface.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-manage-sitedesigns/assets/screen1.jpg", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": null, + "createDate": "2019-04-08" + }, + { + "title": "Manage SPFx solution using ALM APIs", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-manage-spfx-solutions-alm", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-manage-spfx-solutions-alm/assets/SPFxALM.gif", + "authors": [ + { + "name": "Ramakrishnan Raman", + "pictureUrl": "https://github.com/Ramakrishnan24689.png" + } + ], + "tags": null, + "createDate": "2020-03-09" + }, + { + "title": "Material UI", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-material-ui", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-material-ui/assets/screenshot.gif", + "authors": [ + { + "name": "Ramin Ahmadi", + "pictureUrl": "https://github.com/AhmadiRamin.png" + } + ], + "tags": null, + "createDate": "2019-03-25" + }, + { + "title": "Group members list with Presence information", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-members-with-presence", + "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).", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-members-with-presence/assets/react-members-with-presence.gif", + "authors": [ + { + "name": "Luis Mañez", + "pictureUrl": "https://github.com/luismanez.png" + } + ], + "tags": null, + "createDate": "2019-12-23" + }, + { + "title": "MGT Events", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-mgtevents", + "description": "This sample shows how to use Microsoft Graph Toolkit in SPFx and custom with Fluent UI Fabric Controls", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-mgtevents/assets/mgtevents.jpg", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": null, + "createDate": "2020-11-29" + }, + { + "title": "Minesweeper", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-minesweeper", + "description": "This web part is the classic game Minesweeper, put in a Fluent UI powered SPFx web part!.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-minesweeper/assets/Minesweeper.gif", + "authors": [ + { + "name": "Pieter Heemeryck", + "pictureUrl": "https://github.com/PieterHeemeryck.png" + } + ], + "tags": null, + "createDate": "2020-07-01" + }, + { + "title": "Using React and Mobx", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-mobx", + "description": "Sample web part implementation that uses Mobx to keep track of its state.", + "image": "https://camo.githubusercontent.com/1bfb94ba2675eec1c794cfea81bdde41b964268f/68747470733a2f2f692e6779617a6f2e636f6d2f65366631393033623961396338323031393835636432356363316665323862632e676966", + "authors": [ + { + "name": "Kevin Mees", + "pictureUrl": "https://github.com/kmees.png" + } + ], + "tags": null, + "createDate": "2016-11-04" + }, + { + "title": "Using multiple stores with React and Mobx", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-mobx-multiple-stores", + "description": "A sample web part that uses the Mobx library with multiple stores to keep track of the applications state.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-mobx-multiple-stores/assets/demo.gif", + "authors": [ + { + "name": "Kemal Sinanagic", + "pictureUrl": "https://github.com/KEMiCZA.png" + } + ], + "tags": null, + "createDate": "2019-05-24" + }, + { + "title": [ + "Birthdays Timeline", + "Birthdays" + ], + "url": [ + "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-modern-birthdays", + "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-modern-birthdays" + ], + "description": [ + "Shows upcoming birthdays in the company in a timeline", + "Shows upcoming birthdays in the company" + ], + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-modern-birthdays/assets/birthdays.png", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + }, + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": [ + null, + null + ], + "createDate": [ + "2023-01-31", + "2023-01-31" + ] + }, + { + "title": "Modern Charts", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-modern-charts", + "description": "This web part uses the Chart.js library to visualize SharePoint list data.", + "image": "https://raw.githubusercontent.com/jcoleman-pcprofessional/Modern-Charts/master/assets/modern-chart2.png", + "authors": [ + { + "name": "Jeremy Coleman", + "pictureUrl": "https://github.com/jcoleman-pcprofessional.png" + }, + { + "name": "Peter Paul Kirschner", + "pictureUrl": "https://github.com/petkir.png" + } + ], + "tags": null, + "createDate": "2020-07-30" + }, + { + "title": "Modern Organization Chart", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-modern-organization-chart", + "description": "This web part show organization chart for current user, shows, managers and direct reports and there available status.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-modern-organization-chart/assets/Screenshot1.png", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": null, + "createDate": "2020-07-09" + }, + { + "title": "Microsoft Authentication Library (MSAL JS) authentication sample", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-msal-msgraph", + "description": "", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-msal-msgraph/assets/msal-wp-output.png", + "authors": [ + { + "name": "Elio Struyf", + "pictureUrl": "https://github.com/estruyf.png" + } + ], + "tags": null, + "createDate": "2017-03-17" + }, + { + "title": "Manage Microsoft Graph Open Extension in SPFx", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-msgraph-extension", + "description": "This sample shows how to managed Microsoft Graph Open Extension in SPFX. This application uses User Resource to create Open Extension.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-msgraph-extension/assets/create-graph-extension.png", + "authors": [ + { + "name": "Ejaz Hussain", + "pictureUrl": "https://github.com/ejazhussain.png" + } + ], + "tags": null, + "createDate": "2019-10-20" + }, + { + "title": "Microsoft Graph People Search Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-msgraph-peoplesearch", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-msgraph-peoplesearch/assets/MicrosoftGraphPeopleSearch.gif", + "authors": [ + { + "name": "Yannick Reekmans", + "pictureUrl": "https://github.com/YannickRe.png" + } + ], + "tags": null, + "createDate": "2020-07-31" + }, + { + "title": "Multi-list Grid", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-multilist-grid", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-multilist-grid/src/images/ColumnTypes.PNG", + "authors": [ + { + "name": "Russell Gove", + "pictureUrl": "https://github.com/russgove.png" + } + ], + "tags": null, + "createDate": "2016-12-31" + }, + { + "title": "Image Gallery", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-multimedia-gallery", + "description": "This web part show images and videos in responsive grid, on click it show images and videos in a carousel view.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-multimedia-gallery/assets/MultimediaGallery.gif", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + }, + { + "name": "Vivek Chand", + "pictureUrl": "https://github.com/Vivekrajput20.png" + }, + { + "name": "Peter Paul Kirschner", + "pictureUrl": "https://github.com/petkir.png" + } + ], + "tags": null, + "createDate": "2020-07-19" + }, + { + "title": "Multi-page client-side web part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-multipage", + "description": "Sample SharePoint Framework client-side web parts built using React illustrating building multi-page web parts.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-multipage/assets/poll-preview.gif", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + } + ], + "tags": null, + "createDate": "2017-05-01" + }, + { + "title": "Multi screen web part sample", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-multiscreen-webpart", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-multiscreen-webpart/assets/multi-screen-webpart.gif", + "authors": [ + { + "name": "Velin Georgiev", + "pictureUrl": "https://github.com/VelinGeorgiev.png" + }, + { + "name": "Ari Gunawan", + "pictureUrl": "https://github.com/AriGunawan.png" + } + ], + "tags": null, + "createDate": "2019-07-03" + }, + { + "title": "My Approvals", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-approvals", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-my-approvals/assets/react-my-approvals.gif", + "authors": [ + { + "name": "Takashi Shinohara", + "pictureUrl": "https://github.com/karamem0.png" + } + ], + "tags": null, + "createDate": "2022-01-11" + }, + { + "title": "My Events", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-events", + "description": "This web part provides loggedin user's outlook events with some advanced features", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-my-events/assets/preview.png", + "authors": [ + { + "name": "Chandani Prajapati", + "pictureUrl": "https://github.com/chandaniprajapati.png" + } + ], + "tags": null, + "createDate": "2021-08-18" + }, + { + "title": "My Groups", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-groups", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-my-groups/assets/React-MyGroups_Grid.png", + "authors": [ + { + "name": "Zach Roberts", + "pictureUrl": "https://github.com/zachroberts8668.png" + } + ], + "tags": null, + "createDate": "2020-07-09" + }, + { + "title": "My OneDrive Info", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-onedrive-info", + "description": "MyOneDriveInfo solution contains Adaptive card extension for Viva connection with below functionalities", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-my-onedrive-info/assets/ACEScreenshot1.png", + "authors": [ + { + "name": "Harminder Singh", + "pictureUrl": "https://github.com/HarminderSethi.png" + } + ], + "tags": null, + "createDate": "2023-02-03" + }, + { + "title": "My Personal Apps", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-personal-apps", + "description": "The Web Part My Personal Apps allows the user to define links to Applications or Sites for quick access.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-my-personal-apps/assets/Image1.png", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + }, + { + "name": "Zach Roberts", + "pictureUrl": "https://github.com/zachroberts8668.png" + } + ], + "tags": null, + "createDate": "2020-04-28" + }, + { + "title": "My Sites", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-sites", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-my-sites/assets/MySites.gif", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": null, + "createDate": "2020-08-30" + }, + { + "title": "My Teams", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-teams", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-my-teams/assets/Preview.png", + "authors": [ + { + "name": "Joel Rodrigues", + "pictureUrl": "https://github.com/joelfmrodrigues.png" + }, + { + "name": "Yves Habersaat", + "pictureUrl": "https://github.com/yhabersaat.png" + } + ], + "tags": null, + "createDate": "2019-02-26" + }, + { + "title": "My OneDrive", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-myonedrive", + "description": "Displays currently logged in user's OneDrive's file", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-myonedrive/assets/MyOneDriveInAction.gif", + "authors": [ + { + "name": "Siddharth Vaghasia", + "pictureUrl": "https://github.com/siddharth-vaghasia.png" + } + ], + "tags": null, + "createDate": "2021-08-12" + }, + { + "title": "My Tasks Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-mytasks", + "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..", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-mytasks/assets/MyTasks.gif", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + }, + { + "name": "Swaminathan Sriram", + "pictureUrl": "https://github.com/Swaminathan-Sriram.png" + } + ], + "tags": null, + "createDate": "2020-09-09" + }, + { + "title": "News", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-news", + "description": "SPFx Webpart to display News from SharePoint site(s)", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-news/assets/Single-View-Default.png", + "authors": [ + { + "name": "Alison Collins", + "pictureUrl": "https://github.com/ReactIntern.png" + } + ], + "tags": null, + "createDate": "2021-04-02" + }, + { + "title": "News Banner", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-news-banner", + "description": "Shows news information as a Banner, this information come from a list defined in any site.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-news-banner/assets/NewsBanner.gif", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": null, + "createDate": "2021-05-06" + }, + { + "title": "SharePoint document generator - Offer Creation (SPFx)", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-office-offer-creation", + "description": "This sample is a Teams personal Tab to act as a Microsoft 365 across application (Teams, Outlook, Office) to generate docuemnts.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-office-offer-creation/assets/16OfferCreationDemo_SPFx.gif", + "authors": [ + { + "name": "Markus Moeller", + "pictureUrl": "https://github.com/mmsharepoint.png" + } + ], + "tags": null, + "createDate": "2023-01-05" + }, + { + "title": "Office Graph Web Part samples", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-officegraph", + "description": "", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-officegraph/assets/trendinginthissite-preview.png", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + } + ], + "tags": null, + "createDate": "2017-05-31" + }, + { + "title": "Offline First Web part built using LocalForage, Whatwg-Fetch, ES6-Promise", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-offline-first", + "description": "Sample SharePoint Framework Client-Side Web Parts built using React showing interacting with the Office Graph.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-offline-first/assets/preview.gif", + "authors": [ + { + "name": "Austin Breslin", + "pictureUrl": "https://avatars.githubusercontent.com/u/10480670?s=460&v=4" + } + ], + "tags": null, + "createDate": "2017-05-31" + }, + { + "title": "OneDrive Finder", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-onedrive-finder", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-onedrive-finder/assets/OneDrivefinderSample3.gif", + "authors": [ + { + "name": "André Lage", + "pictureUrl": "https://github.com/aaclage.png" + } + ], + "tags": null, + "createDate": "2021-04-16" + }, + { + "title": "Multilingual SharePoint Page Summarization with Open AI API and Microsoft Graph Pages API", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-openai-summarise-page-content", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-openai-summarise-page-content/assets/page_summary.png", + "authors": [ + { + "name": "Anoop Tatti", + "pictureUrl": "https://github.com/anoopt.png" + } + ], + "tags": null, + "createDate": "2023-03-12" + }, + { + "title": "Organisation Chart", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-organisationchart", + "description": "A simple Organisation Chart web part using Office UI Fabric, React, REST API batching and ServiceScope plumbing.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-organisationchart/assets/orgchart.png", + "authors": [ + { + "name": "Vardhaman Deshpande", + "pictureUrl": "https://github.com/vman.png" + } + ], + "tags": null, + "createDate": "2017-07-19" + }, + { + "title": "Organization Chart (SP2019 and Online)", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-organization-chart", + "description": "Shows an organization chart based on specified user, and user can navigate to show company organization", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-organization-chart/assets/orgchart.gif", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": null, + "createDate": "2021-05-03" + }, + { + "title": "Create To Do Task from Email (Outlook Add in)", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-outlook-add-todo-task", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/e92d0dac567cc4d59cdfc94186a52a3b776c6d21/samples/react-outlook-add-todo-task/assets/spfx-todo-outlook.gif", + "authors": [ + { + "name": "Luis Mañez", + "pictureUrl": "https://github.com/luismanez.png" + } + ], + "tags": null, + "createDate": "2020-10-16" + }, + { + "title": "Outlook to Teams", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-outlook-copy2teams", + "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.", + "image": "https://camo.githubusercontent.com/a539e3ae63602becc87309ee2a965e4d5a605239/68747470733a2f2f6d6d7368617265706f696e742e66696c65732e776f726470726573732e636f6d2f323032302f30312f616464696e5f6f766572616c6c2e706e67", + "authors": [ + { + "name": "Markus Moeller", + "pictureUrl": "https://github.com/mmsharepoint.png" + } + ], + "tags": null, + "createDate": "2020-04-06" + }, + { + "title": "Page Navigator", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-page-navigator", + "description": "This web part fetches all the automatically added Header anchor tags in a SharePoint page and displays them in a Navigation component.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-page-navigator/assets/PageNavigator.gif", + "authors": [ + { + "name": "Aakash Bhardwaj", + "pictureUrl": "https://avatars.githubusercontent.com/u/33526902?s=460&u=e780f4ef1da922c84f2c5c66c59cecbff2300581&v=4" + }, + { + "name": "Jasey Waegebaert", + "pictureUrl": "https://github.com/Jwaegebaert.png" + } + ], + "tags": null, + "createDate": "2019-09-05" + }, + { + "title": "Page Sections Navigation", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-page-sections-navigation", + "description": "Sample web parts allowing to add sections navigation to the SharePoint page.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-page-sections-navigation/assets/page-nav.gif", + "authors": [ + { + "name": "Alex Terentiev", + "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" + } + ], + "tags": null, + "createDate": "2019-03-22" + }, + { + "title": "Page Contributors Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pagecontributors", + "description": "Displays page contributors in reverse chronological order.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-pagecontributors/assets/pagecontributors_inaction.PNG", + "authors": [ + { + "name": "Stéphane Magne", + "pictureUrl": "https://github.com/SPParseError.png" + }, + { + "name": "Ari Gunawan", + "pictureUrl": "https://github.com/AriGunawan.png" + } + ], + "tags": null, + "createDate": "2017-07-27" + }, + { + "title": "Page Hierarchy", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pages-hierarchy", + "description": "This web part allows users to create a faux page hierarchy in their pages library and use it for page-to-page navigation.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-pages-hierarchy/assets/PagesHierarchy.gif", + "authors": [ + { + "name": "Bo George", + "pictureUrl": "https://avatars.githubusercontent.com/u/10885472?s=460&u=74d23f4289cd555aa530e1c2c6156a382c373f2f&v=4" + }, + { + "name": "Nick Brown", + "pictureUrl": "https://github.com/techienickb.png" + }, + { + "name": "ruslan-s", + "pictureUrl": "https://github.com/ruslan-s.png" + } + ], + "tags": null, + "createDate": "2020-04-30" + }, + { + "title": "Palette Picker", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-palette-picker", + "description": "Custom Property Pane pain resolved (whew), color palette generator inspired by [Jhey](https://codepen.io/jh3y/pen/rNjbmBQ?editors=0011).", + "image": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/main/samples/react-palette-picker/assets/palettePickerWebPart.gif", + "authors": [ + { + "name": "Linda K", + "pictureUrl": "https://github.com/flowerbot.png" + } + ], + "tags": null, + "createDate": "2022-08-01" + }, + { + "title": "People Directory", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-people-directory", + "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.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-people-directory.gif", + "authors": [ + { + "name": "Eric Overfield", + "pictureUrl": "https://github.com/eoverfield.png" + } + ], + "tags": null, + "createDate": "2018-05-01" + }, + { + "title": "People Picker", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-peoplepicker", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-peoplepicker/assets/Preview.gif", + "authors": [ + { + "name": "Giuliano De Luca", + "pictureUrl": "https://github.com/giuleon.png" + } + ], + "tags": null, + "createDate": "2017-12-06" + }, + { + "title": "Personal Calendar", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-personal-calendar", + "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.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-calendar.gif", + "authors": [ + { + "name": "Eric Overfield", + "pictureUrl": "https://github.com/eoverfield.png" + } + ], + "tags": null, + "createDate": "2018-05-01" + }, + { + "title": "Personal Contacts", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-personal-contacts", + "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.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-contacts.gif", + "authors": [ + { + "name": "Eric Overfield", + "pictureUrl": "https://github.com/eoverfield.png" + } + ], + "tags": null, + "createDate": "2018-05-01" + }, + { + "title": "Personal Email", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-personal-email", + "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.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-email.gif", + "authors": [ + { + "name": "Eric Overfield", + "pictureUrl": "https://github.com/eoverfield.png" + } + ], + "tags": null, + "createDate": "2018-05-01" + }, + { + "title": "Personal Greeting", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-personal-greeting", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-personal-greeting/assets/react-personal-greeting.gif", + "authors": [ + { + "name": "Zach Roberts", + "pictureUrl": "https://github.com/zachroberts8668.png" + } + ], + "tags": null, + "createDate": "2020-10-18" + }, + { + "title": "Personal Tasks", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-personal-tasks", + "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.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-tasks.gif", + "authors": [ + { + "name": "Eric Overfield", + "pictureUrl": "https://github.com/eoverfield.png" + } + ], + "tags": null, + "createDate": "2018-05-01" + }, + { + "title": "SPUPS Photo Sync", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-photo-sync", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-photo-sync/assets/SPUPS_Photo_Sync_1.gif", + "authors": [ + { + "name": "Sudharsan Kesavanarayanan", + "pictureUrl": "https://github.com/sudharsank.png" + } + ], + "tags": null, + "createDate": "2020-09-13" + }, + { + "title": "SharePoint Framework PnP Controls Sample", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnp-controls", + "description": "This is a sample project that contains a web part which makes use of the PnP SPFx Controls", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-pnp-controls/assets/webpart-outcome.gif", + "authors": [ + { + "name": "Elio Struyf", + "pictureUrl": "https://github.com/estruyf.png" + }, + { + "name": "Swaminathan Sriram", + "pictureUrl": "https://github.com/Swaminathan-Sriram.png" + } + ], + "tags": null, + "createDate": "2020-12-16" + }, + { + "title": "PnP ListView with PnP Field Controls Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnp-controls-list-view-fields", + "description": "Sample web part to display PnP ListView control with column rendering using PnP Field Controls.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-pnp-controls-list-view-fields/assets/web-part.png", + "authors": [ + { + "name": "Alex Terentiev", + "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" + } + ], + "tags": null, + "createDate": "2020-03-10" + }, + { + "title": "pnp/js and ReactJS Functional Components", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnp-js-hooks", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-pnp-js-hooks/assets/react-pnp-js-sample.png", + "authors": [ + { + "name": "Beau Cameron", + "pictureUrl": "https://github.com/bcameron1231.png" + } + ], + "tags": null, + "createDate": "2022-10-17" + }, + { + "title": "Using @pnp/js and ReactJS", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnp-js-sample", + "description": "Shows how to use PnPjs in a React web part", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-pnp-js-sample/assets/react-pnp-js-sample.png", + "authors": [ + { + "name": "Julie Turner", + "pictureUrl": "https://github.com/juliemturner.png" + }, + { + "name": "Beau Cameron", + "pictureUrl": "https://github.com/bcameron1231.png" + } + ], + "tags": null, + "createDate": "2023-02-18" + }, + { + "title": "GitHub Profile display via API", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnpjs-http-client", + "description": "This web part loads the GitHub profile using SPHttp client in PnP v3.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-pnpjs-http-client/assets/UpdateAPICall.png", + "authors": [ + { + "name": "Divya Akula", + "pictureUrl": "https://github.com/divya-akula.png" + } + ], + "tags": null, + "createDate": "2023-03-07" + }, + { + "title": "PnPjs Project Online", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnpjs-project-online", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-pnpjs-project-online/assets/Preview.gif", + "authors": [ + { + "name": "Joel Rodrigues", + "pictureUrl": "https://github.com/joelfmrodrigues.png" + } + ], + "tags": null, + "createDate": "2019-12-04" + }, + { + "title": "SP Site ER Diagram", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnpjs-spsite-er-diagram", + "description": "This web part loads all lists on a site and display it in a Entity Relationship Diagram (ERD)", + "image": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/main/samples/react-pnpjs-spsite-er-diagram/assets/SPERasAppPageFullScreen.png", + "authors": [ + { + "name": "Niklas Wilhelm", + "pictureUrl": "https://github.com/ICTNiklasWilhelm.png" + } + ], + "tags": null, + "createDate": "2022-11-07" + }, + { + "title": "SPFx web part to Test PnpJS SharePoint Methods", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnpjsexplorer", + "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", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-pnpjsexplorer/assets/pnpjstesterinaction.gif?raw=true", + "authors": [ + { + "name": "Siddharth Vaghasia", + "pictureUrl": "https://github.com/siddharth-vaghasia.png" + }, + { + "name": "Kunj Sangani", + "pictureUrl": "https://github.com/kunj-sangani.png" + }, + { + "name": "Joel Rodrigues", + "pictureUrl": "https://github.com/joelfmrodrigues.png" + }, + { + "name": "Abderahman Moujahid", + "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4" + } + ], + "tags": null, + "createDate": "2020-10-30" + }, + { + "title": "Property Pane Portal PnP Controls", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-ppp-pnp-controls", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-ppp-pnp-controls/assets/React-PPP-PnP-Controls-Sample.png", + "authors": [ + { + "name": "Christophe Humbert", + "pictureUrl": "https://github.com/PathToSharePoint.png" + } + ], + "tags": null, + "createDate": "2022-03-20" + }, + { + "title": "Property Pane Wrapper for HTML Controls", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-ppw-html", + "description": "Showcases the use of the Property Pane Wrap to embed HTML controls in the SPFx Property Pane", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-ppw-html/assets/React-PPW-HTML-Sample.png", + "authors": [ + { + "name": "Christophe Humbert", + "pictureUrl": "https://github.com/PathToSharePoint.png" + } + ], + "tags": null, + "createDate": "2022-02-10" + }, + { + "title": "Private Library/Folder Manager", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-private-libraries", + "description": "This sample provides a webpart that can be used to manage Document Libraries with Secured Subfolders.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-private-libraries/assets/HomeScreen.png", + "authors": [ + { + "name": "Russell Gove", + "pictureUrl": "https://github.com/russgove.png" + } + ], + "tags": null, + "createDate": "2021-07-02" + }, + { + "title": "Project Online", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-project-online", + "description": "This sample shows how to use SPFx to consume data from the Project Online REST API.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-project-online/assets/Preview.gif", + "authors": [ + { + "name": "Joel Rodrigues", + "pictureUrl": "https://github.com/joelfmrodrigues.png" + } + ], + "tags": null, + "createDate": "2020-04-12" + }, + { + "title": "Property Bag Navigation Webparts", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-property-bag-editor", + "description": "A set of webparts that lets you set property bag settings on site collections and enable navigation using those properties.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-property-bag-editor/src/images/PropertyBagEditorDisplay.PNG", + "authors": [ + { + "name": "Russell Gove", + "pictureUrl": "https://github.com/russgove.png" + } + ], + "tags": null, + "createDate": "2017-03-19" + }, + { + "title": "Provision SharePoint Assets with the SPFx solution package", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-provision-assets", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-provision-assets/assets/spfx-provision-assets.gif", + "authors": [ + { + "name": "Velin Georgiev", + "pictureUrl": "https://github.com/VelinGeorgiev.png" + }, + { + "name": "Nanddeep Nachan", + "pictureUrl": "https://github.com/nanddeepn.png" + } + ], + "tags": null, + "createDate": "2020-09-06" + }, + { + "title": "React Questions and Answers", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-questions-and-answers", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-questions-and-answers/assets/QuestionsAndAnswers.gif", + "authors": [ + { + "name": "Bo George", + "pictureUrl": "https://avatars.githubusercontent.com/u/10885472?s=460&u=74d23f4289cd555aa530e1c2c6156a382c373f2f&v=4" + } + ], + "tags": null, + "createDate": "2021-03-22" + }, + { + "title": "Quick Links", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-quick-links", + "description": "A demonstration of how one could build SharePoints Quick Links web part", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-quick-links/assets/Demo.gif", + "authors": [ + { + "name": "Dan Toft", + "pictureUrl": "https://github.com/Tanddant.png" + } + ], + "tags": null, + "createDate": "2023-03-05" + }, + { + "title": "Quick Poll", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-quick-poll", + "description": "This component is developed for the users who really need to create a Poll within a minute and with less maintenance.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-quick-poll/assets/react-quick-poll.gif", + "authors": [ + { + "name": "Sudharsan Kesavanarayanan", + "pictureUrl": "https://github.com/sudharsank.png" + }, + { + "name": "Dipen Shah", + "pictureUrl": "https://github.com/dips365.png" + } + ], + "tags": null, + "createDate": "2020-10-17" + }, + { + "title": "Quote of the Day", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-quotes", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-quotes/assets/react-quotes-sample.png", + "authors": [ + { + "name": "Zach Roberts", + "pictureUrl": "https://github.com/zachroberts8668.png" + }, + { + "name": "Yves Habersaat", + "pictureUrl": "https://github.com/yhabersaat" + } + ], + "tags": null, + "createDate": "2019-11-11" + }, + { + "title": "React Query Microsoft Graph", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-auto-batching", + "description": "This sample shows how you can query Microsoft Graph from React in SharePoint Framework", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/gh-pages/img/_nopreview.png", + "authors": [ + { + "name": "Marcin Wojciechowski", + "pictureUrl": "https://github.com/mgwojciech.png" + } + ], + "tags": null, + "createDate": "2022-10-18" + }, + { + "title": "Real Time News Feed using Azure Logic Apps, Node.js and socket.io", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-real-time", + "description": "This sample shows you how to implement real time web parts using the SPFx, Azure Logic Apps, Node.js and socket.io.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-real-time/assets/animated-demo.gif", + "authors": [ + { + "name": "Franck Cornu", + "pictureUrl": "https://github.com/FranckyC.png" + } + ], + "tags": null, + "createDate": "2016-11-04" + }, + { + "title": "List subscription", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-realtime-documents", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-realtime-documents/assets/list-subscription-webpart.png", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + } + ], + "tags": null, + "createDate": "2018-11-09" + }, + { + "title": "Google reCaptcha Sample", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-recaptcha", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-recaptcha/screens/WebpartInAction.gif", + "authors": [ + { + "name": "Siddharth Vaghasia", + "pictureUrl": "https://github.com/siddharth-vaghasia.png" + } + ], + "tags": null, + "createDate": "2019-10-10" + }, + { + "title": "Recent Contacts", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-recent-contacts", + "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.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-recent-contacts.gif", + "authors": [ + { + "name": "Eric Overfield", + "pictureUrl": "https://github.com/eoverfield.png" + } + ], + "tags": null, + "createDate": "2018-05-01" + }, + { + "title": "Recently Used Documents", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-recently-used-documents", + "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.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-recently-used-documents.gif", + "authors": [ + { + "name": "Eric Overfield", + "pictureUrl": "https://github.com/eoverfield.png" + } + ], + "tags": null, + "createDate": "2018-05-01" + }, + { + "title": "Recently Visited Sites", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-recently-visited-sites", + "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.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-recently-visited-sites.gif", + "authors": [ + { + "name": "Eric Overfield", + "pictureUrl": "https://github.com/eoverfield.png" + } + ], + "tags": null, + "createDate": "2018-05-01" + }, + { + "title": "Using React and Redux", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-redux", + "description": "Sample web part implementation that uses Redux to keep track of its state.", + "image": "https://camo.githubusercontent.com/4d5690679fd7d36dce6c9bd92ec37d6047b443b6/68747470733a2f2f692e6779617a6f2e636f6d2f37323963346164646636633939323531336638656239316133666130653330322e676966", + "authors": [ + { + "name": "Kevin Mees", + "pictureUrl": "https://github.com/kmees.png" + } + ], + "tags": null, + "createDate": "2016-10-28" + }, + { + "title": "Using React, Redux and ImmutableJS", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-redux-async-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.", + "image": "https://raw.githubusercontent.com/vman/sp-dev-fx-webparts/master/samples/react-redux-async-immutablejs/assets/react-redux-immutable.gif", + "authors": [ + { + "name": "Vardhaman Deshpande", + "pictureUrl": "https://github.com/vman.png" + } + ], + "tags": null, + "createDate": "2017-07-11" + }, + { + "title": "Using Redux-Form library and React", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-reduxform", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-reduxform/assets/ReduxFormWebpart.gif?raw=true", + "authors": [ + { + "name": "Vipul Kelkar", + "pictureUrl": "https://github.com/vipulkelkar.png" + } + ], + "tags": null, + "createDate": "2018-05-02" + }, + { + "title": "Remote Event Receiver Manager", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-remote-event-receiver-manager", + "description": "Lets you add and delete remote event receivers to lists", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-remote-event-receiver-manager/assets/video.gif", + "authors": [ + { + "name": "Dan Toft", + "pictureUrl": "https://github.com/Tanddant.png" + } + ], + "tags": null, + "createDate": "2021-05-03" + }, + { + "title": "Restaurant Menu", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-restaurant-menu", + "description": "This web part shows a Restaurant Menu, the user can select the options to show in Menu.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-restaurant-menu/assets/restaurantmenu.gif", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": null, + "createDate": "2020-09-05" + }, + { + "title": "Rhythm of Business Calendar", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rhythm-of-business-calendar", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/e92d0dac567cc4d59cdfc94186a52a3b776c6d21/samples/react-rhythm-of-business-calendar/assets/screenshot-edit-refiner.png", + "authors": [ + { + "name": "Dan Turley", + "pictureUrl": "https://github.com/d-turley.png" + } + ], + "tags": null, + "createDate": "2022-09-26" + }, + { + "title": "Room Chat", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-roomchat", + "description": "This web part shows how to use Azure Communications Services and React UI component to create a Room Chat.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-roomchat/assets/roomchat.gif", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + } + ], + "tags": null, + "createDate": "2022-07-19" + }, + { + "title": "SharePoint Framework RSS Reader", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rss-reader", + "description": "A RSS Reader original based on work completed by Olivier Carpentier's", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-rss-reader/assets/react-rss-reader.gif", + "authors": [ + { + "name": "Eric Overfield", + "pictureUrl": "https://github.com/eoverfield.png" + }, + { + "name": "Abhishek Garg", + "pictureUrl": "https://avatars.githubusercontent.com/u/5449154?s=400&v=4" + }, + { + "name": "Abderahman Moujahid", + "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4" + } + ], + "tags": null, + "createDate": "2020-11-22" + }, + { + "title": "ReactiveX (RxJs) Event Emitter Sample", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rxjs-event-emitter", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-rxjs-event-emitter/assets/spfx-event-emitter.gif", + "authors": [ + { + "name": "Velin Georgiev", + "pictureUrl": "https://github.com/VelinGeorgiev.png" + } + ], + "tags": null, + "createDate": "2018-12-10" + }, + { + "title": "Save Attachments", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-save-attachments", + "description": "This SPFx Outlook Add-In lets users save any email attachments to a OneDrive folder.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-save-attachments/assets/ReactSaveAttachments.gif", + "authors": [ + { + "name": "Aakash Bhardwaj", + "pictureUrl": "https://avatars.githubusercontent.com/u/33526902?s=460&u=e780f4ef1da922c84f2c5c66c59cecbff2300581&v=4" + } + ], + "tags": null, + "createDate": "2020-10-04" + }, + { + "title": "Save to User Application Personal Folder in OneDrive", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-save-to-onedrive-app-personal-folder", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-save-to-onedrive-app-personal-folder/assets/in-sharepoint.png", + "authors": [ + { + "name": "Adam Wójcik", + "pictureUrl": "https://github.com/Adam-it.png" + } + ], + "tags": null, + "createDate": "2022-02-21" + }, + { + "title": "Script editor web part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-script-editor", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-script-editor/assets/modern-script-editor-wp.gif", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + }, + { + "name": "Felix Bohnacker", + "pictureUrl": "https://github.com/felixbohnacker.png" + } + ], + "tags": null, + "createDate": "2019-10-13" + }, + { + "title": "Script editor web part for modern pages", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-script-editor-onprem", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-script-editor-onprem/assets/modern-script-editor-wp.gif", + "authors": [ + { + "name": "Mikael Svenson", + "pictureUrl": "https://github.com/wobba.png" + } + ], + "tags": null, + "createDate": "2020-03-16" + }, + { + "title": "Search Client-Side Web Part built with React and Flux", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-search", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-search/assets/preview.png", + "authors": [ + { + "name": "Elio Struyf", + "pictureUrl": "https://github.com/estruyf.png" + } + ], + "tags": null, + "createDate": "2017-02-28" + }, + { + "title": "Security Grid", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-securitygrid", + "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", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-securitygrid/src/images/MainDisplay.gif", + "authors": [ + { + "name": "Russell Gove", + "pictureUrl": "https://github.com/russgove.png" + } + ], + "tags": null, + "createDate": "2021-03-06" + }, + { + "title": "Side Panel Client-Side Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-side-panel", + "description": "The web part illustrates creation and usage of Side Panel (Sidebar) control.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-side-panel/assets/side-panel.gif", + "authors": [ + { + "name": "Alex Terentiev", + "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" + } + ], + "tags": null, + "createDate": "2017-05-11" + }, + { + "title": "Site Information", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-site-information", + "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.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-site-information.gif", + "authors": [ + { + "name": "Eric Overfield", + "pictureUrl": "https://github.com/eoverfield.png" + } + ], + "tags": null, + "createDate": "2018-05-01" + }, + { + "title": "Site Provisioning Manager Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-site-provisioning-manager", + "description": "This sample shows how you can manage site provisioning by calling Azure functions.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-site-provisioning-manager/assets/screenshot.gif", + "authors": [ + { + "name": "Ramin Ahmadi", + "pictureUrl": "https://github.com/AhmadiRamin.png" + } + ], + "tags": null, + "createDate": "2019-08-14" + }, + { + "title": "Sitepages Metadata", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-sitepages-metadata", + "description": "Solution provides an enhancement to SitePages library that enables updating existing items with metadata, and a rollup Web Part to display them.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-sitepages-metadata/assets/demo-wp.gif", + "authors": [ + { + "name": "Oleg Rumiancev", + "pictureUrl": "https://github.com/olegrumiancev.png" + } + ], + "tags": null, + "createDate": "2018-04-17" + }, + { + "title": "Sites Selected Admin", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-sites-selected-admin/assets/sites-manager-demo.gif", + "authors": [ + { + "name": "Fredrik Thorild", + "pictureUrl": "https://github.com/fthorild.png" + } + ], + "tags": null, + "createDate": "2021-03-08" + }, + { + "title": "Skype Status Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-skype-status", + "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", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-skype-status/images/demo.gif", + "authors": [ + { + "name": "Vincent Biret", + "pictureUrl": "https://github.com/baywet.png" + } + ], + "tags": null, + "createDate": "2019-03-27" + }, + { + "title": "Slide Swiper", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-slide-swiper", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-slide-swiper/assets/SPFx-React-Slider-Swiper.gif", + "authors": [ + { + "name": "Velin Georgiev", + "pictureUrl": "https://github.com/VelinGeorgiev.png" + } + ], + "tags": null, + "createDate": "2019-11-01" + }, + { + "title": "Smart Profile Photo Editor", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-smart-profile-photo-editor", + "description": "Uses Azure Cognitive Services to analyze and approve or reject user-submitted photos.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-smart-profile-photo-editor/assets/WebPartPreview.gif", + "authors": [ + { + "name": "Hugo Bernier", + "pictureUrl": "https://github.com/hugoabernier.png" + } + ], + "tags": null, + "createDate": "2020-08-12" + }, + { + "title": "Soccer Highlights", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-soccer-highlights", + "description": "This react web part sample displays Soccer Highlights from a public Soccer API.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-soccer-highlights/assets/SoccerHighlightsV1.png", + "authors": [ + { + "name": "Jerry Yasir", + "pictureUrl": "https://github.com/jerryyasir.png" + } + ], + "tags": null, + "createDate": "2020-10-30" + }, + { + "title": "Communicate using elevated privileges with SharePoint", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-sp-elevatedprivileges", + "description": "Sample SharePoint Framework client-side web part illustrating communication with SharePoint using elevated privileges through a custom Web API.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-sp-elevatedprivileges/assets/preview.png", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + } + ], + "tags": null, + "createDate": "2016-10-12" + }, + { + "title": "Using PnP JS Core custom objects with @select and @expand decorators", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-sp-pnp-js-property-decorators", + "description": "This web part demonstrates how to use PnP JS Core Custom Objects with @select and @expand TypeScript decorators.", + "image": "https://github.com/pnp/media/raw/master/parker/pnp/300w/parker.png", + "authors": [ + { + "name": "Jose Quinto", + "pictureUrl": "https://github.com/jquintozamora.png" + } + ], + "tags": null, + "createDate": "2017-07-02" + }, + { + "title": "Site User and Group Information", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-sp-site-user-groups", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-sp-site-user-groups/assets/screen1.png", + "authors": [ + { + "name": "Daniel Watford", + "pictureUrl": "https://avatars.githubusercontent.com/u/5949502?s=460&u=01688c475aa5c94da6a292473ff80ffe1a7975cb&v=4" + } + ], + "tags": null, + "createDate": "2020-09-08" + }, + { + "title": "IFramePanel sample", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-spfx-control-iframepanel", + "description": "This sample shows how to use the IFramePanel control in a SharePoint Framework web part.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-spfx-control-iframepanel/assets/preview.png", + "authors": [ + { + "name": "Valeras Narbutas", + "pictureUrl": "https://github.com/valerasnarbutas.png" + } + ], + "tags": null, + "createDate": "2023-03-29" + }, + { + "title": "SPUPS Property Sync", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-spupsproperty-sync", + "description": "This component will help the administrators who are currently maintaining the user profiles in their organization.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-spupsproperty-sync/assets/SPUPS-Sync.gif", + "authors": [ + { + "name": "Sudharsan Kesavanarayanan", + "pictureUrl": "https://github.com/sudharsank.png" + } + ], + "tags": null, + "createDate": "2020-04-23" + }, + { + "title": "Staff Directory", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-staffdirectory", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-staffdirectory/assets/staffdirectory.gif", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + }, + { + "name": "Ari Gunawan", + "pictureUrl": "https://github.com/AriGunawan.png" + }, + { + "name": "Tristian O'brien", + "pictureUrl": "https://github.com/tristian2.png" + }, + { + "name": "Milan Holemans", + "pictureUrl": "https://github.com/milanholemans.png" + } + ], + "tags": null, + "createDate": "2021-03-09" + }, + { + "title": "Star Ratings", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-star-ratings", + "description": "Demonstrates Star Ratings capablities to SharePoint News.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-star-ratings/assets/react-star-ratings.png", + "authors": [ + { + "name": "Takashi Shinohara", + "pictureUrl": "https://github.com/karamem0.png" + } + ], + "tags": null, + "createDate": "2021-10-07" + }, + { + "title": "Stock Information", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-stock-information", + "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.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-stock.gif", + "authors": [ + { + "name": "Eric Overfield", + "pictureUrl": "https://github.com/eoverfield.png" + } + ], + "tags": null, + "createDate": "2018-05-01" + }, + { + "title": "Tab Accordion Web Part with Property Field Collection Data and tinyMCE for Rich Text Editing", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tabacordion", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-tabacordion/assets/TabAccordionWebpart.gif", + "authors": [ + { + "name": "Arun Kumar Perumal", + "pictureUrl": "https://github.com/arunkumarperumal.png" + } + ], + "tags": null, + "createDate": "2022-03-30" + }, + { + "title": "Tailwind CSS", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tailwindcss", + "description": "This project shows how to integrate Tailwind CSS framework into a SPFx React project.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-tailwindcss/assets/react-tailwindcss-overview.gif", + "authors": [ + { + "name": "Fabio Franzini", + "pictureUrl": "https://github.com/fabiofranzini.png" + } + ], + "tags": null, + "createDate": "2020-10-17" + }, + { + "title": "Target audience", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-target-audience", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-target-audience/assets/audience.gif", + "authors": [ + { + "name": "Rabia Williams", + "pictureUrl": "https://github.com/rabwill.png" + } + ], + "tags": null, + "createDate": "2020-01-28" + }, + { + "title": "Taxonomy File Explorer", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-taxonomy-file-explorer", + "description": "This solution renders a given Termset as a Tree and incorporates files similar than a folder structure in file explorer.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-taxonomy-file-explorer/assets/03Link.gif", + "authors": [ + { + "name": "Markus Moeller", + "pictureUrl": "https://github.com/mmsharepoint.png" + } + ], + "tags": null, + "createDate": "2021-12-26" + }, + { + "title": "Taxonomy Picker", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-taxonomypicker", + "description": "A Taxonomy Picker control built with React based on react-taxonomypicker for use with SharePoint Framework client-side web parts (SPFx).", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-taxonomypicker/assets/react-taxonomy-picker-spfx.gif", + "authors": [ + { + "name": "Jose Quinto", + "pictureUrl": "https://github.com/jquintozamora.png" + } + ], + "tags": null, + "createDate": "2017-04-14" + }, + { + "title": "Taxonomy picker using Office UI Fabric Panel", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-taxonomypicker-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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-taxonomypicker-panel/assets/TaxonomyPicker.gif?raw=true", + "authors": [ + { + "name": "Vipul Kelkar", + "pictureUrl": "https://github.com/vipulkelkar.png" + } + ], + "tags": null, + "createDate": "2018-07-20" + }, + { + "title": "Teams Creator Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-team-creator", + "description": "The web part illustrates usage of MS Graph beta APIs to work with Teams", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-team-creator/assets/teams-creator.png", + "authors": [ + { + "name": "Alex Terentiev", + "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" + } + ], + "tags": null, + "createDate": "2018-11-19" + }, + { + "title": "Teams Configuration Tab", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-configure-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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-configure-tab/documentation/images/SPTabAppStudioTeamsTab006.png", + "authors": [ + { + "name": "Bob German", + "pictureUrl": "https://avatars.githubusercontent.com/u/4664072?s=460&u=29310fd67417ec5f81dc8881dc6eb5dc0065da2d&v=4" + } + ], + "tags": null, + "createDate": "2020-01-06" + }, + { + "title": "Teams Tab Conversation View", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-conversationview", + "description": "Displays Microsoft Teams channels conversations in a simpler way which makes easy to search and filters the new conversations and its replies", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-conversationview/assets/1.png", + "authors": [ + { + "name": "Siddharth Vaghasia", + "pictureUrl": "https://github.com/siddharth-vaghasia.png" + }, + { + "name": "Kunj Sangani", + "pictureUrl": "https://github.com/kunj-sangani.png" + } + ], + "tags": null, + "createDate": "2023-03-11" + }, + { + "title": "Teams Graph Upload as PDF", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-graph-upload-as-pdf", + "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", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-graph-upload-as-pdf/assets/UploadAnimated.gif", + "authors": [ + { + "name": "Markus Moeller", + "pictureUrl": "https://github.com/mmsharepoint.png" + } + ], + "tags": null, + "createDate": "2020-11-10" + }, + { + "title": "Lead Dashboard", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-lead-dashboard", + "description": "This sample shows how to use SPFx to create a Microsoft Teams dashboard personal app.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-lead-dashboard/assets/LeadAssistDashboard_overview.png", + "authors": [ + { + "name": "Paolo Pialorsi", + "pictureUrl": "https://github.com/PaoloPia.png" + }, + { + "name": "Guido Zambarda", + "pictureUrl": "https://github.com/GuidoZam.png" + }, + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + } + ], + "tags": null, + "createDate": "2021-10-05" + }, + { + "title": "Questionnaire Teams Meeting App", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-meeting-app-questionnaire", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-meeting-app-questionnaire/assets/web-part-preview.gif", + "authors": [ + { + "name": "Nanddeep Nachan", + "pictureUrl": "https://github.com/nanddeepn.png" + }, + { + "name": "Ravi Kulkarni", + "pictureUrl": "https://github.com/ravi16a87.png" + }, + { + "name": "Smita Nachan", + "pictureUrl": "https://github.com/SmitaNachan.png" + } + ], + "tags": null, + "createDate": "2021-03-22" + }, + { + "title": "Teams Membership Updater", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-membership-updater", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-membership-updater/assets/Screenshot-2020-05-01.png", + "authors": [ + { + "name": "Nick Brown", + "pictureUrl": "https://github.com/techienickb.png" + } + ], + "tags": null, + "createDate": "2020-04-27" + }, + { + "title": "React Teams Messages", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-message", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-message/assets/myteamsmessage.gif", + "authors": [ + { + "name": "Siddharth Vaghasia", + "pictureUrl": "https://github.com/siddharth-vaghasia.png" + } + ], + "tags": null, + "createDate": "2020-05-23" + }, + { + "title": "Message Teams User", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-message-user", + "description": "Sample that shows how to send a message to Microsoft Teams using a SharePoint framework solution using Microsoft Graph.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-message-user/assets/webPart-preview.png", + "authors": [ + { + "name": "David Ramalho", + "pictureUrl": "https://github.com/DRamalho92.png" + } + ], + "tags": null, + "createDate": "2021-02-28" + }, + { + "title": "Teams Personal App Settings Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-personal-app-settings", + "description": "Demonstrates how you can store Teams Personal App Web Part's properties in user's OneDrive.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-personal-app-settings/assets/teams-personal-app-settings.png", + "authors": [ + { + "name": "Alex Terentiev", + "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" + } + ], + "tags": null, + "createDate": "2020-04-24" + }, + { + "title": "Send Notifications in Teams", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-send-notification", + "description": "This web part allows you to send MS Teams feed notifications to a selected user", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-send-notification/assets/teams-notification-sender.gif", + "authors": [ + { + "name": "Luis Mañez", + "pictureUrl": "https://github.com/luismanez.png" + } + ], + "tags": null, + "createDate": "2020-12-04" + }, + { + "title": "Teams Tab - Field Visit Demo (Mashup)", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-tab-field-visit-mashup", + "description": "A web part for use in Microsoft Teams that displays a mashup of information partaining to customer visits.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-tab-field-visit-mashup/documentation/FieldVisitDemo.png", + "authors": [ + { + "name": "Bob German", + "pictureUrl": "https://avatars.githubusercontent.com/u/4664072?s=460&u=29310fd67417ec5f81dc8881dc6eb5dc0065da2d&v=4" + } + ], + "tags": null, + "createDate": "2019-04-20" + }, + { + "title": "Group members suggestion", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-tab-suggested-members", + "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", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-tab-suggested-members/assets/SuggestedMembersTeamsTab.jpg", + "authors": [ + { + "name": "Luis Mañez", + "pictureUrl": "https://github.com/luismanez.png" + } + ], + "tags": null, + "createDate": "2018-11-18" + }, + { + "title": "MS Teams Channels and Tabs from Modern Team site", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-tabs-pnpjs", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-tabs-pnpjs/assets/react-teams-tabs-pnpjs-webpart-animated.gif", + "authors": [ + { + "name": "Federico Porceddu", + "pictureUrl": "https://github.com/fredupstair.png" + } + ], + "tags": null, + "createDate": "2019-10-30" + }, + { + "title": "Tag Teams using a TermSet in SharePoint", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-tagging", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-tagging/assets/webpart.JPG", + "authors": [ + { + "name": "Luis Mañez", + "pictureUrl": "https://github.com/luismanez.png" + } + ], + "tags": null, + "createDate": "2019-04-18" + }, + { + "title": "Tenant Properties Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tenant-properties", + "description": "This web part allows tenant administrators to manage tenant properties through a graphical interface. We can create, edit or delete tenant properties.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-tenant-properties/assets/TenantProperties2.jpg", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + }, + { + "name": "Joel Rodrigues", + "pictureUrl": "https://github.com/joelfmrodrigues.png" + } + ], + "tags": null, + "createDate": "2020-10-20" + }, + { + "title": "SharePoint Themes Client Side Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-themes", + "description": "This web part illustrates how to use SharePoint Theme variables in custom web parts.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-themes/assets/themes.png", + "authors": [ + { + "name": "Alex Terentiev", + "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" + } + ], + "tags": null, + "createDate": "2017-05-08" + }, + { + "title": "Tiles", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tiles", + "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.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-tiles.gif", + "authors": [ + { + "name": "Eric Overfield", + "pictureUrl": "https://github.com/eoverfield.png" + } + ], + "tags": null, + "createDate": "2018-05-01" + }, + { + "title": "Tiles V2", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tiles-v2", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-tiles-v2/assets/react-tiles-v2.gif", + "authors": [ + { + "name": "Omar El-Anis", + "pictureUrl": "https://github.com/omarelanis.png" + }, + { + "name": "Fredrik Thorild", + "pictureUrl": "https://github.com/fthorild.png" + }, + { + "name": "Jasey Waegebaert", + "pictureUrl": "https://github.com/Jwaegebaert.png" + } + ], + "tags": null, + "createDate": "2021-07-14" + }, + { + "title": "Timeline", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-timeline", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-timeline/assets/webpart-preview.gif", + "authors": [ + { + "name": "Nanddeep Nachan", + "pictureUrl": "https://github.com/nanddeepn.png" + }, + { + "name": "Ravi Kulkarni", + "pictureUrl": "https://github.com/ravi16a87.png" + } + ], + "tags": null, + "createDate": "2020-07-10" + }, + { + "title": "TinyMCE Editor Web Part Integration with SharePoint", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tinymce", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-tinymce/assets/preview.gif", + "authors": [ + { + "name": "Austin Breslin", + "pictureUrl": "https://avatars.githubusercontent.com/u/10480670?s=460&v=4" + } + ], + "tags": null, + "createDate": "2018-02-01" + }, + { + "title": "Todo Basic", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-todo-basic", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-todo-basic/assets/todo-basic-demo.gif", + "authors": [ + { + "name": "Chakkaradeep Chandran", + "pictureUrl": "https://avatars.githubusercontent.com/u/7882052?s=460&u=92d546edfe1e1b374c69f0fd9315186eea700b8f&v=4" + } + ], + "tags": null, + "createDate": "2017-05-04" + }, + { + "title": "Tour Sample", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tour-pnpjs", + "description": "A SPFx WebPart using PnP/PnPjs, @pnp/spfx-property-controls and ReactTourJS.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-tour-pnpjs/assets/react-tour-pnpjs-webpart-animated.gif", + "authors": [ + { + "name": "Federico Porceddu", + "pictureUrl": "https://github.com/fredupstair.png" + } + ], + "tags": null, + "createDate": "2019-11-23" + }, + { + "title": "Tree Organization Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tree-orgchart", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-tree-orgchart/assets/Screenshot1.png", + "authors": [ + { + "name": "João Mendes", + "pictureUrl": "https://github.com/joaojmendes.png" + }, + { + "name": "Peter Paul Kirschner", + "pictureUrl": "https://github.com/petkir.png" + }, + { + "name": "Thomas Daly", + "pictureUrl": "https://github.com/tom-daly.png" + } + ], + "tags": null, + "createDate": "2021-02-28" + }, + { + "title": "Twitter Timeline", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-twitter", + "description": "Sample web part to display Twitter timeline.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-twitter/assets/twitter-timeline.png", + "authors": [ + { + "name": "Alex Terentiev", + "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4" + }, + { + "name": "Reshmee Auckloo", + "pictureUrl": "https://github.com/reshmee011.png" + } + ], + "tags": null, + "createDate": "2020-01-20" + }, + { + "title": "Upgrade Me", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-upgrade-me", + "description": "Use this web part to test the CLI for Microsoft 365 SPFx Project Upgrade.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-upgrade-me/assets/react-upgrade-me.png", + "authors": [ + { + "name": "Hugo Bernier", + "pictureUrl": "https://github.com/hugoabernier.png" + } + ], + "tags": null, + "createDate": "2020-08-27" + }, + { + "title": "Displaying the version number in a web part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-versiondisplay", + "description": "This very simple sample demonstrates three different approaches to display the version number of your SharePoint solution in your web part.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-versiondisplay/assets/versiondisplay.gif", + "authors": [ + { + "name": "Hugo Bernier", + "pictureUrl": "https://github.com/hugoabernier.png" + } + ], + "tags": null, + "createDate": "2020-04-10" + }, + { + "title": "Video Banner", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-video-banner", + "description": "Use this Web Part to add a video banner with a text on top of it to your pages. ", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-video-banner/assets/react-video-banner-demo1.gif", + "authors": [ + { + "name": "Mohamed Derhalli", + "pictureUrl": "https://github.com/derhallim.png" + } + ], + "tags": null, + "createDate": "2021-04-02" + }, + { + "title": "Video Library", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-videolibrary", + "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", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-videolibrary/src/assets/react-3d-carousel.PNG", + "authors": [ + { + "name": "Russell Gove", + "pictureUrl": "https://github.com/russgove.png" + } + ], + "tags": null, + "createDate": "2016-12-31" + }, + { + "title": "Visio Embed", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-visio", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-visio/assets/Preview.PNG", + "authors": [ + { + "name": "Joel Rodrigues", + "pictureUrl": "https://github.com/joelfmrodrigues.png" + } + ], + "tags": null, + "createDate": "2020-08-25" + }, + { + "title": "Weather Information", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-weather-information", + "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.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-weather.gif", + "authors": [ + { + "name": "Eric Overfield", + "pictureUrl": "https://github.com/eoverfield.png" + } + ], + "tags": null, + "createDate": "2018-05-01" + }, + { + "title": "Web/Mobile Camera Demo", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-webcam", + "description": "This is sample web part to showcase how to open webcam and take photo in SPFx web part.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-webcam/assets/4.png", + "authors": [ + { + "name": "Siddharth Vaghasia", + "pictureUrl": "https://github.com/siddharth-vaghasia.png" + } + ], + "tags": null, + "createDate": "2019-09-05" + }, + { + "title": "Webhooks Realtime", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-webhooks-realtime/assets/spfx-react-webhooks-realtime.gif", + "authors": [ + { + "name": "Giuliano De Luca", + "pictureUrl": "https://github.com/giuleon.png" + } + ], + "tags": null, + "createDate": "2017-10-29" + }, + { + "title": "Web Part Details", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-webpartdetails", + "description": "The web part illustrates how to get all the web part present in the current page, bind them in a multi-select dropdown.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-webpartdetails/assets/webpartDetails.png", + "authors": [ + { + "name": "Harsha Vardhini", + "pictureUrl": "https://github.com/Harshagracy.png" + } + ], + "tags": null, + "createDate": "2020-06-13" + }, + { + "title": "Word Game", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-word-game", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-word-game/assets/preview.gif", + "authors": [ + { + "name": "Neil Barkhina", + "pictureUrl": "https://github.com/nbarkhina.png" + } + ], + "tags": null, + "createDate": "2020-05-27" + }, + { + "title": "React World Clocks", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-world-clocks", + "description": "This sample is extension of the single World time clock sample that was provided in SP Starter Kit.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-world-clocks/assets/ClocksInAction.gif?raw=true", + "authors": [ + { + "name": "Jerry Yasir", + "pictureUrl": "https://github.com/jerryyasir.png" + } + ], + "tags": null, + "createDate": "2020-09-26" + }, + { + "title": "World Time", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-world-time", + "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.", + "image": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-world-time.gif", + "authors": [ + { + "name": "Eric Overfield", + "pictureUrl": "https://github.com/eoverfield.png" + } + ], + "tags": null, + "createDate": "2018-05-01" + }, + { + "title": "Yammer REST API web part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-yammer-api", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-yammer-api/assets/spfx-yammer-api-webpart.jpg", + "authors": [ + { + "name": "Velin Georgiev", + "pictureUrl": "https://github.com/VelinGeorgiev.png" + } + ], + "tags": null, + "createDate": "2017-04-19" + }, + { + "title": "Yammer Praise using aadTokenProvider", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-yammer-praise", + "description": "This sample shows how to post a praise to Yammer using aadTokenProvider (without Yammer JavaScript SDK).", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-yammer-praise/assets/screenshot.gif", + "authors": [ + { + "name": "Ramin Ahmadi", + "pictureUrl": "https://github.com/AhmadiRamin.png" + } + ], + "tags": null, + "createDate": "2020-03-23" + }, + { + "title": "Youtube Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-youtube", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-youtube/assets/Preview.gif", + "authors": [ + { + "name": "Giuliano De Luca", + "pictureUrl": "https://github.com/giuleon.png" + }, + { + "name": "Ravi Chandra", + "pictureUrl": "https://github.com/Ravikadri.png" + } + ], + "tags": null, + "createDate": "2020-10-01" + }, + { + "title": "Zod", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-zod", + "description": "This sample shows the usage of Zod to eliminate manual cast and validation of the data coming from external API.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-zod/assets/data-usage.png", + "authors": [ + { + "name": "Ari Gunawan", + "pictureUrl": "https://github.com/AriGunawan.png" + } + ], + "tags": null, + "createDate": "2022-11-08" + }, + { + "title": "ZPL Viewer", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-zpl-viewer", + "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.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-zpl-viewer/assets/preview.gif", + "authors": [ + { + "name": "Zach Roberts", + "pictureUrl": "https://github.com/zachroberts8668.png" + } + ], + "tags": null, + "createDate": "2020-02-13" + }, + { + "title": "List RiotJS Client-Side Web Part", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/riot-list", + "description": "Simplistic sample Web Part that demonstrates the use of RiotJS in creating a SharePoint Framework web part.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/riot-list/assets/riot-list-preview.gif", + "authors": [ + { + "name": "Sébastien Levert", + "pictureUrl": "https://github.com/sebastienlevert.png" + } + ], + "tags": null, + "createDate": "2017-04-26" + }, + { + "title": "Supporting section backgrounds in your web parts", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/section-backgrounds", + "description": "These samples show how to implement support for section backgrounds in your web parts.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/section-backgrounds/assets/webpartexample3.png", + "authors": [ + { + "name": "Chris Kent", + "pictureUrl": "https://avatars.githubusercontent.com/u/8364109?s=460&v=4" + } + ], + "tags": null, + "createDate": "2019-03-13" + }, + { + "title": "SharePoint CRUD operations", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/sharepoint-crud", + "description": "Sample Web Parts illustrating performing SharePoint CRUD operations in React, Angular, JavaScript without any framework and using the @pnp/sp library.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/sharepoint-crud/assets/preview.png", + "authors": [ + { + "name": "Waldek Mastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png" + }, + { + "name": "Gautam Sheth", + "pictureUrl": "https://github.com/gautamdsheth.png" + }, + { + "name": "Ari Gunawan", + "pictureUrl": "https://github.com/AriGunawan.png" + } + ], + "tags": null, + "createDate": "2018-11-01" + }, + { + "title": "VueJS Org Chart", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/vue-js-org-chart", + "description": "A simple Organisation Chart web part using Office UI Fabric, VueJS, REST API.", + "image": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/vue-js-org-chart/assets/preview.gif", + "authors": [ + { + "name": "Serdar Ketenci̇", + "pictureUrl": "https://github.com/serdarketenci.png" + } + ], + "tags": null, + "createDate": "2019-06-11" + }, + { + "title": "Todo Client Web Part built with Vue.js and Vue's single-file components", + "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/vuejs-todo-single-file-component", + "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.", + "image": "https://github.com/pnp/media/raw/master/parker/pnp/300w/parker.png", + "authors": [ + { + "name": "Sergei Sergeev", + "pictureUrl": "https://github.com/s-KaiNet.png" + } + ], + "tags": null, + "createDate": "2020-04-27" + } + ] +}