sp-dev-fx-webparts/.metadata/samples.json

[
  {
    "name": "pnp-sp-dev-spfx-extensions-jquery-application-toastr",
    "source": "pnp",
    "title": "Toastr Application Customizer",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/jquery-application-toastr",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-02-01",
    "updateDateTime": "2018-02-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "jQuery"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/jquery-application-toastr/assets/spfxToastr-Preview.PNG",
        "alt": "Toastr Application Customizer"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/jquery-application-toastr/assets/DeployToCatalog.png?raw=true",
        "alt": "Toastr Application Customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "company": "DMI",
        "pictureUrl": "https://avatars.githubusercontent.com/u/8364109?s=460&v=4",
        "name": "Chris Kent",
        "twitter": "thechriskent"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-jquery-field-itemorder",
    "source": "pnp",
    "title": "Item Order",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/jquery-field-itemorder",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-10-10",
    "updateDateTime": "2019-10-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "jQuery"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-FIELD-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/jquery-field-itemorder/assets/spfxItemOrder-Animation.gif",
        "alt": "Item Order"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/jquery-field-itemorder/assets/DeployToCatalog.png?raw=true",
        "alt": "Item Order"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/jquery-field-itemorder/assets/OrderableView.PNG?raw=true",
        "alt": "Item Order"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/jquery-field-itemorder/assets/PlaceholderField.PNG?raw=true",
        "alt": "Item Order"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/jquery-field-itemorder/assets/spfxItemOrder-NoPermissions.png?raw=true",
        "alt": "Item Order"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/jquery-field-itemorder/assets/spfxItemOrder-Preview.png?raw=true",
        "alt": "Item Order"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "company": "DMI",
        "pictureUrl": "https://avatars.githubusercontent.com/u/8364109?s=460&v=4",
        "name": "Chris Kent",
        "twitter": "thechriskent"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first Field Customizer extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-application-alert-message",
    "source": "pnp",
    "title": "Application Alert Message",
    "shortDescription": "This application customizer will display the alert message based on the items from the list.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-alert-message",
    "longDescription": [
      "This application customizer will display the alert message based on the items from the list."
    ],
    "creationDateTime": "2020-07-09",
    "updateDateTime": "2020-07-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-alert-message/assets/GlobalAlerts.gif",
        "alt": "Application Alert Message"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "sudharsank",
        "company": "NTT Digital Business Solutions",
        "pictureUrl": "https://github.com/sudharsank.png",
        "name": "Sudharsan Kesavanarayanan",
        "twitter": "sudharsank"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-application-analytics",
    "source": "pnp",
    "title": "Google Analytics Application Customizer",
    "shortDescription": "In this sample is possible to see how to implement Google Analytics through SPFx Extensions Application Customizers",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-analytics",
    "longDescription": [
      "In this sample is possible to see how to implement Google Analytics through SPFx Extensions Application Customizers"
    ],
    "creationDateTime": "2020-10-07",
    "updateDateTime": "2021-07-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-analytics/assets/js-application-google-analytics.gif",
        "alt": "Google Analytics Application Customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "giuleon",
        "company": "",
        "pictureUrl": "https://github.com/giuleon.png",
        "name": "Giuliano De Luca",
        "twitter": "delucagiulian"
      },
      {
        "gitHubAccount": "hugoabernier",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier",
        "twitter": "bernierh"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-application-appinsights",
    "source": "pnp",
    "title": "Injecting Javascript with Sharepoint Framework Extensions - Azure Application Insights",
    "shortDescription": "Sample SharePoint Framework extension project injecting Javascript code to enable Azure App Insights monitoring and statistics.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-appinsights",
    "longDescription": [
      "Sample SharePoint Framework extension project injecting Javascript code to enable Azure App Insights monitoring and statistics."
    ],
    "creationDateTime": "2019-08-29",
    "updateDateTime": "2019-08-29",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-appinsights/assets/appinsights-1.png",
        "alt": "Injecting Javascript with Sharepoint Framework Extensions - Azure Application Insights"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "GSellier",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/GSellier.png",
        "name": "Guillaume Sellier"
      },
      {
        "gitHubAccount": "levalencia",
        "company": "",
        "pictureUrl": "https://github.com/levalencia.png",
        "name": "Luis Valencia"
      },
      {
        "gitHubAccount": "xiao-lix",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/xiao-lix.png",
        "name": "Xiao Li"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-application-appinsights-advanced",
    "source": "pnp",
    "title": "JS Application AppInsights Advanced",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-appinsights-advanced",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-09-23",
    "updateDateTime": "2020-09-23",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-appinsights-advanced/assets/Performance.png",
        "alt": "JS Application AppInsights Advanced"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-application-appinsights-advanced/assets/AppInsights.png?raw=true",
        "alt": "JS Application AppInsights Advanced"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-application-appinsights-advanced/assets/PageViewAnalysis.png?raw=true",
        "alt": "JS Application AppInsights Advanced"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-application-appinsights-advanced/assets/Retention.png?raw=true",
        "alt": "JS Application AppInsights Advanced"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-application-appinsights-advanced/assets/UserFlows.png?raw=true",
        "alt": "JS Application AppInsights Advanced"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-application-appinsights-advanced/assets/UsersChart.png?raw=true",
        "alt": "JS Application AppInsights Advanced"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "sudharsank",
        "company": "NTT Digital Business Solutions",
        "pictureUrl": "https://github.com/sudharsank.png",
        "name": "Sudharsan Kesavanarayanan",
        "twitter": "sudharsank"
      },
      {
        "gitHubAccount": "xiao-lix",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/xiao-lix.png",
        "name": "Xiao Li"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-application-dynamically-importing-styles",
    "source": "pnp",
    "title": "Optimize CSS/SCSS Style Bundling and Dynamic Loading of Styles",
    "shortDescription": "This example illustrates how style files can be dynamically bundled into multiple .js bundle files and then be individually imported at runtime.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-dynamically-importing-styles",
    "longDescription": [
      "This example illustrates how style files can be dynamically bundled into multiple .js bundle files and then be individually imported at runtime."
    ],
    "creationDateTime": "2019-01-21",
    "updateDateTime": "2019-01-21",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.7.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-dynamically-importing-styles/assets/DynamicImportingResultsInBrwoser.png",
        "alt": "Optimize CSS/SCSS Style Bundling and Dynamic Loading of Styles"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-application-dynamically-importing-styles/assets/PostBundling.png?raw=true",
        "alt": "Optimize CSS/SCSS Style Bundling and Dynamic Loading of Styles"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-application-dynamically-importing-styles/assets/PreBundling.png?raw=true",
        "alt": "Optimize CSS/SCSS Style Bundling and Dynamic Loading of Styles"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "PopWarner",
        "company": "Catapult Systems",
        "pictureUrl": "https://avatars.githubusercontent.com/u/10676147?s=460&u=9e4e74223c4ffb430fb77c97892a84b286df1921&v=4",
        "name": "David Warner II",
        "twitter": "PopWarner"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-application-graph-client",
    "source": "pnp",
    "title": "GraphClient from Modern Teamsite",
    "shortDescription": "Simple example to call the Graph via the new GraphHttpClient (No ADAL) for getting the group title, mail, and description.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-graph-client",
    "longDescription": [
      "Simple example to call the Graph via the new GraphHttpClient (No ADAL) for getting the group title, mail, and description."
    ],
    "creationDateTime": "2017-06-09",
    "updateDateTime": "2017-06-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-graph-client/assets/screenshot.png",
        "alt": "GraphClient from Modern Teamsite"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "simonagren",
        "company": "Sogeti",
        "pictureUrl": "https://github.com/simonagren.png",
        "name": "Simon Ågren"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-application-header-toggler",
    "source": "pnp",
    "title": "Site Header Toggler",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-header-toggler",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-09-19",
    "updateDateTime": "2019-09-19",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-header-toggler/assets/screenshot.gif",
        "alt": "Site Header Toggler"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "RamPrasadMeenavalli",
        "company": "",
        "pictureUrl": "https://github.com/RamPrasadMeenavalli.png",
        "name": "Ram Prasad Meenavalli",
        "twitter": "ram_meenavalli"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-application-intranet-searchbox",
    "source": "pnp",
    "title": "Intranet Search Box",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-intranet-searchbox",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-05-16",
    "updateDateTime": "2019-05-16",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-intranet-searchbox/assets/IntranetSearchBox.gif",
        "alt": "Intranet Search Box"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-application-intranet-searchbox/assets/Theme_Blue.png?raw=true",
        "alt": "Intranet Search Box"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-application-intranet-searchbox/assets/Theme_Dark.png?raw=true",
        "alt": "Intranet Search Box"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-application-intranet-searchbox/assets/Theme_Orange.png?raw=true",
        "alt": "Intranet Search Box"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-application-intranet-searchbox/assets/Theme_Purple.png?raw=true",
        "alt": "Intranet Search Box"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "MartinHatch",
        "company": "",
        "pictureUrl": "https://github.com/MartinHatch.png",
        "name": "Martin Hatch"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-application-listdrivenplaceholders",
    "source": "pnp",
    "title": "List-Driven Placeholders",
    "shortDescription": "This solution deploys a list that allows end users to manage content that will appear in placeholders, via a SharePoint Framework application customizer extension.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-listdrivenplaceholders",
    "longDescription": [
      "This solution deploys a list that allows end users to manage content that will appear in placeholders, via a SharePoint Framework application customizer extension."
    ],
    "creationDateTime": "2017-09-05",
    "updateDateTime": "2017-09-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.2.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-listdrivenplaceholders/assets/placeholders.jpg",
        "alt": "List-Driven Placeholders"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "mjimison",
        "company": "Allegient",
        "pictureUrl": "https://github.com/mjimison.png",
        "name": "Matt Jimison"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-application-microsoft-clarity",
    "source": "pnp",
    "title": "Microsoft Clarity for modern SharePoint",
    "shortDescription": "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",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-microsoft-clarity",
    "longDescription": [
      "Creating engagement and measuring the success of any intranet is always a challenge, tools like Azure Application Insights and Google Analytics give you the usage metrics and now you can complement this information with Microsoft Clarity the new user behavior analytics tool.",
      "Microsoft Clarity will gives you the recording of the sessions and heat maps of the user interaction with the site, this will help to find and fix the areas of your pages that are not working as you expect."
    ],
    "creationDateTime": "2021-11-23",
    "updateDateTime": "2021-11-23",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-application-microsoft-clarity/assets/dashboard.gif",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaoferreira",
        "pictureUrl": "https://github.com/joaoferreira.png",
        "name": "João Ferreira"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-application-redirect",
    "source": "pnp",
    "title": "Redirect Application Customizers",
    "shortDescription": "Redirect from URL based on mapping from a list on the site. Can be used to automatically redirect from pages to other locations.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-redirect",
    "longDescription": [
      "Redirect from URL based on mapping from a list on the site. Can be used to automatically redirect from pages to other locations."
    ],
    "creationDateTime": "2019-12-29",
    "updateDateTime": "2019-12-29",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "JavaScript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/blob/master/assets/images/components/ext-redirects.gif",
        "alt": "Redirect Application Customizers"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "PaoloPia",
        "company": "PiaSys.com",
        "pictureUrl": "https://github.com/PaoloPia.png",
        "name": "Paolo Pialorsi",
        "twitter": "PaoloPia"
      },
      {
        "gitHubAccount": "sebastienlevert",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/sebastienlevert.png",
        "name": "Sébastien Levert",
        "twitter": "sebastienlevert"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-application-run-once",
    "source": "pnp",
    "title": "Run Once SharePoint Framework application customizer",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-run-once",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2017-10-10",
    "updateDateTime": "2017-10-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.3.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [],
    "authors": [
      {
        "gitHubAccount": "wobba",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/wobba.png",
        "name": "Mikael Svenson",
        "twitter": "mikaelsvenson"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-command-clone",
    "source": "pnp",
    "title": "Clone ListView Command Set",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-command-clone",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-05-27",
    "updateDateTime": "2019-05-27",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-command-clone/assets/spfxClone-Animation.gif",
        "alt": "Clone ListView Command Set"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-command-clone/assets/CommandIcon.png?raw=true",
        "alt": "Clone ListView Command Set"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-command-clone/assets/DeployToCatalog.png?raw=true",
        "alt": "Clone ListView Command Set"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-command-clone/assets/Dolly.png?raw=true",
        "alt": "Clone ListView Command Set"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-command-clone/assets/spfxClone-Preview.png?raw=true",
        "alt": "Clone ListView Command Set"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "company": "DMI",
        "pictureUrl": "https://avatars.githubusercontent.com/u/8364109?s=460&v=4",
        "name": "Chris Kent",
        "twitter": "thechriskent"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-command-convert-to-pdf",
    "source": "pnp",
    "title": "Convert documents to PDF using Azure function",
    "shortDescription": "Sample SPFx list view command set extension that converts the selected documents to PDF using Microsoft Graph.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-command-convert-to-pdf",
    "longDescription": [
      "Sample SPFx list view command set extension that converts the selected documents to PDF using Microsoft Graph."
    ],
    "creationDateTime": "2018-10-29",
    "updateDateTime": "2018-10-29",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.6"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-command-convert-to-pdf/demo/convert-docs-to-pdf.gif",
        "alt": "Convert documents to PDF using Azure function"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "anoopt",
        "company": "Content +Cloud",
        "pictureUrl": "https://avatars.githubusercontent.com/u/9694225?s=460&u=fbb4b27ed944935800d5f6dbc91e71911ce0d4ec&v=4",
        "name": "Anoop Tatti",
        "twitter": "anooptells"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-command-copy-classic-link",
    "source": "pnp",
    "title": "Copy Classic Link Extension",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-command-copy-classic-link",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2021-01-03",
    "updateDateTime": "2021-01-03",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-command-copy-classic-link/demo/copy-classic-link.gif",
        "alt": "Copy Classic Link Extension"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "anoopt",
        "company": "Content +Cloud",
        "pictureUrl": "https://avatars.githubusercontent.com/u/9694225?s=460&u=fbb4b27ed944935800d5f6dbc91e71911ce0d4ec&v=4",
        "name": "Anoop Tatti",
        "twitter": "anooptells"
      },
      {
        "gitHubAccount": "aakashbhardwaj619",
        "company": "Microsoft",
        "pictureUrl": "https://avatars.githubusercontent.com/u/33526902?s=460&u=e780f4ef1da922c84f2c5c66c59cecbff2300581&v=4",
        "name": "Aakash Bhardwaj",
        "twitter": "aakash_316"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-command-hide-commands",
    "source": "pnp",
    "title": "Hide Commands",
    "shortDescription": "This command-set can be used to hide other 'out-of-the-box' commands on list views.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-command-hide-commands",
    "longDescription": [
      "This command-set can be used to hide other 'out-of-the-box' commands on list views."
    ],
    "creationDateTime": "2020-04-27",
    "updateDateTime": "2020-04-27",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-command-hide-commands/CssSelector.PNG",
        "alt": "Hide Commands"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "russgove",
        "company": "",
        "pictureUrl": "https://github.com/russgove.png",
        "name": "Russell Gove"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-command-item-permissions",
    "source": "pnp",
    "title": "Unique Item Permissions Command Set Customizer",
    "shortDescription": "The sample illustrates creation of a shortcut command to redirect user to selected item's permission page.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-command-item-permissions",
    "longDescription": [
      "The sample illustrates creation of a shortcut command to redirect user to selected item's permission page."
    ],
    "creationDateTime": "2017-10-15",
    "updateDateTime": "2017-10-15",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.3"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-command-item-permissions/assets/item-permissions.png",
        "alt": "Unique Item Permissions Command Set Customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Sharepointalist",
        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4",
        "name": "Alex Terentiev",
        "twitter": "alexaterentiev"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-command-lock-item",
    "source": "pnp",
    "title": "Lock Item Command Set Customizer",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-command-lock-item",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2017-12-20",
    "updateDateTime": "2017-12-20",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-command-lock-item/assets/lock-item.png",
        "alt": "Lock Item Command Set Customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Sharepointalist",
        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4",
        "name": "Alex Terentiev",
        "twitter": "alexaterentiev"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-command-selecteditems-export",
    "source": "pnp",
    "title": "Export Selected Items to Excel",
    "shortDescription": "Exports selected items to excel spreadsheet in xlsx format, with the columns from the current modern list view.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-command-selecteditems-export",
    "longDescription": [
      "Exports selected items to excel spreadsheet in xlsx format, with the columns from the current modern list view."
    ],
    "creationDateTime": "2018-02-16",
    "updateDateTime": "2018-02-16",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-command-selecteditems-export/assets/excel-export-preview.png",
        "alt": "Export Selected Items to Excel"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "rjesh-git",
        "company": "CoreBTS",
        "pictureUrl": "https://github.com/rjesh-git.png",
        "name": "Rajesh Sitaraman"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-field-animated-progress",
    "source": "pnp",
    "title": "Animated Progress Field",
    "shortDescription": "Displays an animated progress bar component",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-field-animated-progress",
    "longDescription": [
      "Displays an animated progress bar component."
    ],
    "creationDateTime": "2021-10-10",
    "updateDateTime": "2021-10-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-FIELD-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-field-animated-progress/assets/preview.gif",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AriGunawan",
        "pictureUrl": "https://github.com/AriGunawan.png",
        "name": "Ari Gunawan"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-field-conditionalformatting",
    "source": "pnp",
    "title": "Conditional formatting SharePoint Framework field customizer",
    "shortDescription": "Sample SharePoint Framework field customizer that applies Excel-like conditional formatting to numeric fields based on their values.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-field-conditionalformatting",
    "longDescription": [
      "Sample SharePoint Framework field customizer that applies Excel-like conditional formatting to numeric fields based on their values."
    ],
    "creationDateTime": "2017-06-29",
    "updateDateTime": "2017-06-29",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.1.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-FIELD-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-field-conditionalformatting/assets/conditionalformatting-preview.png",
        "alt": "Conditional formatting SharePoint Framework field customizer"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-field-conditionalformatting/assets/conditionalformatting-25-95.png?raw=true",
        "alt": "Conditional formatting SharePoint Framework field customizer"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-field-conditionalformatting/assets/conditionalformatting-log-level.png?raw=true",
        "alt": "Conditional formatting SharePoint Framework field customizer"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-field-conditionalformatting/assets/conditionalformatting-verbose-logging.png?raw=true",
        "alt": "Conditional formatting SharePoint Framework field customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first Field Customizer extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-field-taskpriority",
    "source": "pnp",
    "title": "Priority Field SharePoint Framework field customizer",
    "shortDescription": "Sample SharePoint Framework field customizer that shows how to apply conditional color formatting to the values in a Priority field based on their value.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-field-taskpriority",
    "longDescription": [
      "Sample SharePoint Framework field customizer that shows how to apply conditional color formatting to the values in a Priority field based on their value."
    ],
    "creationDateTime": "2017-08-24",
    "updateDateTime": "2017-08-24",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.1.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-FIELD-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-field-taskpriority/assets/js-field-taskpriority-preview.jpg",
        "alt": "Priority Field SharePoint Framework field customizer"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-field-taskpriority/assets/CSS.jpg?raw=true",
        "alt": "Priority Field SharePoint Framework field customizer"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-field-taskpriority/assets/Querystring-Parameters.jpg?raw=true",
        "alt": "Priority Field SharePoint Framework field customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "TBag",
        "company": "Canviz LLC",
        "pictureUrl": "https://github.com/TBag.png",
        "name": "Todd Baginski"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first Field Customizer extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-field-weather",
    "source": "pnp",
    "title": "Weather SharePoint Framework field customizer",
    "shortDescription": "Sample SharePoint Framework field customizer showing weather conditions for the given location.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-field-weather",
    "longDescription": [
      "Sample SharePoint Framework field customizer showing weather conditions for the given location."
    ],
    "creationDateTime": "2018-01-20",
    "updateDateTime": "2018-01-20",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-FIELD-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-field-weather/assets/weather-preview.png",
        "alt": "Weather SharePoint Framework field customizer"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-field-weather/assets/weather-location-f.png?raw=true",
        "alt": "Weather SharePoint Framework field customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first Field Customizer extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-js-guest-message",
    "source": "pnp",
    "title": "Guest Message",
    "shortDescription": "SharePoint Application customizer that allow you to display a message to your External users.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-guest-message",
    "longDescription": [
      "SharePoint Application customizer that allow you to display a message to your External users."
    ],
    "creationDateTime": "2019-09-22",
    "updateDateTime": "2019-09-22",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-guest-message/assets/externalmessage.png",
        "alt": "Guest Message"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/js-guest-message/assets/tenantwide.png?raw=true",
        "alt": "Guest Message"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "DRamalho92",
        "company": "Storm Technology",
        "pictureUrl": "https://github.com/DRamalho92.png",
        "name": "David Ramalho"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-js-share-to-teams",
    "source": "pnp",
    "title": "Share to Teams",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-share-to-teams",
    "longDescription": [
      "Share to teams helps us to share files along with folders in document library it also alows us to share pages in the site pages library and last but not the least it allows sharing list items to teams channels or group.",
      "To achieve this we have taken help of the js file provided by microsoft for creating share to teams button for third-party websites"
    ],
    "creationDateTime": "2021-08-14",
    "updateDateTime": "2021-08-14",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-share-to-teams/assets/sendToTeams.gif",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-share-to-teams/assets/sendToTeams1.png",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-share-to-teams/assets/sendToTeams2.png",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-share-to-teams/assets/sendToTeams3.png",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/js-share-to-teams/assets/sendToTeams4.png",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "kunj-sangani",
        "pictureUrl": "https://github.com/kunj-sangani.png",
        "name": "Kunj Sangani"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-aadtokenprovider-bot",
    "source": "pnp",
    "title": "AAD Token Provider Bot Extension",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-aadtokenprovider-bot",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-11-05",
    "updateDateTime": "2018-11-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.6.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-aadtokenprovider-bot/images/react-aadtokenprovider-bot.gif",
        "alt": "AAD Token Provider Bot Extension"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "FranckyC",
        "company": "Aequos",
        "pictureUrl": "https://github.com/FranckyC.png",
        "name": "Franck Cornu"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-app-announcements",
    "source": "pnp",
    "title": "Announcements SharePoint Framework application customizer",
    "shortDescription": "Sample SharePoint Framework application customizer showing urgent organizational announcements.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-app-announcements",
    "longDescription": [
      "Sample SharePoint Framework application customizer showing urgent organizational announcements."
    ],
    "creationDateTime": "2017-06-30",
    "updateDateTime": "2017-06-30",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.1.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-app-announcements/assets/announcements-preview.png",
        "alt": "Announcements SharePoint Framework application customizer"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-app-announcements/assets/announcements-announcements.png?raw=true",
        "alt": "Announcements SharePoint Framework application customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-alerts",
    "source": "pnp",
    "title": "Alerts Application Customizers",
    "shortDescription": "This application customizer provides you the ability to show notifications on the pages in the top / header area.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-alerts",
    "longDescription": [
      "This application customizer provides you the ability to show notifications on the pages in the top / header area."
    ],
    "creationDateTime": "2019-12-25",
    "updateDateTime": "2019-12-25",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/ext-alert.gif",
        "alt": "Alerts Application Customizers"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      },
      {
        "gitHubAccount": "rfjschouten",
        "company": "Wortell",
        "pictureUrl": "https://github.com/rfjschouten.png",
        "name": "Robert Schouten"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-announcements",
    "source": "pnp",
    "title": "Announcements SharePoint Framework Application Customizer",
    "shortDescription": "SharePoint Framework application customizer displaying an information banner using office-fabric-ui MessageBar.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-announcements",
    "longDescription": [
      "SharePoint Framework application customizer displaying an information banner using office-fabric-ui MessageBar."
    ],
    "creationDateTime": "2020-06-18",
    "updateDateTime": "2024-03-12",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.2"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-announcements/assets/announcements-MUI.png",
        "alt": "Announcements SharePoint Framework Application Customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thespooler",
        "pictureUrl": "https://github.com/thespooler.png",
        "name": "Mike Myers"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-botframework-chat",
    "source": "pnp",
    "title": "Bot Framework Chat App Customizer",
    "shortDescription": "SPFx application extension that uses the Bot Framework React Webchat Component to render a Bot Framework chat window",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-botframework-chat",
    "longDescription": [
      "SPFx application extension that uses the Bot Framework React Webchat Component to render a Bot Framework chat window"
    ],
    "creationDateTime": "2019-10-19",
    "updateDateTime": "2019-10-19",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-botframework-chat/assets/bf_app_customizer01.png",
        "alt": "Bot Framework Chat App Customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "stephanbisser",
        "company": "",
        "pictureUrl": "https://github.com/stephanbisser.png",
        "name": "Stephan Bisser"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-breadcrumb",
    "source": "pnp",
    "title": "Breadcrumb application customizer",
    "shortDescription": "This sample shows how to create a breadcrumb element and append it to your site via the SharePoint Framework Application Customizer extension.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-breadcrumb",
    "longDescription": [
      "This sample shows how to create a breadcrumb element and append it to your site via the SharePoint Framework Application Customizer extension."
    ],
    "creationDateTime": "2020-10-03",
    "updateDateTime": "2020-10-03",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-breadcrumb/assets/breadcrumb-sample.png",
        "alt": "Breadcrumb application customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "estruyf",
        "company": "Struyf Consulting",
        "pictureUrl": "https://github.com/estruyf.png",
        "name": "Elio Struyf",
        "twitter": "eliostruyf"
      },
      {
        "gitHubAccount": "Swaminathan-Sriram",
        "company": "",
        "pictureUrl": "https://github.com/Swaminathan-Sriram.png",
        "name": "Swaminathan Sriram",
        "twitter": "SwaminathanSri3"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-collab-footer",
    "source": "pnp",
    "title": "Collaboration Footer Application Customizers",
    "shortDescription": "This application customizer provides you the ability to include a footer designed for normal and group associated teams sites.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-collab-footer",
    "longDescription": [
      "This application customizer provides you the ability to include a footer designed for normal and group associated teams sites."
    ],
    "creationDateTime": "2020-01-01",
    "updateDateTime": "2020-01-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/ext-collab-footer.gif",
        "alt": "Collaboration Footer Application Customizers"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "PaoloPia",
        "company": "PiaSys.com",
        "pictureUrl": "https://github.com/PaoloPia.png",
        "name": "Paolo Pialorsi",
        "twitter": "PaoloPia"
      },
      {
        "gitHubAccount": "spdavid",
        "company": "Zalo Solutions AB",
        "pictureUrl": "https://github.com/spdavid.png",
        "name": "David Opdendries"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-react-application-customizer-feedback-widget",
    "source": "pnp",
    "title": "Sticky Feedback Widget Application Customizer",
    "shortDescription": "An SPFx Application Customizer Extension placed in the bottom placeholder which allows users to input their feedbacks without scrolling down to the end of the page.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-customizer-feedback-widget",
    "longDescription": [
      "An SPFx Application Customizer Extension placed in the bottom placeholder which allows users to input their feedbacks without scrolling down to the end of the page."
    ],
    "creationDateTime": "2023-07-02",
    "updateDateTime": "2023-07-02",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-customizer-feedback-widget/assets/Feedback_Widget1.png",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Sandeep-FED",
        "pictureUrl": "https://github.com/Sandeep-FED.png",
        "name": "Sandeep P S"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-duetasks",
    "source": "pnp",
    "title": "Overdue Tasks Application Customizer",
    "shortDescription": "The sample illustrates how to display a warning message that current user has overdue tasks.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-duetasks",
    "longDescription": [
      "The sample illustrates how to display a warning message that current user has overdue tasks."
    ],
    "creationDateTime": "2017-12-26",
    "updateDateTime": "2017-12-26",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-duetasks/assets/app-customizer.png",
        "alt": "Overdue Tasks Application Customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Sharepointalist",
        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4",
        "name": "Alex Terentiev",
        "twitter": "alexaterentiev"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-festivals",
    "source": "pnp",
    "title": "Festivals Extension",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-festivals",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-05-19",
    "updateDateTime": "2020-05-19",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-festivals/demo/festivals.gif",
        "alt": "Festivals Extension"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "arjunumenon",
        "company": "",
        "pictureUrl": "https://github.com/arjunumenon.png",
        "name": "Arjun U Menon"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-grouplinks",
    "source": "pnp",
    "title": "Groups external links",
    "shortDescription": "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...",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-grouplinks",
    "longDescription": [
      "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..."
    ],
    "creationDateTime": "2018-02-16",
    "updateDateTime": "2018-02-16",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-grouplinks/assets/react-application-grouplinks.jpg",
        "alt": "Groups external links"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "luismanez",
        "company": "ClearPeople",
        "pictureUrl": "https://github.com/luismanez.png",
        "name": "Luis Mañez"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-injectcss",
    "source": "pnp",
    "title": "CSS Injection",
    "shortDescription": "This sample shows how to inject a custom Cascading Style Sheet (CSS) on modern pages.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-injectcss",
    "longDescription": [
      "This sample shows how to inject a custom Cascading Style Sheet (CSS) on modern pages."
    ],
    "creationDateTime": "2018-03-28",
    "updateDateTime": "2018-03-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-injectcss/assets/sampleresults.png",
        "alt": "CSS Injection"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-application-injectcss/assets/orangeisthenewfeedback.png?raw=true",
        "alt": "CSS Injection"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "hugoabernier",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier",
        "twitter": "bernierh"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-logo-festoon",
    "source": "pnp",
    "title": "Logo Festoon",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-logo-festoon",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-03-17",
    "updateDateTime": "2019-03-17",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-logo-festoon/assets/festoon-shot.png",
        "alt": "Logo Festoon"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-application-logo-festoon/assets/festoon-list.png?raw=true",
        "alt": "Logo Festoon"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-application-logo-festoon/assets/festoon-shot-christmas.png?raw=true",
        "alt": "Logo Festoon"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "rabwill",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/rabwill.png",
        "name": "Rabia Williams",
        "twitter": "williamsrabia"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-machine-translations",
    "source": "pnp",
    "title": "Machine Translations",
    "shortDescription": "This application customizer lets you translate the text on a SharePoint page using the Translator Text API of Microsoft Azure.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-machine-translations",
    "longDescription": [
      "This application customizer lets you translate the text on a SharePoint page using the Translator Text API of Microsoft Azure."
    ],
    "creationDateTime": "2021-01-20",
    "updateDateTime": "2021-07-22",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-machine-translations/assets/sample.gif",
        "alt": "Machine Translations"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-application-machine-translations/assets/main_screenshot.png?raw=true",
        "alt": "Machine Translations"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "agtenr",
        "company": "",
        "pictureUrl": "https://github.com/agtenr.png",
        "name": "Robin Agten"
      },
      {
        "gitHubAccount": "mromiszewski",
        "pictureUrl": "https://github.com/mromiszewski.png",
        "name": "Michał Romiszewski"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-fx-extensions-react-application-messagebanner",
    "source": "pnp",
    "title": "React Message Banner",
    "shortDescription": "A react Message Banner sample, allows to add a custom banner message to your SharePoint Online modern sites.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-messagebanner",
    "longDescription": [
      "A react Message Banner sample, allows to add a custom banner message to your SharePoint Online modern sites. Can target either Site or Web Scoped. Allows a site owner to modify the text, font size, colours and height of the banner. Specify a start date to control when the banner is visible to members of a site. Uses the latest v1.15.2 of SPFX framework."
    ],
    "creationDateTime": "2022-11-09",
    "updateDateTime": "2024-01-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-messagebanner/assets/BannerMessageAdminView.png",
        "alt": "Admin View"
      },
      {
        "type": "image",
        "order": 200,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-messagebanner/assets/BannerMessageAdminViewScheduled.png",
        "alt": "Admin View Scheduled"
      },
      {
        "type": "image",
        "order": 300,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-messagebanner/assets/BannerMessageUserView.png",
        "alt": "User View"
      },
      {
        "type": "image",
        "order": 400,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-messagebanner/assets/BannerSettingsPanel.png",
        "alt": "Banner Settings Panel"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "pmatthews05",
        "company": "CF Code",
        "pictureUrl": "https://github.com/pmatthews05.png",
        "name": "Paul Matthews",
        "twitter": "cann0nf0dder"
      },
      {
        "gitHubAccount": "bschlintz",
        "company": "Digital Nomad",
        "pictureUrl": "https://github.com/bschlintz.png",
        "name": "Brad Schlintz",
        "twitter": "bschlintz"
      }
    ],
    "references": [
      {
        "name": "Getting started with SharePoint Framework",
        "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant"
      },
      {
        "name": "Build your first SharePoint Framework Extension",
        "description": "Introduction about how to develop SharePoint Online extensions using SharePoint Framework.",
        "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension"
      },
      {
        "name": "Microsoft 365 Patterns and Practices",
        "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.",
        "url": "https://aka.ms/m365pnp"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-react-application-my-flows-list",
    "source": "pnp",
    "title": "My Flows List",
    "shortDescription": "Application extension that allows the user to check list of flows and their current status and details.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-my-flows-list",
    "longDescription": [
      "This application extension allows the user to check list of flows and their current status and details."
    ],
    "creationDateTime": "2021-10-03",
    "updateDateTime": "2021-10-03",
    "products": [
      "SharePoint",
      "Office"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-my-flows-list/assets/HowItWorks.gif",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-my-flows-list/assets/Details.jpg",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-my-flows-list/assets/List.jpg",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-my-flows-list/assets/optionStandard.jpg",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-my-flows-list/assets/optionNotRecomended.jpg",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Adam-it",
        "pictureUrl": "https://github.com/Adam-it.png",
        "name": "Adam Wójcik"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-react-application-my-lists-notifications",
    "source": "pnp",
    "title": "My Lists Notifications",
    "shortDescription": "This application extension alows user receive notifications from selected lists or libraries",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-my-lists-notifications",
    "longDescription": [
      "This application extension alows user receive notifications from selected lists or libraries"
    ],
    "creationDateTime": "2021-07-08",
    "updateDateTime": "2021-07-08",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-my-lists-notifications/assets/myListsNotifications.gif",
        "alt": "Preview"
      },
      {
        "type": "video",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-my-lists-notifications/assets/myListsNotifications.mp4",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-my-lists-notifications/assets/myListsNotifications0.png",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-my-lists-notifications/assets/myListsNotifications1.png",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-my-lists-notifications/assets/myListsNotifications2.png",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-my-lists-notifications/assets/myListsNotifications3.png",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-my-lists-notifications/assets/myListsNotifications4.png",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-myfavourites",
    "source": "pnp",
    "title": "My Favourites Application Customizer",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-myfavourites",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-04-14",
    "updateDateTime": "2020-11-11",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-myfavourites/assets/spfx-myfavourites.gif",
        "alt": "My Favourites Application Customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "anoopt",
        "company": "Content +Cloud",
        "pictureUrl": "https://avatars.githubusercontent.com/u/9694225?s=460&u=fbb4b27ed944935800d5f6dbc91e71911ce0d4ec&v=4",
        "name": "Anoop Tatti",
        "twitter": "anooptells"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-myfollowedsites",
    "source": "pnp",
    "title": "My Followed Sites Application Customizer",
    "shortDescription": "Sample SharePoint Framework application customizer extension that shows current user followed sites across tenant using office ui fabric panel.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-myfollowedsites",
    "longDescription": [
      "Sample SharePoint Framework application customizer extension that shows current user followed sites across tenant using office ui fabric panel."
    ],
    "creationDateTime": "2020-06-12",
    "updateDateTime": "2020-06-12",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-myfollowedsites/assets/spfx-react-myFollowedSites.gif",
        "alt": "My Followed Sites Application Customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "rahulsuryawanshi",
        "company": "",
        "pictureUrl": "https://github.com/rahulsuryawanshi.png",
        "name": "Rahul Suryawanshi",
        "twitter": "rahulsuryawansh"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-nav-search-driven",
    "source": "pnp",
    "title": "Search driven navigation",
    "shortDescription": "SPFx application search driven navigation and permission side panel.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-qna-chat",
    "longDescription": [
      "SPFx application extension acting as top level search driven navigation and permission checker on the right within a panel."
    ],
    "creationDateTime": "2023-07-27",
    "updateDateTime": "2024-01-20",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.2"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-nav-search-driven/assets/01SearchDrivenNavigation.png",
        "alt": "Menu navigation"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-nav-search-driven/assets/05SharingLinks.png",
        "alt": "Side panel with permissions"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "mmsharepoint",
        "pictureUrl": "https://github.com/mmsharepoint.png",
        "name": "Markus Moeller"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=M365-MVP-5004617"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=M365-MVP-5004617"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-news-ticker",
    "source": "pnp",
    "title": "News Ticker",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-news-ticker",
    "shortDescription": "An SPFx Extension that displays news as a running text at the top of every modern page.",
    "longDescription": [
      "An SPFx Extension that displays news as a running text at the top of every modern page."
    ],
    "creationDateTime": "2021-04-19",
    "updateDateTime": "2022-11-11",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-news-ticker/assets/react-application-news-ticker.gif",
        "alt": "Extension in action"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-news-ticker/assets/react-application-news-ticker.png",
        "alt": "Extension in action"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AriGunawan",
        "pictureUrl": "https://github.com/AriGunawan.png",
        "name": "Ari Gunawan"
      }
    ],
    "references": []
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-office-groups-nav",
    "source": "pnp",
    "title": "Modern Team Sites (Office Groups) Navigation",
    "shortDescription": "The sample illustrates how to use AadHttpClient to request Groups information from Microsoft Graph",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-office-groups-nav",
    "longDescription": [
      "The sample illustrates how to use AadHttpClient to request Groups information from Microsoft Graph"
    ],
    "creationDateTime": "2018-02-17",
    "updateDateTime": "2018-02-17",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-office-groups-nav/assets/office-groups-nav.png",
        "alt": "Modern Team Sites (Office Groups) Navigation"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Sharepointalist",
        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4",
        "name": "Alex Terentiev",
        "twitter": "alexaterentiev"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-page-comments-sentiment",
    "source": "pnp",
    "title": "Application Customiser sample using Text Analytics API",
    "shortDescription": "This sample shows how to use the Text Analytics API (Cognitive Services) to render a rating icon based on the different comments in page.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-page-comments-sentiment",
    "longDescription": [
      "This sample shows how to use the Text Analytics API (Cognitive Services) to render a rating icon based on the different comments in page."
    ],
    "creationDateTime": "2020-03-06",
    "updateDateTime": "2020-03-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-page-comments-sentiment/assets/react-application-page-comments-sentiment.png",
        "alt": "Application Customiser sample using Text Analytics API"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "luismanez",
        "company": "ClearPeople",
        "pictureUrl": "https://github.com/luismanez.png",
        "name": "Luis Mañez"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-page-related-bing-news",
    "source": "pnp",
    "title": "Application Customiser sample using Bing Search API",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-page-related-bing-news",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-10-25",
    "updateDateTime": "2019-10-25",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-page-related-bing-news/assets/related-bing-news.png",
        "alt": "Application Customiser sample using Bing Search API"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "luismanez",
        "company": "ClearPeople",
        "pictureUrl": "https://github.com/luismanez.png",
        "name": "Luis Mañez"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-personal-assistant",
    "source": "pnp",
    "title": "Personal Assistant - OpenAI Function Calling with Microsoft Graph",
    "shortDescription": "This sample is chatbot that provides information to the current logged in user.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-personal-assistant",
    "longDescription": [
      "This sample is chatbot that provides information to the current logged in user."
    ],
    "creationDateTime": "2023-06-23",
    "updateDateTime": "2023-06-23",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.3"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-personal-assistant/assets/demo.gif",
        "alt": "Extension preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "anoopt",
        "pictureUrl": "https://github.com/anoopt.png",
        "name": "Anoop Tatti"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-portal-footer",
    "source": "pnp",
    "title": "Portal Footer Application Customizers",
    "shortDescription": "This application customizer provides you the ability to include a footer designed for communication sites.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-portal-footer",
    "longDescription": [
      "This application customizer provides you the ability to include a footer designed for communication sites."
    ],
    "creationDateTime": "2019-01-12",
    "updateDateTime": "2019-01-12",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/ext-portal-footer.gif",
        "alt": "Portal Footer Application Customizers"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      },
      {
        "gitHubAccount": "PaoloPia",
        "company": "PiaSys.com",
        "pictureUrl": "https://github.com/PaoloPia.png",
        "name": "Paolo Pialorsi",
        "twitter": "PaoloPia"
      },
      {
        "gitHubAccount": "spdavid",
        "company": "Zalo Solutions AB",
        "pictureUrl": "https://github.com/spdavid.png",
        "name": "David Opdendries"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-pva-bot",
    "source": "pnp",
    "title": "Power Virtual Agents Bot Host",
    "shortDescription": "Adds footer to launch a Power Virtual Agents chatbot window from any page.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-pva-bot",
    "longDescription": [
      "Sample SharePoint Framework application customizer showing urgent organizational announcements."
    ],
    "creationDateTime": "2021-06-06",
    "updateDateTime": "2021-06-06",
    "products": [
      "SharePoint",
      "Power Virtual Agents"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-pva-bot/assets/preview.gif",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-pva-bot/assets/authentication.gif",
        "alt": "Authentication"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-pva-bot/assets/greeting.gif",
        "alt": "Greeting"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "hugoabernier",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier",
        "twitter": "bernierh"
      },
      {
        "gitHubAccount": "DmitryVorobyov",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/DmitryVorobyov.png",
        "name": "Dmitry Vorobyov",
        "twitter": "dmitryvrbyov"
      },
      {
        "gitHubAccount": "renatoromao",
        "pictureUrl": "https://github.com/renatoromao.png",
        "name": "Renato Romão"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-qna-chat",
    "source": "pnp",
    "title": "QnA Chatbot",
    "shortDescription": "SPFx application extension that uses Azure QnA cognitive services to efficiently answer FAQs.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-qna-chat",
    "longDescription": [
      "SPFx application extension that uses Azure QnA cognitive services to efficiently answer FAQs."
    ],
    "creationDateTime": "2017-02-23",
    "updateDateTime": "2017-02-23",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-qna-chat/assets/qnachatbot.png",
        "alt": "QnA Chatbot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "na",
        "pictureUrl": "https://github.com/RodrigoSilva.png",
        "name": "Rodrigo Silva"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-regions-footer",
    "source": "pnp",
    "title": "Regions Footer Application Customizer",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-regions-footer",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2017-09-28",
    "updateDateTime": "2017-09-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.3"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-regions-footer/assets/Regions-Footer.png",
        "alt": "Regions Footer Application Customizer"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-application-regions-footer/assets/Regions-Footer-Config.png?raw=true",
        "alt": "Regions Footer Application Customizer"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-application-regions-footer/assets/Regions-Footer-Taxonomy-Custom-Properties.png?raw=true",
        "alt": "Regions Footer Application Customizer"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-application-regions-footer/assets/Regions-Footer-Taxonomy.png?raw=true",
        "alt": "Regions Footer Application Customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "PaoloPia",
        "company": "PiaSys.com",
        "pictureUrl": "https://github.com/PaoloPia.png",
        "name": "Paolo Pialorsi",
        "twitter": "PaoloPia"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-search-dynamicdata",
    "source": "pnp",
    "title": "Connecting SPFx Extensions with Web Parts using Dynamic Data",
    "shortDescription": "This example shows how to connect Spfx extensions with Spfx Webparts using Dynamic Data Feature",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-search-dynamicdata",
    "longDescription": [
      "This example shows how to connect Spfx extensions with Spfx Webparts using Dynamic Data Feature"
    ],
    "creationDateTime": "2018-07-15",
    "updateDateTime": "2018-07-15",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.5.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-search-dynamicdata/assets/samplepnpExtensions.gif",
        "alt": "Connecting SPFx Extensions with Web Parts using Dynamic Data"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AdrianDiaz81",
        "company": "SCRM",
        "pictureUrl": "https://github.com/AdrianDiaz81.png",
        "name": "Adrián Díaz"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-sitepagecoremetadata",
    "source": "pnp",
    "title": "Tenant Global NavBar",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-sitepagecoremetadata",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-08-15",
    "updateDateTime": "2018-08-15",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.5"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-sitepagecoremetadata/assets/SitePageMetadataExtension.png",
        "alt": "Tenant Global NavBar"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "vipulkelkar",
        "company": "Rapid Circle",
        "pictureUrl": "https://github.com/vipulkelkar.png",
        "name": "Vipul Kelkar"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-sites-hubsite-switcher",
    "source": "pnp",
    "title": "Sites in Hub site switcher",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-sites-hubsite-switcher",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-04-24",
    "updateDateTime": "2018-04-24",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-sites-hubsite-switcher/assets/react-application-sites-hubsite-switcher.png",
        "alt": "Sites in Hub site switcher"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "luismanez",
        "company": "ClearPeople",
        "pictureUrl": "https://github.com/luismanez.png",
        "name": "Luis Mañez"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-team-archived-notification",
    "source": "pnp",
    "title": "Displaying notification if a team is set as archived",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-team-archived-notification",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-01-02",
    "updateDateTime": "2019-01-02",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-team-archived-notification/assets/screenshot.png",
        "alt": "Displaying notification if a team is set as archived"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-application-team-archived-notification/assets/deploy.png?raw=true",
        "alt": "Displaying notification if a team is set as archived"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-application-team-archived-notification/assets/tenantwide.PNG?raw=true",
        "alt": "Displaying notification if a team is set as archived"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "mpaukkon",
        "company": "",
        "pictureUrl": "https://github.com/mpaukkon.png",
        "name": "Matti Paukkonen"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-teams-chats-sharepoint",
    "source": "pnp",
    "title": "Embed Microsoft Teams chats in SharePoint pages",
    "shortDescription": "Embed Microsoft Teams chats within SharePoint pages to streamline collaboration and information access for users.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-teams-chats-sharepoint",
    "longDescription": [
      "This SPFx extension was built to embed Microsoft Teams chats within SharePoint pages to streamline collaboration and information access for users. This application customizer takes advantage of a Microsoft Teams integration made by Microsoft for Edge where links shared in chats open with the conversation context next to it in the browser. Using this solution you can bring the same feature to your SharePoint pages."
    ],
    "creationDateTime": "2023-10-19",
    "updateDateTime": "2023-10-19",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-extensions/main/samples/react-application-teams-chats-sharepoint/assets/Microsoft%20Teams%20chat%20in%20SharePoint%20sites.gif",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaoferreira",
        "pictureUrl": "https://github.com/joaoferreira.png",
        "name": "João Ferreira"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-tenant-global-navbar",
    "source": "pnp",
    "title": "Tenant Global NavBar Application Customizer",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-tenant-global-navbar",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2017-09-28",
    "updateDateTime": "2017-09-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.3"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-tenant-global-navbar/assets/Tenant-Global-NavBar.png",
        "alt": "Tenant Global NavBar Application Customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "PaoloPia",
        "company": "PiaSys.com",
        "pictureUrl": "https://github.com/PaoloPia.png",
        "name": "Paolo Pialorsi",
        "twitter": "PaoloPia"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-tfl-status",
    "source": "pnp",
    "title": "Transport for London (TfL) Status",
    "shortDescription": "This sample is chatbot that provides information about Transport for London (TfL) status.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-tfl-status",
    "longDescription": [
      "This sample is chatbot that provides information about Transport for London (TfL) status."
    ],
    "creationDateTime": "2023-06-23",
    "updateDateTime": "2023-06-23",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.5"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-tfl-status/assets/demo.gif",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Anoop Tatti",
        "pictureUrl": "https://github.com/anoopt.png",
        "name": "anoopt"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-weather-widget",
    "source": "pnp",
    "title": "Weather Application Customizer Extension",
    "shortDescription": "SPFx Weather Application Customizer Extension in the top placeholder",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-weather-widget",
    "longDescription": [
      "SPFx Weather Application Customizer Extension in the top placeholder"
    ],
    "creationDateTime": "2023-03-12",
    "updateDateTime": "2023-03-12",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-weather-widget/assets/weatherwidget.PNG",
        "alt": "Extension preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "rishabhshukla12",
        "pictureUrl": "https://github.com/rishabhshukla12.png",
        "name": "Rishabh Shukla"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-application-webhooks-notification",
    "source": "pnp",
    "title": "Webhooks Notification Application Customizer",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-webhooks-notification",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2017-11-05",
    "updateDateTime": "2017-11-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.3"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-webhooks-notification/assets/spfx-react-webhooks-notification.gif",
        "alt": "Webhooks Notification Application Customizer"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-application-webhooks-notification/assets/Architecture.png?raw=true",
        "alt": "Webhooks Notification Application Customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "giuleon",
        "company": "",
        "pictureUrl": "https://github.com/giuleon.png",
        "name": "Giuliano De Luca",
        "twitter": "delucagiulian"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-bot-framework-secure",
    "source": "pnp",
    "title": "Bot Framework Secure",
    "shortDescription": "This sample will show you how to embed a Bot Framework bot into a SharePoint web site with security consideration.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-bot-framework-secure",
    "longDescription": [
      "This sample will show you how to embed a Bot Framework bot into a SharePoint web site with security consideration."
    ],
    "creationDateTime": "2020-11-10",
    "updateDateTime": "2020-11-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-bot-framework-secure/assets/sp-ex-secure.gif",
        "alt": "Bot Framework Secure"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-bot-framework-secure/assets/EnhancedAuth.png?raw=true",
        "alt": "Bot Framework Secure"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "DingmaomaoBJTU",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/DingmaomaoBJTU.png",
        "name": "Qiong Wu"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-bot-framework-sso",
    "source": "pnp",
    "title": "Bot Framework SSO",
    "shortDescription": "This sample will show you how to embed a Bot Framework bot into a SharePoint web site with SSO.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-bot-framework-sso",
    "longDescription": [
      "This sample will show you how to embed a Bot Framework bot into a SharePoint web site with SSO."
    ],
    "creationDateTime": "2020-11-10",
    "updateDateTime": "2020-11-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-bot-framework-sso/assets/sp-ex-sso.gif",
        "alt": "Bot Framework SSO"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "DingmaomaoBJTU",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/DingmaomaoBJTU.png",
        "name": "Qiong Wu"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-addfolders",
    "source": "pnp",
    "title": "Add Folders Command",
    "shortDescription": "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).",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-addfolders",
    "longDescription": [
      "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)."
    ],
    "creationDateTime": "2021-01-17",
    "updateDateTime": "2021-01-17",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-addfolders/assets/preview.gif",
        "alt": "Add Folders Command"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "michaelmaillot",
        "company": "onepoint",
        "pictureUrl": "https://github.com/michaelmaillot.png",
        "name": "Michaël Maillot"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-react-command-change-page-layouttype",
    "source": "pnp",
    "title": "Change Page Layout Command Extension",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-change-page-layouttype",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2021-10-25",
    "updateDateTime": "2021-10-25",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-change-page-layouttype/assets/FileSelection.png",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-change-page-layouttype/assets/ChangeLayout-Dialog.png",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "sudharsank",
        "company": "NTT Ltd",
        "pictureUrl": "https://github.com/sudharsank.png",
        "name": "Sudharsan K."
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-convert-to-pdf",
    "source": "pnp",
    "title": "Save and convert as PDF by PnP",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-convert-to-pdf",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2021-02-23",
    "updateDateTime": "2021-11-11",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-convert-to-pdf/screenshot.gif",
        "alt": "Save and convert as PDF by PnP"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "wobba",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/wobba.png",
        "name": "Mikael Svenson",
        "twitter": "mikaelsvenson"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-react-command-copy-move-items",
    "source": "pnp",
    "title": "Copy/Move Item(s)",
    "shortDescription": "Displays a command button named **Copy/Move Item(s)** in all the custom lists",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-copy-move-items",
    "longDescription": [
      "This application customizer will display a command button named **Copy/Move Item(s)** in all the custom lists. Using this option, the items can be copied or moved from one list to another within the site."
    ],
    "creationDateTime": "2021-09-13",
    "updateDateTime": "2021-09-13",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-copy-move-items/assets/CopyMoveItems.png",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "sudharsank",
        "company": "NTT Digital Business Solutions",
        "pictureUrl": "https://github.com/sudharsank.png",
        "name": "Sudharsan Kesavanarayanan",
        "twitter": "sudharsank"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-react-command-copy-pnp-search-webpart-settings",
    "source": "pnp",
    "title": "Copy PnP search results webpart settings",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-copy-pnp-search-webpart-settings",
    "longDescription": [
      "LONG DESCRIPTION"
    ],
    "creationDateTime": "2021-06-11",
    "updateDateTime": "2021-07-02",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "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",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "anoopt",
        "pictureUrl": "https://github.com/anoopt.png",
        "name": "Anoop Tatti",
        "twitter": "anooptells"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-custom-command-bar",
    "source": "pnp",
    "title": "Custom Command Bar Command Set Customizer",
    "shortDescription": "The sample illustrates how to display custom Command Bar when Command Set Button is pressed.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-custom-command-bar",
    "longDescription": [
      "The sample illustrates how to display custom Command Bar when Command Set Button is pressed."
    ],
    "creationDateTime": "2017-09-27",
    "updateDateTime": "2017-09-27",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.2.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-custom-command-bar/assets/command-bar.png",
        "alt": "Custom Command Bar Command Set Customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Sharepointalist",
        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4",
        "name": "Alex Terentiev",
        "twitter": "alexaterentiev"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-demote-news",
    "source": "pnp",
    "title": "Demote News to Page",
    "shortDescription": "Sample SharePoint Framework list view command set extension to demote a previously promoted News page.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-demote-news",
    "longDescription": [
      "Sample SharePoint Framework list view command set extension to demote a previously promoted News page."
    ],
    "creationDateTime": "2021-02-22",
    "updateDateTime": "2021-02-22",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-demote-news/assets/preview.gif",
        "alt": "Demote News to Page"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "wobba",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/wobba.png",
        "name": "Mikael Svenson",
        "twitter": "mikaelsvenson"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-dialog",
    "source": "pnp",
    "title": "Custom Dialog Sample with Command View Set",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-dialog",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-09-01",
    "updateDateTime": "2019-09-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.2"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-dialog/assets/screenshot.png",
        "alt": "Custom Dialog Sample with Command View Set"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "msekkappan",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/msekkappan.png",
        "name": "Malathi Sekkappan"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-direct-link",
    "source": "pnp",
    "title": "Get a direct link to a document or folder",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-direct-link",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-01-06",
    "updateDateTime": "2019-01-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.7.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://camo.githubusercontent.com/b65cbd290ecf800f79481174196e527ccb36aa15/68747470733a2f2f6a6f6e6173626a65726b652e66696c65732e776f726470726573732e636f6d2f323031392f30312f636f70796469726563746c696e6b2e706e673f773d343530",
        "alt": "Get a direct link to a document or folder"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "JonasBjerke89",
        "pictureUrl": "https://github.com/JonasBjerke89.png",
        "name": "Jonas Bjerke Hansen"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-directions",
    "source": "pnp",
    "title": "Directions SharePoint Framework list view command set",
    "shortDescription": "Sample SharePoint Framework list view command set showing travel directions to the given location using Google Maps.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-directions",
    "longDescription": [
      "Sample SharePoint Framework list view command set showing travel directions to the given location using Google Maps."
    ],
    "creationDateTime": "2017-06-29",
    "updateDateTime": "2017-06-29",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.1.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-directions/assets/directions-preview.png",
        "alt": "Directions SharePoint Framework list view command set"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-command-directions/assets/directions-driving-microsoft.png?raw=true",
        "alt": "Directions SharePoint Framework list view command set"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-discuss-now",
    "source": "pnp",
    "title": "Discuss Now Command Set",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-discuss-now",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-07-18",
    "updateDateTime": "2018-07-18",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-discuss-now/assets/Discuss-Now-Command-Set.png",
        "alt": "Discuss Now Command Set"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "PaoloPia",
        "company": "PiaSys.com",
        "pictureUrl": "https://github.com/PaoloPia.png",
        "name": "Paolo Pialorsi",
        "twitter": "PaoloPia"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-file-size-viewer",
    "source": "pnp",
    "title": "File Size Viewer sample with Command View Set",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-file-size-viewer",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2021-02-21",
    "updateDateTime": "2021-02-21",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-file-size-viewer/assets/FileSizeViewer.gif",
        "alt": "File Size Viewer sample with Command View Set"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-command-file-size-viewer/assets/CommandBar-2.png?raw=true",
        "alt": "File Size Viewer sample with Command View Set"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-command-file-size-viewer/assets/CommandBar-3.png?raw=true",
        "alt": "File Size Viewer sample with Command View Set"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-command-file-size-viewer/assets/CommandBar.png?raw=true",
        "alt": "File Size Viewer sample with Command View Set"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-command-file-size-viewer/assets/File-Size-Viewer-SPFX-Extension-Selection.png?raw=true",
        "alt": "File Size Viewer sample with Command View Set"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-command-file-size-viewer/assets/File-Size-Viewer-SPFX-Extension.png?raw=true",
        "alt": "File Size Viewer sample with Command View Set"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "jquintozamora",
        "company": "",
        "pictureUrl": "https://github.com/jquintozamora.png",
        "name": "Jose Quinto"
      },
      {
        "gitHubAccount": "sudharsank",
        "company": "NTT Digital Business Solutions",
        "pictureUrl": "https://github.com/sudharsank.png",
        "name": "Sudharsan Kesavanarayanan",
        "twitter": "sudharsank"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-folder-select",
    "source": "pnp",
    "title": "Folder Selection",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-folder-select",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-01-03",
    "updateDateTime": "2020-01-03",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-folder-select/assets/folderselect.gif",
        "alt": "Folder Selection"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "zachroberts8668",
        "company": "",
        "pictureUrl": "https://github.com/zachroberts8668.png",
        "name": "Zach Roberts"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-form-settings",
    "source": "pnp",
    "title": "Form Settings Command View Set",
    "shortDescription": "This sample shows how you can redirect default SharePoint list forms (New,Edit,Display) to different pages.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-form-settings",
    "longDescription": [
      "This sample shows how you can redirect default SharePoint list forms (New,Edit,Display) to different pages."
    ],
    "creationDateTime": "2019-06-30",
    "updateDateTime": "2019-06-30",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-form-settings/assets/screenshot.gif",
        "alt": "Form Settings Command View Set"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AhmadiRamin",
        "company": "Content and Cloud",
        "pictureUrl": "https://github.com/AhmadiRamin.png",
        "name": "Ramin Ahmadi",
        "twitter": "raminahmadi1986"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-get-thumbnail",
    "source": "pnp",
    "title": "Get Thumbnail List Item Command View Set",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-get-thumbnail",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-10-25",
    "updateDateTime": "2019-10-25",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-get-thumbnail/assets/GetThumbnail.gif",
        "alt": "Get Thumbnail List Item Command View Set"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "aakashbhardwaj619",
        "company": "Microsoft",
        "pictureUrl": "https://avatars.githubusercontent.com/u/33526902?s=460&u=e780f4ef1da922c84f2c5c66c59cecbff2300581&v=4",
        "name": "Aakash Bhardwaj",
        "twitter": "aakash_316"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-image-editor",
    "source": "pnp",
    "title": "Image Editor Command Set",
    "shortDescription": "This command set allows quick edit images located in Document Library.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-image-editor",
    "longDescription": [
      "This command set allows quick edit images located in Document Library."
    ],
    "creationDateTime": "2020-06-16",
    "updateDateTime": "2020-06-16",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-image-editor/assets/Screenshot1.png",
        "alt": "Image Editor Command Set"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-command-image-editor/assets/Screenshot2.png?raw=true",
        "alt": "Image Editor Command Set"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-mail-view-as-image",
    "source": "pnp",
    "title": "Mail Current View as Image",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-mail-view-as-image",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-11-13",
    "updateDateTime": "2018-11-13",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.6"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-mail-view-as-image/demo/Mail_this_view.gif",
        "alt": "Mail Current View as Image"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "anoopt",
        "company": "Content +Cloud",
        "pictureUrl": "https://avatars.githubusercontent.com/u/9694225?s=460&u=fbb4b27ed944935800d5f6dbc91e71911ce0d4ec&v=4",
        "name": "Anoop Tatti",
        "twitter": "anooptells"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-manage-list-subscriptions",
    "source": "pnp",
    "title": "React-Manage-List-Subscriptions",
    "shortDescription": "Demonstrates managing the list subscriptions (sharepoint webhooks) and action to renew the webhook expiration date using Rest calls.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-manage-list-subscriptions",
    "longDescription": [
      "With the use of Rest calls, this sample command set shows how to manage list subscriptions (SharePoint webhooks) and take action to extend the webhook expiration date. The commandset will be added to the lists and libraries and will only be shown if there are any list subscriptions available on the list. The subscriptions that are accessible are shown when you click on the Commandset. The 'Renew subscription' action can be used in accordance with the subscription's expiration date. Given that the default number of days is 180, the subscription's (webhook expiration renewal date) renewal date is set to 179 days. "
    ],
    "creationDateTime": "2023-09-12",
    "updateDateTime": "2023-09-12",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.4"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-manage-list-subscriptions/assets/ManageSubscription.png",
        "alt": "Manage Subscriptions"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-manage-list-subscriptions/assets/SubscriptionPanel.gif",
        "alt": "Subscription Panel"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-manage-list-subscriptions/assets/RenewSubscription.gif",
        "alt": "Renewing webhook subscriptions"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "NishkalankBezawada",
        "pictureUrl": "https://github.com/NishkalankBezawada.png",
        "name": "NIshkalank Bezawada"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Get Subscription",
        "description": "Get SharePoint webhook subscriptions",
        "url": "https://learn.microsoft.com/sharepoint/dev/apis/webhooks/lists/get-subscription"
      },
      {
        "name": "Update Subscription",
        "description": "Update SharePoint webhook subscriptions",
        "url": "https://learn.microsoft.com/sharepoint/dev/apis/webhooks/lists/update-subscription"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-page-model-pnpjs",
    "source": "pnp",
    "title": "Modern Page Model with PnP/PnPjs",
    "shortDescription": "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",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-page-model-pnpjs",
    "longDescription": [
      "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"
    ],
    "creationDateTime": "2019-03-23",
    "updateDateTime": "2023-02-15",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-page-model-pnpjs/assets/use-Modern-Page-Template-extension.gif",
        "alt": "Modern Page Model with PnP/PnPjs"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-command-page-model-pnpjs/assets/how-to-make-a-page-template-pnp.gif?raw=true",
        "alt": "Modern Page Model with PnP/PnPjs"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "fredupstair",
        "company": "Avanade Italy",
        "pictureUrl": "https://github.com/fredupstair.png",
        "name": "Federico Porceddu"
      },
      {
        "gitHubAccount": "mohammadamer",
        "name": "Mohammad Amer",
        "pictureUrl": "https://github.com/mohammadamer.png"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-print",
    "source": "pnp",
    "title": "Print List Item Command View Set",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-print",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-12-05",
    "updateDateTime": "2018-12-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.7"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-print/assets/screenshot.gif",
        "alt": "Print List Item Command View Set"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AhmadiRamin",
        "company": "Content and Cloud",
        "pictureUrl": "https://github.com/AhmadiRamin.png",
        "name": "Ramin Ahmadi",
        "twitter": "raminahmadi1986"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-qrcode",
    "source": "pnp",
    "title": "Generate QR Code List Item Command View Set",
    "shortDescription": "Generates a printable QR code which links to a SharePoint list item.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-qrcode",
    "longDescription": [
      "Generates a printable QR code which links to a SharePoint list item."
    ],
    "creationDateTime": "2019-09-01",
    "updateDateTime": "2019-09-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-qrcode/assets/QRCode.gif",
        "alt": "Generate QR Code List Item Command View Set"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "hugoabernier",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier",
        "twitter": "bernierh"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-share-pnpjs",
    "source": "pnp",
    "title": "Multishare Command Extension with PnPJs",
    "shortDescription": "The sample is an custom action only active when multiple items are selected.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-share-pnpjs",
    "longDescription": [
      "The sample is an custom action only active when multiple items are selected."
    ],
    "creationDateTime": "2018-09-19",
    "updateDateTime": "2018-09-19",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.6"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-share-pnpjs/assets/share.png",
        "alt": "Multishare Command Extension with PnPJs"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-command-share-pnpjs/assets/shared.png?raw=true",
        "alt": "Multishare Command Extension with PnPJs"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "simonagren",
        "company": "Sogeti",
        "pictureUrl": "https://github.com/simonagren.png",
        "name": "Simon Ågren"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-fx-extensions-react-command-share-to-teams",
    "source": "pnp",
    "title": "Associated Sites Links",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-share-to-teams",
    "shortDescription": "Web part that will display links to all associated sites that registered to the current site. Current site should be a hub site.",
    "longDescription": [
      "Web part that will display links to all associated sites that registered to the current site.",
      "Current site should be a hub site."
    ],
    "creationDateTime": "2021-04-19",
    "updateDateTime": "2022-11-11",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-share-to-teams/assets/preview.PNG",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 200,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-share-to-teams/assets/fileNative.png",
        "alt": "File Native"
      },
      {
        "type": "image",
        "order": 300,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-share-to-teams/assets/LibraryNative.png",
        "alt": "Library Native"
      },
      {
        "type": "image",
        "order": 400,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-share-to-teams/assets/LIbraryPage.png",
        "alt": "LIbrary Page"
      },
      {
        "type": "image",
        "order": 500,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-share-to-teams/assets/noPermissions.png",
        "alt": "No Permissions"
      },
      {
        "type": "image",
        "order": 600,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-share-to-teams/assets/filePage.png",
        "alt": "File Page"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "russgove",
        "pictureUrl": "https://github.com/russgove.png",
        "name": "Russell Gove"
      }
    ],
    "references": []
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-singlepartapppage",
    "source": "pnp",
    "title": "configure a Page as Single App Part page",
    "shortDescription": "Custom Command Set that set a Page layout to use the Single App Part page Layout",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-singlepartapppage",
    "longDescription": [
      "Custom Command Set that set a Page layout to use the Single App Part page Layout"
    ],
    "creationDateTime": "2019-01-29",
    "updateDateTime": "2022-01-12",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.14.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-singlepartapppage/assets/demo.gif",
        "alt": "configure a Page as Single App Part page"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "luismanez",
        "company": "ClearPeople",
        "pictureUrl": "https://github.com/luismanez.png",
        "name": "Luis Mañez"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-command-vision-api",
    "source": "pnp",
    "title": "Image Metadata from Cognitive Services Vision API List View Command Set",
    "shortDescription": "Custom Command Set that gets metadata information from MS Cognitive Services Vision API for the selected Image",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-vision-api",
    "longDescription": [
      "Custom Command Set that gets metadata information from MS Cognitive Services Vision API for the selected Image"
    ],
    "creationDateTime": "2019-09-01",
    "updateDateTime": "2019-09-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-vision-api/assets/react-command-vision-api.png",
        "alt": "Image Metadata from Cognitive Services Vision API List View Command Set"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-command-vision-api/assets/js-command-vision-api.png?raw=true",
        "alt": "Image Metadata from Cognitive Services Vision API List View Command Set"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "luismanez",
        "company": "ClearPeople",
        "pictureUrl": "https://github.com/luismanez.png",
        "name": "Luis Mañez"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-company-templates",
    "source": "pnp",
    "title": "Company Templates",
    "shortDescription": "An extension to provide a simple approach for company wide used templates in SharePoint Online.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-company-templates",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-company-templates",
    "longDescription": [
      "This is an alternative to the built-in 'New document' experience in a document library in SharePoint Online. It allows a SharePoint admin to define a repository (such as a standard document library or an org assets library) which acts as a source of templates that can be used in every document library. Any user can browse through the collection of company templates, get an instance of the desired template(s) by one single click and start using it."
    ],
    "creationDateTime": "2023-12-22",
    "updateDateTime": "2024-04-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.4"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/269ae2f269aadb35361ec657dd969bf730e79df8/samples/react-company-templates/assets/Demo.gif",
        "alt": "Extension Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "tmaestrini",
        "pictureUrl": "https://github.com/tmaestrini.png",
        "name": "Tobias Maestrini"
      },
      {
        "gitHubAccount": "Tanddant",
        "pictureUrl": "https://github.com/Tanddant.png",
        "name": "Dan Toft (Code Reviews)"
      }
    ],
    "references": [
      {
        "name": "ListView Command Set extension",
        "description": "You can use SharePoint Framework (SPFx) Extensions to build list view command set extensions with the aim to extend the SharePoint command surfaces to add new actions, and provides client-side code that you can use to implement custom behaviors.",
        "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-dynamic-form-with-location-picker",
    "source": "pnp",
    "title": "Dynamic Form with location picker",
    "shortDescription": "This solution implements a simple Form Customizer with a Dynamic Form with a location picker, to demonstrate the many usages of a Dynamic Form.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-dynamic-form-with-location-picker",
    "longDescription": [
      "This solution implements a simple Form Customizer with a Dynamic Form with a location picker, to demonstrate the many usages of a Dynamic Form."
    ],
    "creationDateTime": "2023-06-28",
    "updateDateTime": "2023-06-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "TypeScript,React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.3"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-FORM-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-dynamic-form-with-location-picker/assets/dynamic-form-with-location-picker.gif",
        "alt": "Dynamic Form with location picker solution"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-dynamic-form-with-location-picker/assets/dynamic-form-with-location-picker-screenshot.png",
        "alt": "Dynamic Form with location picker solution"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "martinlingstuyl",
        "pictureUrl": "https://github.com/martinlingstuyl.png",
        "name": "Martin Lingstuyl"
      }
    ],
    "references": [
      {
        "name": "Building a SharePoint New Site Form Look-Alike",
        "description": "A post on building a SPFx Form Customizer with a Dynamic Site with field overrides to create an experience that looks like the default SharePoint new site form.",
        "url": "https://www.blimped.nl/building-a-sharepoint-new-site-form-look-alike"
      },
      {
        "name": "Getting started with SharePoint Framework",
        "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant"
      },
      {
        "name": "Build your first Form Customizer extension",
        "description": "Introduction about how to develop SharePoint Online form customizers using SharePoint Framework.",
        "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-form-customizer"
      },
      {
        "name": "Microsoft 365 Patterns and Practices",
        "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.",
        "url": "https://aka.ms/m365pnp"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-dynamic-site-form",
    "source": "pnp",
    "title": "Dynamic Site Form",
    "shortDescription": "The Dynamic Site Form solution implements a Form Customizer with a Dynamic Form with field overrides to look like the default SharePoint new site form.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-dynamic-site-form",
    "longDescription": [
      "The Dynamic Site Form solution implements a Form Customizer with a SPFx Controls Dynamic Form to load the form. It has field overrides for URL and Group mailbox values to make the form look and act like the default SharePoint new site form."
    ],
    "creationDateTime": "2023-06-22",
    "updateDateTime": "2023-06-22",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "TypeScript,React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.3"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-FORM-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-dynamic-site-form/assets/dynamic-site-form.gif",
        "alt": "Dynamic Site Form solution"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-dynamic-site-form/assets/dynamic-site-form-screenshot.png",
        "alt": "Dynamic Site Form solution"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "martinlingstuyl",
        "pictureUrl": "https://github.com/martinlingstuyl.png",
        "name": "Martin Lingstuyl"
      }
    ],
    "references": [
      {
        "name": "Building a SharePoint New Site Form Look-Alike",
        "description": "A post on building a SPFx Form Customizer with a Dynamic Site with field overrides to create an experience that looks like the default SharePoint new site form.",
        "url": "https://www.blimped.nl/building-a-sharepoint-new-site-form-look-alike"
      },
      {
        "name": "Getting started with SharePoint Framework",
        "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant"
      },
      {
        "name": "Build your first Form Customizer extension",
        "description": "Introduction about how to develop SharePoint Online form customizers using SharePoint Framework.",
        "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-form-customizer"
      },
      {
        "name": "Microsoft 365 Patterns and Practices",
        "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.",
        "url": "https://aka.ms/m365pnp"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-field-attachment-info",
    "source": "pnp",
    "title": "Field Attachment Info",
    "shortDescription": "This field customizer will display the attachment related information for a listitem.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-attachment-info",
    "longDescription": [
      "This field customizer will display the attachment related information for a listitem."
    ],
    "creationDateTime": "2020-04-02",
    "updateDateTime": "2020-04-02",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-FIELD-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-attachment-info/assets/react-field-attachment-info.png",
        "alt": "Field Attachment Info"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "sudharsank",
        "company": "NTT Digital Business Solutions",
        "pictureUrl": "https://github.com/sudharsank.png",
        "name": "Sudharsan Kesavanarayanan",
        "twitter": "sudharsank"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first Field Customizer extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-field-pnp-field-renderer-helper",
    "source": "pnp",
    "title": "PnP Field Renderer Helper",
    "shortDescription": "This field customizer shows how to use PnP FieldRendererHelper utility.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-pnp-field-renderer-helper",
    "longDescription": [
      "This field customizer shows how to use PnP FieldRendererHelper utility."
    ],
    "creationDateTime": "2020-09-13",
    "updateDateTime": "2020-09-13",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-FIELD-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-pnp-field-renderer-helper/assets/FieldRendererHelper.gif",
        "alt": "PnP Field Renderer Helper"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Sharepointalist",
        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4",
        "name": "Alex Terentiev",
        "twitter": "alexaterentiev"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first Field Customizer extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-field-pnp-file-type-renderer",
    "source": "pnp",
    "title": "PnP File Type Renderer",
    "shortDescription": "This field customizer shows how to use PnP FieldFileTypeRenderer controls.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-pnp-file-type-renderer",
    "longDescription": [
      "This field customizer shows how to use PnP FieldFileTypeRenderer controls."
    ],
    "creationDateTime": "2020-10-01",
    "updateDateTime": "2020-10-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-FIELD-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-pnp-file-type-renderer/assets/file-type-renderer.png",
        "alt": "PnP File Type Renderer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Sharepointalist",
        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4",
        "name": "Alex Terentiev",
        "twitter": "alexaterentiev"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first Field Customizer extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-field-reporting",
    "source": "pnp",
    "title": "React Document Reporting Field Customizer",
    "shortDescription": "A React-based SPFx application for monitoring user activity within SharePoint documents.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-reporting",
    "longDescription": [
      "This application logs details about who has opened a document into Application Insights and displays real-time reporting data in tabular and chart formats."
    ],
    "creationDateTime": "2023-12-25",
    "updateDateTime": "2023-12-31",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-FIELD-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-reporting/assets/app-charts.png",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-reporting/assets/app-column.png",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-reporting/assets/app-results.png",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-reporting/assets/app-webpart-configs.png",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ejazhussain",
        "pictureUrl": "https://github.com/ejazhussain.png",
        "name": "Ejaz Hussain"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-field-slider",
    "source": "pnp",
    "title": "Slider Field Customizer",
    "shortDescription": "The sample illustrates how to use Office UI Fabric React Slider in Field Customizer with permissions-base inline editing",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-slider",
    "longDescription": [
      "The sample illustrates how to use Office UI Fabric React Slider in Field Customizer with permissions-base inline editing"
    ],
    "creationDateTime": "2017-08-30",
    "updateDateTime": "2017-08-30",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.2.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-FIELD-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-slider/assets/slider.png",
        "alt": "Slider Field Customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Sharepointalist",
        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4",
        "name": "Alex Terentiev",
        "twitter": "alexaterentiev"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first Field Customizer extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-field-text-analytics-api",
    "source": "pnp",
    "title": "Field Customiser sample using Text Analytics API",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-text-analytics-api",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-01-18",
    "updateDateTime": "2018-01-18",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-FIELD-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-text-analytics-api/assets/react-field-text-analytics-api.png",
        "alt": "Field Customiser sample using Text Analytics API"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "luismanez",
        "company": "ClearPeople",
        "pictureUrl": "https://github.com/luismanez.png",
        "name": "Luis Mañez"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first Field Customizer extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-field-toggle",
    "source": "pnp",
    "title": "Toggle Field Customizer",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-toggle",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2017-10-04",
    "updateDateTime": "2017-10-04",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.3.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-FIELD-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-toggle/assets/react-field-toggle.gif",
        "alt": "Toggle Field Customizer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "giuleon",
        "company": "",
        "pictureUrl": "https://github.com/giuleon.png",
        "name": "Giuliano De Luca",
        "twitter": "delucagiulian"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first Field Customizer extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-field-unique-permissions",
    "source": "pnp",
    "title": "Unique permissions on list items",
    "shortDescription": "This sample demonstrates how to use field customizer to handle unique permissions on list items. ",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-unique-permissions",
    "longDescription": [
      "This sample demonstrates how to use field customizer to handle unique permissions on list items."
    ],
    "creationDateTime": "2023-06-23",
    "updateDateTime": "2023-06-23",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.2"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-unique-permissions/assets/currentUserPermissions.png",
        "alt": "Extension preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "mkm17",
        "pictureUrl": "https://github.com/mkm17.png",
        "name": "Michał Kornet"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-field-user-permission",
    "source": "pnp",
    "title": "Displaying the current user permission with PNPJs",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-user-permission",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-10-12",
    "updateDateTime": "2018-10-12",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.6"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-FIELD-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-user-permission/assets/react-field-user-permission.png",
        "alt": "Displaying the current user permission with PNPJs"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "simonagren",
        "company": "Sogeti",
        "pictureUrl": "https://github.com/simonagren.png",
        "name": "Simon Ågren"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first Field Customizer extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-field-votes",
    "source": "pnp",
    "title": "Field Votes",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-votes",
    "shortDescription": "An extension that displays Vote counter and button to vote or unvote.",
    "longDescription": [
      "An extension that displays Vote counter and button to vote or unvote.",
      "If the current user hasn't been voted, the button will become Vote button but if the current user has been voted, it will become Unvote button."
    ],
    "creationDateTime": "2021-04-19",
    "updateDateTime": "2023-10-08",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      }
    ],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "authors": [
      {
        "gitHubAccount": "AriGunawan",
        "pictureUrl": "https://github.com/AriGunawan.png",
        "name": "Ari Gunawan"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-votes/assets/preview.gif",
        "alt": "Preview"
      }
    ],
    "references": []
  },
  {
    "name": "pnp-sp-dev-fx-extensions-react-formcustomizer-customers",
    "source": "pnp",
    "title": "React Form Customizer (Customers)",
    "shortDescription": "A sample of an SPFx Form Customizer built with React for managing items of a custom list of customers.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-formcustomizer-customers",
    "longDescription": [
      "This SPFx form customizer build custom New, Edit and View list forms for a Customers List."
    ],
    "creationDateTime": "2022-11-09",
    "updateDateTime": "2022-11-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.0"
      }
    ],
    "categories": [
      "SPFX-FORM-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-formcustomizer-customers/assets/viewform.png",
        "alt": "View Form"
      },
      {
        "type": "image",
        "order": 200,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-formcustomizer-customers/assets/newform.png",
        "alt": "New Form"
      },
      {
        "type": "image",
        "order": 300,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-formcustomizer-customers/assets/editform.png",
        "alt": "Edit Form"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ejazhussain",
        "company": "Content & Cloud",
        "pictureUrl": "https://github.com/ejazhussain.png",
        "name": "Ejaz Hussain",
        "twitter": "EjazHussain_"
      }
    ],
    "references": [
      {
        "name": "Getting started with SharePoint Framework",
        "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant"
      },
      {
        "name": "Build your first Form Customizer extension",
        "description": "Introduction about how to develop SharePoint Online form customizers using SharePoint Framework.",
        "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-form-customizer"
      },
      {
        "name": "Microsoft 365 Patterns and Practices",
        "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.",
        "url": "https://aka.ms/m365pnp"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-hidefrom-externalusers",
    "source": "pnp",
    "title": "Application Customizer Extension that is hidden from tenant guest users",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-hidefrom-externalusers",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2023-09-16",
    "updateDateTime": "2023-09-16",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.2"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-hidefrom-externalusers/assets/SharePoint-hidefrom-guest-user.gif",
        "alt": "Application Customizer Extension that is hidden from tenant guest users"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Mahyar915",
        "pictureUrl": "https://github.com/Mahyar915.png",
        "name": "Mohammad Mahyar Pourabdollah Khadar"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-item-History",
    "source": "pnp",
    "title": "Item History",
    "shortDescription": "This listview command is used to show the past versions of the selected list item in a grid.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-item-History",
    "longDescription": [
      "This listview command is used to show the past versions of the selected list item in a grid."
    ],
    "creationDateTime": "2018-06-15",
    "updateDateTime": "2018-06-15",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-item-History/Capture.PNG",
        "alt": "Item History"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "russgove",
        "company": "",
        "pictureUrl": "https://github.com/russgove.png",
        "name": "Russell Gove"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-jump-to-folder",
    "source": "pnp",
    "title": "Jump to folder extension",
    "shortDescription": "Sample solution that facilitates navigation between large collections of SharePoint library folders.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-jump-to-folder",
    "longDescription": [
      "Sample solution that facilitates navigation between large collections of SharePoint library folders."
    ],
    "creationDateTime": "2021-03-15",
    "updateDateTime": "2021-03-15",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-jump-to-folder/assets/jump-to-folder.gif",
        "alt": "Jump to folder extension"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joelfmrodrigues",
        "company": "Storm Technology",
        "pictureUrl": "https://github.com/joelfmrodrigues.png",
        "name": "Joel Rodrigues",
        "twitter": "joelfmrodrigues"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-mega-menu",
    "source": "pnp",
    "title": "Mega Menu Application Customizer Extension",
    "shortDescription": "This sample shows site mega menu. Application customizer is used along with SharePoint List to store the menu items.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-mega-menu",
    "longDescription": [
      "This sample shows site mega menu. Application customizer is used along with SharePoint List to store the menu items."
    ],
    "creationDateTime": "2018-12-10",
    "updateDateTime": "2018-12-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.7.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-mega-menu/assets/menu.gif",
        "alt": "Mega Menu Application Customizer Extension"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-mega-menu/assets/menu2.gif?raw=true",
        "alt": "Mega Menu Application Customizer Extension"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "VelinGeorgiev",
        "company": "",
        "pictureUrl": "https://github.com/VelinGeorgiev.png",
        "name": "Velin Georgiev"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-menu-footer-classic-modern",
    "source": "pnp",
    "title": "Menu Footer Classic Modern",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-menu-footer-classic-modern",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-04-04",
    "updateDateTime": "2018-04-04",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-menu-footer-classic-modern/Documentation/images/ClassicFullHeaderFooter.png",
        "alt": "Menu Footer Classic Modern"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "BobGerman",
        "company": "Microsoft",
        "pictureUrl": "https://avatars.githubusercontent.com/u/4664072?s=460&u=29310fd67417ec5f81dc8881dc6eb5dc0065da2d&v=4",
        "name": "Bob German",
        "twitter": "Bob1German"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-modern-version-history",
    "source": "pnp",
    "title": "Modern Version History",
    "shortDescription": "An extension modernizing the version history experience in SharePoint Online.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-modern-version-history",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-modern-version-history",
    "longDescription": [
      "This is an extension of the version history experience in SharePoint Online. It allows you to see the version history of a file in a modern experience, compare different versions, and restore a previous version."
    ],
    "creationDateTime": "2023-09-01",
    "updateDateTime": "2023-10-02",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.4"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-modern-version-history/assets/Demo.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Tanddant",
        "pictureUrl": "https://github.com/Tanddant.png",
        "name": "Dan Toft"
      },
      {
        "gitHubAccount": "kasuken",
        "pictureUrl": "https://github.com/kasuken.png",
        "name": "Emanuele Bartolesi"
      },
      {
        "gitHubAccount": "tmaestrini",
        "pictureUrl": "https://github.com/tmaestrini.png",
        "name": "Tobias Maestrini"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-msal-bot",
    "source": "pnp",
    "title": "MSAL Bot Extension",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-msal-bot",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-08-04",
    "updateDateTime": "2018-08-04",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.5.1"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-APPLICATION-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-msal-bot/images/react-msal-bot.gif",
        "alt": "MSAL Bot Extension"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "FranckyC",
        "company": "Aequos",
        "pictureUrl": "https://github.com/FranckyC.png",
        "name": "Franck Cornu"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-send-document",
    "source": "pnp",
    "title": "Send Document With E-Mail",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-send-document",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-02-10",
    "updateDateTime": "2019-02-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.7"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-send-document/assets/preview.PNG",
        "alt": "Send Document With E-Mail"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "serdarketenci",
        "company": "",
        "pictureUrl": "https://github.com/serdarketenci.png",
        "name": "Serdar Ketenci"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-send-to-teams",
    "source": "pnp",
    "title": "Send-To-Teams - Command Set",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-send-to-teams",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2021-04-05",
    "updateDateTime": "2021-04-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-send-to-teams/assets/SendToTeams.gif",
        "alt": "Send-To-Teams - Command Set"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-send-to-teams/assets/sendToTeams01.png?raw=true",
        "alt": "Send-To-Teams - Command Set"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-send-to-teams/assets/sendToTeams02.png?raw=true",
        "alt": "Send-To-Teams - Command Set"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-send-to-teams/assets/sendToTeams03.png?raw=true",
        "alt": "Send-To-Teams - Command Set"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-send-to-teams/assets/sendToTeams05.png?raw=true",
        "alt": "Send-To-Teams - Command Set"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Build your first ListView Command Set extension",
        "description": "Extensions are client-side components that run inside the context of a SharePoint page. Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-extensions-react-utility-extensions",
    "source": "pnp",
    "title": "Copy Path and Copy Name List view command set extensions",
    "shortDescription": "List view command set extensions with below functionalities: Copy Path and Copy Name.",
    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-utility-extensions",
    "longDescription": [
      "List view command set extensions with below functionalities:",
      "1. Copy Path allows to copy the path of the document without breaking the permission inheritance.",
      "2. Copy Name allows to copy the name of the document without using the currently available rename functionality."
    ],
    "creationDateTime": "2023-10-04",
    "updateDateTime": "2024-08-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.19.0"
      }
    ],
    "tags": [],
    "categories": [
      "SPFX-COMMAND-EXTENSION"
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-utility-extensions/assets/CopyPathCopyNameExtenstions.png",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "HarminderSethi",
        "pictureUrl": "https://github.com/HarminderSethi.png",
        "name": "Harminder Singh"
      }
    ],
    "references": [
      {
        "name": "Overview of SharePoint Framework Extensions",
        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
      },
      {
        "name": "Use page placeholders from Application Customizer",
        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-aad-api-spo-cookie",
    "title": "Call custom APIs secured with Azure Active Directory without ADAL JS",
    "source": "pnp",
    "shortDescription": "Sample SharePoint Framework client-side web part showing how to access a custom API secured with Azure Active Directory (AAD) without using ADAL JS.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/aad-api-spo-cookie",
    "longDescription": [
      "Sample SharePoint Framework client-side web part showing how to access a custom API secured with Azure Active Directory (AAD) without using ADAL JS."
    ],
    "creationDateTime": "2017-05-05",
    "updateDateTime": "2017-05-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Angular"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/aad-api-spo-cookie/assets/preview-orders.png",
        "alt": "Call custom APIs secured with Azure Active Directory without ADAL JS"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/aad-api-spo-cookie/assets/orders-api-configure-authentication-dialog.png?raw=true",
        "alt": "Call custom APIs secured with Azure Active Directory without ADAL JS"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/aad-api-spo-cookie/assets/orders-api-configure-authentication.png?raw=true",
        "alt": "Call custom APIs secured with Azure Active Directory without ADAL JS"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/aad-api-spo-cookie/assets/orders-api-restore-packages.png?raw=true",
        "alt": "Call custom APIs secured with Azure Active Directory without ADAL JS"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/aad-api-spo-cookie/assets/orders-fetch-error.png?raw=true",
        "alt": "Call custom APIs secured with Azure Active Directory without ADAL JS"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/aad-api-spo-cookie/assets/orders-ie-error.png?raw=true",
        "alt": "Call custom APIs secured with Azure Active Directory without ADAL JS"
      },
      {
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/aad-api-spo-cookie/assets/orders-ie-zones-settings.png?raw=true",
        "alt": "Call custom APIs secured with Azure Active Directory without ADAL JS"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-angular-aad-webapi",
    "source": "pnp",
    "title": "Call custom Web API secured with AAD from SharePoint Framework client-side web part using Angular v1.x",
    "shortDescription": "Sample SharePoint Framework client-side web part illustrating communication with a custom Web API secured with Azue Active Directory using Angular v1.x",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-aad-webapi",
    "longDescription": [
      "Sample SharePoint Framework client-side web part illustrating communication with a custom Web API secured with Azue Active Directory using Angular v1.x"
    ],
    "creationDateTime": "2017-03-21",
    "updateDateTime": "2017-03-21",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Angular"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-aad-webapi/assets/preview.jpg",
        "alt": "Call custom Web API secured with AAD from SharePoint Framework client-side web part using Angular v1.x"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "davidhartman",
        "company": "Slalom",
        "pictureUrl": "https://avatars.githubusercontent.com/u/11304394?s=460&v=4",
        "name": "David Hartman"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-angular-greeting",
    "source": "pnp",
    "title": "Greeting client-side web part",
    "shortDescription": "This is Greeting web part which shows greeting to the current logged in user.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-greeting",
    "longDescription": [
      "This is Greeting web part which shows greeting to the current logged in user."
    ],
    "creationDateTime": "2020-02-15",
    "updateDateTime": "2020-06-29",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Angular"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-greeting/assets/captured.gif",
        "alt": "Greeting client-side web part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/angular-greeting/assets/preview.PNG?raw=true",
        "alt": "Greeting client-side web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "gauravgoyal5",
        "company": "BizPortals Solutions",
        "pictureUrl": "https://github.com/gauravgoyal5.png",
        "name": "Gaurav Goyal"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-angular-migration",
    "source": "pnp",
    "title": "Migrating existing Angular applications to SPFx web parts",
    "shortDescription": "This is a sample Angular application before and after it has been migrated to a SharePoint Framework client-side web part.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-migration",
    "longDescription": [
      "This is a sample Angular application before and after it has been migrated to a SharePoint Framework client-side web part."
    ],
    "creationDateTime": "2016-10-21",
    "updateDateTime": "2016-10-21",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Angular"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-migration/assets/angular-todo-spfx-preview.png",
        "alt": "Migrating existing Angular applications to SharePoint Framework sample"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/angular-migration/assets/angular-todo-preview.png?raw=true",
        "alt": "Migrating existing Angular applications to SharePoint Framework sample"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-angular-msgraph",
    "source": "pnp",
    "title": "Angular MS Graph Web Part Built with Angular v1.x",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-msgraph",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2017-04-19",
    "updateDateTime": "2017-04-19",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Angular"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-msgraph/assets/Connect.png",
        "alt": "Angular MS Graph Web Part Built with Angular v1.x"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/angular-msgraph/assets/Connected.png?raw=true",
        "alt": "Angular MS Graph Web Part Built with Angular v1.x"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/angular-msgraph/assets/Items.png?raw=true",
        "alt": "Angular MS Graph Web Part Built with Angular v1.x"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/angular-msgraph/assets/Lists.png?raw=true",
        "alt": "Angular MS Graph Web Part Built with Angular v1.x"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/angular-msgraph/assets/Root.png?raw=true",
        "alt": "Angular MS Graph Web Part Built with Angular v1.x"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "davidhartman",
        "company": "Slalom",
        "pictureUrl": "https://avatars.githubusercontent.com/u/11304394?s=460&v=4",
        "name": "David Hartman"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-angular-multipage",
    "source": "pnp",
    "title": "Angular multi-page client-side web part",
    "shortDescription": "This is a sample SharePoint Framework client-side web part built using Angular, illustrating building multi-page web parts.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-multipage",
    "longDescription": [
      "This is a sample SharePoint Framework client-side web part built using Angular, illustrating building multi-page web parts."
    ],
    "creationDateTime": "2016-11-01",
    "updateDateTime": "2016-11-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Angular"
      },
      {
        "key": "SPFX-VERSION",
        "value": "drop5"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-multipage/assets/poll-preview.gif",
        "alt": "Angular multi-page client-side web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-angular-ngofficeuifabric-file-upload",
    "source": "pnp",
    "title": "File Upload web part using AngularJs",
    "shortDescription": "File Update/Delete web part using AngularJs and ngOfficeUIFabric with the SharePoint Framework.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-ngofficeuifabric-file-upload",
    "longDescription": [
      "File Update/Delete web part using AngularJs and ngOfficeUIFabric with the SharePoint Framework."
    ],
    "creationDateTime": "2017-07-17",
    "updateDateTime": "2017-07-17",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Angular"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/angular-ngofficeuifabric-file-upload/assets/NG%20File%20Upload.png",
        "alt": "File Upload using AngularJs"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "dipongkor",
        "company": "Jashore University of Science and Technology",
        "pictureUrl": "https://avatars.githubusercontent.com/u/4987425?s=460&u=998935621b0e998dc9bcd0fc26267623a8e5512c&v=4",
        "name": "Atish Kumar Dipongkor",
        "twitter": "atish_iit"
      },
      {
        "gitHubAccount": "gautamdsheth",
        "company": "Valo Intranet",
        "pictureUrl": "https://github.com/gautamdsheth.png",
        "name": "Gautam Sheth",
        "twitter": "gautamdsheth"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-angular-ngofficeuifabric-todo",
    "source": "pnp",
    "title": "Angular & ngOfficeUIFabric Client-Side Web Part",
    "shortDescription": "Illustrates the use of Angular and ngOfficeUIFabric with the SharePoint Framework.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-ngofficeuifabric-todo",
    "longDescription": [
      "This is a sample web part that illustrates the use of Angular and ngOfficeUIFabric with the SharePoint Framework.",
      "You can find a video recording walk-through this sample from SharePoint PnP YouTube channel."
    ],
    "creationDateTime": "2016-09-09",
    "updateDateTime": "2016-09-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Angular"
      },
      {
        "key": "SPFX-VERSION",
        "value": "drop2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://avatars2.githubusercontent.com/u/11164679?s=460&v=4",
        "alt": "Angular & ngOfficeUIFabric Client-Side Web Part"
      },
      {
        "type": "video",
        "order": 101,
        "url": "https://www.youtube.com/embed/FS-_0KENJkI",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-angular-search",
    "source": "pnp",
    "title": "Search Client-Side Web Part Built with Angular v1.x",
    "shortDescription": "This is a sample search web part that illustrates how you can use Angular within the new SharePoint Framework",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-search",
    "longDescription": [
      "This is a sample search web part that illustrates how you can use Angular within the new SharePoint Framework"
    ],
    "creationDateTime": "2017-02-04",
    "updateDateTime": "2017-02-04",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Angular"
      },
      {
        "key": "SPFX-VERSION",
        "value": "rc0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-search/assets/angularSearch.png",
        "alt": "Search Client-Side Web Part Built with Angular v1.x"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "davidhartman",
        "company": "Slalom",
        "pictureUrl": "https://avatars.githubusercontent.com/u/11304394?s=460&v=4",
        "name": "David Hartman"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-angular-todo",
    "source": "pnp",
    "title": "Angular client-side web part",
    "shortDescription": "Sample Web Part illustrating using Angular with the SharePoint Framework.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular-todo",
    "longDescription": [
      "Sample Web Part illustrating using Angular with the SharePoint Framework."
    ],
    "creationDateTime": "2017-03-10",
    "updateDateTime": "2017-03-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Angular"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular-todo/assets/preview.png",
        "alt": "Angular client-side web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-angular2-prototype",
    "source": "pnp",
    "title": "Angular2 Web Part Prototype",
    "shortDescription": "Sample To Do Web Part built with Angular2. This sample illustrates how you can use Angular2 with the SharePoint Framework.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angular2-prototype",
    "longDescription": [
      "Sample To Do Web Part built with Angular2. This sample illustrates how you can use Angular2 with the SharePoint Framework."
    ],
    "creationDateTime": "2017-01-20",
    "updateDateTime": "2017-01-20",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Angular"
      },
      {
        "key": "SPFX-VERSION",
        "value": "rc0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/angular2-prototype/assets/preview.png",
        "alt": "Angular2 Web Part Prototype"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "dgaeta",
        "company": "",
        "pictureUrl": "https://avatars.githubusercontent.com/u/1770329?s=460&v=4",
        "name": "Daniel Gaeta"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-angularelements-helloworld",
    "source": "pnp",
    "title": "Angular Elements in SPFx web parts",
    "shortDescription": "Set of sample web parts illustrating how to use Angular Elements in the SharePoint Framework.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angularelements-helloworld",
    "longDescription": [
      "Set of sample web parts illustrating how to use Angular Elements in the SharePoint Framework."
    ],
    "creationDateTime": "2018-06-01",
    "updateDateTime": "2018-06-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Angular"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/media/raw/master/parker/pnp/300w/parker.png",
        "alt": "Angular Elements in SharePoint Framework"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      },
      {
        "gitHubAccount": "sebastienlevert",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/sebastienlevert.png",
        "name": "Sébastien Levert",
        "twitter": "sebastienlevert"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-angularelements-html-templatefile",
    "source": "pnp",
    "title": "Angular Elements with HTML Template File in SharePoint Framework",
    "shortDescription": "A sample web part illustrating how to use Angular Elements in the SharePoint Framework with the help of separate template HTML File.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/angularelements-html-templatefile",
    "longDescription": [
      "A sample web part illustrating how to use Angular Elements in the SharePoint Framework with the help of separate template HTML File."
    ],
    "creationDateTime": "2019-01-08",
    "updateDateTime": "2019-01-08",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Angular"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/media/raw/master/parker/pnp/300w/parker.png",
        "alt": "Angular Elements with HTML Template File in SharePoint Framework"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "JayakumarB",
        "company": "Hubfly",
        "pictureUrl": "https://github.com/JayakumarB.png",
        "name": "Jayakumar Balasubramaniam",
        "twitter": "jayakumrb"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-bootstrap-slider",
    "source": "pnp",
    "title": "Bootstrap Slider Web Part Built with jQuery v1.x and Boostrap v3.x",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/bootstrap-slider",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2017-04-25",
    "updateDateTime": "2017-04-25",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "jQuery"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/bootstrap-slider/assets/slider_image_1.png",
        "alt": "Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/bootstrap-slider/assets/List.png?raw=true",
        "alt": "Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/bootstrap-slider/assets/slider_image_2.png?raw=true",
        "alt": "Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "davidhartman",
        "company": "Slalom",
        "pictureUrl": "https://avatars.githubusercontent.com/u/11304394?s=460&v=4",
        "name": "David Hartman"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-handlebarsjs-webpack-loader",
    "source": "pnp",
    "title": "Web Part with Handlebars.js",
    "shortDescription": "This sample demonstrate how to set up SPFX to use Handlebars through webpack loader.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/handlebarsjs-webpack-loader",
    "longDescription": [
      "This sample demonstrate how to set up SPFX to use Handlebars through webpack loader."
    ],
    "creationDateTime": "2018-03-21",
    "updateDateTime": "2018-03-21",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Other"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/gh-pages/img/_nopreview.png",
        "alt": "No preview available"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "StfBauer",
        "company": "N8D",
        "pictureUrl": "https://github.com/StfBauer.png",
        "name": "Stefan Bauer",
        "twitter": "stfbauer"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-jquery-cdn",
    "source": "pnp",
    "title": "Web Part Using jQuery loaded from CDN",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/jquery-cdn",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2016-09-16",
    "updateDateTime": "2016-09-16",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "jQuery"
      },
      {
        "key": "SPFX-VERSION",
        "value": "drop2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/jquery-cdn/assets/preview_weather.png",
        "alt": "Using jQuery loaded from CDN"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-jquery-photopile",
    "source": "pnp",
    "title": "JQuery, Photopile.JS & Office UI Fabric Client-Side Web Part",
    "shortDescription": "This is a sample web part that illustrated the use of JQuery and Photopile.Js with the SharePoint Framework.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/jquery-photopile",
    "longDescription": [
      "This is a sample web part that illustrated the use of JQuery and Photopile.Js with the SharePoint Framework."
    ],
    "creationDateTime": "2016-09-09",
    "updateDateTime": "2016-09-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "jQuery"
      },
      {
        "key": "SPFX-VERSION",
        "value": "drop1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/jquery-photopile/assets/photopileoverview.gif",
        "alt": "JQuery, Photopile.JS & Office UI Fabric Client-Side Web Part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/jquery-photopile/assets/tutorial-add-spapp-01.png?raw=true",
        "alt": "JQuery, Photopile.JS & Office UI Fabric Client-Side Web Part"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/jquery-photopile/assets/tutorial-add-spapp-02.png?raw=true",
        "alt": "JQuery, Photopile.JS & Office UI Fabric Client-Side Web Part"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/jquery-photopile/assets/tutorial-add-spapp-03.png?raw=true",
        "alt": "JQuery, Photopile.JS & Office UI Fabric Client-Side Web Part"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/jquery-photopile/assets/tutorial-add-spapp-05.png?raw=true",
        "alt": "JQuery, Photopile.JS & Office UI Fabric Client-Side Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "OlivierCC",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/OlivierCC.png",
        "name": "Olivier Carpentier"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-js-advanced-commenting",
    "source": "pnp",
    "title": "Advanced Comments Box Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-advanced-commenting",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-02-05",
    "updateDateTime": "2024-03-11",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "jQuery"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.0"
      },
      {
        "key": "PNPCONTROLS",
        "value": "PropertyFieldSliderWithCallout, PropertyFieldToggleWithCallout, PropertyFieldListPicker"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-advanced-commenting/assets/Advanced-Comments-Box.gif",
        "alt": "Advanced Comments Box"
      },
      {
        "type": "video",
        "order": 101,
        "url": "https://www.youtube.com/embed/ndHMdfFscsk",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "sudharsank",
        "company": "NTT Digital Business Solutions",
        "pictureUrl": "https://github.com/sudharsank.png",
        "name": "Sudharsan Kesavanarayanan",
        "twitter": "sudharsank"
      },
      {
        "gitHubAccount": "a1mery",
        "name": "Aimery Thomas",
        "pictureUrl": "https://github.com/a1mery.png"
      },
      {
        "gitHubAccount": "wideserg",
        "name": "Sergey Shiroky",
        "pictureUrl": "https://github.com/wideserg.png"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-js-applicationinsights-api-calls-tracking",
    "source": "pnp",
    "title": "External API calls tracking with Application Insights",
    "shortDescription": "This SPFx solution is designed to monitor and track API calls executed within any SharePoint Online (SPO) site.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-applicationinsights-api-calls-tracking",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-applicationinsights-api-calls-tracking",
    "longDescription": [
      "This SPFx solution is designed to monitor and track API calls executed within any SharePoint Online (SPO) site."
    ],
    "creationDateTime": "2024-08-10",
    "updateDateTime": "2024-08-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "JavaScript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.19.0"
      }
    ],
    "thumbnails": [
      {
        "name": "alerttule.png",
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-applicationinsights-api-calls-tracking/assets/alerttule.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "ApiCalls.png",
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-applicationinsights-api-calls-tracking/assets/ApiCalls.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "kusto.png",
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-applicationinsights-api-calls-tracking/assets/kusto.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "kkazala",
        "pictureUrl": "https://github.com/kkazala.png",
        "name": "Kinga Kazala"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-js-display-list",
    "source": "pnp",
    "title": "Display List JavaScript Client-Side Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-display-list",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-08-29",
    "updateDateTime": "2020-08-29",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-display-list/assets/display-list-preview.png",
        "alt": "Display List JavaScript Client-Side Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "VelinGeorgiev",
        "company": "",
        "pictureUrl": "https://github.com/VelinGeorgiev.png",
        "name": "Velin Georgiev"
      },
      {
        "gitHubAccount": "sharepointknight",
        "company": "",
        "pictureUrl": "https://github.com/sharepointknight.png",
        "name": "Ryan Schouten"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-js-dynamic-bundling-libraries",
    "source": "pnp",
    "title": "Dynamic Bundling Web Parts & Loading of SPFx Packages",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-dynamic-bundling-libraries",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-12-03",
    "updateDateTime": "2018-12-03",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.7.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-dynamic-bundling-libraries/assets/WebPart-Preview-PostjQueryClick.jpg",
        "alt": "Dynamic Bundling & Loading of SPFx Packages"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-dynamic-bundling-libraries/assets/WebPart-Preview-PreClick.jpg?raw=true",
        "alt": "Dynamic Bundling & Loading of SPFx Packages"
      },
      {
        "type": "video",
        "order": 102,
        "url": "https://www.youtube.com/embed/Gxsau1yhHZE",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "PopWarner",
        "company": "Catapult Systems",
        "pictureUrl": "https://avatars.githubusercontent.com/u/10676147?s=460&u=9e4e74223c4ffb430fb77c97892a84b286df1921&v=4",
        "name": "David Warner II",
        "twitter": "PopWarner"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-js-employee-spotlight",
    "source": "pnp",
    "title": "Display Employee Spotlight JavaScript Client-Side Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-employee-spotlight",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2017-06-12",
    "updateDateTime": "2017-06-12",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-employee-spotlight/assets/Employee-spotlight-priview.png",
        "alt": "Display Employee Spotlight JavaScript Client-Side Web Part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-employee-spotlight/assets/Employee-spotlight-options.png?raw=true",
        "alt": "Display Employee Spotlight JavaScript Client-Side Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "brk114",
        "company": "TechDimension IT Solutions",
        "pictureUrl": "https://github.com/brk114.png",
        "name": "Ravi Kumar Bomma"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-js-extend-gulp",
    "source": "pnp",
    "title": "Integrating custom gulp tasks to SharePoint Framework toolchain",
    "shortDescription": "SharePoint client-side development tools use gulp as the build process task runner to...",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-extend-gulp",
    "longDescription": [
      "SharePoint client-side development tools use gulp as the build process task runner to..."
    ],
    "creationDateTime": "2017-01-25",
    "updateDateTime": "2017-01-25",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "rc0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://avatars3.githubusercontent.com/u/7882052?s=460&v=4",
        "alt": "Integrating custom gulp tasks to SharePoint Framwork toolchain"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "chakkaradeep",
        "company": "Microsoft",
        "pictureUrl": "https://avatars.githubusercontent.com/u/7882052?s=460&u=92d546edfe1e1b374c69f0fd9315186eea700b8f&v=4",
        "name": "Chakkaradeep Chandran",
        "twitter": "chakkaradeep"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-js-extend-webpack",
    "source": "pnp",
    "title": "Extending webpack in the SharePoint Framework toolchain",
    "shortDescription": "This sample shows how to use the webpack markdown-loader to preprocess markdown files to HTML string.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-extend-webpack",
    "longDescription": [
      "This sample shows how to use the webpack markdown-loader to preprocess markdown files to HTML string."
    ],
    "creationDateTime": "2017-01-25",
    "updateDateTime": "2017-01-25",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/media/raw/master/parker/pnp/300w/parker.png",
        "alt": "Extending webpack in the SharePoint Framework toolchain"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "VelinGeorgiev",
        "company": "",
        "pictureUrl": "https://github.com/VelinGeorgiev.png",
        "name": "Velin Georgiev"
      },
      {
        "gitHubAccount": "chakkaradeep",
        "company": "Microsoft",
        "pictureUrl": "https://avatars.githubusercontent.com/u/7882052?s=460&u=92d546edfe1e1b374c69f0fd9315186eea700b8f&v=4",
        "name": "Chakkaradeep Chandran",
        "twitter": "chakkaradeep"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-js-gitHubbadge",
    "source": "pnp",
    "title": "GitHub Badge Web Part",
    "shortDescription": "",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-gitHubbadge",
    "longDescription": [
      ""
    ],
    "creationDateTime": "2019-04-18",
    "updateDateTime": "2019-04-18",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/e92d0dac567cc4d59cdfc94186a52a3b776c6d21/samples/js-gitHubBadge/assets/1.png",
        "alt": "GitHub Badge"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "skaggej",
        "company": "",
        "pictureUrl": "https://github.com/skaggej.png",
        "name": "Eric Skaggs",
        "twitter": "skaggej"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-js-modern-calendar",
    "source": "pnp",
    "title": "Modern Calendar Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-modern-calendar",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-06-05",
    "updateDateTime": "2021-10-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-modern-calendar/assets/14b88f34-0121-11e7-8c91-56ecff9343e1.png",
        "alt": "Modern Calendar"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-modern-calendar/assets/14c3ec26-0121-11e7-8be8-65fbcca32b62.png",
        "alt": "Modern Calendar"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-modern-calendar/assets/14c4333e-0121-11e7-9bf1-3117651222d3.png",
        "alt": "Modern Calendar"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "jcoleman-pcprofessional",
        "company": "PC Professional Inc.",
        "pictureUrl": "https://github.com/jcoleman-pcprofessional.png",
        "name": "Jeremy Coleman"
      },
      {
        "gitHubAccount": "nanddeepn",
        "company": "",
        "pictureUrl": "https://github.com/nanddeepn.png",
        "name": "Nanddeep Nachan",
        "twitter": "NanddeepNachan"
      },
      {
        "gitHubAccount": "petkir",
        "company": "Cubido Business Solutions GmbH",
        "pictureUrl": "https://github.com/petkir.png",
        "name": "Peter Paul Kirschner",
        "twitter": "petkir_at"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-js-msgraph-thumbnail",
    "source": "pnp",
    "title": "Thumbnail/preview of pages and files web part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-msgraph-thumbnail",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-01-21",
    "updateDateTime": "2020-01-21",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-msgraph-thumbnail/preview.gif",
        "alt": "Thumbnail/preview of pages and files"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "wobba",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/wobba.png",
        "name": "Mikael Svenson",
        "twitter": "mikaelsvenson"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-js-myflows",
    "source": "pnp",
    "title": "My Flows Web Part",
    "shortDescription": "Manage current user flows in SharePoint or Teams Tab, this web part use the msflowsdk-1.1.js",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-myflows",
    "longDescription": [
      "Manage current user flows in SharePoint or Teams Tab, this web part use the msflowsdk-1.1.js"
    ],
    "creationDateTime": "2019-08-13",
    "updateDateTime": "2019-08-13",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.2"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-myflows/assets/Screenshot4.png",
        "alt": "My Flows Web Part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-myflows/assets/MyFlows.gif?raw=true",
        "alt": "My Flows Web Part"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-myflows/assets/Screenshot1.png?raw=true",
        "alt": "My Flows Web Part"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-myflows/assets/Screenshot2.png?raw=true",
        "alt": "My Flows Web Part"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-myflows/assets/Screenshot3.png?raw=true",
        "alt": "My Flows Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-js-powerbi-embedded",
    "source": "pnp",
    "title": "Embed a PowerBI report in a Client-Side Web Part",
    "shortDescription": "This sample SharePoint Framework client-side web part embedding a PowerBI report using PowerBI Embedded without any server-side code.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-powerbi-embedded",
    "longDescription": [
      "This sample SharePoint Framework client-side web part embedding a PowerBI report using PowerBI Embedded without any server-side code."
    ],
    "creationDateTime": "2016-09-13",
    "updateDateTime": "2016-09-13",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "drop2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-powerbi-embedded/assets/screenshot_powerbi_embedded_spfx.png",
        "alt": "Embed a PowerBI report in a Client-Side Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "roldengarm",
        "company": "",
        "pictureUrl": "https://github.com/roldengarm.png",
        "name": "Roland Oldengarm"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-js-propertycontrols-svg",
    "source": "pnp",
    "title": "JS Property Controls SVG Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-propertycontrols-svg",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2017-11-12",
    "updateDateTime": "2022-04-07",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.13.0"
      },
      {
        "key": "PNPCONTROLS",
        "value": "PropertyFieldColorPicker, PropertyFieldSpinButton"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-propertycontrols-svg/assets/js-propertycontrols-svg.gif",
        "alt": "JS Property Controls SVG"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-propertycontrols-svg/assets/js-propertycontrols-svg.PNG?raw=true",
        "alt": "JS Property Controls SVG"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "company": "DMI",
        "pictureUrl": "https://avatars.githubusercontent.com/u/8364109?s=460&v=4",
        "name": "Chris Kent",
        "twitter": "thechriskent"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-js-public-unjoined-teams",
    "source": "pnp",
    "title": "Public teams I'm not a member of Web Part",
    "shortDescription": "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).",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-public-unjoined-teams",
    "longDescription": [
      "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)."
    ],
    "creationDateTime": "2019-02-05",
    "updateDateTime": "2019-02-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.7.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-public-unjoined-teams/assets/js-public-unjoined-teams.gif",
        "alt": "Public teams I'm not a member of"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "LauraKokkarinen",
        "company": "Sulava",
        "pictureUrl": "https://github.com/LauraKokkarinen.png",
        "name": "Laura Kokkarinen",
        "twitter": "LauraKokkarinen"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-js-skype-status",
    "source": "pnp",
    "title": "JavaScript Skype Status Web Part",
    "shortDescription": "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",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-skype-status",
    "longDescription": [
      "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"
    ],
    "creationDateTime": "2019-03-27",
    "updateDateTime": "2019-03-27",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-skype-status/images/demo.gif",
        "alt": "JavaScript Skype Status Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "baywet",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/baywet.png",
        "name": "Vincent Biret",
        "twitter": "baywet"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-js-solution-editions",
    "source": "pnp",
    "title": "Handling Multiple Editions of SPFx Solution",
    "shortDescription": "This sample shows possible approach of handling multiple editions (e.g. trial, lite, full) of SharePoint Framework solution.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-solution-editions",
    "longDescription": [
      "This sample shows possible approach of handling multiple editions (e.g. trial, lite, full) of SharePoint Framework solution."
    ],
    "creationDateTime": "2017-08-23",
    "updateDateTime": "2017-08-23",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://avatars3.githubusercontent.com/u/17036219?s=460&v=4",
        "alt": "Handling Multiple Editions of SPFx Solution"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Sharepointalist",
        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4",
        "name": "Alex Terentiev",
        "twitter": "alexaterentiev"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-js-theme-manager",
    "source": "pnp",
    "title": "Modern Experience Theme Manager Web Part",
    "shortDescription": "This sample web part provides a user interface for creating, updating, deleting and applying a Modern Experience SharePoint theme in SharePoint Online.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-theme-manager",
    "longDescription": [
      "This sample web part provides a user interface for creating, updating, deleting and applying a Modern Experience SharePoint theme in SharePoint Online."
    ],
    "creationDateTime": "2020-06-01",
    "updateDateTime": "2020-06-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-theme-manager/assets/create-a-theme.png",
        "alt": "Modern Experience Theme Manager"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-theme-manager/assets/apply-a-theme.png?raw=true",
        "alt": "Modern Experience Theme Manager"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-theme-manager/assets/delete-a-theme.png?raw=true",
        "alt": "Modern Experience Theme Manager"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-theme-manager/assets/theme-manager.png?raw=true",
        "alt": "Modern Experience Theme Manager"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-theme-manager/assets/update-a-theme.png?raw=true",
        "alt": "Modern Experience Theme Manager"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "PopWarner",
        "company": "Catapult Systems",
        "pictureUrl": "https://avatars.githubusercontent.com/u/10676147?s=460&u=9e4e74223c4ffb430fb77c97892a84b286df1921&v=4",
        "name": "David Warner II",
        "twitter": "PopWarner"
      },
      {
        "gitHubAccount": "bcameron1231",
        "company": "DMI",
        "pictureUrl": "https://avatars.githubusercontent.com/u/7944457?s=460&u=cbea276e0125f71a183f8ad94475dbd1984c6afa&v=4",
        "name": "Beau Cameron",
        "twitter": "Beau__Cameron"
      },
      {
        "gitHubAccount": "hugoabernier",
        "company": "Tahoe Ninjas",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier",
        "twitter": "bernierh"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-js-theme-manager-2019",
    "source": "pnp",
    "title": "Modern Experience Theme Manager 2019 Web Part",
    "shortDescription": "This sample web part provides a user interface for applying a Modern Experience theme in SharePoint 2019 on-premises.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-theme-manager-2019",
    "longDescription": [
      "This sample web part provides a user interface for applying a Modern Experience theme in SharePoint 2019 on-premises."
    ],
    "creationDateTime": "2019-06-17",
    "updateDateTime": "2019-06-17",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-theme-manager-2019/assets/apply-a-theme.png",
        "alt": "Modern Experience Theme Manager 2019"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-theme-manager-2019/assets/create-a-theme.png?raw=true",
        "alt": "Modern Experience Theme Manager 2019"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-theme-manager-2019/assets/delete-a-theme.png?raw=true",
        "alt": "Modern Experience Theme Manager 2019"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-theme-manager-2019/assets/theme-manager.png?raw=true",
        "alt": "Modern Experience Theme Manager 2019"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/js-theme-manager-2019/assets/update-a-theme.png?raw=true",
        "alt": "Modern Experience Theme Manager 2019"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "PopWarner",
        "company": "Catapult Systems",
        "pictureUrl": "https://avatars.githubusercontent.com/u/10676147?s=460&u=9e4e74223c4ffb430fb77c97892a84b286df1921&v=4",
        "name": "David Warner II",
        "twitter": "PopWarner"
      },
      {
        "gitHubAccount": "bcameron1231",
        "company": "DMI",
        "pictureUrl": "https://avatars.githubusercontent.com/u/7944457?s=460&u=cbea276e0125f71a183f8ad94475dbd1984c6afa&v=4",
        "name": "Beau Cameron",
        "twitter": "Beau__Cameron"
      },
      {
        "gitHubAccount": "skaggej",
        "company": "",
        "pictureUrl": "https://github.com/skaggej.png",
        "name": "Eric Skaggs",
        "twitter": "skaggej"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-js-workbench-customizer",
    "source": "pnp",
    "title": "Workbench customizer Web Part",
    "shortDescription": "This sample shows how the Workbench page can be customized to display in a way that better mimics a modern SharePoint page.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-workbench-customizer",
    "longDescription": [
      "This sample shows how the Workbench page can be customized to display in a way that better mimics a modern SharePoint page."
    ],
    "creationDateTime": "2020-11-02",
    "updateDateTime": "2023-12-21",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/js-workbench-customizer/assets/Preview.png",
        "alt": "Workbench customizer"
      },
      {
        "type": "video",
        "order": 101,
        "url": "https://www.youtube.com/embed/u1Bnb7yn3_w",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joelfmrodrigues",
        "company": "Storm Technology",
        "pictureUrl": "https://github.com/joelfmrodrigues.png",
        "name": "Joel Rodrigues"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-knockout-dependent-properties",
    "source": "pnp",
    "title": "Knockout Dependent Properties",
    "shortDescription": "Sample Web Part illustrating...",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/knockout-dependent-properties",
    "longDescription": [
      "Sample Web Part illustrating..."
    ],
    "creationDateTime": "2017-05-20",
    "updateDateTime": "2017-05-20",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Knockout"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/knockout-dependent-properties/assets/dep-props.png",
        "alt": "Knockout Dependent Properties"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Sharepointalist",
        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4",
        "name": "Alex Terentiev",
        "twitter": "alexaterentiev"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-knockout-sp-pnp-js",
    "source": "pnp",
    "title": "Sample web part showing the use of @pnp/sp library with Knockoutjs",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/knockout-sp-pnp-js",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-11-14",
    "updateDateTime": "2018-11-14",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Knockout"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.7.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/knockout-sp-pnp-js/assets/screenshot.png",
        "alt": "Sample showing the use of @pnp/sp library with Knockoutjs"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "patrick-rodgers",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/patrick-rodgers.png",
        "name": "Patrick Rodgers",
        "twitter": "mediocrebowler"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-knockout-taxonomy",
    "source": "pnp",
    "title": "Taxonomy Web Part",
    "shortDescription": "Sample Web Part illustrating Reading taxonomy term stores' hierarchy from SharePoint, Loading JavaScript Object Model scripts, creating Knockout components",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/knockout-taxonomy",
    "longDescription": [
      "Sample Web Part illustrating Reading taxonomy term stores' hierarchy from SharePoint, Loading JavaScript Object Model scripts, creating Knockout components"
    ],
    "creationDateTime": "2017-05-05",
    "updateDateTime": "2017-05-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Knockout"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/knockout-taxonomy/assets/Taxonomy.png",
        "alt": "Taxonomy Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Sharepointalist",
        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4",
        "name": "Alex Terentiev",
        "twitter": "alexaterentiev"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-3rd-party-api",
    "source": "pnp",
    "title": "Consuming Third Party APIs secured with Azure Active Directory within SharePoint Framework Web Part",
    "shortDescription": "This sub folders contains a client-side project that shows how to consume a 3rd party API within SharePoint Framework.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-3rd-party-api",
    "longDescription": [
      "This sub folders contains a client-side project that shows how to consume a 3rd party API within SharePoint Framework."
    ],
    "creationDateTime": "2018-02-19",
    "updateDateTime": "2018-02-19",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-3rd-party-api/images/react-3rd-party-api-ui-sample.gif",
        "alt": "Consuming Third Party APIs secured with Azure Active Directory within SharePoint Framework"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "PaoloPia",
        "company": "PiaSys.com",
        "pictureUrl": "https://github.com/PaoloPia.png",
        "name": "Paolo Pialorsi",
        "twitter": "PaoloPia"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-aad-implicitflow",
    "source": "pnp",
    "title": "Azure Active Directory implicit flow authentication sample web parts",
    "shortDescription": "Sample SharePoint Framework web parts built using React illustrating different scenarios using implicit OAuth flow with Azure Active Directory.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-aad-implicitflow",
    "longDescription": [
      "Sample SharePoint Framework web parts built using React illustrating different scenarios using implicit OAuth flow with Azure Active Directory."
    ],
    "creationDateTime": "2017-03-17",
    "updateDateTime": "2017-03-17",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-aad-implicitflow/assets/upcoming-meetings-preview.png",
        "alt": "Azure Active Directory implicit flow authentication samples"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-aad-webapi",
    "source": "pnp",
    "title": "Call custom Web API secured with AAD from SharePoint Framework client-side web part",
    "shortDescription": "Sample SharePoint Framework client-side web part illustrating communication with a custom Web API secured with Azure Active Directory.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-aad-webapi",
    "longDescription": [
      "Sample SharePoint Framework client-side web part illustrating communication with a custom Web API secured with Azure Active Directory."
    ],
    "creationDateTime": "2016-10-10",
    "updateDateTime": "2016-10-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "drop4"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-aad-webapi/assets/preview.png",
        "alt": "Call custom Web API secured with AAD from SharePoint Framework client-side web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-accordion",
    "source": "pnp",
    "title": "Accordion Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-accordion",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-06-22",
    "updateDateTime": "2021-09-30",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      },
      {
        "key": "PNPCONTROLS",
        "value": "WebPartTitle"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-accordion/assets/AccordionPreview.png",
        "alt": "Accordion Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "gautamdsheth",
        "company": "Valo Intranet",
        "pictureUrl": "https://github.com/gautamdsheth.png",
        "name": "Gautam Sheth",
        "twitter": "gautamdsheth"
      },
      {
        "gitHubAccount": "AbhishekGarg",
        "company": "Atos",
        "pictureUrl": "https://avatars.githubusercontent.com/u/5449154?s=400&v=4",
        "name": "Abhishek Garg",
        "twitter": "abhig89"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-accordion-dynamic-section",
    "source": "pnp",
    "title": "Dynamic Accordion - FAQ Builder web part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-accordion-dynamic-section",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2021-01-05",
    "updateDateTime": "2021-08-08",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      },
      {
        "key": "PNPCONTROLS",
        "value": "WebPartTitle, Placeholder"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-accordion-dynamic-section/assets/react-accordion-section.gif",
        "alt": "Dynamic Accordion - FAQ Builder web part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-accordion-dynamic-section/assets/AccordionSettings1.png?raw=true",
        "alt": "Dynamic Accordion - FAQ Builder web part"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-accordion-dynamic-section/assets/AccordionSettings2.png?raw=true",
        "alt": "Dynamic Accordion - FAQ Builder web part"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-accordion-dynamic-section/assets/FAQsList.png?raw=true",
        "alt": "Dynamic Accordion - FAQ Builder web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "jerryyasir",
        "company": "DXC Technology",
        "pictureUrl": "https://github.com/jerryyasir.png",
        "name": "Jerry Yasir",
        "twitter": "jerryyasir"
      },
      {
        "gitHubAccount": "jack-vinitsky",
        "company": "",
        "pictureUrl": "https://github.com/jack-vinitsky.png",
        "name": "Jack Vinitsky"
      },
      {
        "gitHubAccount": "Ravikadri",
        "company": "Netwoven",
        "pictureUrl": "https://github.com/Ravikadri.png",
        "name": "Ravi Chandra"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-accordion-section",
    "source": "pnp",
    "title": "Accordion Section FAQ Builder Web Part",
    "shortDescription": "Adds a collapsible accordion section to an Office 365 SharePoint page or Teams Tab. Ideal for creating FAQs.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-accordion-section",
    "longDescription": [
      "Adds a collapsible accordion section to an Office 365 SharePoint page or Teams Tab. Ideal for creating FAQs."
    ],
    "creationDateTime": "2020-09-02",
    "updateDateTime": "2020-09-02",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      },
      {
        "key": "PNPCONTROLS",
        "value": "Placeholder, WebPartTitle"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-accordion-section/assets/react-accordion-section.gif",
        "alt": "Accordion Section FAQ Builder"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-accordion-section/assets/AccordionSettings.png?raw=true",
        "alt": "Accordion Section FAQ Builder"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-accordion-section/assets/ListForAccordion.png?raw=true",
        "alt": "Accordion Section FAQ Builder"
      },
      {
        "type": "video",
        "order": 103,
        "url": "https://www.youtube.com/embed/-oKhmh-g3z8",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ejbenke",
        "company": "",
        "pictureUrl": "https://github.com/ejbenke.png",
        "name": "Erik Benke",
        "twitter": "erikjbenke"
      },
      {
        "gitHubAccount": "mikezimm",
        "company": "",
        "pictureUrl": "https://github.com/mikezimm.png",
        "name": "Mike Zimmerman"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-accordion-with-richtext",
    "source": "pnp",
    "title": "Tab Accordion Web Part",
    "shortDescription": "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",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-accordion-with-richtext",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-accordion-with-richtext",
    "longDescription": [
      "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"
    ],
    "creationDateTime": "2022-03-30",
    "updateDateTime": "2023-01-03",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.13.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-accordion-with-richtext/assets/TabAccordionWebpart.PNG",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "arunkumarperumal",
        "pictureUrl": "https://github.com/arunkumarperumal.png",
        "name": "Arun Kumar Perumal"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-adaptive-card-host-control",
    "source": "pnp",
    "title": "Adaptive Card Host control web part",
    "shortDescription": "This web part provides an example of how to use the AdaptiveCardHost component present in the PnP React Controls library.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-adaptive-card-host-control",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-adaptive-card-host-control",
    "longDescription": [
      "This web part provides an example of how to use the AdaptiveCardHost component present in the PnP React Controls library."
    ],
    "creationDateTime": "2022-03-09",
    "updateDateTime": "2022-03-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.14"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-adaptive-card-host-control/assets/AdaptiveCardHost.gif",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-adaptive-card-host-control/assets/AdaptiveCardHostTeams.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "fabiofranzini",
        "pictureUrl": "https://github.com/fabiofranzini.png",
        "name": "Fabio Franzini"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-adaptive-cards-image-gallery",
    "source": "pnp",
    "title": "Image Gallery Web Part Built with Adaptive Cards",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-adaptive-cards-image-gallery",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-06-15",
    "updateDateTime": "2020-06-15",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      },
      {
        "key": "PNPCONTROLS",
        "value": "Placeholder"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-adaptive-cards-image-gallery/assets/sharepoint-run.gif",
        "alt": "Image Gallery Web Part Built with Adaptive Cards"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-adaptive-cards-image-gallery/assets/list-sample-data.png?raw=true",
        "alt": "Image Gallery Web Part Built with Adaptive Cards"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-adaptive-cards-image-gallery/assets/list-schema.png?raw=true",
        "alt": "Image Gallery Web Part Built with Adaptive Cards"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-adaptive-cards-image-gallery/assets/webpart-preview.png?raw=true",
        "alt": "Image Gallery Web Part Built with Adaptive Cards"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "nanddeepn",
        "company": "",
        "pictureUrl": "https://github.com/nanddeepn.png",
        "name": "Nanddeep Nachan",
        "twitter": "NanddeepNachan"
      },
      {
        "gitHubAccount": "ravi16a87",
        "company": "Cognizant",
        "pictureUrl": "https://github.com/ravi16a87.png",
        "name": "Ravi Kulkarni"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-adaptivecards",
    "source": "pnp",
    "title": "Adaptive Cards Host Web Part",
    "shortDescription": "This sample creates an Adaptive Cards Host web part that you can use to display Adaptive Cards in your SharePoint applications.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-adaptivecards",
    "longDescription": [
      "This sample creates an Adaptive Cards Host web part that you can use to display Adaptive Cards in your SharePoint applications."
    ],
    "creationDateTime": "2021-02-23",
    "updateDateTime": "2021-08-02",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      },
      {
        "key": "PNPCONTROLS",
        "value": "PropertyFieldListPicker, PropertyFieldViewPicker, ropertyFieldCodeEditorLanguages, PropertyPaneWebPartInformation, Placeholder"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-adaptivecards/assets/AdaptiveCardsHostAllSamples.gif",
        "alt": "Adaptive Cards Host"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-adaptivecards/assets/AdaptiveCardHostRendering.gif?raw=true",
        "alt": "Adaptive Cards Host"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-adaptivecards/assets/AdaptiveCardsHost.gif?raw=true",
        "alt": "Adaptive Cards Host"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-adaptivecards/assets/BackgroundColors.gif?raw=true",
        "alt": "Adaptive Cards Host"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-adaptivecards/assets/DataContext.png?raw=true",
        "alt": "Adaptive Cards Host"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-adaptivecards/assets/DependentControls.gif?raw=true",
        "alt": "Adaptive Cards Host"
      },
      {
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-adaptivecards/assets/DevTools.png?raw=true",
        "alt": "Adaptive Cards Host"
      },
      {
        "type": "image",
        "order": 107,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-adaptivecards/assets/EnableTemplating.gif?raw=true",
        "alt": "Adaptive Cards Host"
      },
      {
        "type": "image",
        "order": 108,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-adaptivecards/assets/ErrorHandling.png?raw=true",
        "alt": "Adaptive Cards Host"
      },
      {
        "type": "image",
        "order": 109,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-adaptivecards/assets/SampleDataEditor.png?raw=true",
        "alt": "Adaptive Cards Host"
      },
      {
        "type": "image",
        "order": 110,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-adaptivecards/assets/SelectLibrary.gif?raw=true",
        "alt": "Adaptive Cards Host"
      },
      {
        "type": "image",
        "order": 111,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-adaptivecards/assets/SharePointHost.gif?raw=true",
        "alt": "Adaptive Cards Host"
      },
      {
        "type": "image",
        "order": 112,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-adaptivecards/assets/Templating.gif?raw=true",
        "alt": "Adaptive Cards Host"
      },
      {
        "type": "image",
        "order": 113,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-adaptivecards/assets/TemplatingDetection.png?raw=true",
        "alt": "Adaptive Cards Host"
      },
      {
        "type": "image",
        "order": 114,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-adaptivecards/assets/TemplatingSamples.gif?raw=true",
        "alt": "Adaptive Cards Host"
      },
      {
        "type": "image",
        "order": 115,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-adaptivecards/assets/UIFabric.png?raw=true",
        "alt": "Adaptive Cards Host"
      },
      {
        "type": "image",
        "order": 116,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-adaptivecards/assets/YouNeedData.png?raw=true",
        "alt": "Adaptive Cards Host"
      },
      {
        "type": "video",
        "order": 117,
        "url": "https://www.youtube.com/embed/gWrvC-0HF4A",
        "alt": "Demo of the web part in action"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "hugoabernier",
        "company": "Tahoe Ninjas",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier",
        "twitter": "bernierh"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-adaptivecards-hooks",
    "source": "pnp",
    "title": "Adaptive Cards Viewer Web Parts using Hooks",
    "shortDescription": "A version of react-adaptivecards using React Hooks.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-adaptivecards-hooks",
    "longDescription": [
      "A version of react-adaptivecards using React Hooks."
    ],
    "creationDateTime": "2020-08-25",
    "updateDateTime": "2020-08-25",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "PNPCONTROLS",
        "value": "PropertyPaneWebPartInformation, PropertyFieldListPicker, PropertyFieldViewPicker, PropertyFieldCodeEditorLanguages"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-adaptivecards-hooks/assets/preview.png",
        "alt": "Adaptive Cards Viewer using Hooks"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "pschaeflein",
        "company": "AddIn365",
        "pictureUrl": "https://github.com/pschaeflein.png",
        "name": "Paul Schaeflein"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-add-formcustomizer-to-list",
    "source": "pnp",
    "title": "Add Form Customizer to List Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-add-formcustomizer-to-list",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-add-formcustomizer-to-list",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2022-09-05",
    "updateDateTime": "2022-09-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-add-formcustomizer-to-list/assets/webpartinaction-form.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "siddharth-vaghasia",
        "pictureUrl": "https://github.com/siddharth-vaghasia.png",
        "name": "Siddharth Vaghasia"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-add-js-css-ref",
    "source": "pnp",
    "title": "Add JS and CSS reference on Modern Pages Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-add-js-css-ref",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-06-11",
    "updateDateTime": "2022-10-24",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      },
      {
        "key": "PNPCONTROLS",
        "value": "ListView"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-add-js-css-ref/assets/webpartinaction.gif",
        "alt": "Add JS and CSS reference on Modern Pages"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "siddharth-vaghasia",
        "company": "",
        "pictureUrl": "https://github.com/siddharth-vaghasia.png",
        "name": "Siddharth Vaghasia"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-admin-sc-catalog-pnpjs",
    "source": "pnp",
    "title": "Site Collection App Catalogs Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-admin-sc-catalog-pnpjs",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-11-07",
    "updateDateTime": "2019-11-07",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      },
      {
        "key": "PNPCONTROLS",
        "value": "ListView, WebPartTitle"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "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",
        "alt": "Site Collection App Catalogs"
      },
      {
        "type": "video",
        "order": 101,
        "url": "https://www.youtube.com/embed/rNypp40HpdI",
        "alt": "Demo of the web part in action"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "fredupstair",
        "company": "Avanade Italy",
        "pictureUrl": "https://github.com/fredupstair.png",
        "name": "Federico Porceddu"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-advanced-iframe",
    "source": "pnp",
    "title": "Advanced IFrame",
    "shortDescription": "This web part allows users to add a webpage in an IFrame to a modern SharePoint page.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-advanced-iframe",
    "longDescription": [
      "This web part demonstrates the following features: Adding a web part to  a 'Full-Width' section, resizing the web part to fit the given space of the page, fetching dynamic parameters like the current theme or querystring and passing them to the IFrame."
    ],
    "creationDateTime": "2023-08-27",
    "updateDateTime": "2023-08-27",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.13.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-advanced-iframe/assets/advancediframewebpart.gif",
        "alt": "Advanced IFrame Web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "365knoten",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/365knoten.png",
        "name": "Sven Sieverding",
        "twitter": "365knoten"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-advanced-page-properties",
    "source": "pnp",
    "title": "Advanced Page Properties Web Part",
    "shortDescription": "Replicates the functionality of Page Properties with improvements",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-advanced-page-properties",
    "longDescription": [
      "Attempts to replicate the functionality of Page Properties with the following improvements:",
      "- Support for theme variants",
      "- Updated to standard capsule look for list options",
      "- Support for image fields",
      "- Support for hyperlink fields",
      "- Support for currency",
      "- Improved support for dates",
      "- Support for Multiline text fields"
    ],
    "creationDateTime": "2021-03-30",
    "updateDateTime": "2023-03-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-advanced-page-properties/assets/diff-screencap.png",
        "alt": "Web part in action"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-advanced-page-properties/assets/props.gif",
        "alt": "Web part in action"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-advanced-page-properties/assets/add-to-page.png",
        "alt": "Adding to a page"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ValerasNarbutas",
        "company": "Macaw",
        "pictureUrl": "https://avatars.githubusercontent.com/u/16476453?v=4",
        "name": "Valeras Narbutas",
        "twitter": "ValerasNarbutas"
      },
      {
        "gitHubAccount": "mhomol",
        "company": "ThreeWill",
        "pictureUrl": "https://github.com/mhomol.png",
        "name": "Mike Homol",
        "twitter": "homol"
      },
      {
        "gitHubAccount": "Abderahman88",
        "company": "",
        "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4",
        "name": "Abderahman Moujahid"
      },
      {
        "gitHubAccount": "NishkalankBezawada",
        "company": "Tietoevry, Sweden",
        "pictureUrl": "https://avatars.githubusercontent.com/u/47456098?v=4",
        "name": "Nishkalank Bezawada"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-advent-calendar",
    "source": "pnp",
    "title": "Advent Calendar Web Part",
    "shortDescription": "This project shows how to create an Advent Calendar using SPFx and React.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-advent-calendar",
    "longDescription": [
      "This project shows how to create an Advent Calendar using SPFx and React."
    ],
    "creationDateTime": "2023-12-01",
    "updateDateTime": "2023-12-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "SPFX-VERSION",
        "value": "1.17.3"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-advent-calendar/assets/adventCalendar.gif",
        "alt": "Tailwind CSS"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ValerasNarbutas",
        "pictureUrl": "https://github.com/valerasnarbutas.png",
        "name": "Valeras Narbutas",
        "twitter": "ValerasNarbutas"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-aggregated-calendar",
    "source": "pnp",
    "title": "Aggregated Calendar Web part",
    "shortDescription": "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",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-aggregated-calendar",
    "longDescription": [
      "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"
    ],
    "creationDateTime": "2018-07-16",
    "updateDateTime": "2018-07-16",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-aggregated-calendar/assets/react-aggregated-calendar.gif",
        "alt": "Aggregated Calendar Web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "dhavalshah01",
        "company": "",
        "pictureUrl": "https://avatars.githubusercontent.com/u/13947393?s=460&u=38d18e840d22f5567d508027515c728025bae8cb&v=4",
        "name": "Dhaval Shah"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-apim-tablestorage",
    "source": "pnp",
    "title": "Accessing Azure table storage data using Azure API Management Web Part",
    "shortDescription": "Allows you to access securely Azure storage table data using Azure API Management (APIM)",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-apim-tablestorage",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-apim-tablestorage",
    "longDescription": [
      "This SharePoint Framework (SPFx) web part allows you to access securely Azure storage table data directly from a SharePoint Framework (SPFx) web part using Azure API Management (APIM). This scenario is useful when you want to provide a seamless user experience for your application without exposing your backend services or credentials. This is a great way to simplify and secure your web app’s communication with the cloud."
    ],
    "creationDateTime": "2023-09-11",
    "updateDateTime": "2023-09-11",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.4"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-apim-tablestorage/assets/demo.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ejazhussain",
        "pictureUrl": "https://github.com/ejazhussain.png",
        "name": "Ejaz Hussain"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-app-settings",
    "source": "pnp",
    "title": "App settings web part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-app-settings",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-03-03",
    "updateDateTime": "2019-03-03",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.7.1"
      },
      {
        "key": "SPFX-FULLPAGEAPP",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-app-settings/assets/app-settings-class.PNG",
        "alt": "App settings web part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-app-settings/assets/spfx-appSettings-json.PNG?raw=true",
        "alt": "App settings web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "VelinGeorgiev",
        "company": "",
        "pictureUrl": "https://github.com/VelinGeorgiev.png",
        "name": "Velin Georgiev"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Using single part app pages in SharePoint Online",
        "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-appinsights-dashboard",
    "source": "pnp",
    "title": "React AppInsights Dashboard Web Part",
    "shortDescription": "This web part displays different statistics data captured in the Azure Application Insights in a graphical representation.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-appinsights-dashboard",
    "longDescription": [
      "This web part displays different statistics data captured in the Azure Application Insights in a graphical representation."
    ],
    "creationDateTime": "2020-06-17",
    "updateDateTime": "2023-02-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      },
      {
        "key": "SPFX-FULLPAGEAPP",
        "value": "true"
      },
      {
        "key": "PNPCONTROLS",
        "value": "Placeholder, ChartControl"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-appinsights-dashboard/assets/AppInsights_Dashboard.gif",
        "alt": "React AppInsights Dashboard"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-appinsights-dashboard/assets/AppInsights_APIAccess.png?raw=true",
        "alt": "React AppInsights Dashboard"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-appinsights-dashboard/assets/AppInsights_APIKey.png?raw=true",
        "alt": "React AppInsights Dashboard"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-appinsights-dashboard/assets/PageStatistics.png?raw=true",
        "alt": "React AppInsights Dashboard"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-appinsights-dashboard/assets/PerformanceStatistics.png?raw=true",
        "alt": "React AppInsights Dashboard"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-appinsights-dashboard/assets/UserStatistics.png?raw=true",
        "alt": "React AppInsights Dashboard"
      },
      {
        "type": "video",
        "order": 106,
        "url": "https://www.youtube.com/embed/ynwGKrvIimo",
        "alt": "Demo of the web part in action"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "sudharsank",
        "company": "NTT Digital Business Solutions",
        "pictureUrl": "https://github.com/sudharsank.png",
        "name": "Sudharsan Kesavanarayanan",
        "twitter": "sudharsank"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Using single part app pages in SharePoint Online",
        "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-appinsights-usage",
    "source": "pnp",
    "title": "React AppInsights Usage WebParts",
    "shortDescription": "This web parts shows different use cases for capturing data in your application and store it into the Azure Application Insights service.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-appinsights-usage",
    "longDescription": [
      "This web parts shows different use cases for capturing data in your application. Azure Application Insights is more than only Logging and Tracing. It can be used to analyse data and display them in a graphical representation."
    ],
    "creationDateTime": "2024-05-26",
    "updateDateTime": "2024-05-26",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.2"
      },
      {
        "key": "SPFX-FULLPAGEAPP",
        "value": "true"
      },
      {
        "key": "PNPCONTROLS",
        "value": ""
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-appinsights-dashboard/assets/AppInsights_Dashboard.gif",
        "alt": "React AppInsights Dashboard"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-appinsights-usage/assets/ABEvaluation.png?raw=true",
        "alt": "AppInsights AB Test Chart"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-appinsights-usage/assets/ABTextUI.png?raw=true",
        "alt": "AppInsights AB Test UI"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-appinsights-usage/assets/PNPJSLogger.png?raw=true",
        "alt": "Logger in Terminal"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-appinsights-usage/assets/SampleRouterDurationEvaluation.png?raw=true",
        "alt": "AppInsights Page visit average duration Chart"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-appinsights-usage/assets/SampleRouterEvaluation.png?raw=true",
        "alt": "AppInsights Page visit count Chart"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-appinsights-usage/assets/SampleRouterUserFlow.png?raw=true",
        "alt": "AppInsights User Flow"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "petkir",
        "company": "ACP CUBIDO Digital Solutions GmbH",
        "pictureUrl": "https://github.com/petkir.png",
        "name": "Peter Paul Kirschner",
        "twitter": "petkir_at"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Using single part app pages in SharePoint Online",
        "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh"
      },
      {
        "name": "PNPJS Understanding the Logging Framework",
        "description": "The logging framework is centered on the Logger class to which any number of listeners can be subscribed. Each of these listeners will receive each of the messages logged. Each listener must implement the ILogListener interface",
        "url": "https://pnp.github.io/pnpjs/logging/"
      },
      {
        "name": "Application Insights",
        "description": "Application Insights provides many experiences to enhance the performance, reliability, and quality of your applications.",
        "url": "https://learn.microsoft.com/en-us/azure/azure-monitor/app/app-insights-overview"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-associated-sites-links",
    "source": "pnp",
    "title": "Associated Sites Links Web Part",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-associated-sites-links",
    "shortDescription": "Web part that will display links to all associated sites that registered to the current site. Current site should be a hub site.",
    "longDescription": [
      "Web part that will display links to all associated sites that registered to the current site.",
      "Current site should be a hub site."
    ],
    "creationDateTime": "2021-04-19",
    "updateDateTime": "2022-11-11",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Javascript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-associated-sites-links/assets/result.png",
        "alt": "Extension in action"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AriGunawan",
        "pictureUrl": "https://github.com/AriGunawan.png",
        "name": "Ari Gunawan"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-async-await-sp-pnp-js",
    "source": "pnp",
    "title": "Using @pnp/js with Async / Await",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-async-await-sp-pnp-js",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-07-20",
    "updateDateTime": "2018-07-20",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-async-await-sp-pnp-js/assets/async-await-sp-pnp-js.png",
        "alt": "Using @pnp/js with Async / Await"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-async-await-sp-pnp-js/assets/async-await-sp-pnp-js-2.png?raw=true",
        "alt": "Using @pnp/js with Async / Await"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-async-await-sp-pnp-js/assets/pnp-js-logging-spfx.png?raw=true",
        "alt": "Using @pnp/js with Async / Await"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "jquintozamora",
        "company": "",
        "pictureUrl": "https://github.com/jquintozamora.png",
        "name": "Jose Quinto"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-at-a-glance",
    "source": "pnp",
    "title": "At a Glance Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-at-a-glance",
    "longDescription": [
      "This sample shows a web part to show the first few sentences of an article in a SharePoint site, so that the article can be looked at a glance.",
      "The idea is based of the At a glance section of a news in the BBC news app."
    ],
    "creationDateTime": "2021-09-07",
    "updateDateTime": "2021-10-20",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-at-a-glance/assets/demo.gif",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-at-a-glance/assets/article-content-desktop.png",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-at-a-glance/assets/article-content-mobile.png",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-at-a-glance/assets/article-content.png",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-at-a-glance/assets/at_a_glance_large.png",
        "alt": "Preview"
      },
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-at-a-glance/assets/custom_props.png",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "anoopt",
        "pictureUrl": "https://github.com/anoopt.png",
        "name": "Anoop Tatti"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-avatar",
    "source": "pnp",
    "title": "SPFx Avatar Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-avatar",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-08-01",
    "updateDateTime": "2022-11-18",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-avatar/assets/reactAvatarOutcome.gif",
        "alt": "SPFx Avatar"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "kunj-sangani",
        "company": "",
        "pictureUrl": "https://github.com/kunj-sangani.png",
        "name": "Kunj Sangani"
      },
      {
        "gitHubAccount": "joelfmrodrigues",
        "company": "Storm Technology",
        "pictureUrl": "https://github.com/joelfmrodrigues.png",
        "name": "Joel Rodrigues",
        "twitter": "joelfmrodrigues"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-azfunc-vimeo",
    "source": "pnp",
    "title": "Local Azure Function and SPFx Web Part Development to consume third party APIs",
    "shortDescription": "This sample shows how to consume third-party APIs through an Azure Functions by a Web Part.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-azfunc-vimeo",
    "longDescription": [
      "This sample shows how to consume third-party APIs through an Azure Functions by a Web Part."
    ],
    "creationDateTime": "2018-07-24",
    "updateDateTime": "2018-07-24",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/gh-pages/img/_nopreview.png",
        "alt": "No preview available"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "StfBauer",
        "company": "N8D",
        "pictureUrl": "https://github.com/StfBauer.png",
        "name": "Stefan Bauer",
        "twitter": "stfbauer"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-azure-devops-tasks",
    "source": "pnp",
    "title": "Azure DevOps Tasks Adaptive Card Extension",
    "shortDescription": "This Adaptive Card Extension demonstrates displaying the number of assigned tasks of Azure DevOps.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-azure-devops-tasks",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-azure-devops-tasks",
    "longDescription": [
      "This Adaptive Card Extension demonstrates displaying the number of assigned tasks of Azure DevOps."
    ],
    "creationDateTime": "2023-03-19",
    "updateDateTime": "2023-03-19",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-azure-devops-tasks/assets/react-azure-devops-tasks.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "karamem0",
        "pictureUrl": "https://github.com/karamem0.png",
        "name": "Takashi Shinohara"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-azure-openai-api-stream",
    "source": "pnp",
    "title": "Calling Azure OpenAI API in streaming mode web part",
    "shortDescription": "This web part shows how you can call Azure OpenAI API in Streaming mode",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-azure-openai-api-stream",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-azure-openai-api-stream",
    "longDescription": [
      "This web part shows how you can call Azure OpenAI API in Streaming mode. The web part will show the data coming from the API in chunks, giving a much better user experience, so you are not waiting for the entire response. It also shows how you can cancel the streaming response at any point, which is useful to save some tokens (hence money), if the generating response does not look good to you (like when getting AI hallucinations). AI responses render Markdown but there is a toggle to disable so you can compare Markdown rendering of responses with Streaming and without."
    ],
    "creationDateTime": "2024-01-02",
    "updateDateTime": "2024-02-08",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-azure-openai-api-stream/assets/screenshot.gif",
        "alt": "Sample in action"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-azure-openai-api-stream/assets/screenshot.png",
        "alt": "Screenshot"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "luismanez",
        "pictureUrl": "https://github.com/luismanez.png",
        "name": "Luis Mañez"
      },
      {
        "gitHubAccount": "thechriskent",
        "pictureUrl": "https://github.com/thechriskent.png",
        "name": "Chris Kent"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-azure-openai-connector",
    "source": "pnp",
    "title": "Using Azure OpenAI Connectors API web part",
    "shortDescription": "Shows how to use the new feature of Azure OpenAI Connectors API in a SharePoint Framework web part.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-azure-openai-connector",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-azure-openai-connector",
    "longDescription": [
      "Shows how to use the new feature of Azure OpenAI Connectors API in a SharePoint Framework web part."
    ],
    "creationDateTime": "2023-07-26",
    "updateDateTime": "2023-10-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.4"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-azure-openai-connector/assets/react-azure-openai-connector.gif",
        "alt": "Web Part Preview"
      },
      {
        "type": "video",
        "order": 101,
        "url": "https://youtu.be/VVjNkwh2W3U?si=tYSpsBdcn5abiC-m&t=1750",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "luismanez",
        "pictureUrl": "https://github.com/luismanez.png",
        "name": "Luis Mañez"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-azurefunction-northwind2",
    "source": "pnp",
    "title": "Consume Northwind Microsoft database from Azure using a Function App ",
    "shortDescription": "This web part consume an anonymous Function App from an HTTP Trigger using the templates from the Northwind Microsoft DBs",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-azurefunction-northwind2",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-azurefunction-northwind2",
    "longDescription": [
      "This web part consume an anonymous Function App from an HTTP Trigger using the templates from the Northwind Microsoft DBs"
    ],
    "creationDateTime": "2022-08-15",
    "updateDateTime": "2022-08-15",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-azurefunction-northwind2/assets/FAPP.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "jtlivio",
        "pictureUrl": "https://github.com/jtlivio.png",
        "name": "Joao Livio"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-banner",
    "source": "pnp",
    "title": "Banner Web Part",
    "shortDescription": "This web part provides you the ability to add a variable height image banner with a linkable title.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-banner",
    "longDescription": [
      "This web part provides you the ability to add a variable height image banner with a linkable title."
    ],
    "creationDateTime": "2018-05-01",
    "updateDateTime": "2018-05-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-banner.gif",
        "alt": "Banner Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "eoverfield",
        "company": "PixelMill",
        "pictureUrl": "https://github.com/eoverfield.png",
        "name": "Eric Overfield",
        "twitter": "EricOverfield"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-birthdays",
    "source": "pnp",
    "title": "Birthdays Web Part",
    "shortDescription": "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.\"",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-birthdays",
    "longDescription": [
      "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.\""
    ],
    "creationDateTime": "2019-07-23",
    "updateDateTime": "2023-03-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      },
      {
        "key": "PNPCONTROLS",
        "value": "PropertyFieldNumber, WebPartTitle"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-birthdays/assets/birthdays.gif",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/ballonsBackgroud.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/baloons.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/birthdays.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/birthdays2.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof1.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 107,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof10.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 108,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof11.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 109,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof12.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 110,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof14.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 111,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof14_1.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 112,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof17.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 113,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof18.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 114,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof181.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 115,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof19.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 116,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof2.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 117,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof20.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 118,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof21.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 119,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof22.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 120,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof24.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 121,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof28.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 122,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof29.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 123,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof3.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 124,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof30.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 125,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof4.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 126,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof5.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 127,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof6.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 128,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof7.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 129,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof8.png?raw=true",
        "alt": "Birthdays Web Part"
      },
      {
        "type": "image",
        "order": 130,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-birthdays/assets/cof9.png?raw=true",
        "alt": "Birthdays Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ValerasNarbutas",
        "company": "Macaw",
        "pictureUrl": "https://github.com/ValerasNarbutas.png",
        "name": "Valeras Narbutas",
        "twitter": "ValerasNarbutas"
      },
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      },
      {
        "gitHubAccount": "smaity",
        "company": "JP Morgan Chase",
        "pictureUrl": "https://github.com/smaity.png",
        "name": "Sajal Maity"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-birthdays-per-month",
    "source": "pnp",
    "title": "Birthdays Per Month",
    "shortDescription": "Display employees birthday per month in an accordion.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-birthdays-per-month",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-birthdays-per-month",
    "longDescription": [
      "Display employees birthday per month in an accordion."
    ],
    "creationDateTime": "2022-12-03",
    "updateDateTime": "2022-12-03",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-birthdays-per-month/assets/app.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AriGunawan",
        "pictureUrl": "https://github.com/AriGunawan.png",
        "name": "Ari Gunawan"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-bot-framework",
    "source": "pnp",
    "title": "Microsoft Bot Framework Web Chat Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-bot-framework",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-04-15",
    "updateDateTime": "2020-04-15",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-bot-framework/assets/bot-frameworkv4-webpart-preview.png",
        "alt": "Microsoft Bot Framework Web Chat"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-bot-framework/assets/add-another-channel.png?raw=true",
        "alt": "Microsoft Bot Framework Web Chat"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-bot-framework/assets/bf-add-directline-channel.png?raw=true",
        "alt": "Microsoft Bot Framework Web Chat"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-bot-framework/assets/bf-configure-directline-secret.png?raw=true",
        "alt": "Microsoft Bot Framework Web Chat"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-bot-framework/assets/bot-framework-configure-direct-line-secret.png?raw=true",
        "alt": "Microsoft Bot Framework Web Chat"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-bot-framework/assets/bot-framework-webpart-preview.png?raw=true",
        "alt": "Microsoft Bot Framework Web Chat"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "garypretty",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/garypretty.png",
        "name": "Gary Pretty"
      },
      {
        "gitHubAccount": "stephanbisser",
        "company": "",
        "pictureUrl": "https://github.com/stephanbisser.png",
        "name": "Stephan Bisser"
      },
      {
        "gitHubAccount": "Harshagracy",
        "company": "",
        "pictureUrl": "https://github.com/Harshagracy.png",
        "name": "Harsha Vardhini",
        "twitter": "harshagracy"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-bot-framework-secure",
    "source": "pnp",
    "title": "Secure Bot Framework Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-bot-framework-secure",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-11-06",
    "updateDateTime": "2020-11-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-bot-framework-secure/assets/sp-wp-secure.gif",
        "alt": "Secure Bot Framework"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-bot-framework-secure/assets/EnhancedAuth.png?raw=true",
        "alt": "Secure Bot Framework"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "DingmaomaoBJTU",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/DingmaomaoBJTU.png",
        "name": "Qiong Wu"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-bot-framework-sso",
    "source": "pnp",
    "title": "Single-Sign On Bot Framework Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-bot-framework-sso",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-11-06",
    "updateDateTime": "2020-11-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-bot-framework-secure/assets/sp-wp-secure.gif",
        "alt": "Single-Sign On Bot Framework"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-bot-framework-sso/assets/EnhancedAuth.png?raw=true",
        "alt": "Single-Sign On Bot Framework"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-bot-framework-sso/assets/sp-wp-sso.gif?raw=true",
        "alt": "Single-Sign On Bot Framework"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "DingmaomaoBJTU",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/DingmaomaoBJTU.png",
        "name": "Qiong Wu"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-calendar",
    "source": "pnp",
    "title": "Calendar Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-calendar",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-12-04",
    "updateDateTime": "2024-06-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      },
      {
        "key": "PNPCONTROLS",
        "value": "PropertyFieldDateTimePicker, PeoplePicker, Map"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-calendar/assets/animatevideo.gif",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/calendar_teams.jpg?raw=true",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/calendar_teams2.jpg?raw=true",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/modercalendar_monthly.gif?raw=true",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/moderncalendar_yearly.gif?raw=true",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/screen1.0.jpg?raw=true",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/screen1.0.png?raw=true",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 107,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/screen1.1.png?raw=true",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 108,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/screen1.2.png?raw=true",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 109,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/screen1.3.png?raw=true",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 110,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/screen1.4.png?raw=true",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 111,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/screen1.png?raw=true",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 112,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/screen2.png?raw=true",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 113,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/screen3.png?raw=true",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 114,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/screen4.png?raw=true",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 115,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/screen5.png?raw=true",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 116,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/screen6.png?raw=true",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 117,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/screen7.png?raw=true",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 118,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/screen8.png?raw=true",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 119,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/screen9.png?raw=true",
        "alt": "Calendar"
      },
      {
        "type": "image",
        "order": 120,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-calendar/assets/weekly_moderncalendar.gif?raw=true",
        "alt": "Calendar"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      },
      {
        "gitHubAccount": "derhallim",
        "company": "",
        "pictureUrl": "https://github.com/derhallim.png",
        "name": "Mohamed Derhalli"
      },
      {
        "gitHubAccount": "hugoabernier",
        "company": "Tahoe Ninjas",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier",
        "twitter": "bernierh"
      },
      {
        "gitHubAccount": "nanddeepn",
        "company": "",
        "pictureUrl": "https://github.com/nanddeepn.png",
        "name": "Nanddeep Nachan",
        "twitter": "NanddeepNachan"
      },
      {
        "gitHubAccount": "Abderahman88",
        "company": "",
        "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4",
        "name": "Abderahman Moujahid"
      },
      {
        "gitHubAccount": "mohammadamer",
        "company": "Atea Global Services",
        "pictureUrl": "https://avatars.githubusercontent.com/u/19314043?s=460&u=79acb7fd0ad466e1040ddd8a739fa93385018b81&v=4",
        "name": "Mohammed Amer",
        "twitter": "Mohammad3mer"
      },
      {
        "gitHubAccount": "Eli-Schei",
        "name": "Eli H. Schei",
        "pictureUrl": "https://github.com/Eli-Schei"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-calendar-feed",
    "source": "pnp",
    "title": "Calendar Feed Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-calendar-feed",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-07-16",
    "updateDateTime": "2022-10-22",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      },
      {
        "key": "PNPCONTROLS",
        "value": "PropertyFieldNumber, PropertyFieldSliderWithCallout, PropertyFieldTextWithCallout, PropertyFieldToggleWithCallout, Placeholder, WebPartTitle"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-calendar-feed/assets/react-calendar-feed-demo.gif",
        "alt": "Calendar Feed Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "hugoabernier",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier",
        "twitter": "bernierh"
      },
      {
        "gitHubAccount": "petkir",
        "company": "Cubido Business Solutions GmbH",
        "pictureUrl": "https://github.com/petkir.png",
        "name": "Peter Paul Kirschner",
        "twitter": "petkir_at"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-caml2table",
    "source": "pnp",
    "title": "CAML to Table Web Part",
    "shortDescription": "Let's the user test CAML queries at ease.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-caml2table",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-caml2table",
    "longDescription": [
      "Let's the user test CAML queries at ease."
    ],
    "creationDateTime": "2022-11-26",
    "updateDateTime": "2022-11-26",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-caml2table/assets/Demo.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Tanddant",
        "pictureUrl": "https://github.com/Tanddant.png",
        "name": "Dan Toft"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-carousel",
    "source": "pnp",
    "title": "Carousel Web Part",
    "shortDescription": "This web part show images and videos in carousel",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-carousel",
    "longDescription": [
      "This web part show images and videos in carousel"
    ],
    "creationDateTime": "2020-10-31",
    "updateDateTime": "2020-06-12",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-carousel/assets/carousel.gif",
        "alt": "Carousel Web Part"
      },
      {
        "type": "video",
        "order": 101,
        "url": "https://www.youtube.com/embed/VDkt9Ht0OwM",
        "alt": "Demo of the web part in action"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      },
      {
        "gitHubAccount": "rahulsuryawanshi",
        "company": "",
        "pictureUrl": "https://github.com/rahulsuryawanshi.png",
        "name": "Rahul Suryawanshi",
        "twitter": "rahulsuryawansh"
      },
      {
        "gitHubAccount": "Harshagracy",
        "company": "",
        "pictureUrl": "https://github.com/Harshagracy.png",
        "name": "Harsha Vardhini",
        "twitter": "harshagracy"
      },
      {
        "gitHubAccount": "DonKirkham",
        "company": "Probitas Data Solutions",
        "pictureUrl": "https://avatars.githubusercontent.com/u/8630351?s=460&u=669abb2aac55f383a318d3ca6b1cb13467cada59&v=4",
        "name": "Don Kirkham",
        "twitter": "DonKirkham"
      },
      {
        "gitHubAccount": "giuleon",
        "pictureUrl": "https://github.com/giuleon.png",
        "name": "Giuliano De Luca",
        "twitter": "delucagiulian"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-cascadingdropdowns",
    "source": "pnp",
    "title": "Cascading Dropdowns Web Part",
    "shortDescription": "Shows how to use Cascading Dropdowns in property panes.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-cascadingdropdowns",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-cascadingdropdowns",
    "longDescription": [
      "Shows how to use Cascading Dropdowns in property panes."
    ],
    "creationDateTime": "2023-09-12",
    "updateDateTime": "2023-09-12",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-cascadingdropdowns/assets/webpartpreview.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "hugoabernier",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier"
      }
    ],
    "references": [
      {
        "name": "Use cascading dropdowns in web part properties",
        "description": "When designing the property pane for your SharePoint client-side web parts, you may have one web part property that displays its options based on the value selected in another property.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/use-cascading-dropdowns-in-web-part-properties"
      },
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-chartcontrol",
    "source": "pnp",
    "title": "Chart Control Sample Web Parts",
    "shortDescription": "This sample contains several web parts that demonstrate how to use the ChartControl from @pnp/spfx-controls-react.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-chartcontrol",
    "longDescription": [
      "This sample contains several web parts that demonstrate how to use the ChartControl from @pnp/spfx-controls-react."
    ],
    "creationDateTime": "2020-12-13",
    "updateDateTime": "2020-12-13",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "PNPCONTROLS",
        "value": "ChartControl"
      },
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "PNPCONTROLS",
        "value": "WebPartTitle, Placeholder, ChartControl"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-chartcontrol/assets/WebPartList.png",
        "alt": "Chart Control Samples"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-chartcontrol/assets/AccessibleChart.png?raw=true",
        "alt": "Chart Control Samples"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-chartcontrol/assets/AreaChart.gif?raw=true",
        "alt": "Chart Control Samples"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-chartcontrol/assets/BarChart.png?raw=true",
        "alt": "Chart Control Samples"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-chartcontrol/assets/BarChartStatic.png?raw=true",
        "alt": "Chart Control Samples"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-chartcontrol/assets/BubbleChart.gif?raw=true",
        "alt": "Chart Control Samples"
      },
      {
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-chartcontrol/assets/Chartinator.gif?raw=true",
        "alt": "Chart Control Samples"
      },
      {
        "type": "image",
        "order": 107,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-chartcontrol/assets/ComboBar.png?raw=true",
        "alt": "Chart Control Samples"
      },
      {
        "type": "image",
        "order": 108,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-chartcontrol/assets/CustomPlugin.png?raw=true",
        "alt": "Chart Control Samples"
      },
      {
        "type": "image",
        "order": 109,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-chartcontrol/assets/DoughnutPatterns.gif?raw=true",
        "alt": "Chart Control Samples"
      },
      {
        "type": "image",
        "order": 110,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-chartcontrol/assets/DynamicDataCallable.gif?raw=true",
        "alt": "Chart Control Samples"
      },
      {
        "type": "image",
        "order": 111,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-chartcontrol/assets/DynamicDataConsumer.gif?raw=true",
        "alt": "Chart Control Samples"
      },
      {
        "type": "image",
        "order": 112,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-chartcontrol/assets/HorizontalBarChart.png?raw=true",
        "alt": "Chart Control Samples"
      },
      {
        "type": "image",
        "order": 113,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-chartcontrol/assets/LineChart.png?raw=true",
        "alt": "Chart Control Samples"
      },
      {
        "type": "image",
        "order": 114,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-chartcontrol/assets/PieChart.png?raw=true",
        "alt": "Chart Control Samples"
      },
      {
        "type": "image",
        "order": 115,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-chartcontrol/assets/PolarChart.png?raw=true",
        "alt": "Chart Control Samples"
      },
      {
        "type": "image",
        "order": 116,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-chartcontrol/assets/RadarChart.png?raw=true",
        "alt": "Chart Control Samples"
      },
      {
        "type": "image",
        "order": 117,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-chartcontrol/assets/RealTime.gif?raw=true",
        "alt": "Chart Control Samples"
      },
      {
        "type": "image",
        "order": 118,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-chartcontrol/assets/ScatterChart.png?raw=true",
        "alt": "Chart Control Samples"
      },
      {
        "type": "video",
        "order": 119,
        "url": "https://www.youtube.com/embed/U_rtVSyM6_I",
        "alt": "Demo of the web part in action"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "hugoabernier",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-chat-gpt",
    "source": "pnp",
    "title": "Chat GPT inside SPFx",
    "shortDescription": "This web part uses Chat GPT in an SPFx web part. You can ask questions from the web part and you will see the answers, most recent answers first.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-chat-gpt",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-chat-gpt",
    "longDescription": [
      "This web part uses Chat GPT in an SPFx web part. You can ask questions from the web part and you will see the answers, most recent answers first."
    ],
    "creationDateTime": "2023-02-04",
    "updateDateTime": "2023-02-04",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-chat-gpt/assets/example2.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-chat-gpt/assets/example.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-chat-gpt/assets/example3.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-chat-gpt/assets/chatgpt.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "nicodecleyre",
        "pictureUrl": "https://github.com/nicodecleyre.png",
        "name": "Nico De Cleyre"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-chatgpt-app",
    "source": "pnp",
    "title": "Chat GPT App Web Part",
    "shortDescription": "This App is a implementation of OpenAI ChatGPT-3. It runs on SharePoint, Teams as Personal or Teams App and Message Extension.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-chatgpt-app",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-chatgpt-app",
    "longDescription": [
      "This App is a implementation of OpenAI ChatGPT-3. It runs on SharePoint, Teams as Personal or Teams App and Message Extension."
    ],
    "creationDateTime": "2023-02-19",
    "updateDateTime": "2023-03-02",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-chatgpt-app/assets/ChatGPT.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-check-flows",
    "source": "pnp",
    "title": "Check Flows Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-check-flows",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-09-17",
    "updateDateTime": "2019-09-17",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-check-flows/assets/CheckFlows.gif",
        "alt": "Check Flows"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "aakashbhardwaj619",
        "company": "Microsoft",
        "pictureUrl": "https://avatars.githubusercontent.com/u/33526902?s=460&u=e780f4ef1da922c84f2c5c66c59cecbff2300581&v=4",
        "name": "Aakash Bhardwaj",
        "twitter": "aakash_316"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-check-user-group",
    "source": "pnp",
    "title": "Check User Group Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-check-user-group",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-03-09",
    "updateDateTime": "2020-03-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      },
      {
        "key": "PNPCONTROLS",
        "value": "WebPartTitle, PeoplePicker"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-check-user-group/assets/CheckUserGroup.gif",
        "alt": "Check User Group"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "aakashbhardwaj619",
        "company": "Microsoft",
        "pictureUrl": "https://avatars.githubusercontent.com/u/33526902?s=460&u=e780f4ef1da922c84f2c5c66c59cecbff2300581&v=4",
        "name": "Aakash Bhardwaj",
        "twitter": "aakash_316"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-cherry-picked-content",
    "source": "pnp",
    "title": "Cherry picked content web part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-cherry-picked-content",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-cherry-picked-content",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2022-02-21",
    "updateDateTime": "2022-04-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.14"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-cherry-picked-content/assets/React-Cherry-Picked-Content-Sample.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "PathToSharePoint",
        "pictureUrl": "https://github.com/PathToSharePoint.png",
        "name": "Christophe Humbert"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-company-stories",
    "source": "pnp",
    "title": "Company Stories Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-company-stories",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-company-stories",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2021-03-31",
    "updateDateTime": "2022-03-16",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.14"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-company-stories/assets/react-company-stories.gif",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-company-stories/assets/stories-list.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "luismanez",
        "pictureUrl": "https://github.com/luismanez.png",
        "name": "Luis Mañez"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-comparer",
    "source": "pnp",
    "title": "Comparer Web Part with File Picker",
    "shortDescription": "Allows users to compare Before and After pictures, with a draggable slider. Implements a custom file picker.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-comparer",
    "longDescription": [
      "Allows users to compare Before and After pictures, with a draggable slider. Implements a custom file picker."
    ],
    "creationDateTime": "2019-01-27",
    "updateDateTime": "2019-01-27",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.7.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-comparer/assets/ComparerWebPart.gif",
        "alt": "Comparer with File Picker"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-comparer/assets/FluentSlider.gif?raw=true",
        "alt": "Comparer with File Picker"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-comparer/assets/FromLinkTab.gif?raw=true",
        "alt": "Comparer with File Picker"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-comparer/assets/OneDriveTab.gif?raw=true",
        "alt": "Comparer with File Picker"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-comparer/assets/RecentTab.gif?raw=true",
        "alt": "Comparer with File Picker"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-comparer/assets/SitesTab.gif?raw=true",
        "alt": "Comparer with File Picker"
      },
      {
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-comparer/assets/UploadTab.gif?raw=true",
        "alt": "Comparer with File Picker"
      },
      {
        "type": "image",
        "order": 107,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-comparer/assets/WebSearch.gif?raw=true",
        "alt": "Comparer with File Picker"
      },
      {
        "type": "image",
        "order": 108,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-comparer/assets/WebSearchNoAPI.png?raw=true",
        "alt": "Comparer with File Picker"
      },
      {
        "type": "image",
        "order": 109,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-comparer/assets/WebSearchTab.gif?raw=true",
        "alt": "Comparer with File Picker"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "hugoabernier",
        "company": "Tahoe Ninjas",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier",
        "twitter": "bernierh"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-components-dynamicloading",
    "source": "pnp",
    "title": "Code Splitting in SharePoint Framework",
    "shortDescription": "Load React components and third party packages on demand in SPFx",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-components-dynamicloading",
    "longDescription": [
      "Load React components and third party packages on demand in SPFx"
    ],
    "creationDateTime": "2018-10-09",
    "updateDateTime": "2018-10-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.6.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-components-dynamicloading/assets/cs3.gif",
        "alt": "Code Splitting in SharePoint Framework"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "vman",
        "company": "",
        "pictureUrl": "https://github.com/vman.png",
        "name": "Vardhaman Deshpande"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-connected-web-parts",
    "source": "pnp",
    "title": "Connected web parts",
    "shortDescription": "This samples showcase how to connect two web parts together.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-connected-web-parts",
    "longDescription": [
      "This samples showcase how to connect two web parts together using the property pane specifying the IDynamicDataCallables interface in the provider web part and the PropertyPaneDynamicField in the consumer web part."
    ],
    "creationDateTime": "2024-03-16",
    "updateDateTime": "2024-03-16",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-connected-web-parts/assets/connected-web-parts.gif?raw=true",
        "alt": "Connected web parts"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-connected-web-parts/assets/Blank.png?raw=true",
        "alt": "Empty connected web parts"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-connected-web-parts/assets/Filled.png?raw=true",
        "alt": "Filled in connected web parts"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-connected-web-parts/assets/PropertyPane.png?raw=true",
        "alt": "Connected web parts property pane"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "guidozam",
        "pictureUrl": "https://github.com/guidozam.png",
        "name": "Guido Zambarda"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Integrate web part properties with SharePoint",
        "description": "Learn how to integrate web part properties with SharePoint.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/integrate-web-part-properties-with-sharepoint"
      },
      {
        "name": "Make your SharePoint client-side web part configurable",
        "description": "Learn how to make your SharePoint client-side web part configurable.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/basics/integrate-with-property-pane"
      },
      {
        "name": "Connect SharePoint Framework components using dynamic data",
        "description": "Learn how to connect SharePoint Framework components using dynamic data.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/dynamic-data"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-content-query-online",
    "source": "pnp",
    "title": "Content Query Web Part (SharePoint Online)",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-content-query-online",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2021-01-07",
    "updateDateTime": "2024-03-31",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-content-query-online/assets/toolpart.gif",
        "alt": "Content Query Web Part (SharePoint Online)"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-content-query-online/assets/allsites.gif?raw=true",
        "alt": "Content Query Web Part (SharePoint Online)"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-content-query-online/assets/allsites_v2.gif?raw=true",
        "alt": "Content Query Web Part (SharePoint Online)"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-content-query-online/assets/clearItemSelector.png?raw=true",
        "alt": "Content Query Web Part (SharePoint Online)"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-content-query-online/assets/configureItemSelector.png?raw=true",
        "alt": "Content Query Web Part (SharePoint Online)"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-content-query-online/assets/connectToSource.png?raw=true",
        "alt": "Content Query Web Part (SharePoint Online)"
      },
      {
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-content-query-online/assets/datetime.gif?raw=true",
        "alt": "Content Query Web Part (SharePoint Online)"
      },
      {
        "type": "image",
        "order": 107,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-content-query-online/assets/dynamicDataConnection.png?raw=true",
        "alt": "Content Query Web Part (SharePoint Online)"
      },
      {
        "type": "image",
        "order": 108,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-content-query-online/assets/externalScripts.png?raw=true",
        "alt": "Content Query Web Part (SharePoint Online)"
      },
      {
        "type": "image",
        "order": 109,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-content-query-online/assets/filters.gif?raw=true",
        "alt": "Content Query Web Part (SharePoint Online)"
      },
      {
        "type": "image",
        "order": 110,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-content-query-online/assets/itemSelectorTemplate.png?raw=true",
        "alt": "Content Query Web Part (SharePoint Online)"
      },
      {
        "type": "image",
        "order": 111,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-content-query-online/assets/itemSelectorTemplateOutput.png?raw=true",
        "alt": "Content Query Web Part (SharePoint Online)"
      },
      {
        "type": "video",
        "order": 112,
        "url": "https://www.youtube.com/embed/bbWMQhl4Y38",
        "alt": "Demo of the web part in action"
      },
      {
        "type": "video",
        "order": 113,
        "url": "https://www.youtube.com/embed/reZfuibLCpo",
        "alt": "Demo of the web part in action"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "PopWarner",
        "company": "Catapult Systems",
        "pictureUrl": "https://avatars.githubusercontent.com/u/10676147?s=460&u=9e4e74223c4ffb430fb77c97892a84b286df1921&v=4",
        "name": "David Warner II",
        "twitter": "PopWarner"
      },
      {
        "gitHubAccount": "hugoabernier",
        "company": "Tahoe Ninjas",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier",
        "twitter": "bernierh"
      },
      {
        "gitHubAccount": "PaoloPia",
        "company": "PiaSys.com",
        "pictureUrl": "https://github.com/PaoloPia.png",
        "name": "Paolo Pialorsi",
        "twitter": "PaoloPia"
      },
      {
        "gitHubAccount": "Abderahman88",
        "company": "",
        "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4",
        "name": "Abderahman Moujahid"
      },
      {
        "gitHubAccount": "ChrisLizon",
        "name": "Chris Lizon",
        "pictureUrl": "https://github.com/ChrisLizon.png"
      },
      {
        "gitHubAccount": "nemortu",
        "name": "nemortu",
        "pictureUrl": "https://github.com/nemortu.png"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-content-query-onprem",
    "source": "pnp",
    "title": "Content Query Web Part  (On-Premises SharePoint)",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-content-query-onprem",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-05-22",
    "updateDateTime": "2018-05-22",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-content-query-onprem/Misc/toolpart.gif?raw=true",
        "alt": "Content Query Web Part  (On-Premises SharePoint)"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "spplante",
        "company": "SPP Technologies",
        "pictureUrl": "https://github.com/spplante.png",
        "name": "Simon-Pierre Plante"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-copy-views",
    "source": "pnp",
    "title": "Copy Views Web Part",
    "shortDescription": "The Copy Views solution enables a user to copy views from one list/library to another across site collections.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-copy-views",
    "longDescription": [
      "The Copy Views solution enables a user to copy views from one list/library to another across site collections. It can be used as a webpart on a page, or as a ListView Command Set extension. The user can select multiple views to copy to multiple target lists."
    ],
    "creationDateTime": "2022-08-29",
    "updateDateTime": "2023-02-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-copy-views/assets/copy-views.gif",
        "alt": "Copy Views solution"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-copy-views/assets/copy-views-screenshot.png",
        "alt": "Copy Views solution"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "martinlingstuyl",
        "company": "I4-YOU Business Solutions b.v.",
        "pictureUrl": "https://avatars.githubusercontent.com/u/5267487?v=4",
        "name": "Martin Lingstuyl"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-covid19-info",
    "source": "pnp",
    "title": "COVID 19 information web part",
    "shortDescription": "This web part displays info about the COVID-19 virus for a given country.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-covid19-info",
    "longDescription": [
      "This web part displays info about the COVID-19 virus for a given country."
    ],
    "creationDateTime": "2020-03-25",
    "updateDateTime": "2020-03-25",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-covid19-info/assets/covid-counter.gif",
        "alt": "COVID 19 information web part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-covid19-info/assets/Langing-page-screenshot.png?raw=true",
        "alt": "COVID 19 information web part"
      },
      {
        "type": "video",
        "order": 102,
        "url": "https://www.youtube.com/embed/nuso6glfQ5Q",
        "alt": "Demo of the web part in action"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "agtenr",
        "company": "",
        "pictureUrl": "https://github.com/agtenr.png",
        "name": "Robin Agten"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-cross-device-data",
    "source": "pnp",
    "title": "Cross-Device Data Web Part",
    "shortDescription": "This solution demonstrates how to use the OneDrive special folder Apps in order to save user's preferencies cross-device.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-cross-device-data",
    "longDescription": [
      "This solution demonstrates how to use the OneDrive special folder Apps in order to save user's preferencies cross-device."
    ],
    "creationDateTime": "2021-07-26",
    "updateDateTime": "2021-07-26",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-cross-device-data/assets/Preview.jpg",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "giuleon",
        "pictureUrl": "https://github.com/giuleon.png",
        "name": "Giuliano De Luca"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-css-in-js-typestyle",
    "source": "pnp",
    "title": "CSS in JS with SharePoint Framework and TypeStyle",
    "shortDescription": "The web part demonstrates the usage of \"CSS in JS\" pattern with SharePoint Framework. \"CSS in JS\" is implemented using TypeStyle library.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-css-in-js-typestyle",
    "longDescription": [
      "The web part demonstrates the usage of \"CSS in JS\" pattern with SharePoint Framework. \"CSS in JS\" is implemented using TypeStyle library."
    ],
    "creationDateTime": "2020-04-24",
    "updateDateTime": "2020-04-24",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-css-in-js-typestyle/assets/dynamic-styles.gif",
        "alt": "CSS in JS with SharePoint Framework and TypeStyle"
      },
      {
        "type": "video",
        "order": 101,
        "url": "https://www.youtube.com/embed/IGt5DJHYPsQ",
        "alt": "Demo of the web part in action"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "s-KaiNet",
        "company": "Mastaq",
        "pictureUrl": "https://github.com/s-KaiNet.png",
        "name": "Sergei Sergeev",
        "twitter": "sergeev_srg"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-custom-links",
    "source": "pnp",
    "title": "Custom Links Web Part",
    "shortDescription": "In this web part you can full customize the background and foreground color, font size, width and height of links.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-custom-links",
    "longDescription": [
      "In this web part you can full customize the background and foreground color, font size, width and height of links."
    ],
    "creationDateTime": "2020-10-05",
    "updateDateTime": "2020-10-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSPERSONALAPP",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-custom-links/assets/customlinks.gif",
        "alt": "Custom Links"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-custom-links/assets/customLinks01.PNG?raw=true",
        "alt": "Custom Links"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-custom-links/assets/customLinks02.PNG?raw=true",
        "alt": "Custom Links"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-custom-links/assets/customlinks03.PNG?raw=true",
        "alt": "Custom Links"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-custompropertypanecontrols",
    "source": "pnp",
    "title": "Custom property pane controls web part",
    "shortDescription": "Sample custom property pane controls built in React for use with SharePoint Framework client-side web parts.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-custompropertypanecontrols",
    "longDescription": [
      "Sample custom property pane controls built in React for use with SharePoint Framework client-side web parts."
    ],
    "creationDateTime": "2017-05-01",
    "updateDateTime": "2022-01-26",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.14.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-custompropertypanecontrols/assets/async-dropdown-preview.gif",
        "alt": "Custom property pane controls"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-custompropertypanecontrols/assets/cascading-dropdown-preview.gif?raw=true",
        "alt": "Custom property pane controls"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      },
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/AJIXuMuK.png",
        "name": "Alex Terentiev"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-dall-e-image-generation",
    "source": "pnp",
    "title": "Image Generation using DALL-E API Web Part",
    "shortDescription": "This web part allows you to generate some images using the recently released API of DALL-E image generation.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-dall-e-image-generation",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-dall-e-image-generation",
    "longDescription": [
      "This web part allows you to generate some images using the recently released API of DALL-E image generation."
    ],
    "creationDateTime": "2022-11-08",
    "updateDateTime": "2022-11-08",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/main/samples/react-dall-e-image-generation/assets/react-dall-e-image-generation.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "luismanez",
        "pictureUrl": "https://github.com/luismanez.png",
        "name": "Luis Mañez"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-dashboards",
    "source": "pnp",
    "title": "Application Insights and Cost Management Dashboards Web Part",
    "shortDescription": "Sharing Application Insights and solution's cost information with your stakeholders typically requires either using _Azure Dashboards_ or using _Power BI_. This sample solution allows displaying this dashboards directly in a SharePoint site or a tab in MS Teams, moving it close to the users.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-dashboards",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-dashboards",
    "longDescription": [
      "Sharing Application Insights and solution's cost information with your stakeholders typically requires either using _Azure Dashboards_ or using _Power BI_. This sample solution allows displaying this dashboards directly in a SharePoint site or a tab in MS Teams, moving it close to the users."
    ],
    "creationDateTime": "2023-06-05",
    "updateDateTime": "2023-06-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-dashboards/assets/AppInsights.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "kkazala",
        "pictureUrl": "https://github.com/kkazala.png",
        "name": "Kinga Kazala"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-datatable",
    "source": "pnp",
    "title": "Data Table Web Part",
    "shortDescription": "This web part provides easy way to render SharePoint custom list in data table view with all the necessary features.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-datatable",
    "longDescription": [
      "This web part provides easy way to render SharePoint custom list in data table view with all the necessary features."
    ],
    "creationDateTime": "2021-03-01",
    "updateDateTime": "2022-11-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.14.0"
      },
      {
        "key": "PNPCONTROLS",
        "value": "PropertyFieldColorPicker, PropertyFieldListPicker, PropertyFieldMultiSelect, PropertyFieldOrder, WebPartTitle, Placeholder"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-datatable/assets/preview.png",
        "alt": "Data Table"
      },
      {
        "type": "video",
        "order": 101,
        "url": "https://www.youtube.com/embed/-i4EAmjKxpQ",
        "alt": "Demo of the web part in action"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "chandaniprajapati",
        "company": "Rapid Circle",
        "pictureUrl": "https://github.com/chandaniprajapati.png",
        "name": "Chandani Prajapati",
        "twitter": "Chandani_SPD"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-datatable-using-mui-tables",
    "source": "pnp",
    "title": "DataTable Web Part Using MUI table",
    "shortDescription": "This web part provides mui datatable features for your lists.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-datatable-using-mui-tables",
    "longDescription": [
      "This web part provides mui datatable features for your lists."
    ],
    "creationDateTime": "2022-01-30",
    "updateDateTime": "2022-01-30",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      },
      {
        "key": "PNPCONTROLS",
        "value": "PropertyFieldColorPicker, PropertyFieldListPicker, PropertyFieldMultiSelect, PropertyFieldOrder, WebPartTitle, Placeholder"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-datatable-using-mui-tables/assets/first.png",
        "alt": "Data Table with MUI"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-datatable-using-mui-tables/assets/second.png",
        "alt": "Data Table with MUI"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "jeffinjacob",
        "pictureUrl": "https://github.com/jeffinjacob.png",
        "name": "Jeffin Jacob"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-dataverse",
    "source": "pnp",
    "title": "Consuming Dataverse API using SPFx",
    "shortDescription": "Enhance the potential of SharePoint by integrating it with Dataverse, a low-code data platform from Microsoft",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-dataverse",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-dataverse",
    "longDescription": [
      "This project entails the development of a SharePoint Framework (SPFx) solution, designed to bridge the gap between Microsoft SharePoint and Dataverse. The main goal of the project is to enhance the potential of SharePoint by integrating it with Dataverse, a low-code data platform from Microsoft.",
      "The SPFx solution will allow users to interact with data in the Dataverse environment directly from their SharePoint user interface. This allows for a more seamless and intuitive experience for end-users, who can access, manipulate, and analyze data without needing to switch between different platforms or applications."
    ],
    "creationDateTime": "2024-08-12",
    "updateDateTime": "2024-08-12",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.0"
      }
    ],
    "thumbnails": [
      {
        "name": "dataverseclient.PNG",
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-dataverse/assets/dataverseclient.PNG",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "mgwojciech",
        "pictureUrl": "https://github.com/mgwojciech.png",
        "name": "Marcin Wojciechowski"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-daterangepicker",
    "source": "pnp",
    "title": "Date range picker in SPFx Web Part",
    "shortDescription": "This web part used the date range picker in the SharePoint Framework (SPFx) web part",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-daterangepicker",
    "longDescription": [
      "This web part used the date range picker in the SharePoint Framework (SPFx) web part"
    ],
    "creationDateTime": "2020-07-04",
    "updateDateTime": "2020-07-04",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-daterangepicker/assets/daterange1.png",
        "alt": "Date range picker in SPFx"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ravichandran-blog",
        "company": "Content Formula",
        "pictureUrl": "https://github.com/ravichandran-blog.png",
        "name": "Ravichandran Krishnasamy",
        "twitter": "spfx_blog"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-designpatterns-typescript",
    "source": "pnp",
    "title": "Design Patterns applied to Sharepoint Framework",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-designpatterns-typescript",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-05-10",
    "updateDateTime": "2018-05-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://avatars3.githubusercontent.com/u/6962857?s=460&v=4",
        "alt": "Design Patterns applied to Sharepoint Framework"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "levalencia",
        "company": "",
        "pictureUrl": "https://github.com/levalencia.png",
        "name": "Luis Valencia"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-dev-radar",
    "source": "pnp",
    "title": "Dev-Radar for SharePoint Online",
    "shortDescription": "The web part Use PnPjs library and Axios",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-dev-radar",
    "longDescription": [
      "The web part Use PnPjs library and Axios"
    ],
    "creationDateTime": "2020-03-01",
    "updateDateTime": "2020-03-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-dev-radar/dev-radar.png",
        "alt": "Dev-Radar for SharePoint Online"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "sauslash",
        "company": "",
        "pictureUrl": "https://github.com/sauslash.png",
        "name": "Saulo Oliveira"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-directory",
    "source": "pnp",
    "title": "Organization Directory Web Part",
    "shortDescription": "Search People from Organization Directory and show live persona card on hover.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-directory",
    "longDescription": [
      "Search People from Organization Directory and show live persona card on hover."
    ],
    "creationDateTime": "2021-03-04",
    "updateDateTime": "2023-06-20",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.3"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-directory/assets/react-directory7.png",
        "alt": "Organization Directory Web Part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-directory/assets/react-directory-teams1.jpg?raw=true",
        "alt": "Organization Directory Web Part"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-directory/assets/react-directory-teams2.png?raw=true",
        "alt": "Organization Directory Web Part"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-directory/assets/react-directory-teams3.jpg?raw=true",
        "alt": "Organization Directory Web Part"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-directory/assets/react-directory-withPaging.png?raw=true",
        "alt": "Organization Directory Web Part"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-directory/assets/react-directory.jpg?raw=true",
        "alt": "Organization Directory Web Part"
      },
      {
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-directory/assets/react-directory2.jpg?raw=true",
        "alt": "Organization Directory Web Part"
      },
      {
        "type": "image",
        "order": 107,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-directory/assets/react-directory21.png?raw=true",
        "alt": "Organization Directory Web Part"
      },
      {
        "type": "image",
        "order": 108,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-directory/assets/react-directory3.jpg?raw=true",
        "alt": "Organization Directory Web Part"
      },
      {
        "type": "image",
        "order": 109,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-directory/assets/react-directory5.jpg?raw=true",
        "alt": "Organization Directory Web Part"
      },
      {
        "type": "image",
        "order": 110,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-directory/assets/react-directory6.png?raw=true",
        "alt": "Organization Directory Web Part"
      },
      {
        "type": "image",
        "order": 111,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-directory/assets/react-directory8.png?raw=true",
        "alt": "Organization Directory Web Part"
      },
      {
        "type": "image",
        "order": 112,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-directory/assets/react-directory9.png?raw=true",
        "alt": "Organization Directory Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      },
      {
        "gitHubAccount": "petkir",
        "company": "ACP Cubido Digital Solution",
        "pictureUrl": "https://github.com/petkir.png",
        "name": "Peter Paul Kirschner",
        "twitter": "petkir_at"
      },
      {
        "gitHubAccount": "sudharsank",
        "company": "NTT Digital Business Solutions",
        "pictureUrl": "https://github.com/sudharsank.png",
        "name": "Sudharsan Kesavanarayanan",
        "twitter": "sudharsank"
      },
      {
        "gitHubAccount": "Abderahman88",
        "company": "",
        "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4",
        "name": "Abderahman Moujahid"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-display-hierarchy",
    "source": "pnp",
    "title": "Web part displaying hierarchical information from SharePoint list",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-display-hierarchy",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-11-21",
    "updateDateTime": "2024-06-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-display-hierarchy/assets/local-sharepoint-workbench-run.png",
        "alt": "Web part displaying hierarchical information from SharePoint list"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-display-hierarchy/assets/list-sample-data.png?raw=true",
        "alt": "Web part displaying hierarchical information from SharePoint list"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-display-hierarchy/assets/list-schema.png?raw=true",
        "alt": "Web part displaying hierarchical information from SharePoint list"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-display-hierarchy/assets/sharepoint-run.gif?raw=true",
        "alt": "Web part displaying hierarchical information from SharePoint list"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-display-hierarchy/assets/webpart-preview.png?raw=true",
        "alt": "Web part displaying hierarchical information from SharePoint list"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "nanddeepn",
        "company": "",
        "pictureUrl": "https://github.com/nanddeepn.png",
        "name": "Nanddeep Nachan",
        "twitter": "NanddeepNachan"
      },
      {
        "gitHubAccount": "ravi16a87",
        "company": "Cognizant",
        "pictureUrl": "https://github.com/ravi16a87.png",
        "name": "Ravi Kulkarni"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-doccard-faq",
    "source": "pnp",
    "title": "Document Card FAQ Web Part",
    "shortDescription": "React FAQ Document Card Web Part",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-doccard-faq",
    "longDescription": [
      "Document Card FAQ"
    ],
    "creationDateTime": "2021-04-05",
    "updateDateTime": "2021-04-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      },
      {
        "key": "PNPCONTROLS",
        "value": "WebPartTitle, Placeholder, FilePicker"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-doccard-faq/assets/FAQdocCardPreview.gif",
        "alt": "Web part in action"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-doccard-faq/assets/reactdoccardfaq.png",
        "alt": "Web part in action"
      },
      {
        "type": "video",
        "order": 102,
        "url": "https://www.youtube.com/embed/oIr-rgGvUUk",
        "alt": "Demo of the web part in action"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "SamC148",
        "pictureUrl": "https://github.com/SamC148.png",
        "name": "Sam Collins",
        "twitter": "samc148"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-document-links-accordion",
    "source": "pnp",
    "title": "Documents Links Accordion Web Part",
    "shortDescription": "This web part allows user create a accordion with documents links grouped by any column of document library.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-document-links-accordion",
    "longDescription": [
      "This web part allows user create a accordion with documents links grouped by any column of document library.",
      "When the user clicks on the header it dynamically load documents."
    ],
    "creationDateTime": "2021-10-10",
    "updateDateTime": "2021-10-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      },
      {
        "key": "SPFX-FULLPAGEAPP",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSPERSONALAPP",
        "value": "true"
      },
      {
        "key": "REACT-HOOKS",
        "value": "true"
      },
      {
        "key": "PNPCONTROLS",
        "value": "PropertyFieldListPicker, PropertyFieldMessage, PropertyFieldSpinner, Placeholder, AccessibleAccordion"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-document-links-accordion/assets/documentsLinksAccordion.gif",
        "alt": "Web part in action"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-document-links-accordion/assets/documentsLinksAccordion1.png",
        "alt": "Screen shot of web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-documents-detailslist",
    "source": "pnp",
    "title": "Documents Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-documents-detailslist",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-04-28",
    "updateDateTime": "2020-04-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-documents-detailslist/assets/Preview.gif",
        "alt": "Documents Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "DimchoTsanov",
        "company": "",
        "pictureUrl": "https://avatars.githubusercontent.com/u/9058087?s=460&u=43820d97a5aaf5719a4c98be59c673fb460f0001&v=4",
        "name": "Dimcho Tsanov",
        "twitter": "DimchoTsanov"
      },
      {
        "gitHubAccount": "Harshagracy",
        "company": "",
        "pictureUrl": "https://github.com/Harshagracy.png",
        "name": "Harsha Vardhini",
        "twitter": "harshagracy"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-download-multiple-documents",
    "source": "pnp",
    "title": "Download Multiple Documents Web Part",
    "shortDescription": "This sample empowers users to effortlessly download multiple documents as a single compressed ZIP file.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-download-multiple-documents",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-download-multiple-documents",
    "longDescription": [
      "This sample empowers users to effortlessly download multiple documents as a single compressed ZIP file."
    ],
    "creationDateTime": "2023-09-09",
    "updateDateTime": "2023-09-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.4"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-download-multiple-documents/assets/MultipleDownloadsWebPartDemo.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AhmadiRamin",
        "pictureUrl": "https://github.com/AhmadiRamin.png",
        "name": "Ramin Ahmadi"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-dynamics-crm-api",
    "source": "pnp",
    "title": "Web Part Using Dynamics CRM API",
    "shortDescription": "This sample shows how to consume Dynamics CRM API using AadTokenProvider class.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-dynamics-crm-api",
    "longDescription": [
      "This sample shows how to consume Dynamics CRM API using AadTokenProvider class."
    ],
    "creationDateTime": "2020-07-12",
    "updateDateTime": "2020-07-12",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSPERSONALAPP",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-dynamics-crm-api/assets/screenshot.gif",
        "alt": "Using Dynamics CRM API"
      },
      {
        "type": "video",
        "order": 101,
        "url": "https://www.youtube.com/embed/VXzYc6cfjuI",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AhmadiRamin",
        "company": "Content and Cloud",
        "pictureUrl": "https://github.com/AhmadiRamin.png",
        "name": "Ramin Ahmadi",
        "twitter": "raminahmadi1986"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-edit-applicationcustomizer",
    "source": "pnp",
    "title": "Edit Application Customizers Web Part",
    "shortDescription": "This web part will allow users to view/update application customizers properties across any web where the current user has access to.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-edit-applicationcustomizer",
    "longDescription": [
      "This web part will allow users to view/update application customizers properties across any web where the current user has access to."
    ],
    "creationDateTime": "2020-11-07",
    "updateDateTime": "2020-11-07",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-edit-applicationcustomizer/assets/react-all-applicationcustomizers.gif",
        "alt": "Edit Application Customizers"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "kunj-sangani",
        "company": "",
        "pictureUrl": "https://github.com/kunj-sangani.png",
        "name": "Kunj Sangani"
      },
      {
        "gitHubAccount": "siddharth-vaghasia",
        "company": "",
        "pictureUrl": "https://github.com/siddharth-vaghasia.png",
        "name": "Siddharth Vaghasia"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-emoji-ratings",
    "source": "pnp",
    "title": "Emoji Ratings Web Part",
    "shortDescription": "Take emoji-based reactions or feedback for a given news/article/post",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-emoji-ratings",
    "longDescription": [
      "This is sample web part which can be used to take emoji based reaction or feedback for particular news/article/posts.",
      "We all know every organizations would be using SharePoint news features for company's internal communications from HR to IT updates and some time annoucements. News created in SharePoint are created as Pages in library. Idea behind this web part is to take employee/user's feedback as emoji reactions on particular news. This web part can also be used on wiki articles or blog posts to take similar reactions. Web part uses concept of 1 to 5 star based rating system(configurable), you can decide low to high based on your preference."
    ],
    "creationDateTime": "2021-09-24",
    "updateDateTime": "2022-11-22",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      },
      {
        "key": "PNPCONTROLS",
        "value": "PropertyFieldCollectionData, PropertyFieldColorPicker, Placeholder"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-emoji-ratings/assets/EmojiWPinAction.gif",
        "alt": "Web part in action"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "siddharth-vaghasia",
        "pictureUrl": "https://github.com/siddharth-vaghasia.png",
        "name": "Siddharth Vaghasia"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-employees-onboarding",
    "source": "pnp",
    "title": "Employee Onboarding",
    "shortDescription": "This project is an SPFx (SharePoint Framework) application designed for employee onboarding.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-employees-onboarding",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-employees-onboarding",
    "longDescription": [
      "This project is an SPFx (SharePoint Framework) application designed for employee onboarding. It automates various tasks for each employee, such as updating their department, joining the team, and sending notification emails. The application utilizes the Microsoft Graph SDK's batch requests approach to efficiently manage these operations within a .NET-based Azure function. Additionally, the system logs information into a SharePoint list for auditing purposes."
    ],
    "creationDateTime": "2024-09-01",
    "updateDateTime": "2024-09-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.19.0"
      }
    ],
    "thumbnails": [
      {
        "name": "demo1.png",
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-employees-onboarding/assets/D:\\GitHub\\pnp\\sp-dev-fx-webparts\\samples\\react-employees-onboarding\\assets\\demo1.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "demo2.png",
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-employees-onboarding/assets/D:\\GitHub\\pnp\\sp-dev-fx-webparts\\samples\\react-employees-onboarding\\assets\\demo2.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "demo3.png",
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-employees-onboarding/assets/D:\\GitHub\\pnp\\sp-dev-fx-webparts\\samples\\react-employees-onboarding\\assets\\demo3.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "demo4.png",
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-employees-onboarding/assets/D:\\GitHub\\pnp\\sp-dev-fx-webparts\\samples\\react-employees-onboarding\\assets\\demo4.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ejazhussain",
        "pictureUrl": "https://github.com/ejazhussain.png",
        "name": "Ejaz Hussain"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-enhanced-button",
    "source": "pnp",
    "title": "Enhanced Button",
    "shortDescription": "Extends the functionality of the native button web part.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-enhanced-button",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-enhanced-button",
    "longDescription": [
      "The Enhanced Button Web Part is a custom SharePoint web part that extends the functionality of the native button web part. It provides additional configuration options to create more customizable and flexible buttons within your SharePoint pages."
    ],
    "creationDateTime": "2024-09-01",
    "updateDateTime": "2024-09-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.19.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-enhanced-button/assets/app.jpeg",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AriGunawan",
        "pictureUrl": "https://github.com/AriGunawan.png",
        "name": "Ari Gunawan"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-enhanced-list-formatting",
    "source": "pnp",
    "title": "Enhanced List Formatting Web Part",
    "shortDescription": "This web part allows you to add custom CSS on a page to enhance list formatting.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-enhanced-list-formatting",
    "longDescription": [
      "This web part allows you to add custom CSS on a page to enhance list formatting."
    ],
    "creationDateTime": "2020-03-18",
    "updateDateTime": "2020-03-18",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-enhanced-list-formatting/assets/EnhancedListFormatting.gif",
        "alt": "Enhanced List Formatting"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-enhanced-list-formatting/assets/Viewformatting.png?raw=true",
        "alt": "Enhanced List Formatting"
      },
      {
        "type": "video",
        "order": 102,
        "url": "https://www.youtube.com/embed/B7p7_lVc8kI",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "hugoabernier",
        "company": "Tahoe Ninjas",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier",
        "twitter": "bernierh"
      },
      {
        "gitHubAccount": "PopWarner",
        "company": "Catapult Systems",
        "pictureUrl": "https://avatars.githubusercontent.com/u/10676147?s=460&u=9e4e74223c4ffb430fb77c97892a84b286df1921&v=4",
        "name": "David Warner II",
        "twitter": "PopWarner"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-enhanced-page-properties",
    "source": "pnp",
    "title": "Enhanced Page Properties Web Part",
    "shortDescription": "Goes beyond the standard SharePoint Page Properties web part, offering expanded support for various metadata types and configurations",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-enhanced-page-properties",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-enhanced-page-properties",
    "longDescription": [
      "This is a web part that goes beyond the standard SharePoint Page Properties web part, offering expanded support for various metadata types and configurations. Effortlessly display key page details based on metadata files, providing a comprehensive view of your content. Streamline information management and enhance user interaction with this versatile and customizable web part."
    ],
    "creationDateTime": "2023-09-23",
    "updateDateTime": "2023-10-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-enhanced-page-properties/assets/app.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AriGunawan",
        "pictureUrl": "https://github.com/AriGunawan.png",
        "name": "Ari Gunawan"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-enhanced-powerapps",
    "title": "Enhanced Power Apps Web Part",
    "source": "pnp",
    "shortDescription": "Adds dynamic resizing, theme awareness, and dynamic data to embedded Power Apps",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-enhanced-powerapps",
    "longDescription": [
      "Adds dynamic resizing, theme awareness, and dynamic data to embedded Power Apps"
    ],
    "creationDateTime": "2020-07-26",
    "updateDateTime": "2023-06-27",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.13.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-enhanced-powerapps/assets/enhanced-power-apps.gif",
        "alt": "Enhanced Power Apps"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/master/samples/react-enhanced-powerapps/assets/dpstep1.png?raw=true",
        "alt": "Enhanced Power Apps"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/master/samples/react-enhanced-powerapps/assets/resize.gif?raw=true",
        "alt": "Enhanced Power Apps"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/master/samples/react-enhanced-powerapps/assets/sizeoptions.png?raw=true",
        "alt": "Enhanced Power Apps"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/master/samples/react-enhanced-powerapps/assets/step1-5.png?raw=true",
        "alt": "Enhanced Power Apps"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/master/samples/react-enhanced-powerapps/assets/step1.png?raw=true",
        "alt": "Enhanced Power Apps"
      },
      {
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/master/samples/react-enhanced-powerapps/assets/step2.png?raw=true",
        "alt": "Enhanced Power Apps"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "hugoabernier",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier",
        "twitter": "bernierh"
      },
      {
        "gitHubAccount": "babakdanyal",
        "pictureUrl": "https://github.com/babakdanyal.png",
        "name": "Babak Danyal"
      },
      {
        "gitHubAccount": "kunj-sangani",
        "pictureUrl": "https://github.com/kunj-sangani.png",
        "name": "Kunj Balkrishna Sangani"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-environment-settings",
    "source": "pnp",
    "title": "SPFx environment settings management web part",
    "shortDescription": "Easily swap between environments when building SPFx solutions",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-environment-settings",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-environment-settings",
    "longDescription": [
      "Have you ever been building SPFx solutions, and wanted to use different settings for different environments? This web part allows you to easily swap between different environment settings, and even add your own custom settings."
    ],
    "creationDateTime": "2023-11-14",
    "updateDateTime": "2023-11-14",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/main/samples/react-environment-settings/assets/demo.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Tanddant",
        "pictureUrl": "https://github.com/Tanddant.png",
        "name": "Dan Toft"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-events-aggregator",
    "source": "pnp",
    "title": "Event Aggregator Sample (DEPRECATED)",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-events-aggregator",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-11-18",
    "updateDateTime": "2018-11-18",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-events-aggregator/assets/spfx-event-aggregator.gif",
        "alt": "Event Aggregator Sample (DEPRECATED)"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "VelinGeorgiev",
        "company": "",
        "pictureUrl": "https://github.com/VelinGeorgiev.png",
        "name": "Velin Georgiev"
      },
      {
        "gitHubAccount": "AustinBreslinDev",
        "company": "",
        "pictureUrl": "https://avatars.githubusercontent.com/u/10480670?s=460&v=4",
        "name": "Austin Breslin"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-events-dynamicdata",
    "source": "pnp",
    "title": "Dynamic data Web Part",
    "shortDescription": "Sample web parts illustrating using the SharePoint Framework Dynamic data capability.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-events-dynamicdata",
    "longDescription": [
      "Sample web parts illustrating using the SharePoint Framework Dynamic data capability."
    ],
    "creationDateTime": "2020-07-08",
    "updateDateTime": "2020-07-08",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-events-dynamicdata/assets/dynamic-data-webparts.png",
        "alt": "Dynamic data"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      },
      {
        "gitHubAccount": "hugoabernier",
        "company": "Tahoe Ninjas",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier",
        "twitter": "bernierh"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-extension-manager",
    "source": "pnp",
    "title": "Tenant wide extension manager web part",
    "shortDescription": "Manage those tenant wide extensions",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-extension-manager",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-extension-manager",
    "longDescription": [
      "Here it is, a modern extension manager, that allows you to easily enable/disable, and update the properties of the globally deployed extensions in your environment."
    ],
    "creationDateTime": "2023-07-10",
    "updateDateTime": "2023-07-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-extension-manager/assets/Demo.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Tanddant",
        "pictureUrl": "https://github.com/Tanddant.png",
        "name": "Dan Toft"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-facebook-plugin",
    "source": "pnp",
    "title": "SharePoint Framework Facebook Page Social Plugin web part",
    "shortDescription": "This sample shows how to implement iFrame-based web parts with a dynamic responsive behavior on the example of Facebook Page Social Plugin.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-facebook-plugin",
    "longDescription": [
      "This sample shows how to implement iFrame-based web parts with a dynamic responsive behavior on the example of Facebook Page Social Plugin."
    ],
    "creationDateTime": "2018-08-26",
    "updateDateTime": "2021-07-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-facebook-plugin/assets/preview.png",
        "alt": "SharePoint Framework Facebook Page Social Plugin web part sample"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "koltyakov",
        "company": "ARVO Systems",
        "pictureUrl": "https://avatars.githubusercontent.com/u/7816483?s=460&u=d77bbdeda1e5fc389b11899f93b62a7d00475835&v=4",
        "name": "Andrew Koltyakov",
        "twitter": "koltyakov"
      },
      {
        "gitHubAccount": "AriGunawan",
        "pictureUrl": "https://github.com/AriGunawan.png",
        "name": "Ari Gunawan"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-faqapp",
    "source": "pnp",
    "title": "Frequently Asked Questions Web Part",
    "shortDescription": "Allows users to create Frequently Asked Questions(Faq App) in modern and classic SharePoint pages.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-faqapp",
    "longDescription": [
      "Allows users to create Frequently Asked Questions(Faq App) in modern and classic SharePoint pages."
    ],
    "creationDateTime": "2020-10-28",
    "updateDateTime": "2020-10-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-faqapp/assets/FAQWebpart.png",
        "alt": "Frequently Asked Questions"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ashokswain7",
        "company": "",
        "pictureUrl": "https://avatars.githubusercontent.com/u/26612087?s=460&v=4",
        "name": "Ashok Swain"
      },
      {
        "gitHubAccount": "Abderahman88",
        "company": "",
        "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4",
        "name": "Abderahman Moujahid"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-faqs",
    "source": "pnp",
    "title": "Frequently Asked Questions Web Part",
    "shortDescription": "Allows users to create Frequently Asked Questions using Property Field Collection Data",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-faqs",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-faqs",
    "longDescription": [
      "Allows users to create Frequently Asked Questions using Property Field Collection Data, with options to view as an Accordion or Tab and also ability to search within the FAQs"
    ],
    "creationDateTime": "2022-03-07",
    "updateDateTime": "2022-06-02",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.13.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-faqs/assets/FAQWebpart.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "arunkumarperumal",
        "pictureUrl": "https://avatars.githubusercontent.com/u/39132298?v=4",
        "name": "Arun Kumar Perumal"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-feature-framework",
    "source": "pnp",
    "title": "Deployment of SharePoint assets as part of SPFx package",
    "shortDescription": "Simplistic solution demonstrating how to provision SharePoint assets using Feature Framework elements when SharePoint Framework solution is being deployed to a SharePoint site.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-feature-framework",
    "longDescription": [
      "Simplistic solution demonstrating how to provision SharePoint assets using Feature Framework elements when SharePoint Framework solution is being deployed to a SharePoint site."
    ],
    "creationDateTime": "2017-02-27",
    "updateDateTime": "2017-02-27",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-feature-framework/assets/screenshot.png",
        "alt": "Deployment of SharePoint assets as part of SPFx package"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "VesaJuvonen",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/VesaJuvonen.png",
        "name": "Vesa Juvonen",
        "twitter": "vesajuvonen"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-feedback",
    "source": "pnp",
    "title": "Feedback Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-feedback",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2021-03-03",
    "updateDateTime": "2021-03-03",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-feedback/assets/feedbackwebpart.gif",
        "alt": "Feedback"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "perr124",
        "company": "",
        "pictureUrl": "https://github.com/perr124.png",
        "name": "Perry Kankam"
      },
      {
        "gitHubAccount": "Abderahman88",
        "company": "",
        "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4",
        "name": "Abderahman Moujahid"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-feedback-sidebar",
    "source": "pnp",
    "title": "Feedback Sidebar Web Part",
    "shortDescription": "This web part displays a sidebar that allows users to provide feedback on various sections of your site.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-feedback-sidebar",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-feedback-sidebar",
    "longDescription": [
      "This web part displays a sidebar that allows users to provide feedback on various sections of your site."
    ],
    "creationDateTime": "2022-09-14",
    "updateDateTime": "2023-01-20",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-feedback-sidebar/assets/preview.gif",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-feedback-sidebar/assets/preview-img-01.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-feedback-sidebar/assets/preview-img-02.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "srpmtt",
        "pictureUrl": "https://github.com/srpmtt.png",
        "name": "Matteo Serpi"
      },
      {
        "gitHubAccount": "AlessiaDeMartino",
        "pictureUrl": "https://github.com/AlessiaDeMartino.png",
        "name": "Alessia De Martino"
      },
      {
        "gitHubAccount": "10xMike",
        "pictureUrl": "https://github.com/10xMike.png",
        "name": "Michele Catena"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-file-upload",
    "source": "pnp",
    "title": "File Upload Web Part",
    "shortDescription": "The file upload web part allowing users to upload multiple files to a document library or as item attachments.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-file-upload",
    "longDescription": [
      "The file upload web part allowing users to upload multiple files to a document library or as item attachments."
    ],
    "creationDateTime": "2018-02-14",
    "updateDateTime": "2018-02-14",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-file-upload/assets/SPFileUploadPreview.gif",
        "alt": "File Upload Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AhmadiRamin",
        "company": "Content and Cloud",
        "pictureUrl": "https://github.com/AhmadiRamin.png",
        "name": "Ramin Ahmadi",
        "twitter": "raminahmadi1986"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-find-parker",
    "source": "pnp",
    "title": "Find Parker Web Part",
    "shortDescription": "This web part is a simple find object game.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-find-parker",
    "longDescription": [
      "Work is not about work 🤨, sometimes a bit of fun is in order 🕹️",
      "This web part is a simple find object game."
    ],
    "creationDateTime": "2021-10-31",
    "updateDateTime": "2021-10-31",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.13.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-find-parker/assets/parker.gif",
        "alt": "Find Parker"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Adam-it",
        "pictureUrl": "https://github.com/Adam-it.png",
        "name": "Adam Wojcik"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-flighttracker",
    "source": "pnp",
    "title": "Flight Tracker",
    "shortDescription": "Sample Web Part to track all flights from a selected airport, date and information type.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-flighttracker",
    "longDescription": [
      "This Web Part allows to track all flights from a selected airport, date and information type.",
      "The SPFx use external API to get data of flight. There are some restritions on this API, the number of requests is limited (free version)"
    ],
    "creationDateTime": "2022-11-14",
    "updateDateTime": "2022-11-14",
    "products": [
      "SharePoint",
      "Microsoft Teams"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-flighttracker/assets/Flight-Tracker-Preview-01.png",
        "alt": "Flight tracker preview"
      },
      {
        "type": "image",
        "order": 200,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-flighttracker/assets/Flight-Tracker-Preview-02.png",
        "alt": "Flight tracker preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "StaffBase",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João  Mendes",
        "twitter": "joaojmendes"
      }
    ],
    "references": [
      {
        "name": "Getting started with SharePoint Framework",
        "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant"
      },
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Learn how to build a SharePoint Framework Web Part.",
        "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Microsoft 365 Patterns and Practices",
        "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.",
        "url": "https://aka.ms/m365pnp"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-flow-button",
    "source": "pnp",
    "title": "Flow Button Web Part",
    "shortDescription": "This web part demonstrates displaying the list of flow button of Power Automate.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-flow-button",
    "longDescription": [
      "This web part demonstrates displaying the list of flow button of Power Automate."
    ],
    "creationDateTime": "2022-02-09",
    "updateDateTime": "2022-03-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.14.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-flow-button/assets/react-flow-button.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "karamem0",
        "pictureUrl": "https://github.com/karamem0.png",
        "name": "Takashi Shinohara"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-flow-dashboard",
    "source": "pnp",
    "title": "Flow Dashboard Web Part",
    "shortDescription": "This web part demonstrates displaying the list of flows in different environments, ability to re-enable flows which are stopped or suspended, and the flow run history of the selected flow.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-flow-dashboard",
    "longDescription": [
      "This web part demonstrates displaying the list of flows in different environments, ability to re-enable flows which are stopped or suspended, and the flow run history of the selected flow."
    ],
    "creationDateTime": "2023-08-03",
    "updateDateTime": "2023-08-03",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.4"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-flow-dashboard/assets/Dashboard.gif",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-flow-dashboard/assets/Flowrunhistory.gif",
        "alt": "Flow run history preview"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-flow-dashboard/assets/Enablingflows.gif",
        "alt": "Enabling flows Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "NishkalankBezawada",
        "pictureUrl": "https://github.com/NishkalankBezawada.png",
        "name": "NIshkalank Bezawada"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-fluentui-9",
    "source": "pnp",
    "title": "Using Fluent UI 9 in SPFx web part",
    "shortDescription": "description",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-fluentui-9",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-fluentui-9",
    "longDescription": [
      "description"
    ],
    "creationDateTime": "2022-04-20",
    "updateDateTime": "2024-01-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-fluentui-9/assets/FQzNLB4XwAIFMRh.jpg",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-fluentui-9/assets/FQzO9YjWUAgFlrU.jpg",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "techienickb",
        "pictureUrl": "https://github.com/techienickb.png",
        "name": "Nick Brown"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-fluentui-theme-variant",
    "source": "pnp",
    "title": "Fluent UI Theme Variant Web Part",
    "shortDescription": "An example of how to apply a custom theme or a variation of the current SharePoint theme directly to the web part",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-fluentui-theme-variant",
    "longDescription": [
      "This web part provides an example of how to apply a custom theme or a variation of the current SharePoint theme directly to the web part.",
      "In this way it is possible to implement the same mechanism that is currently implemented by default by the SharePoint page sections"
    ],
    "creationDateTime": "2021-08-09",
    "updateDateTime": "2021-08-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-fluentui-theme-variant/assets/preview.gif",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "fabiofranzini",
        "pictureUrl": "https://github.com/fabiofranzini.png",
        "name": "Fabio Franzini"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-follow-document",
    "source": "pnp",
    "title": "Follow Document Web Part",
    "shortDescription": "react-follow-document",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-follow-document",
    "longDescription": [
      "identify/follow user key documents from all Tenant and easily access them in Modern Pages and Microsoft Teams"
    ],
    "creationDateTime": "2021-06-21",
    "updateDateTime": "2022-05-17",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-follow-document/assets/FollowDocumentSample1.gif",
        "alt": "react-follow-document"
      },
      {
        "type": "video",
        "order": 101,
        "url": "https://www.youtube.com/embed/Wx7nqlP3WQU",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "aaclage",
        "pictureUrl": "https://github.com/aaclage.png",
        "name": "André Lage"
      },
      {
        "gitHubAccount": "Maya-Mostafa",
        "pictureUrl": "https://github.com/Maya-Mostafa.png",
        "name": "Mai Mostafa"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-followed-drag-and-drop-grid",
    "source": "pnp",
    "title": "Followed Drag and Drop Grid Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-followed-drag-and-drop-grid",
    "longDescription": [
      "YOUR-SHORT-DESCRIPTION"
    ],
    "creationDateTime": "2022-01-09",
    "updateDateTime": "2022-01-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.13.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-followed-drag-and-drop-grid/assets/mainImage.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-followed-drag-and-drop-grid/assets/appInTeams.png",
        "alt": "App in Teams"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-followed-drag-and-drop-grid/assets/nothingToFollow.png",
        "alt": "Nothisg to follow"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-followed-drag-and-drop-grid/assets/sorting.gif",
        "alt": "Sorting"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-followed-drag-and-drop-grid/assets/dataAsJson.png",
        "alt": "Data as JSON"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-followed-drag-and-drop-grid/assets/linkSavedInJsonFile.png",
        "alt": "Link saved to JSON file"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Adam-it",
        "pictureUrl": "https://github.com/Adam-it.png",
        "name": "Adam Wójcik"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-followedsites",
    "source": "pnp",
    "title": "Followed Sites Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-followedsites",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-05-13",
    "updateDateTime": "2020-05-13",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-followed-sites.gif",
        "alt": "Followed Sites"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "eoverfield",
        "company": "PixelMill",
        "pictureUrl": "https://github.com/eoverfield.png",
        "name": "Eric Overfield",
        "twitter": "EricOverfield"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-functional-component",
    "source": "pnp",
    "title": "React Functional Component Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-functional-component",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-06-05",
    "updateDateTime": "2019-06-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.2"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-functional-component/Screenshot.png",
        "alt": "React Functional Component web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "SPDoctor",
        "company": "Flow Simulation Ltd.",
        "pictureUrl": "https://avatars.githubusercontent.com/u/10207194?s=460&v=4",
        "name": "Bill Ayers",
        "twitter": "SPDoctor"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-functional-component-with-data-fetch",
    "source": "pnp",
    "title": "React Functional Component web part with data fetch",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-functional-component-with-data-fetch",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-06-14",
    "updateDateTime": "2023-10-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-functional-component-with-data-fetch/assets/Screenshot.png",
        "alt": "React Functional Component web part with data fetch"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "SPDoctor",
        "pictureUrl": "https://avatars.githubusercontent.com/u/10207194?s=460&v=4",
        "name": "Bill Ayers",
        "twitter": "SPDoctor"
      },
      {
        "gitHubAccount": "DonKirkham",
        "pictureUrl": "https://github.com/DonKirkham.png",
        "name": "Don Kirkham"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-functional-servicescope-hooks",
    "source": "pnp",
    "title": "Consuming SPFX Service Scopes using React Hooks",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-functional-servicescope-hooks",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-03-25",
    "updateDateTime": "2020-03-25",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-functional-servicescope-hooks/webpart.png",
        "alt": "Consuming SPFX Service Scopes using React Hooks"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "garrytrinder",
        "company": "CPS Global",
        "pictureUrl": "https://github.com/garrytrinder.png",
        "name": "Garry Trinder",
        "twitter": "garrytrinder"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-functional-stateful-component",
    "source": "pnp",
    "title": "React Functional Stateful Component web part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-functional-stateful-component",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-06-05",
    "updateDateTime": "2019-06-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-functional-stateful-component/Screenshot.png",
        "alt": "React Functional Stateful Component web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "SPDoctor",
        "company": "Flow Simulation Ltd.",
        "pictureUrl": "https://avatars.githubusercontent.com/u/10207194?s=460&v=4",
        "name": "Bill Ayers",
        "twitter": "SPDoctor"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-github-badge",
    "source": "pnp",
    "title": "GitHub Badge Web Part (React)",
    "shortDescription": "Displays information about a GitHub user.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-github-badge",
    "longDescription": [
      "Displays information about a GitHub user."
    ],
    "creationDateTime": "2019-06-06",
    "updateDateTime": "2019-06-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-github-badge/assets/githubbadge.png",
        "alt": "GitHub Badge (React)"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "hugoabernier",
        "company": "Tahoe Ninjas",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier",
        "twitter": "bernierh"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-global-news",
    "source": "pnp",
    "title": "Global News Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-global-news",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-04-14",
    "updateDateTime": "2020-04-14",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      },
      {
        "key": "SPFX-FULLPAGEAPP",
        "value": "true"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSPERSONALAPP",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-global-news/assets/GlobalNews.png",
        "alt": "Global News"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-global-news/assets/globalNews.gif?raw=true",
        "alt": "Global News"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-global-news/assets/news.jpg?raw=true",
        "alt": "Global News"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Using single part app pages in SharePoint Online",
        "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-global-news-sp2019",
    "source": "pnp",
    "title": "Global News Web Part (SP2019)",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-global-news-sp2019",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2021-05-22",
    "updateDateTime": "2021-05-22",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      },
      {
        "key": "SPFX-FULLPAGEAPP",
        "value": "true"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "false"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "false"
      },
      {
        "key": "SPFX-TEAMSPERSONALAPP",
        "value": "false"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-global-news-sp2019/assets/GlobalNews02.png",
        "alt": "Global News"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-global-news-sp2019/assets/GlobalNews.png",
        "alt": "Global News"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-global-news-sp2019/assets/GlobalNews01.png",
        "alt": "Global News"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Using single part app pages in SharePoint Online",
        "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-google-fit",
    "source": "pnp",
    "title": "Web part displaying Google Fit information",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-google-fit",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-01-14",
    "updateDateTime": "2019-01-14",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.7.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-google-fit/assets/webpart-preview.png",
        "alt": "Web part displaying Google Fit information"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-google-fit/assets/add-authorized-origins.png?raw=true",
        "alt": "Web part displaying Google Fit information"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-google-fit/assets/add-credentials-to-your-project.png?raw=true",
        "alt": "Web part displaying Google Fit information"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-google-fit/assets/create-new-project.png?raw=true",
        "alt": "Web part displaying Google Fit information"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-google-fit/assets/generate-credentials.png?raw=true",
        "alt": "Web part displaying Google Fit information"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-google-fit/assets/oauth-clientid.png?raw=true",
        "alt": "Web part displaying Google Fit information"
      },
      {
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-google-fit/assets/setup-oauth-consent.png?raw=true",
        "alt": "Web part displaying Google Fit information"
      },
      {
        "type": "image",
        "order": 107,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-google-fit/assets/sharepoint-run.gif?raw=true",
        "alt": "Web part displaying Google Fit information"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "nanddeepn",
        "company": "",
        "pictureUrl": "https://github.com/nanddeepn.png",
        "name": "Nanddeep Nachan",
        "twitter": "NanddeepNachan"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-governor-sharing",
    "source": "pnp",
    "title": "Governor Sharing Web Part",
    "shortDescription": "Shows documents which have been (explicitly) shared within a SharePoint site or Team.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-governor-sharing",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-governor-sharing",
    "longDescription": [
      "Shows documents which have been (explicitly) shared within a SharePoint site or Team."
    ],
    "creationDateTime": "2023-11-24",
    "updateDateTime": "2023-11-24",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.0"
      }
    ],
    "thumbnails": [
      {
        "name": "Govenor_Sharing_SharedItemsExample.png",
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/Govenor_Sharing_SharedItemsExample.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "debug.png",
        "type": "image",
        "order": 108,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/debug.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "Govenor_Sharing_AddedtoTeam.png",
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/Govenor_Sharing_AddedtoTeam.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "Govenor_Sharing_AddtoSharePointSite.png",
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/Govenor_Sharing_AddtoSharePointSite.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "Govenor_Sharing_AddtoTeam.png",
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/Govenor_Sharing_AddtoTeam.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "Govenor_Sharing_AddtoTeamTab.png",
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/Govenor_Sharing_AddtoTeamTab.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "Govenor_Sharing_AddtoTeam_Save.png",
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/Govenor_Sharing_AddtoTeam_Save.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "Govenor_Sharing_AddtoTeam_Search.png",
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/Govenor_Sharing_AddtoTeam_Search.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "Govenor_Sharing_AddtoTeam_SelectTeam.png",
        "type": "image",
        "order": 107,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/Govenor_Sharing_AddtoTeam_SelectTeam.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "screenshot.png",
        "type": "image",
        "order": 109,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/screenshot.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "screenshot2.png",
        "type": "image",
        "order": 110,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/screenshot2.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "SharePoint_Admin_Center_API_Consent.png",
        "type": "image",
        "order": 111,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/SharePoint_Admin_Center_API_Consent.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "SharePoint_Admin_Center_API_Consent_Approve.png",
        "type": "image",
        "order": 112,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/SharePoint_Admin_Center_API_Consent_Approve.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "SharePoint_Admin_Center_Enable_app.png",
        "type": "image",
        "order": 113,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/SharePoint_Admin_Center_Enable_app.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "SharePoint_Admin_Center_Manage_apps.png",
        "type": "image",
        "order": 114,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/SharePoint_Admin_Center_Manage_apps.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "SharePoint_Admin_Center__Remove_API_Consent.png",
        "type": "image",
        "order": 115,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/SharePoint_Admin_Center__Remove_API_Consent.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "Teams_Admin_Center_Manage_apps.png",
        "type": "image",
        "order": 116,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/Teams_Admin_Center_Manage_apps.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "Teams_Admin_Center_Manage_apps_Upload.png",
        "type": "image",
        "order": 117,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/Teams_Admin_Center_Manage_apps_Upload.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "Teams_Admin_Center_Manage_apps_Uploaded.png",
        "type": "image",
        "order": 118,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/Teams_Admin_Center_Manage_apps_Uploaded.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "Troubleshooting_Teams_App_Already_Exists.png",
        "type": "image",
        "order": 119,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-governor-sharing/assets/Troubleshooting_Teams_App_Already_Exists.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "robinmeure",
        "pictureUrl": "https://github.com/robinmeure.png",
        "name": "Robin Meure"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-graph-app-secret-expiration",
    "source": "pnp",
    "title": "Applications Secrets Expiration Web Part",
    "shortDescription": "This sample web part shows the list of your applications registered in Azure AD along with their associated client secret/certificate expiration date.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-app-secret-expiration",
    "longDescription": [
      "This sample web part shows the list of your applications registered in Azure AD along with their associated client secret/certificate expiration date."
    ],
    "creationDateTime": "2021-09-17",
    "updateDateTime": "2023-03-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      },
      {
        "key": "PNPCONTROLS",
        "value": "Pagination"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-app-secret-expiration/assets/react-graph-app-secret-expiration-animated.gif",
        "alt": "Preview of web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "a1mery",
        "pictureUrl": "https://github.com/a1mery.png",
        "name": "Aimery Thomas",
        "twitter": "aimery_thomas"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-graph-auto-batching",
    "title": "Graph Auto Batching Web Part",
    "source": "pnp",
    "shortDescription": "This sample shows how to abstract batching graph requests",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-auto-batching",
    "longDescription": [
      "This sample shows how to abstract batching Graph requests"
    ],
    "creationDateTime": "2022-02-03",
    "updateDateTime": "2022-02-03",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.13.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/gh-pages/img/_nopreview.png",
        "alt": "No preview available"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "mgwojciech",
        "pictureUrl": "https://github.com/mgwojciech.png",
        "name": "Marcin Wojciechowski",
        "company": "Valo"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-graph-azureapps",
    "source": "pnp",
    "title": "Azure Apps Web Part",
    "shortDescription": "This sample web part shows list of Azure apps in your tenant. A new Azure application can also be registered and can be edited using this web part.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-azureapps",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-azureapps",
    "longDescription": [
      "This sample web part shows list of Azure apps in your tenant. A new Azure application can also be registered and can be edited using this web part."
    ],
    "creationDateTime": "2023-05-07",
    "updateDateTime": "2023-05-07",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-azureapps/assets/Add-New-App.gif",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-azureapps/assets/Edit-App.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Diksha-Bhura",
        "pictureUrl": "https://github.com/Diksha-Bhura.png",
        "name": "Diksha Bhura"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-graph-calendar",
    "source": "pnp",
    "title": "Graph Calendar Web Part",
    "shortDescription": "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.).",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-calendar",
    "longDescription": [
      "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.)."
    ],
    "creationDateTime": "2020-11-06",
    "updateDateTime": "2020-11-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSPERSONALAPP",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-calendar/assets/react-graph-calendar-spo.gif",
        "alt": "Graph Calendar Web Part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-graph-calendar/assets/react-graph-calendar-teams.gif?raw=true",
        "alt": "Graph Calendar Web Part"
      },
      {
        "type": "video",
        "order": 102,
        "url": "https://www.youtube.com/embed/1R1Ed3rdwts",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "sebastienlevert",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/sebastienlevert.png",
        "name": "Sébastien Levert",
        "twitter": "sebastienlevert"
      },
      {
        "gitHubAccount": "Abderahman88",
        "company": "",
        "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4",
        "name": "Abderahman Moujahid"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-graph-cascading-managed-metadata",
    "source": "pnp",
    "title": "Cascading managed metadata Web Part using Graph API",
    "shortDescription": "Shows how to use the Microsoft Graph APIs (beta) for Taxonomy to get the data.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-cascading-managed-metadata",
    "longDescription": [
      "Shows how to use the Microsoft Graph APIs (beta) for Taxonomy to get the data."
    ],
    "creationDateTime": "2020-09-02",
    "updateDateTime": "2022-03-02",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.14.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-cascading-managed-metadata/assets/cmmd.gif",
        "alt": "Cascading managed metadata using Graph API"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-graph-cascading-managed-metadata/assets/termstore.png?raw=true",
        "alt": "Cascading managed metadata using Graph API"
      },
      {
        "type": "video",
        "order": 102,
        "url": "https://www.youtube.com/embed/lk47ijo_H6Y",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "anoopt",
        "company": "Content +Cloud",
        "pictureUrl": "https://avatars.githubusercontent.com/u/9694225?s=460&u=fbb4b27ed944935800d5f6dbc91e71911ce0d4ec&v=4",
        "name": "Anoop Tatti",
        "twitter": "anooptells"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-graph-evalurl",
    "source": "pnp",
    "title": "Web part showing Url validation for SharePoint using Office Graph",
    "shortDescription": "This sample contains a class that evaluates the url input of a text field against the Microsoft Graph.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-evalurl",
    "longDescription": [
      "This sample contains a class that evaluates the url input of a text field against the Microsoft Graph."
    ],
    "creationDateTime": "2018-04-15",
    "updateDateTime": "2018-04-15",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-evalurl/assets/url-graph-eval.gif",
        "alt": "Web part showing Url validation for SharePoint using Office Graph"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-graph-evalurl/assets/eval-web-after-site-collection.png?raw=true",
        "alt": "Web part showing Url validation for SharePoint using Office Graph"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-graph-evalurl/assets/evaluation-client-searching-for-site-collection.png?raw=true",
        "alt": "Web part showing Url validation for SharePoint using Office Graph"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "StfBauer",
        "company": "N8D",
        "pictureUrl": "https://github.com/StfBauer.png",
        "name": "Stefan Bauer",
        "twitter": "stfbauer"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-graph-feedback-form",
    "source": "pnp",
    "title": "Feedback Form Web Part",
    "shortDescription": "Sample SPFx React web part which allows sending emails using Microsoft Graph.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-feedback-form",
    "longDescription": [
      "Sample SPFx React web part which allows sending emails using Microsoft Graph."
    ],
    "creationDateTime": "2020-05-15",
    "updateDateTime": "2020-05-15",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-feedback-form/assets/preview.gif",
        "alt": "Feedback Form"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "hugoabernier",
        "company": "Tahoe Ninjas",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier",
        "twitter": "bernierh"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-graph-groupviewer",
    "source": "pnp",
    "title": "Graph Group Viewer Web Part",
    "shortDescription": "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",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-groupviewer",
    "longDescription": [
      "This webpart will provide the functionality to search for groups in your tenant and allow you to view the details of the selected group as well as view a list of group members and export the list of members to a CSV file"
    ],
    "creationDateTime": "2021-09-27",
    "updateDateTime": "2021-09-27",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-groupviewer/assets/preview.gif",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "zachroberts8668",
        "company": "",
        "pictureUrl": "https://github.com/zachroberts8668.png",
        "name": "Zach Roberts"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-graph-mgt-client",
    "source": "pnp",
    "title": "Graph MGT Client Web Part",
    "shortDescription": "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. ",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-mgt-client",
    "longDescription": [
      "This is a sample web part developed using React Framework that showcases how to use the latest `microsoft-graph-client` in order to do advanced configuration of the Microsoft Graph client.",
      "This enables scenarios like throttling management, Chaos management and a lot more!"
    ],
    "creationDateTime": "2021-04-18",
    "updateDateTime": "2021-04-18",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-mgt-client/assets/DemoGraphClient.gif",
        "alt": "Web Part in action"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "sebastienlevert",
        "pictureUrl": "https://github.com/sebastienlevert.png",
        "name": "Sébastien Levert",
        "twitter": "sebastienlevert"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-graph-personalemail",
    "source": "pnp",
    "title": "Personal e-mail Web Part",
    "shortDescription": "Sample React web part showing how to retrieve and display personal e-mail retrieved using the Microsoft Graph.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-personalemail",
    "longDescription": [
      "Sample React web part showing how to retrieve and display personal e-mail retrieved using the Microsoft Graph."
    ],
    "creationDateTime": "2018-10-03",
    "updateDateTime": "2018-10-03",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.6.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-personalemail/assets/preview.png",
        "alt": "Personal e-mail"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-graph-pnpjs",
    "source": "pnp",
    "title": "Web Part Using PnPJS with MS Graph",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-pnpjs",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-01-09",
    "updateDateTime": "2019-01-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.7.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-pnpjs/assets/summary.png",
        "alt": "Using PnPJS with MS Graph"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-graph-pnpjs/assets/approve-request.png?raw=true",
        "alt": "Using PnPJS with MS Graph"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-graph-pnpjs/assets/approve.png?raw=true",
        "alt": "Using PnPJS with MS Graph"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "s-KaiNet",
        "company": "Mastaq",
        "pictureUrl": "https://github.com/s-KaiNet.png",
        "name": "Sergei Sergeev",
        "twitter": "sergeev_srg"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-graph-profile-awards",
    "source": "pnp",
    "title": "My Awards Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-profile-awards",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-profile-awards",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2022-06-02",
    "updateDateTime": "2022-06-02",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-profile-awards/assets/react-graph-profile-awards.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "luismanez",
        "pictureUrl": "https://github.com/luismanez.png",
        "name": "Luis Mañez"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-graph-reports",
    "source": "pnp",
    "title": "Graph Usage Reports Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-reports",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-04-09",
    "updateDateTime": "2019-04-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-reports/assets/react-graph-reports.gif",
        "alt": "Graph Usage Reports"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-graph-reports/assets/graph-api-permissions-usage-reports.png?raw=true",
        "alt": "Graph Usage Reports"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ejazhussain",
        "company": "Content and Code",
        "pictureUrl": "https://github.com/ejazhussain.png",
        "name": "Ejaz Hussain",
        "twitter": "EjazHussain_"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-graph-schema-extensions",
    "source": "pnp",
    "title": "Read / update MS Graph Custom Schema Extensions Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-schema-extensions",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-07-03",
    "updateDateTime": "2018-07-03",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.5.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-schema-extensions/assets/webpart.png",
        "alt": "Read / update MS Graph Custom Schema Extensions"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "luismanez",
        "company": "ClearPeople",
        "pictureUrl": "https://github.com/luismanez.png",
        "name": "Luis Mañez"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-graph-telephonedirectory",
    "source": "pnp",
    "title": "Telephone Directory Web Part using React, Ms Graph and SPFx",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-telephonedirectory",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-11-07",
    "updateDateTime": "2023-03-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-graph-telephonedirectory/assets/Preview.gif",
        "alt": "Telephone Directory using React, Ms Graph and SPFx"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-graph-telephonedirectory/assets/Capture.PNG?raw=true",
        "alt": "Telephone Directory using React, Ms Graph and SPFx"
      },
      {
        "type": "video",
        "order": 102,
        "url": "https://www.youtube.com/embed/5ArJneWBy8s  ",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "dips365",
        "company": "",
        "pictureUrl": "https://avatars.githubusercontent.com/u/40450958?s=460&u=77f108fb56adbed4f87304f15ce71033df667aaf&v=4",
        "name": "Dipen Shah",
        "twitter": "Dips_365"
      },
      {
        "gitHubAccount": "a1mery",
        "company": "",
        "pictureUrl": "https://avatars.githubusercontent.com/u/7100077?s=460&v=4",
        "name": "Aimery Thomas",
        "twitter": "aimery_thomas"
      },
      {
        "gitHubAccount": "mrkhandev",
        "pictureUrl": "https://github.com/mrkhandev.png",
        "name": "mrkhandev"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-graph-webpart-report",
    "source": "pnp",
    "title": "Web Part Report",
    "shortDescription": "This sample web part shows a report of the web parts used on the current site.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-webpart-report",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-webpart-report",
    "longDescription": [
      "This sample web part shows a report of the web parts used on the current site."
    ],
    "creationDateTime": "2023-05-13",
    "updateDateTime": "2023-07-11",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/main/samples/react-graph-webpart-report/assets/Animated.gif",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 200,
        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/main/samples/react-graph-webpart-report/assets/chartView.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 300,
        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/main/samples/react-graph-webpart-report/assets/listView.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "a1mery",
        "pictureUrl": "https://github.com/a1mery.png",
        "name": "Aimery Thomas"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-group-membership-manager",
    "source": "pnp",
    "title": "Group Membership Manager Web Part",
    "shortDescription": "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",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-group-membership-manager",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-group-membership-manager",
    "longDescription": [
      "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"
    ],
    "creationDateTime": "2022-08-25",
    "updateDateTime": "2023-05-15",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-group-membership-manager/assets/group-membership-manager.gif",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-group-membership-manager/assets/screenshot.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "techienickb",
        "pictureUrl": "https://github.com/techienickb.png",
        "name": "Nick Brown"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-groups-teams",
    "source": "pnp",
    "title": "All Microsoft 365 Groups and Teams Web Part",
    "shortDescription": "Web part pulls all Microsoft 365 Groups and Teams that the logged in user has access to view.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-groups-teams",
    "longDescription": [
      "Web part pulls all Microsoft 365 Groups and Teams that the logged in user has access to view."
    ],
    "creationDateTime": "2021-05-06",
    "updateDateTime": "2023-02-26",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-groups-teams/assets/Card-Display.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-groups-teams/assets/Table-Display.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-groups-teams/assets/Theme-Display.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "video",
        "order": 103,
        "url": "https://www.youtube.com/watch?v=MakgCyOq9tk",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ReactIntern",
        "pictureUrl": "https://github.com/ReactIntern.png",
        "name": "Alison Collins"
      },
      {
        "gitHubAccount": "PathToSharePoint",
        "pictureUrl": "https://github.com/PathToSharePoint.png",
        "name": "Christophe Humbert"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-hero-webpart",
    "source": "pnp",
    "title": "Hero Web Part",
    "shortDescription": "This solution creates a customisable Hero web part, it uses a stored collection from the PnP PropertyFieldCollectionData control ",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-hero-webpart",
    "longDescription": [
      "This solution creates a customisable Hero web part, it uses a stored collection from the PnP PropertyFieldCollectionData control "
    ],
    "creationDateTime": "2021-04-02",
    "updateDateTime": "2022-03-11",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-hero-webpart/assets/Hero-Webpart.gif",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "omarelanis",
        "pictureUrl": "https://github.com/omarelanis.png",
        "name": "Omar El-Anis"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-holidays-calendar",
    "source": "pnp",
    "title": "Holiday Calendar Web Part",
    "shortDescription": "Holiday calendar solution contains SPFx web part and Adaptive card extension for Viva connections.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-holidays-calendar",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-holidays-calendar",
    "longDescription": [
      "Holiday calendar solution contains SPFx web part and Adaptive card extension for Viva connections."
    ],
    "creationDateTime": "2023-01-09",
    "updateDateTime": "2023-11-30",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-holidays-calendar/assets/209691198-4d0cbc31-f0d4-49c8-a1b5-ae8701406221.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-holidays-calendar/assets/209691123-03ac3c5d-cc8e-490e-8cb2-837539914db8.png",
        "alt": "List dependency"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "HarminderSethi",
        "pictureUrl": "https://github.com/HarminderSethi.png",
        "name": "Harminder Singh"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-hooks",
    "source": "pnp",
    "title": "React Hooks Form Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-hooks",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-08-19",
    "updateDateTime": "2019-08-19",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-hooks/assets/webpart.PNG",
        "alt": "React Hooks Form Web Part"
      }
    ],
    "authors": [
      {
        "name": "Adrian Diaz Cervera",
        "gitHubAccount": "AdrianDiaz81",
        "pictureUrl": "https://github.com/AdrianDiaz81.png"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-htm-templating",
    "source": "pnp",
    "title": "HTM (Hyperscript Tagged Markup) Templating Web Part",
    "shortDescription": "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",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-htm-templating",
    "longDescription": [
      "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"
    ],
    "creationDateTime": "2021-08-04",
    "updateDateTime": "2021-08-04",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-htm-templating/assets/preview.gif",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "fabiofranzini",
        "pictureUrl": "https://github.com/fabiofranzini.png",
        "name": "Fabio Franzini"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-image-editor",
    "source": "pnp",
    "title": "Image Editor Web Part",
    "shortDescription": "This solution contains an SPFx web part that shows an HTML Image Editor based on canvas and Office UI Fabric",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-image-editor",
    "longDescription": [
      "This solution contains an SPFx web part that shows an HTML Image Editor based on canvas and Office UI Fabric ",
      "Key features of the Editor",
      "* Resize",
      "* Crop",
      "* Flip",
      "* Rotate",
      "* Scale",
      "* Filter (Grayscale / Sepia)",
      "* Redo / Undo",
      "* Histoy of Actions"
    ],
    "creationDateTime": "2021-03-17",
    "updateDateTime": "2021-03-17",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.0"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "false"
      },
      {
        "key": "PNPCONTROLS",
        "value": "WebPartTitle, Placeholder, FilePicker"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-image-editor/assets/react-image-editor.gif",
        "alt": "React Image Editor Web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "petkir",
        "company": "Cubido Business Solutions GmbH",
        "pictureUrl": "https://github.com/petkir.png",
        "name": "Peter Paul Kirschner",
        "twitter": "petkir_at"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-image-gallery",
    "source": "pnp",
    "title": "Filterable Image Gallery Web Part",
    "shortDescription": "This sample describe a SPFX application which implement an image gallery with taxonomy base filtering and typed search. This application also implement pagination.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-image-gallery",
    "longDescription": [
      "This sample describe a SPFX application which implement an image gallery with taxonomy base filtering and typed search. This application also implement pagination."
    ],
    "creationDateTime": "2019-03-01",
    "updateDateTime": "2022-05-23",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.14.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-image-gallery/assets/image-gallery.gif",
        "alt": "Filterable Image Gallery Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ejazhussain",
        "company": "Content and Code",
        "pictureUrl": "https://github.com/ejazhussain.png",
        "name": "Ejaz Hussain",
        "twitter": "EjazHussain_"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-image-magnifier",
    "source": "pnp",
    "title": "Image Magnifier Web Part",
    "shortDescription": "This web part allow to magnify an image, displaying a resolution more detailed through a lens.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-image-magnifier",
    "longDescription": [
      "This web part allow to magnify an image, displaying a resolution more detailed through a lens."
    ],
    "creationDateTime": "2017-09-17",
    "updateDateTime": "2017-09-17",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-image-magnifier/assets/spfx-react-image-magnifier.gif",
        "alt": "Image Magnifier"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "giuleon",
        "company": "",
        "pictureUrl": "https://github.com/giuleon.png",
        "name": "Giuliano De Luca",
        "twitter": "delucagiulian"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-image-slider-list-taxonomy-filter",
    "source": "pnp",
    "title": "Image Slider from Photo Gallery using Taxonomy Filter Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-image-slider-list-taxonomy-filter",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-03-01",
    "updateDateTime": "2019-03-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.6.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-image-slider-list-taxonomy-filter/assets/ImageSlider.gif",
        "alt": "Image Slider from Photo Gallery using Taxonomy Filter"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "sudhir007rawat",
        "company": "HCL America",
        "pictureUrl": "https://github.com/sudhir007rawat.png",
        "name": "Sudhir Rawat"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-instagram",
    "source": "pnp",
    "title": "Instagram Feed Web Part",
    "shortDescription": "Sample web part to showcase an Instagram feed.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-instagram",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-instagram",
    "longDescription": [
      "Sample web part to showcase an Instagram feed."
    ],
    "creationDateTime": "2023-03-12",
    "updateDateTime": "2023-03-12",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-instagram/assets/instagram-feed.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "reshmee011",
        "pictureUrl": "https://github.com/reshmee011.png",
        "name": "Reshmee Auckloo"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-interactive-map",
    "source": "pnp",
    "title": "Interactive Map Web Part",
    "shortDescription": "This web parts displays a (world) map. An editor can set custom markers directly in the map. Each marker can configured individually.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-interactive-map",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-interactive-map",
    "longDescription": [
      "This web parts displays a (world) map. An editor can set custom markers directly in the map. Each marker can configured individually."
    ],
    "creationDateTime": "2023-01-31",
    "updateDateTime": "2023-01-31",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/main/samples/react-interactive-map/assets/WPPreview.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "SPFxAppDev",
        "pictureUrl": "https://github.com/SPFxAppDev.png",
        "name": "Sergej Schwabauer"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-invitation-manager",
    "source": "pnp",
    "title": "Azure Active Directory invitation manager Graph API samples",
    "shortDescription": "Sample SharePoint Framework web parts built using React illustrating the possibility to use Graph API to invite external users into the Azure Active Directory.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-invitation-manager",
    "longDescription": [
      "Sample SharePoint Framework web parts built using React illustrating the possibility to use Graph API to invite external users into the Azure Active Directory."
    ],
    "creationDateTime": "2017-10-09",
    "updateDateTime": "2017-10-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.3.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-invitation-manager/assets/SPFx-Invitation-Manager.gif",
        "alt": "Azure Active Directory invitation manager Graph API samples"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "giuleon",
        "company": "",
        "pictureUrl": "https://github.com/giuleon.png",
        "name": "Giuliano De Luca",
        "twitter": "delucagiulian"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-invoice-generator",
    "source": "pnp",
    "title": "Invoice Generator Web Part",
    "shortDescription": "SPFx Invoice Generator Web part using PnP JS allows users to create invoices for different clients or customers.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-invoice-generator",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-invoice-generator",
    "longDescription": [
      "SPFx Invoice Generator Web part using PnP JS allows users to create invoices for different clients or customers."
    ],
    "creationDateTime": "2023-06-12",
    "updateDateTime": "2023-06-12",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/main/samples/react-invoice-generator/assets/invoice.PNG",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "rishabhshukla12",
        "pictureUrl": "https://github.com/rishabhshukla12.png",
        "name": "Rishabh Shukla"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-ioc-tests",
    "source": "pnp",
    "title": "React Inversion Of Control Web Part with Unit Tests using Jest and Enzyme",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-ioc-tests",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-03-20",
    "updateDateTime": "2019-03-20",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-ioc-tests/assets/preview.jpg",
        "alt": "React Inversion Of Control Web Part with Unit Tests using Jest and Enzyme"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "paulryan",
        "company": "",
        "pictureUrl": "https://github.com/paulryan.png",
        "name": "Paul Ryan"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-item-History",
    "source": "pnp",
    "title": "Item History Web Part",
    "shortDescription": "This listview command is used to show the past versions of the selected list item in a grid.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-item-History",
    "longDescription": [
      "This listview command is used to show the past versions of the selected list item in a grid."
    ],
    "creationDateTime": "2018-06-15",
    "updateDateTime": "2018-06-15",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-item-History/Capture.PNG",
        "alt": "Item History"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "russgove",
        "company": "",
        "pictureUrl": "https://github.com/russgove.png",
        "name": "Russell Gove"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-jest-testing",
    "source": "pnp",
    "title": "React Jest Testing sample Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-jest-testing",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-06-23",
    "updateDateTime": "2019-06-23",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-jest-testing/assets/Jest-Typescript-VSCode-debugging.png",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-add-artifacts-to-release.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-add-job.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-add-release-task.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-all-build-steps-done.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-appcatalog.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-bash-args.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 107,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-bash.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 108,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-change-name.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 109,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-ci-enabled.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 110,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-edit-build.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 111,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-edit-continious.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 112,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-goto-build.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 113,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-goto-buld.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 114,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-new-project.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 115,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-new-release.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 116,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-node.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 117,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-node8.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 118,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-office365cli-script.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 119,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-overview.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 120,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-repo-config.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 121,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-repos.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 122,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-select-repo.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 123,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-select-template.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 124,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-spfx.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 125,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-success.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 126,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-suggest.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 127,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-ubuntu.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 128,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github-vars.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 129,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/config-Azure-Pipelines-in-Github.PNG?raw=true",
        "alt": "React Jest Testing sample"
      },
      {
        "type": "image",
        "order": 130,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-jest-testing/assets/SPFx-jest-coverage.png?raw=true",
        "alt": "React Jest Testing sample"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "VelinGeorgiev",
        "company": "",
        "pictureUrl": "https://github.com/VelinGeorgiev.png",
        "name": "Velin Georgiev"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-json-form",
    "source": "pnp",
    "title": "JSON form builder Web Part",
    "shortDescription": "Build a custom form with ease",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-json-form",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-json-form",
    "longDescription": [
      "Really easy way for the users to build and use a custom form without having to worry about having to setup a SharePoint list, instead stores the data directly in a document library"
    ],
    "creationDateTime": "2023-05-16",
    "updateDateTime": "2023-05-16",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-caml2table/assets/Demo.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Tanddant",
        "pictureUrl": "https://github.com/Tanddant.png",
        "name": "Dan Toft"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-kanban-board",
    "source": "pnp",
    "title": "Kanban Board Web part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-kanban-board",
    "longDescription": [
      "This solution contains an SPFx web part which shows a Kanban board. The web part uses the default columns of the SharePoint Tasks list for showing the board's columns and the tasks."
    ],
    "creationDateTime": "2020-07-02",
    "updateDateTime": "2024-05-26",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.19.0"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      },
      {
        "key": "PNPCONTROLS",
        "value": "PropertyFieldListPicker, PropertyFieldOrder, WebPartTitle, Placeholder"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-kanban-board/assets/kanbanofficeUI.gif",
        "alt": "Kanban Board Web part in action"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-kanban-board/assets/kanbanimg1.png",
        "alt": "Kanban Board Web part configuration of a bucket"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-kanban-board/assets/kanbanimg2.png",
        "alt": "Kanban Board Web part item View"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-kanban-board/assets/kanbanimg3.png",
        "alt": "Kanban Board Web part task list selection and status column order as bucket"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "RamPrasadMeenavalli",
        "company": "",
        "pictureUrl": "https://github.com/RamPrasadMeenavalli.png",
        "name": "Ram Prasad Meenavalli",
        "twitter": "ram_meenavalli"
      },
      {
        "gitHubAccount": "westerdaled",
        "company": "Westerdale Solutions Ltd",
        "pictureUrl": "https://avatars.githubusercontent.com/u/937208?s=460&v=4",
        "name": "Daniel Westerdale",
        "twitter": "westerdaled"
      },
      {
        "gitHubAccount": "petkir",
        "company": "ACP CUBIDO Digital Solutions GmbH",
        "pictureUrl": "https://github.com/petkir.png",
        "name": "Peter Paul Kirschner",
        "twitter": "petkir_at"
      },
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Sharepointalist",
        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4",
        "name": "Alex Terentiev",
        "twitter": "alexaterentiev"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-kiota-custom-api-client",
    "source": "pnp",
    "title": "React Kiota Custom API Client Web Part",
    "shortDescription": "Using Kiota to generate a client to your AzureAd API and use it from a SPFx webpart.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-kiota-custom-api-client",
    "longDescription": [
      "This sample shows how you can generate a client for your custom API using Kiota, and how to use that client in an SPFx webpart. The sample contains a custom API that is secured by Azure AD and interacts with Microsoft Graph API to do some basic operations with the Teams endpoint (it allows to list all the Teams in the tenant, to get detailed info for a given Team, and to Provision a new Team with some preconfigured channels)."
    ],
    "creationDateTime": "2022-11-11",
    "updateDateTime": "2022-11-11",
    "products": [
      "SharePoint",
      "Microsoft Teams",
      "AzureAD",
      "Microsoft Graph"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-kiota-custom-api-client/assets/react-kiota-custom-api-client.png",
        "alt": "React Kiota Custom API Client architecture"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "luismanez",
        "company": "ClearPeople",
        "pictureUrl": "https://github.com/luismanez.png",
        "name": "Luis Manez",
        "twitter": "luismanez"
      }
    ],
    "references": [
      {
        "name": "Getting started with SharePoint Framework",
        "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant"
      },
      {
        "name": "Microsoft Kiota",
        "description": "Official documentation about Microsoft Kiota.",
        "url": "https://microsoft.github.io/kiota/"
      },
      {
        "name": "Microsoft 365 Patterns and Practices",
        "description": "Guidance, tooling, samples and open-source controls for your Microsoft 365 development.",
        "url": "https://aka.ms/m365pnp"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-links",
    "source": "pnp",
    "title": "Links web part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-links",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-05-01",
    "updateDateTime": "2018-05-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-links.gif",
        "alt": "Links web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "eoverfield",
        "company": "PixelMill",
        "pictureUrl": "https://github.com/eoverfield.png",
        "name": "Eric Overfield",
        "twitter": "EricOverfield"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-list-form",
    "source": "pnp",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-list-form",
    "title": "List Form Web Part",
    "creationDateTime": "2017-11-24",
    "updateDateTime": "2022-09-05",
    "shortDescription": "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.",
    "longDescription": [
      "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."
    ],
    "products": [
      "SharePoint"
    ],
    "categories": [
      ""
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-list-form/assets/React-ListForm-Overview.gif",
        "alt": "List Form Web Part",
        "slides": null
      }
    ],
    "authors": [
      {
        "gitHubAccount": "DanyWyss",
        "name": "Dany Wyss",
        "company": "",
        "pictureUrl": "https://github.com/DanyWyss.png"
      },
      {
        "gitHubAccount": "Harshagracy",
        "company": "",
        "name": "Harsha Vardhini",
        "pictureUrl": "https://github.com/Harshagracy.png"
      },
      {
        "gitHubAccount": "sharepointknight",
        "company": "",
        "name": "Ryan Schouten",
        "pictureUrl": "https://github.com/sharepointknight.png"
      },
      {
        "gitHubAccount": "Abderahman88",
        "company": "",
        "name": "Abderahman Moujahid",
        "pictureUrl": "https://github.com/Abderahman88.png"
      },
      {
        "gitHubAccount": "fthorild",
        "name": "Fredrik Thorild",
        "company": "Sogeti Sweden",
        "pictureUrl": "https://github.com/fthorild.png"
      },
      {
        "gitHubAccount": "AriGunawan",
        "name": "Ari Gunawan",
        "company": "",
        "pictureUrl": "https://github.com/AriGunawan.png"
      }
    ],
    "references": []
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-list-items-menu",
    "source": "pnp",
    "title": "List Items Menu Web Part",
    "shortDescription": "Allows user create a navigation menu , grouped by any column of document library. When the user clicks on the header it dynamically load documents.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-list-items-menu",
    "longDescription": [
      "Allows user create a navigation menu , grouped by any column of document library. When the user clicks on the header it dynamically load documents."
    ],
    "creationDateTime": "2021-02-18",
    "updateDateTime": "2021-10-31",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.13.0"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSPERSONALAPP",
        "value": "true"
      },
      {
        "key": "PNPCONTROLS",
        "value": "PropertyFieldListPicker, PropertyFieldMessage, PropertyFieldSpinner"
      },
      {
        "key": "REACT-HOOKS",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-list-items-menu/assets/ListMenuDocs.gif",
        "alt": "List Items Menu"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-list-items-menu/assets/reactListItems1.JPG?raw=true",
        "alt": "List Items Menu"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-list-items-menu/assets/reactListItems2.JPG?raw=true",
        "alt": "List Items Menu"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-list-items-menu/assets/reactListItems3.JPG?raw=true",
        "alt": "List Items Menu"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      },
      {
        "gitHubAccount": "mohammadamer",
        "company": "Atea Global Services",
        "pictureUrl": "https://avatars.githubusercontent.com/u/19314043?s=460&u=79acb7fd0ad466e1040ddd8a739fa93385018b81&v=4",
        "name": "Mohammed Amer",
        "twitter": "Mohammad3mer"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-list-items-menu-sp2019",
    "source": "pnp",
    "title": "List Items Menu (SP2019 Version)",
    "shortDescription": "Allows user create a navigation menu , grouped by any column of document library. When the user clicks on the header it dynamically load documents.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-list-items-menu-sp2019",
    "longDescription": [
      "Allows user create a navigation menu , grouped by any column of document library. When the user clicks on the header it dynamically load documents."
    ],
    "creationDateTime": "2021-05-06",
    "updateDateTime": "2021-05-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-list-items-menu-sp2019/assets/react-list-item-menu.gif",
        "alt": "List Items Menu"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-list-items-menu-sp2019/assets/react-list-item-menu.png?raw=true",
        "alt": "List Items Menu"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-list-items-menu-sp2019/assets/react-list-item-menu2.png?raw=true",
        "alt": "List Items Menu"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-list-search",
    "source": "pnp",
    "title": "List Search Web Part",
    "shortDescription": "This list search web part allows the user to show data from lists or libraries.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-list-search",
    "longDescription": [
      "This list search web part allows the user to show data from lists or libraries."
    ],
    "creationDateTime": "2020-12-20",
    "updateDateTime": "2022-07-11",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      },
      {
        "key": "PNPCONTROLS",
        "value": "IFrameDialog, FileTypeIcon, PropertyFieldCollectionData, PropertyFieldSitePicker, PropertyFieldNumber, Placeholder, PropertyFieldMultiSelect, PropertyPaneWebPartInformation"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-list-search/assets/differentSources.gif",
        "alt": "List Search"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-list-search/assets/docInModal.gif?raw=true",
        "alt": "List Search"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-list-search/assets/docInNewTab.gif?raw=true",
        "alt": "List Search"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-list-search/assets/dynamicData.gif?raw=true",
        "alt": "List Search"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-list-search/assets/itemCurrentData.gif?raw=true",
        "alt": "List Search"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-list-search/assets/itemSelectedData.gif?raw=true",
        "alt": "List Search"
      },
      {
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-list-search/assets/redirectToUrl.gif?raw=true",
        "alt": "List Search"
      },
      {
        "type": "image",
        "order": 107,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-list-search/assets/selectFieldRenderType.gif?raw=true",
        "alt": "List Search"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "albegut",
        "company": "Minsait",
        "pictureUrl": "https://github.com/albegut.png",
        "name": "Alberto Gutierrez perez",
        "twitter": "albertogperez"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-lists-hide",
    "source": "pnp",
    "title": "Hide Lists Web Part",
    "shortDescription": "SPFx Web part to Hide/UnHide lists in a Site Collection's Site Contents Page.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-lists-hide",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-lists-hide",
    "longDescription": [
      "SPFx Web part to Hide/UnHide lists in a Site Collection's Site Contents Page."
    ],
    "creationDateTime": "2022-02-27",
    "updateDateTime": "2022-02-27",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.14"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-lists-hide/assets/ListHideWebPart.jpg",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-lists-hide/assets/listHidewp.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "SandeepDev365",
        "pictureUrl": "https://github.com/SandeepDev365.png",
        "name": "Sandeep Unnikrishnan"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-listview-context-ecb",
    "source": "pnp",
    "title": "Employee ListView Contextual Menu",
    "shortDescription": "This small sample illustrates how to extend the PnP React SPFx ListView control with a contextual menu.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-listview-context-ecb",
    "longDescription": [
      "This small sample illustrates how to extend the PnP React SPFx ListView control with a contextual menu."
    ],
    "creationDateTime": "2023-01-01",
    "updateDateTime": "2023-01-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-listview-context-ecb/assets/02_employeelistview_ecb3.png",
        "alt": "Context or ECB menu"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-listview-context-ecb/assets/03_employeelistview_ecb_clicked3.png",
        "alt": "Context or ECB menu action clicked"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "mmsharepoint",
        "pictureUrl": "https://github.com/mmsharepoint.png",
        "name": "Markus Moeller"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-lob-integration",
    "source": "pnp",
    "title": "LOB Integration web part",
    "shortDescription": "This web part allows you to learn how to consume 3rd party APIs, secured with Azure Active Directory, in the context of SharePoint Framework.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-lob-integration",
    "longDescription": [
      "This web part allows you to learn how to consume 3rd party APIs, secured with Azure Active Directory, in the context of SharePoint Framework."
    ],
    "creationDateTime": "2018-05-01",
    "updateDateTime": "2018-05-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-lob-integration.png",
        "alt": "LOB Integration web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "pnp",
        "pictureUrl": "https://github.com/pnp.png",
        "name": "Microsoft 365 & Power Platform Community"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-m365-services-health",
    "source": "pnp",
    "title": "Service Health for Microsoft 365 Web Part",
    "shortDescription": "Service Health for Microsoft 365 solution show the health status for all the Microsoft 365 services",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-m365-services-health",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-m365-services-health",
    "longDescription": [
      "Service Health for Microsoft 365 solution show the health status for all the M365 services"
    ],
    "creationDateTime": "2023-02-03",
    "updateDateTime": "2024-09-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.19.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-m365-services-health/assets/M365ServiceHealthDetail.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "HarminderSethi",
        "pictureUrl": "https://github.com/HarminderSethi.png",
        "name": "Harminder Singh"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-manage-hublevel-subscriptions",
    "source": "pnp",
    "title": "Subscription Manager Web Part",
    "shortDescription": "This sample web part demonstrates managing the list subscriptions (sharepoint webhooks) and action to renew the webhook expiration date using Rest calls.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-manage-hublevel-subscriptions",
    "longDescription": [
      "This sample web part demonstrates managing the list subscriptions (sharepoint webhooks) and action to renew the webhook expiration date using Rest calls. The webpart is to be added at Hubsite level or the sites associated to the hubsite, on selection of the site, it will list out the lists available. On list/library selection, the available subscriptions is displayed. Depending upon the expiry date of the subscription, 'Renew subscription' action can be performed. The subscription (webhook expiry renewal date) renewal date is set to 179 days, as the default days are 180. "
    ],
    "creationDateTime": "2023-09-01",
    "updateDateTime": "2023-09-01",
    "products": [
      "SharePoint",
      "WebHooks",
      "Subscriptions",
      "Update Subscriptions",
      "Get Subscriptions"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.4"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-manage-hublevel-subscriptions/assets/SubscriptionsDashboard.gif",
        "alt": "Subscription Manager"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-manage-hublevel-subscriptions/assets/ConfiguringWebpart.gif",
        "alt": "Configuring subscription manager webpart"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-manage-hublevel-subscriptions/assets/RenewingSubscriptions.gif",
        "alt": "Renewing webhook subscriptions"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-manage-hublevel-subscriptions/assets/ConfiguringWebpart-NonHubrelatedSite.gif",
        "alt": "Configuration error while adding the webpart to Non-Hub related sites"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "NishkalankBezawada",
        "pictureUrl": "https://github.com/NishkalankBezawada.png",
        "name": "NIshkalank Bezawada"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Get Subscription",
        "description": "Get SharePoint webhook subscriptions",
        "url": "https://learn.microsoft.com/en-us/sharepoint/dev/apis/webhooks/lists/get-subscription"
      },
      {
        "name": "Update Subscription",
        "description": "Update SharePoint webhook subscriptions",
        "url": "https://learn.microsoft.com/en-us/sharepoint/dev/apis/webhooks/lists/update-subscription"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-manage-o365-groups",
    "source": "pnp",
    "title": "Manage Office 365 Groups with SPFx",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-manage-o365-groups",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-01-01",
    "updateDateTime": "2020-01-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-manage-o365-groups/assets/web-part-preview.gif",
        "alt": "Manage Office 365 Groups with SPFx"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-o365-groups/assets/approve-request.gif?raw=true",
        "alt": "Manage Office 365 Groups with SPFx"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-o365-groups/assets/group-listing-search.gif?raw=true",
        "alt": "Manage Office 365 Groups with SPFx"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-o365-groups/assets/join-group.gif?raw=true",
        "alt": "Manage Office 365 Groups with SPFx"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-o365-groups/assets/join-private-group.gif?raw=true",
        "alt": "Manage Office 365 Groups with SPFx"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-o365-groups/assets/leave-group.gif?raw=true",
        "alt": "Manage Office 365 Groups with SPFx"
      },
      {
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-o365-groups/assets/new-group.gif?raw=true",
        "alt": "Manage Office 365 Groups with SPFx"
      },
      {
        "type": "image",
        "order": 107,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-o365-groups/assets/pending-permission-requests.png?raw=true",
        "alt": "Manage Office 365 Groups with SPFx"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "nanddeepn",
        "company": "",
        "pictureUrl": "https://github.com/nanddeepn.png",
        "name": "Nanddeep Nachan",
        "twitter": "NanddeepNachan"
      },
      {
        "gitHubAccount": "SmitaNachan",
        "company": "",
        "pictureUrl": "https://github.com/SmitaNachan.png",
        "name": "Smita Nachan",
        "twitter": "smitanachan"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-manage-profile-card-properties",
    "source": "pnp",
    "title": "Manage Profile Card Properties Web Part",
    "shortDescription": "This web part allows tenant administrators to manage profile card properties.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-manage-profile-card-properties",
    "longDescription": [
      "This web part allows tenant administrators to manage profile card properties."
    ],
    "creationDateTime": "2020-10-05",
    "updateDateTime": "2020-10-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSPERSONALAPP",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-manage-profile-card-properties/assets/Screenshot5.png",
        "alt": "Manage Profile Card Properties"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-profile-card-properties/assets/Screenshot1.png?raw=true",
        "alt": "Manage Profile Card Properties"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-profile-card-properties/assets/Screenshot2.png?raw=true",
        "alt": "Manage Profile Card Properties"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-profile-card-properties/assets/Screenshot3.png?raw=true",
        "alt": "Manage Profile Card Properties"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-profile-card-properties/assets/Screenshot4.png?raw=true",
        "alt": "Manage Profile Card Properties"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-manage-sitedesigns",
    "source": "pnp",
    "title": "Site Designs Manager Web Part",
    "shortDescription": "This web part allows tenant administrators to manage site designs through a graphical interface.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-manage-sitedesigns",
    "longDescription": [
      "This web part allows tenant administrators to manage site designs through a graphical interface."
    ],
    "creationDateTime": "2019-04-08",
    "updateDateTime": "2019-04-08",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-manage-sitedesigns/assets/screen1.jpg",
        "alt": "Site Designs Manager"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-sitedesigns/assets/screen10.jpg?raw=true",
        "alt": "Site Designs Manager"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-sitedesigns/assets/screen11.jpg?raw=true",
        "alt": "Site Designs Manager"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-sitedesigns/assets/screen12.jpg?raw=true",
        "alt": "Site Designs Manager"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-sitedesigns/assets/screen13.jpg?raw=true",
        "alt": "Site Designs Manager"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-sitedesigns/assets/screen14.jpg?raw=true",
        "alt": "Site Designs Manager"
      },
      {
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-sitedesigns/assets/screen15.jpg?raw=true",
        "alt": "Site Designs Manager"
      },
      {
        "type": "image",
        "order": 107,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-sitedesigns/assets/screen16.jpg?raw=true",
        "alt": "Site Designs Manager"
      },
      {
        "type": "image",
        "order": 108,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-sitedesigns/assets/screen17.jpg?raw=true",
        "alt": "Site Designs Manager"
      },
      {
        "type": "image",
        "order": 109,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-sitedesigns/assets/screen2.jpg?raw=true",
        "alt": "Site Designs Manager"
      },
      {
        "type": "image",
        "order": 110,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-sitedesigns/assets/screen3.1.jpg?raw=true",
        "alt": "Site Designs Manager"
      },
      {
        "type": "image",
        "order": 111,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-sitedesigns/assets/screen3.jpg?raw=true",
        "alt": "Site Designs Manager"
      },
      {
        "type": "image",
        "order": 112,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-sitedesigns/assets/screen4.jpg?raw=true",
        "alt": "Site Designs Manager"
      },
      {
        "type": "image",
        "order": 113,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-sitedesigns/assets/screen5.jpg?raw=true",
        "alt": "Site Designs Manager"
      },
      {
        "type": "image",
        "order": 114,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-sitedesigns/assets/screen6.jpg?raw=true",
        "alt": "Site Designs Manager"
      },
      {
        "type": "image",
        "order": 115,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-sitedesigns/assets/screen7.jpg?raw=true",
        "alt": "Site Designs Manager"
      },
      {
        "type": "image",
        "order": 116,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-sitedesigns/assets/screen8.jpg?raw=true",
        "alt": "Site Designs Manager"
      },
      {
        "type": "image",
        "order": 117,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-sitedesigns/assets/screen9.jpg?raw=true",
        "alt": "Site Designs Manager"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-manage-spfx-solutions-alm",
    "source": "pnp",
    "title": "Manage SPFx solution using ALM APIs",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-manage-spfx-solutions-alm",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-03-09",
    "updateDateTime": "2020-03-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-manage-spfx-solutions-alm/assets/SPFxALM.gif",
        "alt": "Manage SPFx solution using ALM APIs"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-manage-spfx-solutions-alm/assets/SPFxALMSPAppcatalog.gif?raw=true",
        "alt": "Manage SPFx solution using ALM APIs"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Ramakrishnan24689",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/Ramakrishnan24689.png",
        "name": "Ramakrishnan Raman",
        "twitter": "ramakrishnan2"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-material-ui",
    "source": "pnp",
    "title": "Material UI Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-material-ui",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-03-25",
    "updateDateTime": "2019-03-25",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-material-ui/assets/screenshot.gif",
        "alt": "Material UI"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AhmadiRamin",
        "company": "Content and Cloud",
        "pictureUrl": "https://github.com/AhmadiRamin.png",
        "name": "Ramin Ahmadi",
        "twitter": "raminahmadi1986"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-members-with-presence",
    "source": "pnp",
    "title": "Group members list with Presence information web part",
    "shortDescription": "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).",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-members-with-presence",
    "longDescription": [
      "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)."
    ],
    "creationDateTime": "2019-12-23",
    "updateDateTime": "2019-12-23",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-members-with-presence/assets/react-members-with-presence.gif",
        "alt": "Group members list with Presence information"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "luismanez",
        "company": "ClearPeople",
        "pictureUrl": "https://github.com/luismanez.png",
        "name": "Luis Mañez"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-mgtevents",
    "source": "pnp",
    "title": "MGT Events Web Part",
    "shortDescription": "This sample shows how to use Microsoft Graph Toolkit in SPFx and custom with Fluent UI Fabric Controls",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-mgtevents",
    "longDescription": [
      "This sample shows how to use Microsoft Graph Toolkit in SPFx and custom with Fluent UI Fabric Controls"
    ],
    "creationDateTime": "2020-11-29",
    "updateDateTime": "2020-11-29",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "SPFX-FULLPAGEAPP",
        "value": "true"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSPERSONALAPP",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-mgtevents/assets/mgtevents.jpg",
        "alt": "MGT Events"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Using single part app pages in SharePoint Online",
        "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-minesweeper",
    "source": "pnp",
    "title": "Minesweeper Web Part",
    "shortDescription": "This web part is the classic game Minesweeper, put in a Fluent UI powered SPFx web part!.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-minesweeper",
    "longDescription": [
      "This web part is the classic game Minesweeper, put in a Fluent UI powered SPFx web part!."
    ],
    "creationDateTime": "2020-07-01",
    "updateDateTime": "2020-07-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-minesweeper/assets/Minesweeper.gif",
        "alt": "Minesweeper"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "PieterHeemeryck",
        "company": "",
        "pictureUrl": "https://github.com/PieterHeemeryck.png",
        "name": "Pieter Heemeryck"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-mobx",
    "source": "pnp",
    "title": "Using React and Mobx Web Part",
    "shortDescription": "Sample web part implementation that uses Mobx to keep track of its state.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-mobx",
    "longDescription": [
      "Sample web part implementation that uses Mobx to keep track of its state."
    ],
    "creationDateTime": "2016-11-04",
    "updateDateTime": "2016-11-04",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "drop5"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://camo.githubusercontent.com/1bfb94ba2675eec1c794cfea81bdde41b964268f/68747470733a2f2f692e6779617a6f2e636f6d2f65366631393033623961396338323031393835636432356363316665323862632e676966",
        "alt": "Using React and Mobx"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "kmees",
        "company": "",
        "pictureUrl": "https://github.com/kmees.png",
        "name": "Kevin Mees"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-mobx-multiple-stores",
    "source": "pnp",
    "title": "Using multiple stores with React and Mobx Web Part",
    "shortDescription": "A sample web part that uses the Mobx library with multiple stores to keep track of the applications state.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-mobx-multiple-stores",
    "longDescription": [
      "A sample web part that uses the Mobx library with multiple stores to keep track of the applications state."
    ],
    "creationDateTime": "2019-05-24",
    "updateDateTime": "2019-05-24",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-mobx-multiple-stores/assets/demo.gif",
        "alt": "Using multiple stores with React and Mobx"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "KEMiCZA",
        "company": "Ventigrate",
        "pictureUrl": "https://github.com/KEMiCZA.png",
        "name": "Kemal Sinanagic",
        "twitter": "kemicza"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-modern-birthdays-timeline",
    "source": "pnp",
    "title": "Birthdays Timeline Web Part",
    "shortDescription": "Shows upcoming birthdays in the company in a timeline",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-modern-birthdays",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-modern-birthdays",
    "longDescription": [
      "Shows upcoming birthdays in the company, laid out in a timeline"
    ],
    "creationDateTime": "2023-01-31",
    "updateDateTime": "2023-01-31",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-modern-birthdays/assets/birthdays.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-modern-birthdays",
    "source": "pnp",
    "title": "Birthdays Web Part",
    "shortDescription": "Shows upcoming birthdays in the company",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-modern-birthdays",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-modern-birthdays",
    "longDescription": [
      "The Web Part shows the upcoming birthdays in the company, the web parts reads birthdays from a list located on the tenant's root site with title \"Birthdays.\""
    ],
    "creationDateTime": "2023-01-31",
    "updateDateTime": "2023-01-31",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-modern-birthdays/assets/birthdays_teams.jpg",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-modern-carousel",
    "source": "pnp",
    "title": "Modern Carousel",
    "shortDescription": "This SharePoint Framework (SPFx) web part introduces a contemporary carousel component leveraging Swiper, facilitating seamless traversal through content housed within a SharePoint site.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-modern-carousel",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-modern-carousel",
    "longDescription": [
      "This SharePoint Framework (SPFx) web part introduces a contemporary carousel component leveraging Swiper, facilitating seamless traversal through content housed within a SharePoint site. This innovative feature enhances user experience by providing fluid navigation through various pieces of content, thereby adding a touch of elegance and sophistication to the SharePoint environment."
    ],
    "creationDateTime": "2024-03-16",
    "updateDateTime": "2024-03-16",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.2"
      }
    ],
    "thumbnails": [
      {
        "name": "AwardRecognition.png",
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-modern-carousel/assets/AwardRecognition.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Sandeep-FED",
        "pictureUrl": "https://github.com/Sandeep-FED.png",
        "name": "Sandeep P S"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-modern-charts",
    "source": "pnp",
    "title": "Modern Charts",
    "shortDescription": "This web part uses the Chart.js library to visualize SharePoint list data.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-modern-charts",
    "longDescription": [
      "This web part uses the Chart.js library to visualize SharePoint list data."
    ],
    "creationDateTime": "2020-07-30",
    "updateDateTime": "2021-10-19",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://raw.githubusercontent.com/jcoleman-pcprofessional/Modern-Charts/master/assets/modern-chart2.png",
        "alt": "Modern Charts"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-modern-charts/assets/Modern-Charts.gif?raw=true",
        "alt": "Modern Charts"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-modern-charts/assets/modern-charts.png?raw=true",
        "alt": "Modern Charts"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "jcoleman-pcprofessional",
        "company": "PC Professional Inc.",
        "pictureUrl": "https://github.com/jcoleman-pcprofessional.png",
        "name": "Jeremy Coleman"
      },
      {
        "gitHubAccount": "petkir",
        "company": "Cubido Business Solutions GmbH",
        "pictureUrl": "https://github.com/petkir.png",
        "name": "Peter Paul Kirschner",
        "twitter": "petkir_at"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-modern-organization-chart",
    "source": "pnp",
    "title": "Modern Organization Chart",
    "shortDescription": "This web part show organization chart for current user, shows, managers and direct reports and there available status.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-modern-organization-chart",
    "longDescription": [
      "This web part show organization chart for current user, shows, managers and direct reports and there available status."
    ],
    "creationDateTime": "2020-07-09",
    "updateDateTime": "2020-07-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-modern-organization-chart/assets/Screenshot1.png",
        "alt": "Modern Organization Chart"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-modern-organization-chart/assets/Screenshot2.png?raw=true",
        "alt": "Modern Organization Chart"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-msal-msgraph",
    "source": "pnp",
    "title": "Microsoft Authentication Library (MSAL JS) authentication sample",
    "shortDescription": "",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-msal-msgraph",
    "longDescription": [
      ""
    ],
    "creationDateTime": "2017-03-17",
    "updateDateTime": "2017-03-17",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-msal-msgraph/assets/msal-wp-output.png",
        "alt": "Microsoft Authentication Library (MSAL JS) authentication sample"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-msal-msgraph/assets/permission-scopes.png?raw=true",
        "alt": "Microsoft Authentication Library (MSAL JS) authentication sample"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-msal-msgraph/assets/redirect-url.png?raw=true",
        "alt": "Microsoft Authentication Library (MSAL JS) authentication sample"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "estruyf",
        "company": "Struyf Consulting",
        "pictureUrl": "https://github.com/estruyf.png",
        "name": "Elio Struyf",
        "twitter": "eliostruyf"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-msgraph-extension",
    "source": "pnp",
    "title": "Manage Microsoft Graph Open Extension in SPFx",
    "shortDescription": "This sample shows how to managed Microsoft Graph Open Extension in SPFX. This application uses User Resource to create Open Extension.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-msgraph-extension",
    "longDescription": [
      "This sample shows how to managed Microsoft Graph Open Extension in SPFX. This application uses User Resource to create Open Extension."
    ],
    "creationDateTime": "2019-10-20",
    "updateDateTime": "2019-10-20",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-msgraph-extension/assets/create-graph-extension.png",
        "alt": "Manage Microsoft Graph Open Extension in SPFx"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-msgraph-extension/assets/get-graph-extension.png?raw=true",
        "alt": "Manage Microsoft Graph Open Extension in SPFx"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-msgraph-extension/assets/graph-extension-user-permissions.png?raw=true",
        "alt": "Manage Microsoft Graph Open Extension in SPFx"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ejazhussain",
        "company": "Content and Code",
        "pictureUrl": "https://github.com/ejazhussain.png",
        "name": "Ejaz Hussain",
        "twitter": "EjazHussain_"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-msgraph-peoplesearch",
    "source": "pnp",
    "title": "Microsoft Graph People Search Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-msgraph-peoplesearch",
    "longDescription": [
      "Show and search users from your organization, through Microsoft Graph. Search results show as a nice People Card, and display the Live Persona Card on hover.",
      "The web part accepts a search query through a Dynamic Data connection, to further filter the displayed results. A source for this search query is not provided, but by default this can come from the Microsoft Search search box or the Page Environment. You could also use the Search Box Web Part provided by the PnP Modern Search Web Parts.",
      "The sample also shows how to use SPFx Web Part asynchronous rendering using isRenderAsync property and renderCompleted method."
    ],
    "creationDateTime": "2020-07-31",
    "updateDateTime": "2020-07-31",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-msgraph-peoplesearch/assets/MicrosoftGraphPeopleSearch.gif",
        "alt": "Microsoft Graph People Search Web Part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-msgraph-peoplesearch/assets/MicrosoftGraphPeopleSearch-LPC.gif?raw=true",
        "alt": "Microsoft Graph People Search Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "YannickRe",
        "company": "",
        "pictureUrl": "https://github.com/YannickRe.png",
        "name": "Yannick Reekmans",
        "twitter": "Qubix"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-multilist-grid",
    "source": "pnp",
    "title": "Multi-list Grid Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-multilist-grid",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2016-12-31",
    "updateDateTime": "2016-12-31",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "rc0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-multilist-grid/src/images/ColumnTypes.PNG",
        "alt": "Multi-list Grid"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "russgove",
        "company": "",
        "pictureUrl": "https://github.com/russgove.png",
        "name": "Russell Gove"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-multimedia-gallery",
    "source": "pnp",
    "title": "Image Gallery Web Part",
    "shortDescription": "This web part show images and videos in responsive grid, on click it show images and videos in a carousel view.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-multimedia-gallery",
    "longDescription": [
      "This web part show images and videos in responsive grid, on click it show images and videos in a carousel view."
    ],
    "creationDateTime": "2020-07-19",
    "updateDateTime": "2020-07-19",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-multimedia-gallery/assets/MultimediaGallery.gif",
        "alt": "Image Gallery"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-multimedia-gallery/assets/Annotation0.jpg?raw=true",
        "alt": "Image Gallery"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-multimedia-gallery/assets/Annotation1.jpg?raw=true",
        "alt": "Image Gallery"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-multimedia-gallery/assets/Annotation2.jpg?raw=true",
        "alt": "Image Gallery"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-multimedia-gallery/assets/Screenshot1.png?raw=true",
        "alt": "Image Gallery"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-multimedia-gallery/assets/Screenshot2.png?raw=true",
        "alt": "Image Gallery"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      },
      {
        "gitHubAccount": "Vivekrajput20",
        "company": "",
        "pictureUrl": "https://github.com/Vivekrajput20.png",
        "name": "Vivek Chand"
      },
      {
        "gitHubAccount": "petkir",
        "company": "Cubido Business Solutions GmbH",
        "pictureUrl": "https://github.com/petkir.png",
        "name": "Peter Paul Kirschner",
        "twitter": "petkir_at"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-multipage",
    "source": "pnp",
    "title": "Multi-page client-side web part",
    "shortDescription": "Sample SharePoint Framework client-side web parts built using React illustrating building multi-page web parts.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-multipage",
    "longDescription": [
      "Sample SharePoint Framework client-side web parts built using React illustrating building multi-page web parts."
    ],
    "creationDateTime": "2017-05-01",
    "updateDateTime": "2017-05-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-multipage/assets/poll-preview.gif",
        "alt": "Multi-page client-side web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-multiscreen-webpart",
    "source": "pnp",
    "title": "Multi screen web part sample",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-multiscreen-webpart",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-07-03",
    "updateDateTime": "2021-10-03",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-multiscreen-webpart/assets/multi-screen-webpart.gif",
        "alt": "Multi screen web part sample"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-multiscreen-webpart/assets/multi-screen-webpart-history.gif?raw=true",
        "alt": "Multi screen web part sample"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "VelinGeorgiev",
        "company": "",
        "pictureUrl": "https://github.com/VelinGeorgiev.png",
        "name": "Velin Georgiev"
      },
      {
        "gitHubAccount": "AriGunawan",
        "name": "Ari Gunawan",
        "company": "",
        "pictureUrl": "https://github.com/AriGunawan.png"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-my-approvals",
    "source": "pnp",
    "title": "My Approvals Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-approvals",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2022-01-11",
    "updateDateTime": "2022-11-03",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-my-approvals/assets/react-my-approvals.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "karamem0",
        "pictureUrl": "https://github.com/karamem0.png",
        "name": "Takashi Shinohara"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-my-dashboard",
    "source": "pnp",
    "title": "My Dashboard Web Part",
    "shortDescription": "This SPFx app allows quick access to user agenda, ToDo Tasks, Files and  News and Relevant People related to user.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-dashboard",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-dashboard",
    "longDescription": [
      "This SPFx app allows quick access to user agenda, ToDo Tasks, Files and  News and Relevant People related to user."
    ],
    "creationDateTime": "2023-06-23",
    "updateDateTime": "2023-06-23",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-my-dashboard/assets/MyDashboard_default.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-my-events",
    "source": "pnp",
    "title": "My Events Web Part",
    "shortDescription": "This web part provides loggedin user's outlook events with some advanced features",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-events",
    "longDescription": [
      "This web part provides loggedin user's outlook events with some advanced features"
    ],
    "creationDateTime": "2021-08-18",
    "updateDateTime": "2022-03-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.0"
      },
      {
        "key": "PNPCONTROLS",
        "value": "PropertyFieldNumber, WebPartTitle"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-my-events/assets/preview.png",
        "alt": "react-my-events"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "chandaniprajapati",
        "company": "Rapid Circle",
        "pictureUrl": "https://github.com/chandaniprajapati.png",
        "name": "Chandani Prajapati",
        "twitter": "Chandani_SPD"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-my-groups",
    "source": "pnp",
    "title": "My Groups Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-groups",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-07-09",
    "updateDateTime": "2020-07-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-my-groups/assets/React-MyGroups_Grid.png",
        "alt": "My Groups"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-my-groups/assets/React-MyGroups_Compact.png?raw=true",
        "alt": "My Groups"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-my-groups/assets/React-MyGroups_Property.png?raw=true",
        "alt": "My Groups"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "zachroberts8668",
        "company": "",
        "pictureUrl": "https://github.com/zachroberts8668.png",
        "name": "Zach Roberts"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-my-onedrive-info",
    "source": "pnp",
    "title": "My OneDrive Info",
    "shortDescription": "MyOneDriveInfo solution contains Adaptive card extension for Viva connection with below functionalities",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-onedrive-info",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-onedrive-info",
    "longDescription": [
      "MyOneDriveInfo solution contains Adaptive card extension for Viva connection with below functionalities"
    ],
    "creationDateTime": "2023-02-03",
    "updateDateTime": "2024-08-26",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.19.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-my-onedrive-info/assets/ACEScreenshot1.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "HarminderSethi",
        "pictureUrl": "https://github.com/HarminderSethi.png",
        "name": "Harminder Singh"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-my-personal-apps",
    "source": "pnp",
    "title": "My Personal Apps Web Part",
    "shortDescription": "The Web Part My Personal Apps allows the user to define links to Applications or Sites for quick access.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-personal-apps",
    "longDescription": [
      "The Web Part My Personal Apps allows the user to define links to Applications or Sites for quick access."
    ],
    "creationDateTime": "2020-04-28",
    "updateDateTime": "2020-04-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSPERSONALAPP",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-my-personal-apps/assets/Image1.png",
        "alt": "My Personal Apps"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-my-personal-apps/assets/Image06.png?raw=true",
        "alt": "My Personal Apps"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-my-personal-apps/assets/Image10.png?raw=true",
        "alt": "My Personal Apps"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-my-personal-apps/assets/image11.png?raw=true",
        "alt": "My Personal Apps"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-my-personal-apps/assets/image12.png?raw=true",
        "alt": "My Personal Apps"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-my-personal-apps/assets/image13.png?raw=true",
        "alt": "My Personal Apps"
      },
      {
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-my-personal-apps/assets/image14.png?raw=true",
        "alt": "My Personal Apps"
      },
      {
        "type": "image",
        "order": 107,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-my-personal-apps/assets/Image2.png?raw=true",
        "alt": "My Personal Apps"
      },
      {
        "type": "image",
        "order": 108,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-my-personal-apps/assets/Image3.png?raw=true",
        "alt": "My Personal Apps"
      },
      {
        "type": "image",
        "order": 109,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-my-personal-apps/assets/Image4.png?raw=true",
        "alt": "My Personal Apps"
      },
      {
        "type": "image",
        "order": 110,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-my-personal-apps/assets/Image5.png?raw=true",
        "alt": "My Personal Apps"
      },
      {
        "type": "image",
        "order": 111,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-my-personal-apps/assets/Image7.png?raw=true",
        "alt": "My Personal Apps"
      },
      {
        "type": "image",
        "order": 112,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-my-personal-apps/assets/Image8.png?raw=true",
        "alt": "My Personal Apps"
      },
      {
        "type": "image",
        "order": 113,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-my-personal-apps/assets/Image9.png?raw=true",
        "alt": "My Personal Apps"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      },
      {
        "gitHubAccount": "zachroberts8668",
        "company": "",
        "pictureUrl": "https://github.com/zachroberts8668.png",
        "name": "Zach Roberts"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-my-sites",
    "source": "pnp",
    "title": "My Sites Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-sites",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-08-30",
    "updateDateTime": "2020-08-30",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSPERSONALAPP",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-my-sites/assets/MySites.gif",
        "alt": "My Sites"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-my-sites/assets/Screenshot 2020-08-06 at 13.50.51.png?raw=true",
        "alt": "My Sites"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-my-sites/assets/Screenshot 2020-08-06 at 13.52.58.png?raw=true",
        "alt": "My Sites"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-my-sites/assets/Screenshot 2020-08-06 at 14.17.35.png?raw=true",
        "alt": "My Sites"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-my-teams",
    "source": "pnp",
    "title": "My Teams Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-teams",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-02-26",
    "updateDateTime": "2021-12-18",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.13.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-my-teams/assets/Preview.png",
        "alt": "My Teams"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joelfmrodrigues",
        "company": "Storm Technology",
        "pictureUrl": "https://github.com/joelfmrodrigues.png",
        "name": "Joel Rodrigues",
        "twitter": "joelfmrodrigues"
      },
      {
        "gitHubAccount": "yhabersaat",
        "pictureUrl": "https://github.com/yhabersaat.png",
        "name": "Yves Habersaat",
        "twitter": "yhabersaat"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-myonedrive",
    "source": "pnp",
    "title": "My OneDrive",
    "shortDescription": "Displays currently logged in user's OneDrive's file",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-myonedrive",
    "longDescription": [
      "This is a sample web part that displays currently logged in user's OneDrive's file",
      "This web part can be useful on the Intranet home page which can be added as My OneDrive files for quick reference of user's OneDrive files."
    ],
    "creationDateTime": "2021-08-12",
    "updateDateTime": "2024-02-27",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-myonedrive/assets/MyOneDriveInAction.gif",
        "alt": "react-myonedrive"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "siddharth-vaghasia",
        "company": "",
        "pictureUrl": "https://github.com/siddharth-vaghasia.png",
        "name": "Siddharth Vaghasia"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-mytasks",
    "source": "pnp",
    "title": "My Tasks Web Part",
    "shortDescription": "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..",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-mytasks",
    "longDescription": [
      "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.."
    ],
    "creationDateTime": "2020-09-09",
    "updateDateTime": "2020-09-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-mytasks/assets/MyTasks.gif",
        "alt": "My Tasks Web Part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-mytasks/assets/AddTask.gif?raw=true",
        "alt": "My Tasks Web Part"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-mytasks/assets/EditTask.gif?raw=true",
        "alt": "My Tasks Web Part"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-mytasks/assets/screen1.png?raw=true",
        "alt": "My Tasks Web Part"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-mytasks/assets/screen10.png?raw=true",
        "alt": "My Tasks Web Part"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-mytasks/assets/screen11.png?raw=true",
        "alt": "My Tasks Web Part"
      },
      {
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-mytasks/assets/screen12.png?raw=true",
        "alt": "My Tasks Web Part"
      },
      {
        "type": "image",
        "order": 107,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-mytasks/assets/screen13.png?raw=true",
        "alt": "My Tasks Web Part"
      },
      {
        "type": "image",
        "order": 108,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-mytasks/assets/Screen14.png?raw=true",
        "alt": "My Tasks Web Part"
      },
      {
        "type": "image",
        "order": 109,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-mytasks/assets/screen2.png?raw=true",
        "alt": "My Tasks Web Part"
      },
      {
        "type": "image",
        "order": 110,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-mytasks/assets/screen3.png?raw=true",
        "alt": "My Tasks Web Part"
      },
      {
        "type": "image",
        "order": 111,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-mytasks/assets/screen4.png?raw=true",
        "alt": "My Tasks Web Part"
      },
      {
        "type": "image",
        "order": 112,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-mytasks/assets/screen5.png?raw=true",
        "alt": "My Tasks Web Part"
      },
      {
        "type": "image",
        "order": 113,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-mytasks/assets/screen6.png?raw=true",
        "alt": "My Tasks Web Part"
      },
      {
        "type": "image",
        "order": 114,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-mytasks/assets/screen7.png?raw=true",
        "alt": "My Tasks Web Part"
      },
      {
        "type": "image",
        "order": 115,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-mytasks/assets/screen8.png?raw=true",
        "alt": "My Tasks Web Part"
      },
      {
        "type": "image",
        "order": 116,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-mytasks/assets/screen9.png?raw=true",
        "alt": "My Tasks Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      },
      {
        "gitHubAccount": "Swaminathan-Sriram",
        "company": "",
        "pictureUrl": "https://github.com/Swaminathan-Sriram.png",
        "name": "Swaminathan Sriram",
        "twitter": "SwaminathanSri3"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-news",
    "source": "pnp",
    "title": "News Web Part",
    "shortDescription": "SPFx Webpart to display News from SharePoint site(s)",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-news",
    "longDescription": [
      "Web part pulls all SharePoint News Posts that the logged in user has access to view"
    ],
    "creationDateTime": "2021-04-02",
    "updateDateTime": "2021-04-02",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-news/assets/Single-View-Default.png",
        "alt": "Single view default"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-news/assets/Stack-Style-Default.png",
        "alt": "Stack style"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-news/assets/Several-Sites-Author-Hidden.png",
        "alt": "Several sites author hidden"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-news/assets/Pagination.png",
        "alt": "Pagination"
      },
      {
        "type": "video",
        "order": 104,
        "url": "https://www.youtube.com/embed/DMZkZmJhLf0",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ReactIntern",
        "pictureUrl": "https://github.com/ReactIntern.png",
        "name": "Alison Collins"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-news-banner",
    "source": "pnp",
    "title": "News Banner Web Part",
    "shortDescription": "Shows news information as a Banner, this information come from a list defined in any site.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-news-banner",
    "longDescription": [
      "This web part shows news information as a Banner, this information come from a list defined in any site, this web part can be installed on 2019, and SharePoint Online."
    ],
    "creationDateTime": "2021-05-06",
    "updateDateTime": "2021-05-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-news-banner/assets/NewsBanner.gif",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-news-banner/assets/NewsBanner.png?raw=true",
        "alt": "List Items Menu"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-news-extension",
    "source": "pnp",
    "title": "Targeted News Web Part using Microsoft Graph Open Extension",
    "shortDescription": "This sample contains two SPFx web parts: User preferences web part and Curated news web part",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-news-extension",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-news-extension",
    "longDescription": [
      "This sample contains two SPFx web parts: User preferences web part and Curated news web part"
    ],
    "creationDateTime": "2023-10-04",
    "updateDateTime": "2023-10-04",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.4"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-news-extension/assets/curated-news.png",
        "alt": "Curated news"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-news-extension/assets/user-preferences-model.png",
        "alt": "User preferences model"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-news-extension/assets/demo.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ejazhussain",
        "pictureUrl": "https://github.com/ejazhussain.png",
        "name": "Ejaz Hussain"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-office-offer-creation",
    "source": "pnp",
    "title": "SharePoint document generator - Offer Creation Web Part",
    "shortDescription": "This sample is a Teams personal Tab to act as a Microsoft 365 across application (Teams, Outlook, Office) to generate docuemnts.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-office-offer-creation",
    "longDescription": [
      "This sample is a Teams personal Tab to act as a Microsoft 365 across application (Teams, Outlook, Office) to generate docuemnts. It is realized with SharePoint Framework (SPFx)."
    ],
    "creationDateTime": "2023-01-05",
    "updateDateTime": "2023-01-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-office-offer-creation/assets/16OfferCreationDemo_SPFx.gif",
        "alt": "App in action"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-office-offer-creation/assets/15CreateOfferForm_FluentUI_SPFx.png",
        "alt": "Create Offer Form with FluentUI controls"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-office-offer-creation/assets/15CreateOfferForm_FluentUI_SPFx.png",
        "alt": "Created Offer result with filled metadata opened in Word"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "mmsharepoint",
        "pictureUrl": "https://github.com/mmsharepoint.png",
        "name": "Markus Moeller"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-officegraph",
    "source": "pnp",
    "title": "Office Graph Web Part samples",
    "shortDescription": "",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-officegraph",
    "longDescription": [
      ""
    ],
    "creationDateTime": "2017-05-31",
    "updateDateTime": "2017-05-31",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-officegraph/assets/trendinginthissite-preview.png",
        "alt": "Office Graph Web Part samples"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-officegraph/assets/my-recent-documents-preview.png?raw=true",
        "alt": "Office Graph Web Part samples"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-officegraph/assets/trending-in-sites-i-follow-preview.png?raw=true",
        "alt": "Office Graph Web Part samples"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-officegraph/assets/working-with-preview.png?raw=true",
        "alt": "Office Graph Web Part samples"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-offline-first",
    "source": "pnp",
    "title": "Offline First Web part built using LocalForage, Whatwg-Fetch, ES6-Promise",
    "shortDescription": "Sample SharePoint Framework Client-Side Web Parts built using React showing interacting with the Office Graph.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-offline-first",
    "longDescription": [
      "Sample SharePoint Framework Client-Side Web Parts built using React showing interacting with the Office Graph."
    ],
    "creationDateTime": "2017-05-31",
    "updateDateTime": "2017-05-31",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-offline-first/assets/preview.gif",
        "alt": "Offline First Web part built using LocalForage, Whatwg-Fetch, ES6-Promise"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-offline-first/assets/webpart-screenshot.jpg?raw=true",
        "alt": "Offline First Web part built using LocalForage, Whatwg-Fetch, ES6-Promise"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AustinBreslinDev",
        "company": "",
        "pictureUrl": "https://avatars.githubusercontent.com/u/10480670?s=460&v=4",
        "name": "Austin Breslin"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-onedrive-finder",
    "source": "pnp",
    "title": "OneDrive Finder Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-onedrive-finder",
    "longDescription": [
      "This sample access drives from OneDrive and navigate between his content using Graph OneDrive and Site API and Microsoft Graph Toolkit React controls with the addition of new FileList control.",
      "This new control provides the ability to retrieve the Drive Library with associated Files and folders making easier to develop and navigate between tenant content and access to file. "
    ],
    "creationDateTime": "2021-04-16",
    "updateDateTime": "2021-05-20",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-onedrive-finder/assets/OneDrivefinderSample3.gif",
        "alt": "Web Part in action"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-onedrive-finder/assets/OneDrivefinderSample1.PNG",
        "alt": "Web Part in action"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-onedrive-finder/assets/OneDrivefinderSample2.PNG",
        "alt": "Web Part in action"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "aaclage",
        "pictureUrl": "https://github.com/aaclage.png",
        "name": "André Lage"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-openai-devops",
    "source": "pnp",
    "title": "OpenAI Azure DevOps Bot Web Part",
    "shortDescription": "The SPFx web part is a SharePoint Framework web part that allows users to view recent tasks, bugs, and commits assigned to them from a specific project in Azure DevOps",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-openai-devops",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-openai-devops",
    "longDescription": [
      "The SPFx web part is a SharePoint Framework web part that allows users to view recent tasks, bugs, and commits assigned to them from a specific project in Azure DevOps"
    ],
    "creationDateTime": "2023-07-23",
    "updateDateTime": "2023-07-23",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.4"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-openai-devops/assets/demo.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ejazhussain",
        "pictureUrl": "https://github.com/ejazhussain.png",
        "name": "Ejaz Hussain"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-openai-summarise-page-content",
    "source": "pnp",
    "title": "Multilingual SharePoint Page Summarization Web Part with Open AI API and Microsoft Graph Pages API",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-openai-summarise-page-content",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-openai-summarise-page-content",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2023-03-12",
    "updateDateTime": "2023-03-12",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-openai-summarise-page-content/assets/page_summary.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "anoopt",
        "pictureUrl": "https://github.com/anoopt.png",
        "name": "Anoop Tatti"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-organisationchart",
    "source": "pnp",
    "title": "Organisation Chart Web Part",
    "shortDescription": "A simple Organisation Chart web part using Office UI Fabric, React, REST API batching and ServiceScope plumbing.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-organisationchart",
    "longDescription": [
      "A simple Organisation Chart web part using Office UI Fabric, React, REST API batching and ServiceScope plumbing."
    ],
    "creationDateTime": "2017-07-19",
    "updateDateTime": "2017-07-19",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-organisationchart/assets/orgchart.png",
        "alt": "Organisation Chart"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-organisationchart/assets/orgchart-mock.png?raw=true",
        "alt": "Organisation Chart"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "vman",
        "company": "",
        "pictureUrl": "https://github.com/vman.png",
        "name": "Vardhaman Deshpande"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-organization-chart",
    "source": "pnp",
    "title": "Organization Chart Web Part (SP2019 and Online)",
    "shortDescription": "Shows an organization chart based on specified user, and user can navigate to show company organization",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-organization-chart",
    "longDescription": [
      "This web part shows an organization chart based on specified user, and user can navigate to show company organization.",
      "Can be installed on SharePoint Server 2019, and SharePoint Online."
    ],
    "creationDateTime": "2021-05-03",
    "updateDateTime": "2024-02-25",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-organization-chart/assets/orgchart.gif",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-organization-chart/assets/orgchart_01.jpg",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-organization-chart/assets/orgchart_02.jpg",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      },
      {
        "gitHubAccount": "Paxol",
        "pictureUrl": "https://github.com/Paxol.png"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-outlook-add-todo-task",
    "source": "pnp",
    "title": "Create To Do Task from Email (Outlook Add in)",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-outlook-add-todo-task",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-10-16",
    "updateDateTime": "2020-10-16",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      },
      {
        "key": "SPFX-OUTLOOKADDIN",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/e92d0dac567cc4d59cdfc94186a52a3b776c6d21/samples/react-outlook-add-todo-task/assets/spfx-todo-outlook.gif",
        "alt": "Create To Do Task from Email (Outlook Add in)"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "luismanez",
        "company": "ClearPeople",
        "pictureUrl": "https://github.com/luismanez.png",
        "name": "Luis Mañez"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Create Outlook Add-ins using SharePoint Framework",
        "description": "Introduced in SharePoint Framework v1.10, you can implement an Outlook Web App add-in with the SharePoint Framework and use SharePoint as a host for your solution.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/office-addins-create"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-outlook-copy2teams",
    "source": "pnp",
    "title": "Outlook to Teams Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-outlook-copy2teams",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-04-06",
    "updateDateTime": "2020-04-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      },
      {
        "key": "SPFX-OUTLOOKADDIN",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://camo.githubusercontent.com/a539e3ae63602becc87309ee2a965e4d5a605239/68747470733a2f2f6d6d7368617265706f696e742e66696c65732e776f726470726573732e636f6d2f323032302f30312f616464696e5f6f766572616c6c2e706e67",
        "alt": "Outlook to Teams"
      },
      {
        "type": "video",
        "order": 101,
        "url": "https://www.youtube.com/embed/h4NXi-p2fEw",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "mmsharepoint",
        "company": "Avanade ",
        "pictureUrl": "https://github.com/mmsharepoint.png",
        "name": "Markus Moeller",
        "twitter": "moeller2_0"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Create Outlook Add-ins using SharePoint Framework",
        "description": "Introduced in SharePoint Framework v1.10, you can implement an Outlook Web App add-in with the SharePoint Framework and use SharePoint as a host for your solution.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/office-addins-create"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-page-navigator",
    "source": "pnp",
    "title": "Page Navigator Web Part",
    "shortDescription": "This web part fetches all the automatically added Header anchor tags in a SharePoint page and displays them in a Navigation component.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-page-navigator",
    "longDescription": [
      "This web part fetches all the automatically added Header anchor tags in a SharePoint page and displays them in a Navigation component."
    ],
    "creationDateTime": "2019-09-05",
    "updateDateTime": "2023-05-23",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.14.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-page-navigator/assets/PageNavigator.gif",
        "alt": "Page Navigator"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "aakashbhardwaj619",
        "company": "Microsoft",
        "pictureUrl": "https://avatars.githubusercontent.com/u/33526902?s=460&u=e780f4ef1da922c84f2c5c66c59cecbff2300581&v=4",
        "name": "Aakash Bhardwaj",
        "twitter": "aakash_316"
      },
      {
        "gitHubAccount": "Jwaegebaert",
        "pictureUrl": "https://github.com/Jwaegebaert.png",
        "name": "Jasey Waegebaert"
      },
      {
        "gitHubAccount": "mikezimm",
        "name": "Mike Zimmerman",
        "pictureUrl": "https://github.com/mikezimm.png"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-page-sections-navigation",
    "source": "pnp",
    "title": "Page Sections Navigation Web Part",
    "shortDescription": "Sample web parts allowing to add sections navigation to the SharePoint page.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-page-sections-navigation",
    "longDescription": [
      "Sample web parts allowing to add sections navigation to the SharePoint page."
    ],
    "creationDateTime": "2019-03-22",
    "updateDateTime": "2022-04-25",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.14.0"
      },
      {
        "key": "SPFX-FULLPAGEAPP",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-page-sections-navigation/assets/page-nav.gif",
        "alt": "Page Sections Navigation"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Sharepointalist",
        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4",
        "name": "Alex Terentiev",
        "twitter": "alexaterentiev"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Using single part app pages in SharePoint Online",
        "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-pagecontributors",
    "source": "pnp",
    "title": "Page Contributors Web Part",
    "shortDescription": "Displays page contributors in reverse chronological order.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pagecontributors",
    "longDescription": [
      "Displays page contributors in reverse chronological order."
    ],
    "creationDateTime": "2017-07-27",
    "updateDateTime": "2021-07-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-pagecontributors/assets/pagecontributors_inaction.PNG",
        "alt": "Page Contributors Web Part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-pagecontributors/assets/pagecontributors_mockup.PNG?raw=true",
        "alt": "Page Contributors Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "SPParseError",
        "company": "Infeeny",
        "pictureUrl": "https://github.com/SPParseError.png",
        "name": "Stéphane Magne",
        "twitter": "SPParse"
      },
      {
        "gitHubAccount": "AriGunawan",
        "name": "Ari Gunawan",
        "company": "",
        "pictureUrl": "https://github.com/AriGunawan.png"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-pages-hierarchy",
    "source": "pnp",
    "title": "Page Hierarchy Web Part",
    "shortDescription": "This web part allows users to create a faux page hierarchy in their pages library and use it for page-to-page navigation.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pages-hierarchy",
    "longDescription": [
      "This web part allows users to create a faux page hierarchy in their pages library and use it for page-to-page navigation."
    ],
    "creationDateTime": "2020-04-30",
    "updateDateTime": "2024-01-11",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.2"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-pages-hierarchy/assets/PagesHierarchy.gif",
        "alt": "Page Hierarchy"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "bogeorge",
        "company": "ThreeWill",
        "pictureUrl": "https://avatars.githubusercontent.com/u/10885472?s=460&u=74d23f4289cd555aa530e1c2c6156a382c373f2f&v=4",
        "name": "Bo George",
        "twitter": "bo_george"
      },
      {
        "gitHubAccount": "techienickb",
        "pictureUrl": "https://github.com/techienickb.png",
        "name": "Nick Brown",
        "twitter": "techienickb"
      },
      {
        "gitHubAccount": "ruslan-s",
        "name": "ruslan-s",
        "pictureUrl": "https://github.com/ruslan-s.png"
      },
      {
        "gitHubAccount": "SlowRobot",
        "name": "SlowRobot",
        "pictureUrl": "https://github.com/SlowRobot.png"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-palette-picker",
    "source": "pnp",
    "title": "Palette Picker Web Part",
    "shortDescription": "Custom Property Pane pain resolved (whew), color palette generator inspired by [Jhey](https://codepen.io/jh3y/pen/rNjbmBQ?editors=0011).",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-palette-picker",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-palette-picker",
    "longDescription": [
      "Built it to get an understanding of [Property Pane Portal](https://www.npmjs.com/package/property-pane-portal) and cuz I want to eventually build in a dynamic palette generator/css reader for my web parts."
    ],
    "creationDateTime": "2022-08-01",
    "updateDateTime": "2022-08-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.13.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/main/samples/react-palette-picker/assets/palettePickerWebPart.gif",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 200,
        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/main/samples/react-palette-picker/assets/palettePickerWebPartAfterSaveAndRefresh.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "flowerbot",
        "pictureUrl": "https://github.com/flowerbot.png",
        "name": "Linda K"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-password-vault",
    "source": "pnp",
    "title": "Password Vault Web Part",
    "shortDescription": "This web part allows you to protect your data, such as the username, password or even just a text note (rich text). This data is protected with a master password that you can choose yourself.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-password-vault",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-password-vault",
    "longDescription": [
      "This web part allows you to protect your data, such as the username, password or even just a text note (rich text). This data is protected with a master password that you can choose yourself.",
      "The data is encrypted and stored in the properties of the web part. This means that the data is not in plain text and can only be decrypted by entering the master password. You can also use this web part in SharePoint and Microsoft Teams (as a tab)"
    ],
    "creationDateTime": "2023-10-27",
    "updateDateTime": "2023-10-27",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-password-vault/assets/PasswordVaultDisplayMode.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-password-vault/assets/PWVaultEditMode.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-password-vault/assets/PWVaultMaintenanceMode.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "video",
        "order": 101,
        "url": "https://www.youtube.com/embed/y38RFnrrxrI?si=EWoEglXZfqiKCs3V",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "SPFxAppDev",
        "pictureUrl": "https://github.com/SPFxAppDev.png",
        "name": "Sergej Schwabauer"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-people-directory",
    "source": "pnp",
    "title": "People Directory Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-people-directory",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-05-01",
    "updateDateTime": "2018-05-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-people-directory.gif",
        "alt": "People Directory"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "eoverfield",
        "company": "PixelMill",
        "pictureUrl": "https://github.com/eoverfield.png",
        "name": "Eric Overfield",
        "twitter": "EricOverfield"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-peoplepicker",
    "source": "pnp",
    "title": "People Picker Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-peoplepicker",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2017-12-06",
    "updateDateTime": "2017-12-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-peoplepicker/assets/Preview.gif",
        "alt": "People Picker"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "giuleon",
        "company": "",
        "pictureUrl": "https://github.com/giuleon.png",
        "name": "Giuliano De Luca",
        "twitter": "delucagiulian"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-personal-anniversary-counter",
    "source": "pnp",
    "title": "Personal Anniversary Web Part",
    "shortDescription": "A web part to help you notice those special days",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-personal-anniversary-counter",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-personal-anniversary-counter",
    "longDescription": [
      "Recently we had a fun talk at the office, 'how many days have I been working here?' turns out the answer was almost exactly 1500 days. So I thought it would be fun to make a web part that could help you keep track of those fun days."
    ],
    "creationDateTime": "2023-12-09",
    "updateDateTime": "2023-12-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-personal-anniversary-counter/assets/demo.gif",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-personal-anniversary-counter/assets/Screenshot.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Tanddant",
        "pictureUrl": "https://github.com/Tanddant.png",
        "name": "Dan Toft"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-personal-calendar",
    "source": "pnp",
    "title": "Personal Calendar Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-personal-calendar",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-05-01",
    "updateDateTime": "2018-05-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-calendar.gif",
        "alt": "Personal Calendar"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "eoverfield",
        "company": "PixelMill",
        "pictureUrl": "https://github.com/eoverfield.png",
        "name": "Eric Overfield",
        "twitter": "EricOverfield"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-personal-contacts",
    "source": "pnp",
    "title": "Personal Contacts Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-personal-contacts",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-05-01",
    "updateDateTime": "2018-05-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-contacts.gif",
        "alt": "Personal Contacts"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "eoverfield",
        "company": "PixelMill",
        "pictureUrl": "https://github.com/eoverfield.png",
        "name": "Eric Overfield",
        "twitter": "EricOverfield"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-personal-email",
    "source": "pnp",
    "title": "Personal Email Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-personal-email",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-05-01",
    "updateDateTime": "2018-05-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-email.gif",
        "alt": "Personal Email"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "eoverfield",
        "company": "PixelMill",
        "pictureUrl": "https://github.com/eoverfield.png",
        "name": "Eric Overfield",
        "twitter": "EricOverfield"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-personal-greeting",
    "source": "pnp",
    "title": "Personal Greeting Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-personal-greeting",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-10-18",
    "updateDateTime": "2020-10-18",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-personal-greeting/assets/react-personal-greeting.gif",
        "alt": "Personal Greeting"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "zachroberts8668",
        "company": "",
        "pictureUrl": "https://github.com/zachroberts8668.png",
        "name": "Zach Roberts"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-personal-tasks",
    "source": "pnp",
    "title": "Personal Tasks Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-personal-tasks",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-05-01",
    "updateDateTime": "2018-05-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-tasks.gif",
        "alt": "Personal Tasks"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "eoverfield",
        "company": "PixelMill",
        "pictureUrl": "https://github.com/eoverfield.png",
        "name": "Eric Overfield",
        "twitter": "EricOverfield"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-personal-tools-list",
    "source": "pnp",
    "title": "Personal tools list Web Part",
    "shortDescription": "Allows users to select tools from a predefined list and save them in their own personalized view.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-personal-tools-list",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-personal-tools-list",
    "longDescription": [
      "This web part allows users to select tools from a predefined list and save them in their own personalized view.",
      "This web part has the fundamental functionality - a great starting point to build upon if you need something more advanced."
    ],
    "creationDateTime": "2024-02-08",
    "updateDateTime": "2024-02-25",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.0"
      }
    ],
    "thumbnails": [
      {
        "name": "MyToolsDemo1.gif",
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-personal-tools-list/assets/MyToolsDemo1.gif",
        "alt": "Web Part Preview"
      },
      {
        "name": "MyToolsDemo2.gif",
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-personal-tools-list/assets/MyToolsDemo2.gif",
        "alt": "Web Part Preview"
      },
      {
        "name": "availableTools.png",
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-personal-tools-list/assets/availableTools.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "mytoold.png",
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-personal-tools-list/assets/mytoold.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "mytoolslist.png",
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-personal-tools-list/assets/mytoolslist.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "savedtools.png",
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-personal-tools-list/assets/savedtools.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "savetools.png",
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-personal-tools-list/assets/savetools.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "selecttools.png",
        "type": "image",
        "order": 107,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-personal-tools-list/assets/selecttools.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "settings.png",
        "type": "image",
        "order": 108,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-personal-tools-list/assets/settings.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "video-demo1.mp4",
        "type": "video",
        "order": 109,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-personal-tools-list/assets/video-demo1.mp4"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Eli-Schei",
        "pictureUrl": "https://github.com/Eli-Schei.png",
        "name": "Eli Schei"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-photo-sync",
    "source": "pnp",
    "title": "SPUPS Photo Sync Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-photo-sync",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-09-13",
    "updateDateTime": "2020-09-13",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "SPFX-TEAMSPERSONALAPP",
        "value": "true"
      },
      {
        "key": "PNPCONTROLS",
        "value": "PropertyFieldListPicker, PropertyFieldToggleWithCallout, PropertyPaneWebPartInformation, PropertyFieldPeoplePicker"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-photo-sync/assets/SPUPS_Photo_Sync_1.gif",
        "alt": "SPUPS Photo Sync"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-photo-sync/assets/SPUPS_Photo_Sync_2.gif?raw=true",
        "alt": "SPUPS Photo Sync"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "sudharsank",
        "company": "NTT Digital Business Solutions",
        "pictureUrl": "https://github.com/sudharsank.png",
        "name": "Sudharsan Kesavanarayanan",
        "twitter": "sudharsank"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-pnp-controls",
    "source": "pnp",
    "title": "SharePoint Framework PnP Controls Sample",
    "shortDescription": "This is a sample project that contains a web part which makes use of the PnP SPFx Controls",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnp-controls",
    "longDescription": [
      "This is a sample project that contains a web part which makes use of the PnP SPFx Controls"
    ],
    "creationDateTime": "2020-12-16",
    "updateDateTime": "2020-12-16",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "PNPCONTROLS",
        "value": " PropertyFieldListPicker, PropertyFieldTermPicker, Placeholder, ListView, FileTypeIcon"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-pnp-controls/assets/webpart-outcome.gif",
        "alt": "SharePoint Framework PnP Controls Sample"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-pnp-controls/assets/documents.png",
        "alt": "SharePoint Framework PnP Controls Sample"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "estruyf",
        "company": "Struyf Consulting",
        "pictureUrl": "https://github.com/estruyf.png",
        "name": "Elio Struyf",
        "twitter": "eliostruyf"
      },
      {
        "gitHubAccount": "Swaminathan-Sriram",
        "company": "",
        "pictureUrl": "https://github.com/Swaminathan-Sriram.png",
        "name": "Swaminathan Sriram",
        "twitter": "SwaminathanSri3"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-pnp-controls-list-view-fields",
    "source": "pnp",
    "title": "PnP ListView with PnP Field Controls Web Part",
    "shortDescription": "Sample web part to display PnP ListView control with column rendering using PnP Field Controls.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnp-controls-list-view-fields",
    "longDescription": [
      "Sample web part to display PnP ListView control with column rendering using PnP Field Controls."
    ],
    "creationDateTime": "2020-03-10",
    "updateDateTime": "2020-03-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      },
      {
        "key": "PNPCONTROLS",
        "value": "FieldTextRenderer, FieldDateRenderer, FieldLookupRenderer, FieldUrlRenderer, FieldTaxonomyRenderer"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-pnp-controls-list-view-fields/assets/web-part.png",
        "alt": "PnP ListView with PnP Field Controls Web Part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-pnp-controls-list-view-fields/assets/taxonomy.png?raw=true",
        "alt": "PnP ListView with PnP Field Controls Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Sharepointalist",
        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4",
        "name": "Alex Terentiev",
        "twitter": "alexaterentiev"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-pnp-js-hooks",
    "source": "pnp",
    "title": "pnp/js and ReactJS Functional Components",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnp-js-hooks",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnp-js-hooks",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2022-10-17",
    "updateDateTime": "2022-10-18",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-pnp-js-hooks/assets/react-pnp-js-sample.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "bcameron1231",
        "pictureUrl": "https://github.com/bcameron1231.png",
        "name": "Beau Cameron"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-pnp-js-sample",
    "source": "pnp",
    "title": "Using @pnp/js and ReactJS",
    "shortDescription": "Shows how to use PnPjs in a React web part",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnp-js-sample",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnp-js-sample",
    "longDescription": [
      "Shows how to use PnPjs in a React web part"
    ],
    "creationDateTime": "2023-02-18",
    "updateDateTime": "2023-02-18",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-pnp-js-sample/assets/react-pnp-js-sample.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "juliemturner",
        "pictureUrl": "https://github.com/juliemturner.png",
        "name": "Julie Turner"
      },
      {
        "gitHubAccount": "bcameron1231",
        "name": "Beau Cameron",
        "pictureUrl": "https://github.com/bcameron1231.png"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-pnpjs-http-client",
    "source": "pnp",
    "title": "GitHub Profile Web Part Display via API",
    "shortDescription": "This web part loads the GitHub profile using SPHttp client in PnP v3.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnpjs-http-client",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnpjs-http-client",
    "longDescription": [
      "This web part loads the GitHub profile using SPHttp client in PnP v3."
    ],
    "creationDateTime": "2023-03-07",
    "updateDateTime": "2023-03-07",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-pnpjs-http-client/assets/UpdateAPICall.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "divya-akula",
        "pictureUrl": "https://github.com/divya-akula.png",
        "name": "Divya Akula"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-pnpjs-project-online",
    "source": "pnp",
    "title": "PnPjs Project Online Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnpjs-project-online",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-12-04",
    "updateDateTime": "2019-12-04",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-pnpjs-project-online/assets/Preview.gif",
        "alt": "PnPjs Project Online"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joelfmrodrigues",
        "company": "Storm Technology",
        "pictureUrl": "https://github.com/joelfmrodrigues.png",
        "name": "Joel Rodrigues",
        "twitter": "joelfmrodrigues"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-pnpjs-spsite-er-diagram",
    "source": "pnp",
    "title": "SP Site ER Diagram",
    "shortDescription": "This web part loads all lists on a site and display it in a Entity Relationship Diagram (ERD)",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnpjs-spsite-er-diagram",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnpjs-spsite-er-diagram",
    "longDescription": [
      "This web part loads all lists on a site and display it in a Entity Relationship Diagram (ERD)"
    ],
    "creationDateTime": "2022-11-07",
    "updateDateTime": "2022-12-21",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/main/samples/react-pnpjs-spsite-er-diagram/assets/SPERasAppPageFullScreen.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 200,
        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/main/samples/react-pnpjs-spsite-er-diagram/assets/SPERasAppPage.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ICTNiklasWilhelm",
        "pictureUrl": "https://github.com/ICTNiklasWilhelm.png",
        "name": "Niklas Wilhelm"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-pnpjsexplorer",
    "source": "pnp",
    "title": "SPFx web part to Test PnpJS SharePoint Methods",
    "shortDescription": "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",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnpjsexplorer",
    "longDescription": [
      "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"
    ],
    "creationDateTime": "2020-10-30",
    "updateDateTime": "2020-10-30",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-pnpjsexplorer/assets/pnpjstesterinaction.gif?raw=true",
        "alt": "SPFx web part to Test PnpJS SharePoint Methods"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-pnpjsexplorer/assets/pnpjstesterinaction.gif?raw=true",
        "alt": "SPFx web part to Test PnpJS SharePoint Methods"
      },
      {
        "type": "video",
        "order": 102,
        "url": "https://www.youtube.com/embed/mdgkyxeayY0",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "siddharth-vaghasia",
        "company": "",
        "pictureUrl": "https://github.com/siddharth-vaghasia.png",
        "name": "Siddharth Vaghasia"
      },
      {
        "gitHubAccount": "kunj-sangani",
        "company": "",
        "pictureUrl": "https://github.com/kunj-sangani.png",
        "name": "Kunj Sangani"
      },
      {
        "gitHubAccount": "joelfmrodrigues",
        "company": "Storm Technology",
        "pictureUrl": "https://github.com/joelfmrodrigues.png",
        "name": "Joel Rodrigues",
        "twitter": "joelfmrodrigues"
      },
      {
        "gitHubAccount": "Abderahman88",
        "company": "",
        "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4",
        "name": "Abderahman Moujahid"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-poll",
    "source": "pnp",
    "title": "Poll Web Part",
    "shortDescription": "Add new poll questions and their options. End users can submit his/her response to the poll. After Submission, user can see all responses count with Bar chart.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-poll",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-poll",
    "longDescription": [
      "Add new poll questions and their options. End users can submit his/her response to the poll. After Submission, user can see all responses count with Bar chart."
    ],
    "creationDateTime": "2024-03-16",
    "updateDateTime": "2024-03-16",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.1"
      }
    ],
    "thumbnails": [
      {
        "name": "react-poll.gif",
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-poll/assets/react-poll.gif",
        "alt": "Web Part Preview"
      },
      {
        "name": "add-poll.png",
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-poll/assets/add-poll.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "poll-answers.png",
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-poll/assets/poll-answers.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "poll-questions.png",
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-poll/assets/poll-questions.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "wp1.png",
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-poll/assets/wp1.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "wp2.png",
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-poll/assets/wp2.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Harsh24491",
        "pictureUrl": "https://github.com/Harsh24491.png",
        "name": "Harsh Bhavsar"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-ppp-pnp-controls",
    "source": "pnp",
    "title": "Property Pane Portal PnP Controls Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-ppp-pnp-controls",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-ppp-pnp-controls",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2022-03-20",
    "updateDateTime": "2022-03-20",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.14"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-ppp-pnp-controls/assets/React-PPP-PnP-Controls-Sample.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "PathToSharePoint",
        "pictureUrl": "https://github.com/PathToSharePoint.png",
        "name": "Christophe Humbert"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-ppw-html",
    "source": "pnp",
    "title": "Property Pane Wrapper for HTML Controls",
    "shortDescription": "Showcases the use of the Property Pane Wrap to embed HTML controls in the SPFx Property Pane",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-ppw-html",
    "longDescription": [
      "Showcases the use of the Property Pane Wrap to embed HTML controls in the SPFx Property Pane"
    ],
    "creationDateTime": "2022-02-10",
    "updateDateTime": "2022-02-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.14"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-ppw-html/assets/React-PPW-HTML-Sample.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "PathToSharePoint",
        "pictureUrl": "https://github.com/PathToSharePoint.png",
        "name": "Christophe Humbert"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-private-libraries",
    "source": "pnp",
    "title": "Private Library/Folder Manager Web Part",
    "shortDescription": "This sample provides a webpart that can be used to manage Document Libraries with Secured Subfolders.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-private-libraries",
    "longDescription": [
      "This sample provides a webpart that can be used to manage Document Libraries with Secured Subfolders. The use case this was developed for is a Request for Proposal site. A Document library is created for each RFP and subfolders are created within that Library for each external supplier invited to participate in that RFP.",
      "The application manages all the security groups set up for the various libraries and folders so that suppliers only see RFP's they were invited to participate in and only thier folder in those libraries. General documents for the RFP that should be seen by everyone participating in the RFP can be put in the root folder of the library. General terms and conditions that everyone should see can be put at the root folder of the site."
    ],
    "creationDateTime": "2021-07-02",
    "updateDateTime": "2021-07-02",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-private-libraries/assets/HomeScreen.png",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "russgove",
        "pictureUrl": "https://github.com/russgove.png",
        "name": "Russell Gove"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-project-online",
    "source": "pnp",
    "title": "Project Online Web Part",
    "shortDescription": "This sample shows how to use SPFx to consume data from the Project Online REST API.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-project-online",
    "longDescription": [
      "This sample shows how to use SPFx to consume data from the Project Online REST API."
    ],
    "creationDateTime": "2020-04-12",
    "updateDateTime": "2020-04-12",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-project-online/assets/Preview.gif",
        "alt": "Project Online"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joelfmrodrigues",
        "company": "Storm Technology",
        "pictureUrl": "https://github.com/joelfmrodrigues.png",
        "name": "Joel Rodrigues",
        "twitter": "joelfmrodrigues"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-property-bag-editor",
    "source": "pnp",
    "title": "Property Bag Navigation Web parts",
    "shortDescription": "A set of web parts that lets you set property bag settings on site collections and enable navigation using those properties.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-property-bag-editor",
    "longDescription": [
      "A set of web parts that lets you set property bag settings on site collections and enable navigation using those properties."
    ],
    "creationDateTime": "2017-03-19",
    "updateDateTime": "2024-02-21",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-property-bag-editor/assets/PropertyBagEditorDisplay.PNG",
        "alt": "Property Bag Navigation Web parts"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "russgove",
        "pictureUrl": "https://github.com/russgove.png",
        "name": "Russell Gove"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-property-pane-navigation",
    "source": "pnp",
    "title": "Property Pane Navigation Web Part",
    "shortDescription": "This sample showcase how to handle the navigation between property pane pages.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-property-pane-navigation",
    "longDescription": [
      "This sample showcase how to handle the navigation between property pane pages."
    ],
    "creationDateTime": "2024-02-22",
    "updateDateTime": "2024-02-22",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-property-pane-navigation/assets/navigation_in_action.gif?raw=true",
        "alt": "Property Pane Navigation"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-property-pane-navigation/assets/FirstPropertyPanePage.png?raw=true",
        "alt": "Property Pane Navigation"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-property-pane-navigation/assets/SecondPropertyPanePage.png?raw=true",
        "alt": "Property Pane Navigation"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-property-pane-navigation/assets/ThirdPropertyPanePage.png?raw=true",
        "alt": "Property Pane Navigation"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "guidozam",
        "company": "PiaSys",
        "pictureUrl": "https://github.com/guidozam.png",
        "name": "Guido Zambarda",
        "twitter": "iamguidozam"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Integrate web part properties with SharePoint",
        "description": "Learn how to integrate web part properties with SharePoint.",
        "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/integrate-web-part-properties-with-sharepoint"
      },
      {
        "name": "Make your SharePoint client-side web part configurable",
        "description": "Learn how to make your SharePoint client-side web part configurable.",
        "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/integrate-with-property-pane"
      },
      {
        "name": "Validate web part property values",
        "description": "Learn how to validate web part property values.",
        "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/validate-web-part-property-values"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-provision-assets",
    "source": "pnp",
    "title": "Provision SharePoint Assets with the SPFx solution package",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-provision-assets",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-09-06",
    "updateDateTime": "2020-09-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-provision-assets/assets/spfx-provision-assets.gif",
        "alt": "Provision SharePoint Assets with the SPFx solution package"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "VelinGeorgiev",
        "company": "",
        "pictureUrl": "https://github.com/VelinGeorgiev.png",
        "name": "Velin Georgiev"
      },
      {
        "gitHubAccount": "nanddeepn",
        "company": "",
        "pictureUrl": "https://github.com/nanddeepn.png",
        "name": "Nanddeep Nachan",
        "twitter": "NanddeepNachan"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-questions-and-answers",
    "source": "pnp",
    "title": "Questions and Answers Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-questions-and-answers",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2021-03-22",
    "updateDateTime": "2021-03-22",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      },
      {
        "key": "PNPCONTROLS",
        "value": "WebPartTitle"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-questions-and-answers/assets/QuestionsAndAnswers.gif",
        "alt": "React Questions and Answers"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "bogeorge",
        "company": "ThreeWill",
        "pictureUrl": "https://avatars.githubusercontent.com/u/10885472?s=460&u=74d23f4289cd555aa530e1c2c6156a382c373f2f&v=4",
        "name": "Bo George",
        "twitter": "bo_george"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-quick-links",
    "source": "pnp",
    "title": "Quick Links Web Part",
    "shortDescription": "A demonstration of how one could build SharePoints Quick Links web part",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-quick-links",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-quick-links",
    "longDescription": [
      "A demonstration of building a web part with a dynamic property pane, drag n' drop edit capabilities - I've built the Tiles feature of the default Quick Links web part, but made room for the option to implement the other 5 layouts."
    ],
    "creationDateTime": "2023-03-05",
    "updateDateTime": "2023-03-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-quick-links/assets/Demo.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Tanddant",
        "pictureUrl": "https://github.com/Tanddant.png",
        "name": "Dan Toft"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-quick-links-grid",
    "source": "pnp",
    "title": "Quick Links Grid",
    "shortDescription": "Displays a set of quick links fetched from a SharePoint list.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-quick-links-grid",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-quick-links-grid",
    "longDescription": [
      "Displays a set of quick links fetched from a SharePoint list.",
      "The quick links are displayed with icons and titles in a responsive grid layout."
    ],
    "creationDateTime": "2024-08-11",
    "updateDateTime": "2024-08-11",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.19.0"
      }
    ],
    "thumbnails": [
      {
        "name": "preview.gif",
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-quick-links-grid/assets/preview.gif",
        "alt": "Web Part Preview"
      },
      {
        "name": "356854637-e68afa9a-0e48-40bf-abc0-f0fa12f154c7.png",
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-quick-links-grid/assets/356854637-e68afa9a-0e48-40bf-abc0-f0fa12f154c7.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "356854684-bae0b02d-aaa8-47ba-b3c1-57e684260fd1.png",
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-quick-links-grid/assets/356854684-bae0b02d-aaa8-47ba-b3c1-57e684260fd1.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "react-quick-links-grid-sample-screenshot.png",
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-quick-links-grid/assets/react-quick-links-grid-sample-screenshot.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "VenkadeshSundaramurthy",
        "pictureUrl": "https://github.com/VenkadeshSundaramurthy.png",
        "name": "Venkadesh Sundaramurthy"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-quick-poll",
    "source": "pnp",
    "title": "Quick Poll Web Part",
    "shortDescription": "This component is developed for the users who really need to create a Poll within a minute and with less maintenance.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-quick-poll",
    "longDescription": [
      "This component is developed for the users who really need to create a Poll within a minute and with less maintenance."
    ],
    "creationDateTime": "2020-10-17",
    "updateDateTime": "2022-03-18",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.13.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-quick-poll/assets/react-quick-poll.gif",
        "alt": "Quick Poll"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "sudharsank",
        "company": "NTT Digital Business Solutions",
        "pictureUrl": "https://github.com/sudharsank.png",
        "name": "Sudharsan Kesavanarayanan",
        "twitter": "sudharsank"
      },
      {
        "gitHubAccount": "dips365",
        "pictureUrl": "https://github.com/dips365.png",
        "name": "Dipen Shah",
        "twitter": "Dips_365"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-quotes",
    "source": "pnp",
    "title": "Quote of the Day Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-quotes",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-11-11",
    "updateDateTime": "2022-01-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.13.1"
      },
      {
        "key": "PNPCONTROLS",
        "value": "PropertyFieldColorPicker"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-quotes/assets/react-quotes-sample.png",
        "alt": "Quote of the Day"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "zachroberts8668",
        "company": "",
        "pictureUrl": "https://github.com/zachroberts8668.png",
        "name": "Zach Roberts"
      },
      {
        "gitHubAccount": "yhabersaat",
        "pictureUrl": "https://github.com/yhabersaat",
        "name": "Yves Habersaat"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-react-query",
    "title": "Query Microsoft Graph Web Part",
    "source": "pnp",
    "shortDescription": "This sample shows how you can query Microsoft Graph from React in SharePoint Framework",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-auto-batching",
    "longDescription": [
      "This sample shows how you can query Microsoft Graph from React in SharePoint Framework"
    ],
    "creationDateTime": "2022-10-18",
    "updateDateTime": "2022-10-18",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/gh-pages/img/_nopreview.png",
        "alt": "No preview available"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "mgwojciech",
        "pictureUrl": "https://github.com/mgwojciech.png",
        "name": "Marcin Wojciechowski",
        "company": "Valo"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-real-time",
    "source": "pnp",
    "title": "Real Time News Feed Web Part using Azure Logic Apps, Node.js and socket.io",
    "shortDescription": "This sample shows you how to implement real time web parts using the SPFx, Azure Logic Apps, Node.js and socket.io.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-real-time",
    "longDescription": [
      "This sample shows you how to implement real time web parts using the SPFx, Azure Logic Apps, Node.js and socket.io."
    ],
    "creationDateTime": "2016-11-04",
    "updateDateTime": "2016-11-04",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "drop4"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-real-time/assets/animated-demo.gif",
        "alt": "Real Time News Feed using Azure Logic Apps, Node.js and socket.io"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-real-time/assets/flow.png?raw=true",
        "alt": "Real Time News Feed using Azure Logic Apps, Node.js and socket.io"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-real-time/assets/network-console.png?raw=true",
        "alt": "Real Time News Feed using Azure Logic Apps, Node.js and socket.io"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-real-time/assets/service-bus-new-connection.png?raw=true",
        "alt": "Real Time News Feed using Azure Logic Apps, Node.js and socket.io"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-real-time/assets/service-bus.png?raw=true",
        "alt": "Real Time News Feed using Azure Logic Apps, Node.js and socket.io"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-real-time/assets/solution_overview.png?raw=true",
        "alt": "Real Time News Feed using Azure Logic Apps, Node.js and socket.io"
      },
      {
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-real-time/assets/spfx-initial.png?raw=true",
        "alt": "Real Time News Feed using Azure Logic Apps, Node.js and socket.io"
      },
      {
        "type": "image",
        "order": 107,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-real-time/assets/spfx-newitem.png?raw=true",
        "alt": "Real Time News Feed using Azure Logic Apps, Node.js and socket.io"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "FranckyC",
        "company": "Aequos",
        "pictureUrl": "https://github.com/FranckyC.png",
        "name": "Franck Cornu"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-realtime-documents",
    "source": "pnp",
    "title": "List Subscription Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-realtime-documents",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-11-09",
    "updateDateTime": "2018-11-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.7.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-realtime-documents/assets/list-subscription-webpart.png",
        "alt": "List subscription"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-realtime-incidentdashboard",
    "source": "pnp",
    "title": "List notifications + Microsoft Teams Integrations",
    "shortDescription": "Illustrating using the SharePoint Framework List subscription capability, which allows you to get notified of changes to custom list refresh the displayed data",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-realtime-incidentdashboard",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-realtime-incidentdashboard",
    "longDescription": [
      "Illustrating using the SharePoint Framework List subscription capability, which allows you to get notified of changes to custom list refresh the displayed data"
    ],
    "creationDateTime": "2023-10-23",
    "updateDateTime": "2023-10-23",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-realtime-incidentdashboard/assets/list-notification-dashboard.jpg",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ejazhussain",
        "pictureUrl": "https://github.com/ejazhussain.png",
        "name": "Ejaz Hussain"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-recaptcha",
    "source": "pnp",
    "title": "Google reCaptcha Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-recaptcha",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-10-10",
    "updateDateTime": "2019-10-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-recaptcha/screens/WebpartInAction.gif",
        "alt": "Google reCaptcha Sample"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "siddharth-vaghasia",
        "company": "",
        "pictureUrl": "https://github.com/siddharth-vaghasia.png",
        "name": "Siddharth Vaghasia"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-recent-contacts",
    "source": "pnp",
    "title": "Recent Contacts Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-recent-contacts",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-05-01",
    "updateDateTime": "2018-05-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-recent-contacts.gif",
        "alt": "Recent Contacts"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "eoverfield",
        "company": "PixelMill",
        "pictureUrl": "https://github.com/eoverfield.png",
        "name": "Eric Overfield",
        "twitter": "EricOverfield"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-recently-used-documents",
    "source": "pnp",
    "title": "Recently Used Documents Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-recently-used-documents",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-05-01",
    "updateDateTime": "2018-05-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-recently-used-documents.gif",
        "alt": "Recently Used Documents"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "eoverfield",
        "company": "PixelMill",
        "pictureUrl": "https://github.com/eoverfield.png",
        "name": "Eric Overfield",
        "twitter": "EricOverfield"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-recently-visited-sites",
    "source": "pnp",
    "title": "Recently Visited Sites Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-recently-visited-sites",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-05-01",
    "updateDateTime": "2018-05-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-recently-visited-sites.gif",
        "alt": "Recently Visited Sites"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "eoverfield",
        "company": "PixelMill",
        "pictureUrl": "https://github.com/eoverfield.png",
        "name": "Eric Overfield",
        "twitter": "EricOverfield"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-redux",
    "source": "pnp",
    "title": "Using React and Redux",
    "shortDescription": "Sample web part implementation that uses Redux to keep track of its state.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-redux",
    "longDescription": [
      "Sample web part implementation that uses Redux to keep track of its state."
    ],
    "creationDateTime": "2016-10-28",
    "updateDateTime": "2016-10-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "drop5"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://camo.githubusercontent.com/4d5690679fd7d36dce6c9bd92ec37d6047b443b6/68747470733a2f2f692e6779617a6f2e636f6d2f37323963346164646636633939323531336638656239316133666130653330322e676966",
        "alt": "Using React and Redux"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "kmees",
        "company": "",
        "pictureUrl": "https://github.com/kmees.png",
        "name": "Kevin Mees"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-redux-async-immutablejs",
    "source": "pnp",
    "title": "Using React, Redux and ImmutableJS",
    "shortDescription": "SharePoint Framework web part which uses Redux to maintain a single state for the entire application and ImmutableJS to create performant state trees.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-redux-async-immutablejs",
    "longDescription": [
      "SharePoint Framework web part which uses Redux to maintain a single state for the entire application and ImmutableJS to create performant state trees."
    ],
    "creationDateTime": "2017-07-11",
    "updateDateTime": "2017-07-11",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://raw.githubusercontent.com/vman/sp-dev-fx-webparts/master/samples/react-redux-async-immutablejs/assets/react-redux-immutable.gif",
        "alt": "Using React, Redux and ImmutableJS"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "vman",
        "company": "",
        "pictureUrl": "https://github.com/vman.png",
        "name": "Vardhaman Deshpande"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-reduxform",
    "source": "pnp",
    "title": "Using Redux-Form library and React",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-reduxform",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-05-02",
    "updateDateTime": "2018-05-02",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-reduxform/assets/ReduxFormWebpart.gif?raw=true",
        "alt": "Using Redux-Form library and React"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-reduxform/assets/ReduxFormWebpart.gif?raw=true",
        "alt": "Using Redux-Form library and React"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "vipulkelkar",
        "company": "Rapid Circle",
        "pictureUrl": "https://github.com/vipulkelkar.png",
        "name": "Vipul Kelkar"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-remote-event-receiver-manager",
    "source": "pnp",
    "title": "Remote Event Receiver Manager Web Part",
    "shortDescription": "Lets you add and delete remote event receivers to lists",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-remote-event-receiver-manager",
    "longDescription": [
      "A very simple web part that lets you add and delete remote event receivers to lists, the need came about due to remote event receivers not functioning properly when added with app only authentication and PnP.Powershell now only using that."
    ],
    "creationDateTime": "2021-05-03",
    "updateDateTime": "2021-06-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-remote-event-receiver-manager/assets/video.gif",
        "alt": "Word Game"
      },
      {
        "type": "video",
        "order": 101,
        "url": "https://www.youtube.com/embed/nYKXmXkuaKc",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Tanddant",
        "company": "",
        "pictureUrl": "https://github.com/Tanddant.png",
        "name": "Dan Toft"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-restaurant-menu",
    "source": "pnp",
    "title": "Restaurant Menu Web Part",
    "shortDescription": "This web part shows a Restaurant Menu, the user can select the options to show in Menu.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-restaurant-menu",
    "longDescription": [
      "This web part shows a Restaurant Menu, the user can select the options to show in Menu."
    ],
    "creationDateTime": "2020-09-05",
    "updateDateTime": "2020-09-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSPERSONALAPP",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-restaurant-menu/assets/restaurantmenu.gif",
        "alt": "Restaurant Menu"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-restaurant-menu/assets/restaurantmenu.png?raw=true",
        "alt": "Restaurant Menu"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-restaurant-menu/assets/restaurantmenu2.png?raw=true",
        "alt": "Restaurant Menu"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-restaurant-menu/assets/restaurantmenu3.png?raw=true",
        "alt": "Restaurant Menu"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-rhythm-of-business-calendar",
    "source": "pnp",
    "title": "Rhythm of Business Calendar Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rhythm-of-business-calendar",
    "longDescription": [
      "This sample is the source code for the Rhythm of Business Calendar app and is intended to demonstrate patterns and practices for building enterprise apps on the SharePoint platform.",
      "Rhythm of Business (RoB) Calendar keeps you on top of your business goals by managing all team and organizational events seamlessly. Simplify and expedite the coordination and planning process for your team and subgroups with the help of color-coded events, approval workflow, refiners and confidential events. Ideal for Chiefs of Staff, Executive Assistants, or anyone who manages a team calendar, you can empower your teams by enabling better insights on your business goals and team events."
    ],
    "creationDateTime": "2022-09-26",
    "updateDateTime": "2022-11-12",
    "products": [
      "SharePoint",
      "Microsoft Teams"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "TypeScript"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/e92d0dac567cc4d59cdfc94186a52a3b776c6d21/samples/react-rhythm-of-business-calendar/assets/screenshot-edit-refiner.png",
        "alt": "Edit refiners"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/e92d0dac567cc4d59cdfc94186a52a3b776c6d21/samples/react-rhythm-of-business-calendar/assets/screenshot-month-view.png",
        "alt": "Month view"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/e92d0dac567cc4d59cdfc94186a52a3b776c6d21/samples/react-rhythm-of-business-calendar/assets/screenshot-view-event.png",
        "alt": "View event"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "d-turley",
        "company": "Avanade",
        "pictureUrl": "https://github.com/d-turley.png",
        "name": "Dan Turley"
      }
    ],
    "references": [
      {
        "name": "Getting started with SharePoint Framework",
        "description": "Introduction about how to develop Microsoft 365 extensions using SharePoint Framework.",
        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant"
      },
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Learn how to develop your first Web Part using SharePoint Framework (SPFx).",
        "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-roomchat",
    "source": "pnp",
    "title": "Room Chat Web Part",
    "shortDescription": "This web part shows how to use Azure Communications Services and React UI component to create a Room Chat.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-roomchat",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-roomchat",
    "longDescription": [
      "This web part shows how to use Azure Communications Services and React UI component to create a Room Chat."
    ],
    "creationDateTime": "2022-07-19",
    "updateDateTime": "2022-07-19",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-roomchat/assets/roomchat.gif",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-roomchat/assets/roomchat.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-rss-reader",
    "source": "pnp",
    "title": "SharePoint Framework RSS Reader Web Part",
    "shortDescription": "A RSS Reader original based on work completed by Olivier Carpentier's",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rss-reader",
    "longDescription": [
      "A RSS Reader original based on work completed by Olivier Carpentier's"
    ],
    "creationDateTime": "2020-11-22",
    "updateDateTime": "2023-08-18",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-rss-reader/assets/react-rss-reader.gif",
        "alt": "SharePoint Framework RSS Reader"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-rss-reader/assets/rss_property_pane.png",
        "alt": "Property Pane"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "eoverfield",
        "pictureUrl": "https://github.com/eoverfield.png",
        "name": "Eric Overfield",
        "twitter": "EricOverfield"
      },
      {
        "gitHubAccount": "AbhishekGarg",
        "pictureUrl": "https://avatars.githubusercontent.com/u/5449154?s=400&v=4",
        "name": "Abhishek Garg",
        "twitter": "abhig89"
      },
      {
        "gitHubAccount": "Abderahman88",
        "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460&u=afdd5f6681bc375ee3811482dec79824c12d8170&v=4",
        "name": "Abderahman Moujahid"
      },
      {
        "gitHubAccount": "djsladi",
        "name": "Kalle Mansikkaniemi",
        "pictureUrl": "https://github.com/djsladi.png"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-rxjs-event-emitter",
    "source": "pnp",
    "title": "ReactiveX (RxJs) Event Emitter Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rxjs-event-emitter",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-12-10",
    "updateDateTime": "2018-12-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.7.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-rxjs-event-emitter/assets/spfx-event-emitter.gif",
        "alt": "ReactiveX (RxJs) Event Emitter Sample"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "VelinGeorgiev",
        "company": "",
        "pictureUrl": "https://github.com/VelinGeorgiev.png",
        "name": "Velin Georgiev"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-sales-orders",
    "source": "pnp",
    "title": "Sales Orders Web Part",
    "shortDescription": "Shows how how to use Microsoft Graph Connector that use DB2 Database and display Sales Orders in a list.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-sales-orders",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-sales-orders",
    "longDescription": [
      "This Sample show how to use Microsoft Graph Connector that use DB2 Database and display Sales Orders in a list."
    ],
    "creationDateTime": "2023-11-06",
    "updateDateTime": "2023-11-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.0"
      }
    ],
    "thumbnails": [
      {
        "name": "salesOrders.gif",
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-sales-orders/assets/salesOrders.gif",
        "alt": "Web Part Preview"
      },
      {
        "name": "salesOrders01.png",
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-sales-orders/assets/salesOrders01.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "salesOrders02.png",
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-sales-orders/assets/salesOrders02.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "teams01.png",
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-sales-orders/assets/teams01.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-save-attachments",
    "source": "pnp",
    "title": "Save Attachments Web Part",
    "shortDescription": "This SPFx Outlook Add-In lets users save any email attachments to a OneDrive folder.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-save-attachments",
    "longDescription": [
      "This SPFx Outlook Add-In lets users save any email attachments to a OneDrive folder."
    ],
    "creationDateTime": "2020-10-04",
    "updateDateTime": "2021-10-19",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.13.0"
      },
      {
        "key": "SPFX-OUTLOOKADDIN",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-save-attachments/assets/ReactSaveAttachments.gif",
        "alt": "Save Attachments"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-save-attachments/assets/react-save-attachments-1.png?raw=true",
        "alt": "Save Attachments"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-save-attachments/assets/react-save-attachments-2.gif?raw=true",
        "alt": "Save Attachments"
      },
      {
        "type": "video",
        "order": 103,
        "url": "https://www.youtube.com/embed/Hl4zu9YeeRA",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "aakashbhardwaj619",
        "company": "Microsoft",
        "pictureUrl": "https://avatars.githubusercontent.com/u/33526902?s=460&u=e780f4ef1da922c84f2c5c66c59cecbff2300581&v=4",
        "name": "Aakash Bhardwaj",
        "twitter": "aakash_316"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Create Outlook Add-ins using SharePoint Framework",
        "description": "Introduced in SharePoint Framework v1.10, you can implement an Outlook Web App add-in with the SharePoint Framework and use SharePoint as a host for your solution.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/office-addins-create"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-save-to-onedrive-app-personal-folder",
    "source": "pnp",
    "title": "Save to User Application Personal Folder in OneDrive",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-save-to-onedrive-app-personal-folder",
    "longDescription": [
      "This solution shows how to manage data stored in user application's personal folder in OneDrive which is one of many good methods to store application data/configuration which may be easily used in apps added to SharePoint page or Teams. The solution is built of two compontents.",
      "SPFx library which provides the functionality to manage data saved to OneDrive application personal folder and SFIx webpart component which is a very simple solution that uses the library and gets or saves data."
    ],
    "creationDateTime": "2022-02-21",
    "updateDateTime": "2022-02-21",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.14"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-save-to-onedrive-app-personal-folder/assets/in-sharepoint.png",
        "alt": "Web Part Preview in SharePoint"
      },
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-save-to-onedrive-app-personal-folder/assets/in-teams.png",
        "alt": "Web Part Preview in Teams"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Adam-it",
        "pictureUrl": "https://github.com/Adam-it.png",
        "name": "Adam Wójcik"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-script-editor",
    "source": "pnp",
    "title": "Script editor web part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-script-editor",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-10-13",
    "updateDateTime": "2023-04-24",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      },
      {
        "key": "SPFX-FULLPAGEAPP",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-script-editor/assets/modern-script-editor-wp.gif",
        "alt": "Script editor web part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-script-editor/assets/modern-script-editor-wp-teams.gif?raw=true",
        "alt": "Script editor web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      },
      {
        "gitHubAccount": "felixbohnacker",
        "pictureUrl": "https://github.com/felixbohnacker.png",
        "name": "Felix Bohnacker"
      },
      {
        "gitHubAccount": "salascz",
        "name": "salascz",
        "pictureUrl": "https://github.com/salascz.png"
      },
      {
        "gitHubAccount": "wobba",
        "name": "Mikael Svenson",
        "pictureUrl": "https://github.com/wobba.png"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Using single part app pages in SharePoint Online",
        "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-script-editor-onprem",
    "source": "pnp",
    "title": "Script editor web part for modern pages",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-script-editor-onprem",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-03-16",
    "updateDateTime": "2020-03-16",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      },
      {
        "key": "SPFX-FULLPAGEAPP",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-script-editor-onprem/assets/modern-script-editor-wp.gif",
        "alt": "Script editor web part for modern pages"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "wobba",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/wobba.png",
        "name": "Mikael Svenson",
        "twitter": "mikaelsvenson"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Using single part app pages in SharePoint Online",
        "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-search",
    "source": "pnp",
    "title": "Search Client-Side Web Part built with React and Flux",
    "shortDescription": "Sample Search Web Part with internal and external template support. This sample illustrates how you can use React and Flux within the SharePoint Framework.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-search",
    "longDescription": [
      "Sample Search Web Part with internal and external template support. This sample illustrates how you can use React and Flux within the SharePoint Framework."
    ],
    "creationDateTime": "2017-02-28",
    "updateDateTime": "2017-02-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-search/assets/preview.png",
        "alt": "Search Client-Side Web Part built with React and Flux"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-search/assets/external.png?raw=true",
        "alt": "Search Client-Side Web Part built with React and Flux"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-search/assets/internal.png?raw=true",
        "alt": "Search Client-Side Web Part built with React and Flux"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "estruyf",
        "company": "Struyf Consulting",
        "pictureUrl": "https://github.com/estruyf.png",
        "name": "Elio Struyf",
        "twitter": "eliostruyf"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-securitygrid",
    "source": "pnp",
    "title": "Security Grid Web Part",
    "shortDescription": "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",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-securitygrid",
    "longDescription": [
      "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"
    ],
    "creationDateTime": "2021-03-06",
    "updateDateTime": "2021-03-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-securitygrid/src/images/MainDisplay.gif",
        "alt": "Security Grid"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "russgove",
        "company": "",
        "pictureUrl": "https://github.com/russgove.png",
        "name": "Russell Gove"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-side-panel",
    "source": "pnp",
    "title": "Side Panel Client-Side Web Part",
    "shortDescription": "The web part illustrates creation and usage of Side Panel (Sidebar) control.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-side-panel",
    "longDescription": [
      "The web part illustrates creation and usage of Side Panel (Sidebar) control."
    ],
    "creationDateTime": "2017-05-11",
    "updateDateTime": "2017-05-11",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-side-panel/assets/side-panel.gif",
        "alt": "Side Panel Client-Side Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Sharepointalist",
        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4",
        "name": "Alex Terentiev",
        "twitter": "alexaterentiev"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-site-information",
    "source": "pnp",
    "title": "Site Information Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-site-information",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-05-01",
    "updateDateTime": "2018-05-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-site-information.gif",
        "alt": "Site Information"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "eoverfield",
        "company": "PixelMill",
        "pictureUrl": "https://github.com/eoverfield.png",
        "name": "Eric Overfield",
        "twitter": "EricOverfield"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-site-provisioning-manager",
    "source": "pnp",
    "title": "Site Provisioning Manager Web Part",
    "shortDescription": "This sample shows how you can manage site provisioning by calling Azure functions.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-site-provisioning-manager",
    "longDescription": [
      "This sample shows how you can manage site provisioning by calling Azure functions."
    ],
    "creationDateTime": "2019-08-14",
    "updateDateTime": "2019-08-14",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-site-provisioning-manager/assets/screenshot.gif",
        "alt": "Site Provisioning Manager Web Part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-site-provisioning-manager/assets/api-permissions.png?raw=true",
        "alt": "Site Provisioning Manager Web Part"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-site-provisioning-manager/assets/functions-CORS-settings.PNG?raw=true",
        "alt": "Site Provisioning Manager Web Part"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-site-provisioning-manager/assets/functions-visual-studio-publish-profile.png?raw=true",
        "alt": "Site Provisioning Manager Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AhmadiRamin",
        "company": "Content and Cloud",
        "pictureUrl": "https://github.com/AhmadiRamin.png",
        "name": "Ramin Ahmadi",
        "twitter": "raminahmadi1986"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-site-secure-function-call",
    "source": "pnp",
    "title": "Site Secure Function Call",
    "shortDescription": "This combined SharePoint Framework and Azure Function solution is to provide the potentially most secure access from SharePoint Framework to any kind of third party API or Microsoft Graph.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-office-offer-creation",
    "longDescription": [
      "This combined SharePoint Framework and Azure Function solution is to provide the potentially most secure access from SharePoint Framework to any kind of third party API, in fact here Microsoft Graph. It shows that AadHttpClient should be preferred over MSGraphClient."
    ],
    "creationDateTime": "2024-07-12",
    "updateDateTime": "2024-07-12",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-site-secure-function-call/assets/SetSiteDescreption.gif",
        "alt": "App in action"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "mmsharepoint",
        "pictureUrl": "https://github.com/mmsharepoint.png",
        "name": "Markus Moeller"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-sitepages-metadata",
    "source": "pnp",
    "title": "Sitepages Metadata Web Part",
    "shortDescription": "Solution provides an enhancement to SitePages library that enables updating existing items with metadata, and a rollup Web Part to display them.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-sitepages-metadata",
    "longDescription": [
      "Solution provides an enhancement to SitePages library that enables updating existing items with metadata, and a rollup Web Part to display them."
    ],
    "creationDateTime": "2018-04-17",
    "updateDateTime": "2018-04-17",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-sitepages-metadata/assets/demo-wp.gif",
        "alt": "Sitepages Metadata"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-sitepages-metadata/assets/demo-commandset.gif?raw=true",
        "alt": "Sitepages Metadata"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "olegrumiancev",
        "company": "",
        "pictureUrl": "https://github.com/olegrumiancev.png",
        "name": "Oleg Rumiancev"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-sites-selected-admin",
    "source": "pnp",
    "title": "Sites Selected Admin",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-sites-selected-admin",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2021-03-08",
    "updateDateTime": "2021-03-08",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-sites-selected-admin/assets/sites-manager-demo.gif",
        "alt": "Sites Selected Admin"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-sites-selected-admin/assets/aad-appreg.png?raw=true",
        "alt": "Sites Selected Admin"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-sites-selected-admin/assets/api-access-page.png?raw=true",
        "alt": "Sites Selected Admin"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-sites-selected-admin/assets/vsDemo.gif?raw=true",
        "alt": "Sites Selected Admin"
      },
      {
        "type": "video",
        "order": 104,
        "url": "https://www.youtube.com/embed/afwLIS77h8Y",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "fthorild",
        "company": "Sogeti Sweden",
        "pictureUrl": "https://github.com/fthorild.png",
        "name": "Fredrik Thorild",
        "twitter": "taxonomythorild"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-skype-status",
    "source": "pnp",
    "title": "Skype Status Web Part",
    "shortDescription": "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",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-skype-status",
    "longDescription": [
      "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"
    ],
    "creationDateTime": "2019-03-27",
    "updateDateTime": "2019-03-27",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-skype-status/images/demo.gif",
        "alt": "Skype Status Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "baywet",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/baywet.png",
        "name": "Vincent Biret",
        "twitter": "baywet"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-slide-swiper",
    "source": "pnp",
    "title": "Slide Swiper Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-slide-swiper",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-11-01",
    "updateDateTime": "2019-11-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.7.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-slide-swiper/assets/SPFx-React-Slider-Swiper.gif",
        "alt": "Slide Swiper"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "VelinGeorgiev",
        "company": "",
        "pictureUrl": "https://github.com/VelinGeorgiev.png",
        "name": "Velin Georgiev"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-smart-profile-photo-editor",
    "source": "pnp",
    "title": "Smart Profile Photo Editor Web Part",
    "shortDescription": "Uses Azure Cognitive Services to analyze and approve or reject user-submitted photos.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-smart-profile-photo-editor",
    "longDescription": [
      "Uses Azure Cognitive Services to analyze and approve or reject user-submitted photos."
    ],
    "creationDateTime": "2020-08-12",
    "updateDateTime": "2020-08-12",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-smart-profile-photo-editor/assets/WebPartPreview.gif",
        "alt": "Smart Profile Photo Editor"
      },
      {
        "type": "video",
        "order": 101,
        "url": "https://www.youtube.com/embed/FQITfL_EfaU",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "hugoabernier",
        "company": "Tahoe Ninjas",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier",
        "twitter": "bernierh"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-soccer-highlights",
    "source": "pnp",
    "title": "Soccer Highlights Web Part",
    "shortDescription": "This react web part sample displays Soccer Highlights from a public Soccer API.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-soccer-highlights",
    "longDescription": [
      "This react web part sample displays Soccer Highlights from a public Soccer API."
    ],
    "creationDateTime": "2020-10-30",
    "updateDateTime": "2020-10-30",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "PNPCONTROLS",
        "value": "WebPartTitle"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-soccer-highlights/assets/SoccerHighlightsV1.png",
        "alt": "Soccer Highlights"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-soccer-highlights/assets/SoccerHighlights.gif?raw=true",
        "alt": "Soccer Highlights"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-soccer-highlights/assets/SoccerHighlights.png?raw=true",
        "alt": "Soccer Highlights"
      },
      {
        "type": "video",
        "order": 103,
        "url": "https://www.youtube.com/embed/LZcFEVV7J94",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "jerryyasir",
        "company": "DXC Technology",
        "pictureUrl": "https://github.com/jerryyasir.png",
        "name": "Jerry Yasir",
        "twitter": "jerryyasir"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-sp-elevatedprivileges",
    "source": "pnp",
    "title": "Communicate using elevated privileges with SharePoint",
    "shortDescription": "Sample SharePoint Framework client-side web part illustrating communication with SharePoint using elevated privileges through a custom Web API.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-sp-elevatedprivileges",
    "longDescription": [
      "Sample SharePoint Framework client-side web part illustrating communication with SharePoint using elevated privileges through a custom Web API."
    ],
    "creationDateTime": "2016-10-12",
    "updateDateTime": "2016-10-12",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "drop4"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-sp-elevatedprivileges/assets/preview.png",
        "alt": "Communicate using elevated privileges with SharePoint"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-sp-pnp-js-property-decorators",
    "source": "pnp",
    "title": "Using PnP JS Core custom objects with @select and @expand decorators",
    "shortDescription": "This web part demonstrates how to use PnP JS Core Custom Objects with @select and @expand TypeScript decorators.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-sp-pnp-js-property-decorators",
    "longDescription": [
      "This web part demonstrates how to use PnP JS Core Custom Objects with @select and @expand TypeScript decorators."
    ],
    "creationDateTime": "2017-07-02",
    "updateDateTime": "2017-07-02",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/media/raw/master/parker/pnp/300w/parker.png",
        "alt": "Using PnP JS Core custom objects with @select and @expand decorators"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "jquintozamora",
        "company": "",
        "pictureUrl": "https://github.com/jquintozamora.png",
        "name": "Jose Quinto"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-sp-site-user-groups",
    "source": "pnp",
    "title": "Site User and Group Information Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-sp-site-user-groups",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-09-08",
    "updateDateTime": "2020-09-08",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-sp-site-user-groups/assets/screen1.png",
        "alt": "Site User and Group Information"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-sp-site-user-groups/assets/screen2.png?raw=true",
        "alt": "Site User and Group Information"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-sp-site-user-groups/assets/screen3.png?raw=true",
        "alt": "Site User and Group Information"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "danwatford",
        "company": "Watford Consulting Ltd.",
        "pictureUrl": "https://avatars.githubusercontent.com/u/5949502?s=460&u=01688c475aa5c94da6a292473ff80ffe1a7975cb&v=4",
        "name": "Daniel Watford",
        "twitter": "DanWatford"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-sp-tinymce",
    "source": "pnp",
    "title": "List Integration with TinyMCE Editor Web Part",
    "shortDescription": "The web part allows users to insert column data from associated SharePoint lists using a split button on the toolbar",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-sp-tinymce",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-sp-tinymce",
    "longDescription": [
      "An example of integrating SharePoint lists with TinyMCE editors can be found in this sample. The web part allows users to insert column data from associated SharePoint lists using a split button on the toolbar. An editor preview plugin for TinyMce was developed in order to be able to preview changes before they are saved."
    ],
    "creationDateTime": "2023-06-06",
    "updateDateTime": "2023-06-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-sp-tinymce/assets/demo.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ejazhussain",
        "pictureUrl": "https://github.com/ejazhussain.png",
        "name": "Ejaz Hussain"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-spfx-control-iframepanel",
    "source": "pnp",
    "title": "IFramePanel Web Part",
    "shortDescription": "This sample shows how to use the IFramePanel control in a SharePoint Framework web part.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-spfx-control-iframepanel",
    "longDescription": [
      "This sample shows how to use the IFramePanel control in a SharePoint Framework web part."
    ],
    "creationDateTime": "2023-03-29",
    "updateDateTime": "2023-03-29",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.0"
      },
      {
        "key": "SPFX-FULLPAGEAPP",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-spfx-control-iframepanel/assets/preview.png",
        "alt": "Spfx control iframepanel"
      },
      {
        "type": "image",
        "order": 200,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-spfx-control-iframepanel/assets/IFramePanel.gif",
        "alt": "Spfx control iframepanel"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "ValerasNarbutas",
        "company": "Macaw",
        "pictureUrl": "https://github.com/valerasnarbutas.png",
        "name": "Valeras Narbutas",
        "twitter": "ValerasNarbutas"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Using single part app pages in SharePoint Online",
        "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-spupsproperty-sync",
    "source": "pnp",
    "title": "SPUPS Property Sync Web Part",
    "shortDescription": "This component will help the administrators who are currently maintaining the user profiles in their organization.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-spupsproperty-sync",
    "longDescription": [
      "This component will help the administrators who are currently maintaining the user profiles in their organization."
    ],
    "creationDateTime": "2020-04-23",
    "updateDateTime": "2020-04-23",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      },
      {
        "key": "SPFX-FULLPAGEAPP",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-spupsproperty-sync/assets/SPUPS-Sync.gif",
        "alt": "SPUPS Property Sync"
      },
      {
        "type": "video",
        "order": 101,
        "url": "https://www.youtube.com/embed/BaNWS0hzUpQ",
        "alt": "Community demo of the web part"
      },
      {
        "type": "video",
        "order": 101,
        "url": "https://www.youtube.com/embed/plS_1BsQAto",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "sudharsank",
        "company": "NTT Digital Business Solutions",
        "pictureUrl": "https://github.com/sudharsank.png",
        "name": "Sudharsan Kesavanarayanan",
        "twitter": "sudharsank"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Using single part app pages in SharePoint Online",
        "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-staffdirectory",
    "source": "pnp",
    "title": "Staff Directory Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-staffdirectory",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2021-03-09",
    "updateDateTime": "2022-06-16",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.14.0"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSPERSONALAPP",
        "value": "true"
      },
      {
        "key": "PNPCONTROLS",
        "value": "WebPartTitle"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-staffdirectory/assets/staffdirectory.gif",
        "alt": "Staff Directory"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-staffdirectory/assets/staffTeams01.png?raw=true",
        "alt": "Staff Directory"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-staffdirectory/assets/staffTeams02.png?raw=true",
        "alt": "Staff Directory"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      },
      {
        "gitHubAccount": "AriGunawan",
        "pictureUrl": "https://github.com/AriGunawan.png",
        "name": "Ari Gunawan"
      },
      {
        "gitHubAccount": "tristian2",
        "pictureUrl": "https://github.com/tristian2.png",
        "name": "Tristian O'brien"
      },
      {
        "gitHubAccount": "milanholemans",
        "pictureUrl": "https://github.com/milanholemans.png",
        "name": "Milan Holemans"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-star-ratings",
    "source": "pnp",
    "title": "Star Ratings Web Part",
    "shortDescription": "Demonstrates Star Ratings capabilities to SharePoint News.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-star-ratings",
    "longDescription": [
      "This web part demonstrates Star Ratings capabilities to SharePoint News. The Ratings site collection feature provides Likes and Star Ratings, but SharePoint News provides only provides Likes. This web part can get or set ratings of the current page."
    ],
    "creationDateTime": "2021-10-07",
    "updateDateTime": "2023-11-09",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-star-ratings/assets/react-star-ratings.png",
        "alt": "Web part in action"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "karamem0",
        "pictureUrl": "https://github.com/karamem0.png",
        "name": "Takashi Shinohara"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-stock-information",
    "source": "pnp",
    "title": "Stock Information Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-stock-information",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-05-01",
    "updateDateTime": "2018-05-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-stock.gif",
        "alt": "Stock Information"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "eoverfield",
        "company": "PixelMill",
        "pictureUrl": "https://github.com/eoverfield.png",
        "name": "Eric Overfield",
        "twitter": "EricOverfield"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-tabacordion",
    "source": "pnp",
    "title": "Tab Accordion Web Part with Property Field Collection Data and tinyMCE for Rich Text Editing",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tabacordion",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tabacordion",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2022-03-30",
    "updateDateTime": "2022-03-30",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.13.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-tabacordion/assets/TabAccordionWebpart.gif",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "arunkumarperumal",
        "pictureUrl": "https://github.com/arunkumarperumal.png",
        "name": "Arun Kumar Perumal"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-tailwindcss",
    "source": "pnp",
    "title": "Tailwind CSS Web Part",
    "shortDescription": "This project shows how to integrate Tailwind CSS framework into a SPFx React project.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tailwindcss",
    "longDescription": [
      "This project shows how to integrate Tailwind CSS framework into a SPFx React project."
    ],
    "creationDateTime": "2020-10-17",
    "updateDateTime": "2020-10-17",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-tailwindcss/assets/react-tailwindcss-overview.gif",
        "alt": "Tailwind CSS"
      },
      {
        "type": "video",
        "order": 102,
        "url": "https://www.youtube.com/embed/_gQkauERWh0",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "fabiofranzini",
        "company": "",
        "pictureUrl": "https://github.com/fabiofranzini.png",
        "name": "Fabio Franzini",
        "twitter": "franzinifabio"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-tailwindcss3",
    "source": "pnp",
    "title": "Tailwind 3 Web Part",
    "shortDescription": "This project showcases an integration of Tailwind CSS into an SPFx project.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tailwindcss",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tailwindcss",
    "longDescription": [
      "This project showcases an integration of Tailwind CSS into an SPFx project. It offers a sample implementation, facilitating straightforward setup and utilization of Tailwind CSS for enhanced styling and design in SharePoint Framework projects."
    ],
    "creationDateTime": "2023-10-07",
    "updateDateTime": "2023-10-07",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/main/samples/react-tailwindcss3/assets/example.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AriGunawan",
        "pictureUrl": "https://github.com/AriGunawan.png",
        "name": "Ari Gunawan"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-target-audience",
    "source": "pnp",
    "title": "Target Audience Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-target-audience",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-01-28",
    "updateDateTime": "2020-01-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "PNPCONTROLS",
        "value": "PropertyFieldPeoplePicker, Placeholder"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-target-audience/assets/audience.gif",
        "alt": "Target audience"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "rabwill",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/rabwill.png",
        "name": "Rabia Williams",
        "twitter": "williamsrabia"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-taxonomy-file-explorer",
    "source": "pnp",
    "title": "Taxonomy File Explorer Web Part",
    "shortDescription": "This solution renders a given Termset as a Tree and incorporates files similar than a folder structure in file explorer.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-taxonomy-file-explorer",
    "longDescription": [
      "This solution renders a given Termset as a Tree and incorporates files similar than a folder structure in file explorer."
    ],
    "creationDateTime": "2021-12-26",
    "updateDateTime": "2022-07-16",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-taxonomy-file-explorer/assets/03Link.gif",
        "alt": "Linking to a file"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-taxonomy-file-explorer/assets/04Move.gif",
        "alt": "Moving a file"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-taxonomy-file-explorer/assets/04Move.gif",
        "alt": "Copying a file"
      },
      {
        "type": "video",
        "order": 103,
        "url": "https://www.youtube.com/embed/V10hJuakgis",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "mmsharepoint",
        "pictureUrl": "https://github.com/mmsharepoint.png",
        "name": "Markus Moeller"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-taxonomypicker",
    "source": "pnp",
    "title": "Taxonomy Picker Web Part",
    "shortDescription": "A Taxonomy Picker control built with React based on react-taxonomypicker for use with SharePoint Framework client-side web parts (SPFx).",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-taxonomypicker",
    "longDescription": [
      "A Taxonomy Picker control built with React based on react-taxonomypicker for use with SharePoint Framework client-side web parts (SPFx)."
    ],
    "creationDateTime": "2017-04-14",
    "updateDateTime": "2017-04-14",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-taxonomypicker/assets/react-taxonomy-picker-spfx.gif",
        "alt": "Taxonomy Picker"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "jquintozamora",
        "company": "",
        "pictureUrl": "https://github.com/jquintozamora.png",
        "name": "Jose Quinto"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-taxonomypicker-panel",
    "source": "pnp",
    "title": "Taxonomy picker using Office UI Fabric Panel",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-taxonomypicker-panel",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-07-20",
    "updateDateTime": "2018-07-20",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.5.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-taxonomypicker-panel/assets/TaxonomyPicker.gif?raw=true",
        "alt": "Taxonomy picker using Office UI Fabric Panel"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-taxonomypicker-panel/assets/TaxonomyPicker.gif?raw=true",
        "alt": "Taxonomy picker using Office UI Fabric Panel"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "vipulkelkar",
        "company": "Rapid Circle",
        "pictureUrl": "https://github.com/vipulkelkar.png",
        "name": "Vipul Kelkar"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-team-creator",
    "source": "pnp",
    "title": "Teams Creator Web Part",
    "shortDescription": "The web part illustrates usage of MS Graph beta APIs to work with Teams",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-team-creator",
    "longDescription": [
      "The web part illustrates usage of MS Graph beta APIs to work with Teams"
    ],
    "creationDateTime": "2018-11-19",
    "updateDateTime": "2018-11-19",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.7.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-team-creator/assets/teams-creator.png",
        "alt": "Teams Creator Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Sharepointalist",
        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4",
        "name": "Alex Terentiev",
        "twitter": "alexaterentiev"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-teams-configure-tab",
    "source": "pnp",
    "title": "Teams Configuration Tab",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-configure-tab",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-01-06",
    "updateDateTime": "2020-01-06",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-configure-tab/documentation/images/SPTabAppStudioTeamsTab006.png",
        "alt": "Teams Configuration Tab"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "BobGerman",
        "company": "Microsoft",
        "pictureUrl": "https://avatars.githubusercontent.com/u/4664072?s=460&u=29310fd67417ec5f81dc8881dc6eb5dc0065da2d&v=4",
        "name": "Bob German",
        "twitter": "Bob1German"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-teams-conversationview",
    "source": "pnp",
    "title": "Teams Tab Conversation View",
    "shortDescription": "Displays Microsoft Teams channels conversations in a simpler way which makes easy to search and filters the new conversations and its replies",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-conversationview",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-conversationview",
    "longDescription": [
      "Displays Microsoft Teams channels conversations in a simpler way which makes easy to search and filters the new conversations and its replies"
    ],
    "creationDateTime": "2023-03-11",
    "updateDateTime": "2023-03-11",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-conversationview/assets/1.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-conversationview/assets/2.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-conversationview/assets/3.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "siddharth-vaghasia",
        "pictureUrl": "https://github.com/siddharth-vaghasia.png",
        "name": "Siddharth Vaghasia"
      },
      {
        "gitHubAccount": "kunj-sangani",
        "name": "Kunj Sangani",
        "pictureUrl": "https://github.com/kunj-sangani.png"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-teams-graph-upload-as-pdf",
    "source": "pnp",
    "title": "Teams Graph Upload as PDF Web Part",
    "shortDescription": "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",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-graph-upload-as-pdf",
    "longDescription": [
      "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"
    ],
    "creationDateTime": "2020-11-10",
    "updateDateTime": "2021-11-08",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.13.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-graph-upload-as-pdf/assets/UploadAnimated.gif",
        "alt": "Web Part Preview"
      },
      {
        "type": "video",
        "order": 101,
        "url": "https://www.youtube.com/embed/ikujJ0UnGAY",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "mmsharepoint",
        "pictureUrl": "https://github.com/mmsharepoint.png",
        "name": "Markus Moeller"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-teams-lead-dashboard",
    "source": "pnp",
    "title": "Lead Dashboard Web Part",
    "shortDescription": "This sample shows how to use SPFx to create a Microsoft Teams dashboard personal app.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-lead-dashboard",
    "longDescription": [
      "This sample shows how to use SPFx to create a Microsoft Teams dashboard personal app."
    ],
    "creationDateTime": "2021-10-05",
    "updateDateTime": "2023-04-07",
    "products": [
      "SharePoint",
      "Teams"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.17.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-lead-dashboard/assets/LeadAssistDashboard_overview.png",
        "alt": "Lead Dashboard"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "PaoloPia",
        "company": "PiaSys.com",
        "pictureUrl": "https://github.com/PaoloPia.png",
        "name": "Paolo Pialorsi",
        "twitter": "PaoloPia"
      },
      {
        "gitHubAccount": "GuidoZam",
        "company": "PiaSys.com",
        "pictureUrl": "https://github.com/GuidoZam.png",
        "name": "Guido Zambarda"
      },
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building for Microsoft Teams",
        "description": "Learn how to create SPFx web parts that integrate with the Microsoft Teams context.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/build-for-teams-overview"
      },
      {
        "name": "Use Microsoft Graph in your solution",
        "description": "Learn how you can leverage the Microsoft Graph API from your custom developed SPFx web parts.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis"
      },
      {
        "name": "Publish SharePoint Framework applications to the Marketplace",
        "description": "Publishing your SharePoint Framework solutions to marketplace (also known as AppSource) and to SharePoint store, which allows you to reach other organizations and let them easily install your application in their Microsoft 365 tenant.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/publish-to-marketplace-overview"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-teams-meeting-app-questionnaire",
    "source": "pnp",
    "title": "Questionnaire Teams Meeting App",
    "shortDescription": "Questionnaire meeting app provides Pre-meeting app experience for MS Teams meeting attendees to ask the questions related to meeting before the meeting starts.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-meeting-app-questionnaire",
    "longDescription": [
      "SPFx v1.12 support for Microsoft Teams meeting apps development. Questionnaire meeting app provides Pre-meeting app experience for MS Teams meeting attendees to ask the questions related to meeting before the meeting starts.",
      "The Questionnaire meeting app displays the questions from attendees as pre-meeting app experience."
    ],
    "creationDateTime": "2021-03-22",
    "updateDateTime": "2022-05-02",
    "products": [
      "SharePoint",
      "Teams"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.14.0"
      },
      {
        "key": "SPFX-TEAMSMEETINGAPP",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-meeting-app-questionnaire/assets/web-part-preview.gif",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-meeting-app-questionnaire/assets/questionnaire-preview.png",
        "alt": "Questionnaire Preview"
      },
      {
        "type": "video",
        "order": 102,
        "url": "https://www.youtube.com/embed/gDcT7yu6UmU",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "nanddeepn",
        "company": "",
        "pictureUrl": "https://github.com/nanddeepn.png",
        "name": "Nanddeep Nachan",
        "twitter": "NanddeepNachan"
      },
      {
        "gitHubAccount": "ravi16a87",
        "company": "Cognizant",
        "pictureUrl": "https://github.com/ravi16a87.png",
        "name": "Ravi Kulkarni",
        "twitter": "RaviKul16a87"
      },
      {
        "gitHubAccount": "SmitaNachan",
        "company": "",
        "pictureUrl": "https://github.com/SmitaNachan.png",
        "name": "Smita Nachan",
        "twitter": "SmitaNachan"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Apps in Teams meetings",
        "description": "Meetings are key to productivity in Teams. They enable collaboration, partnership, informed communication, and shared feedback in an inclusive and active forum. As a developer, you can create configurable tab, bot, and message extension applications to enhance and enrich a Teams meeting experience. Meeting users can access apps, via the tab gallery, to enable relevant scenarios such as pre-staging a Kanban board, launching an in-meeting actionable dialog, or creating a post-meeting poll. Your meeting app can deliver a user experience for each stage of the meeting lifecycle based upon attendee status.",
        "url": "https://docs.microsoft.com/microsoftteams/platform/apps-in-teams-meetings/teams-apps-in-meetings?WT.mc_id=M365-MVP-5003693"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-teams-membership-updater",
    "source": "pnp",
    "title": "Teams Membership Updater Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-membership-updater",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-04-27",
    "updateDateTime": "2022-03-24",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.14.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-membership-updater/assets/Screenshot-2020-05-01.png",
        "alt": "Web part in action"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-membership-updater/assets/teamsmembership.gif",
        "alt": "Web part in action"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-membership-updater/assets/72f2b53a-f9be-4344-8fec-f4a09961a25b.png",
        "alt": "Web part in action"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "techienickb",
        "pictureUrl": "https://github.com/techienickb.png",
        "name": "Nick Brown",
        "twitter": "techienickb"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-teams-message",
    "source": "pnp",
    "title": "Teams Messages Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-message",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-05-23",
    "updateDateTime": "2020-05-23",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-message/assets/myteamsmessage.gif",
        "alt": "React Teams Messages"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-teams-message/assets/webpartproperties.jpg?raw=true",
        "alt": "React Teams Messages"
      },
      {
        "type": "video",
        "order": 102,
        "url": "https://www.youtube.com/embed/lzOcAL_6A7c",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "siddharth-vaghasia",
        "company": "",
        "pictureUrl": "https://github.com/siddharth-vaghasia.png",
        "name": "Siddharth Vaghasia"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-teams-message-user",
    "source": "pnp",
    "title": "Message Teams User Web Part",
    "shortDescription": "Sample that shows how to send a message to Microsoft Teams using a SharePoint framework solution using Microsoft Graph.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-message-user",
    "longDescription": [
      "Sample that shows how to send a message to Microsoft Teams using a SharePoint framework solution using Microsoft Graph."
    ],
    "creationDateTime": "2021-02-28",
    "updateDateTime": "2021-02-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "PNPCONTROLS",
        "value": "PeoplePicker"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-message-user/assets/webPart-preview.png",
        "alt": "Message Teams User"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-teams-message-user/assets/MessageTeams.gif?raw=true",
        "alt": "Message Teams User"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "DRamalho92",
        "company": "Storm Technology",
        "pictureUrl": "https://github.com/DRamalho92.png",
        "name": "David Ramalho"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-teams-my-webinars",
    "source": "pnp",
    "title": "Teams My Webinars Web Part",
    "shortDescription": "Displays a list of Teams Webinars you are an organizer of, allows you to sync those webinars to a SharePoint list, to share within a Team and cross check pending registrants against membership of a team.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-my-webinars",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-my-webinars",
    "longDescription": [
      "Displays a list of Teams Webinars you are an organizer of, allows you to sync those webinars to a SharePoint list, to share within a Team and cross check pending registrants against membership of a team."
    ],
    "creationDateTime": "2023-12-25",
    "updateDateTime": "2023-12-31",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.2"
      }
    ],
    "thumbnails": [
      {
        "name": "Screenshot 2023-12-25-main.png",
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-my-webinars/assets/Screenshot 2023-12-25-main.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "Screenshot 2023-12-25-addtolist.png",
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-my-webinars/assets/Screenshot 2023-12-25-addtolist.png",
        "alt": "Web Part Preview"
      },
      {
        "name": "Screenshot 2023-12-25.png",
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-my-webinars/assets/Screenshot 2023-12-25.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "techienickb",
        "pictureUrl": "https://github.com/techienickb.png",
        "name": "Nick Brown"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-teams-personal-app-settings",
    "source": "pnp",
    "title": "Teams Personal App Settings Web Part",
    "shortDescription": "Demonstrates how you can store Teams Personal App Web Part's properties in user's OneDrive.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-personal-app-settings",
    "longDescription": [
      "Demonstrates how you can store Teams Personal App Web Part's properties in user's OneDrive."
    ],
    "creationDateTime": "2020-04-24",
    "updateDateTime": "2020-04-24",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      },
      {
        "key": "SPFX-TEAMSPERSONALAPP",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-personal-app-settings/assets/teams-personal-app-settings.png",
        "alt": "Teams Personal App Settings Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Sharepointalist",
        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4",
        "name": "Alex Terentiev",
        "twitter": "alexaterentiev"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-teams-send-notification",
    "source": "pnp",
    "title": "Send Notifications in Teams Web Part",
    "shortDescription": "This web part allows you to send MS Teams feed notifications to a selected user",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-send-notification",
    "longDescription": [
      "This web part allows you to send MS Teams feed notifications to a selected user"
    ],
    "creationDateTime": "2020-12-04",
    "updateDateTime": "2020-12-04",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-send-notification/assets/teams-notification-sender.gif",
        "alt": "Send Notifications in Teams"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "luismanez",
        "company": "ClearPeople",
        "pictureUrl": "https://github.com/luismanez.png",
        "name": "Luis Mañez"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-teams-tab-field-visit-mashup",
    "source": "pnp",
    "title": "Teams Tab - Field Visit Web Part (Mashup)",
    "shortDescription": "A web part for use in Microsoft Teams that displays a mashup of information partaining to customer visits.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-tab-field-visit-mashup",
    "longDescription": [
      "A web part for use in Microsoft Teams that displays a mashup of information partaining to customer visits."
    ],
    "creationDateTime": "2019-04-20",
    "updateDateTime": "2019-04-20",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-tab-field-visit-mashup/documentation/FieldVisitDemo.png",
        "alt": "Teams Tab - Field Visit Demo (Mashup)"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "BobGerman",
        "company": "Microsoft",
        "pictureUrl": "https://avatars.githubusercontent.com/u/4664072?s=460&u=29310fd67417ec5f81dc8881dc6eb5dc0065da2d&v=4",
        "name": "Bob German",
        "twitter": "Bob1German"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-teams-tab-suggested-members",
    "source": "pnp",
    "title": "Group members suggestion Web Part",
    "shortDescription": "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",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-tab-suggested-members",
    "longDescription": [
      "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"
    ],
    "creationDateTime": "2018-11-18",
    "updateDateTime": "2018-11-18",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.7.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-tab-suggested-members/assets/SuggestedMembersTeamsTab.jpg",
        "alt": "Group members suggestion"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "luismanez",
        "company": "ClearPeople",
        "pictureUrl": "https://github.com/luismanez.png",
        "name": "Luis Mañez"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-teams-tabs-pnpjs",
    "source": "pnp",
    "title": "MS Teams Channels and Tabs from Modern Team site",
    "shortDescription": "A SPFx Web Part using @pnp/graph/teams. It shows Channels and Tabs (with link) from a Modern Team Site connected to Microsoft Teams.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-tabs-pnpjs",
    "longDescription": [
      "A SPFx Web Part using @pnp/graph/teams. It shows Channels and Tabs (with link) from a Modern Team Site connected to Microsoft Teams."
    ],
    "creationDateTime": "2019-10-30",
    "updateDateTime": "2019-10-30",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-tabs-pnpjs/assets/react-teams-tabs-pnpjs-webpart-animated.gif",
        "alt": "MS Teams Channels and Tabs from Modern Team site"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-teams-tabs-pnpjs/assets/react-teams-tabs-pnpjs-webpart.png?raw=true",
        "alt": "MS Teams Channels and Tabs from Modern Team site"
      },
      {
        "type": "video",
        "order": 102,
        "url": "https://www.youtube.com/embed/jUesdAdHRng",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "fredupstair",
        "company": "Avanade Italy",
        "pictureUrl": "https://github.com/fredupstair.png",
        "name": "Federico Porceddu"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-teams-tagging",
    "source": "pnp",
    "title": "Tag Teams using a TermSet in SharePoint",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-tagging",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2019-04-18",
    "updateDateTime": "2019-04-18",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.0"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-tagging/assets/webpart.JPG",
        "alt": "Tag Teams using a TermSet in SharePoint"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "luismanez",
        "company": "ClearPeople",
        "pictureUrl": "https://github.com/luismanez.png",
        "name": "Luis Mañez"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-tenant-properties",
    "source": "pnp",
    "title": "Tenant Properties Web Part",
    "shortDescription": "This web part allows tenant administrators to manage tenant properties through a graphical interface. We can create, edit or delete tenant properties.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tenant-properties",
    "longDescription": [
      "This web part allows tenant administrators to manage tenant properties through a graphical interface. We can create, edit or delete tenant properties."
    ],
    "creationDateTime": "2020-10-20",
    "updateDateTime": "2020-10-20",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-tenant-properties/assets/TenantProperties2.jpg",
        "alt": "Tenant Properties Web Part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-tenant-properties/assets/TenantProperties1.jpg?raw=true",
        "alt": "Tenant Properties Web Part"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-tenant-properties/assets/TenantProperties3.jpg?raw=true",
        "alt": "Tenant Properties Web Part"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-tenant-properties/assets/TenantProperties4.jpg?raw=true",
        "alt": "Tenant Properties Web Part"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-tenant-properties/assets/TenantProperties5.jpg?raw=true",
        "alt": "Tenant Properties Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      },
      {
        "gitHubAccount": "joelfmrodrigues",
        "company": "Storm Technology",
        "pictureUrl": "https://github.com/joelfmrodrigues.png",
        "name": "Joel Rodrigues",
        "twitter": "joelfmrodrigues"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-themes",
    "source": "pnp",
    "title": "SharePoint Themes Client Side Web Part",
    "shortDescription": "This web part illustrates how to use SharePoint Theme variables in custom web parts.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-themes",
    "longDescription": [
      "This web part illustrates how to use SharePoint Theme variables in custom web parts."
    ],
    "creationDateTime": "2017-05-08",
    "updateDateTime": "2017-05-08",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-themes/assets/themes.png",
        "alt": "SharePoint Themes Client Side Web Part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-themes/assets/SectionThemes.png?raw=true",
        "alt": "SharePoint Themes Client Side Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Sharepointalist",
        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4",
        "name": "Alex Terentiev",
        "twitter": "alexaterentiev"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-tiles",
    "source": "pnp",
    "title": "Tiles Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tiles",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-05-01",
    "updateDateTime": "2018-05-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-tiles.gif",
        "alt": "Tiles"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "eoverfield",
        "company": "PixelMill",
        "pictureUrl": "https://github.com/eoverfield.png",
        "name": "Eric Overfield",
        "twitter": "EricOverfield"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-tiles-v2",
    "source": "pnp",
    "title": "Tiles V2 Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tiles-v2",
    "longDescription": [
      "This solution creates a customizable Tiles Web part, it uses a stored collection from the PnP `PropertyFieldCollectionData` control and allows the user to choose the color scheme (theme or custom) and to set the size of the tiles. By default the tiles use a fluid flex layout to use the available screen area."
    ],
    "creationDateTime": "2021-07-14",
    "updateDateTime": "2022-03-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11"
      },
      {
        "key": "PNPCONTROLS",
        "value": "IconPicker, WebPartTitle, Placeholder, PropertyFieldCollectionData"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-tiles-v2/assets/react-tiles-v2.gif",
        "alt": "Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "omarelanis",
        "pictureUrl": "https://github.com/omarelanis.png",
        "name": "Omar El-Anis"
      },
      {
        "gitHubAccount": "fthorild",
        "name": "Fredrik Thorild",
        "company": "Sogeti Sweden",
        "pictureUrl": "https://github.com/fthorild.png"
      },
      {
        "gitHubAccount": "Jwaegebaert",
        "name": "Jasey Waegebaert",
        "pictureUrl": "https://github.com/Jwaegebaert.png"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-timeline",
    "source": "pnp",
    "title": "Timeline Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-timeline",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-07-10",
    "updateDateTime": "2020-07-10",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-timeline/assets/webpart-preview.gif",
        "alt": "Timeline"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-timeline/assets/event-crud.gif?raw=true",
        "alt": "Timeline"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-timeline/assets/layout-horizontal.png?raw=true",
        "alt": "Timeline"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-timeline/assets/layout-vertical.png?raw=true",
        "alt": "Timeline"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-timeline/assets/list-sample-data.png?raw=true",
        "alt": "Timeline"
      },
      {
        "type": "image",
        "order": 105,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-timeline/assets/list-schema.png?raw=true",
        "alt": "Timeline"
      },
      {
        "type": "image",
        "order": 106,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-timeline/assets/wepart-propertypane.png?raw=true",
        "alt": "Timeline"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "nanddeepn",
        "company": "",
        "pictureUrl": "https://github.com/nanddeepn.png",
        "name": "Nanddeep Nachan",
        "twitter": "NanddeepNachan"
      },
      {
        "gitHubAccount": "ravi16a87",
        "company": "Cognizant",
        "pictureUrl": "https://github.com/ravi16a87.png",
        "name": "Ravi Kulkarni"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-tinymce",
    "source": "pnp",
    "title": "TinyMCE Editor Web Part Integration with SharePoint",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tinymce",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-02-01",
    "updateDateTime": "2018-02-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-tinymce/assets/preview.gif",
        "alt": "TinyMCE Editor Web Part Integration with SharePoint"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AustinBreslinDev",
        "company": "",
        "pictureUrl": "https://avatars.githubusercontent.com/u/10480670?s=460&v=4",
        "name": "Austin Breslin"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-todo-basic",
    "source": "pnp",
    "title": "Todo Basic Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-todo-basic",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2017-05-04",
    "updateDateTime": "2017-05-04",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-todo-basic/assets/todo-basic-demo.gif",
        "alt": "Todo Basic"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-todo-basic/assets/todo-basic-no-task-list.gif?raw=true",
        "alt": "Todo Basic"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-todo-basic/assets/todo-basic-placeholder-edit-mode.png?raw=true",
        "alt": "Todo Basic"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-todo-basic/assets/todo-basic-placeholder-read-mode.png?raw=true",
        "alt": "Todo Basic"
      },
      {
        "type": "image",
        "order": 104,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-todo-basic/assets/todo-basic-placeholder.gif?raw=true",
        "alt": "Todo Basic"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "chakkaradeep",
        "company": "Microsoft",
        "pictureUrl": "https://avatars.githubusercontent.com/u/7882052?s=460&u=92d546edfe1e1b374c69f0fd9315186eea700b8f&v=4",
        "name": "Chakkaradeep Chandran",
        "twitter": "chakkaradeep"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-tour-pnpjs",
    "source": "pnp",
    "title": "Tour Sample Web Part",
    "shortDescription": "A SPFx WebPart using PnP/PnPjs, @pnp/spfx-property-controls and ReactTourJS.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tour-pnpjs",
    "longDescription": [
      "A SPFx WebPart using PnP/PnPjs, @pnp/spfx-property-controls and ReactTourJS."
    ],
    "creationDateTime": "2019-11-23",
    "updateDateTime": "2024-03-20",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.18.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-tour-pnpjs/assets/react-tour-pnpjs-webpart-animated.gif",
        "alt": "Tour Sample"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-tour-pnpjs/assets/react-tour-pnpjs-webpart-animated-details.png?raw=true",
        "alt": "Tour Sample"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-tour-pnpjs/assets/react-tour-pnpjs-webpart-configuration.gif?raw=true",
        "alt": "Tour Sample"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "fredupstair",
        "pictureUrl": "https://github.com/fredupstair.png",
        "name": "Federico Porceddu"
      },
      {
        "gitHubAccount": "albegut",
        "pictureUrl": "https://github.com/albegut.png",
        "name": "Alberto Gutierrez"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-tree-orgchart",
    "source": "pnp",
    "title": "Tree Organization Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tree-orgchart",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2021-02-28",
    "updateDateTime": "2021-10-28",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      },
      {
        "key": "PNPCONTROLS",
        "value": "PropertyFieldNumber, PeoplePicker, WebPartTitle"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-tree-orgchart/assets/Screenshot1.png",
        "alt": "Tree Organization Web Part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-tree-orgchart/assets/react-tree-orgchart.gif?raw=true",
        "alt": "Tree Organization Web Part"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-tree-orgchart/assets/Screenshot2.png?raw=true",
        "alt": "Tree Organization Web Part"
      },
      {
        "type": "image",
        "order": 103,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-tree-orgchart/assets/Screenshot3.png?raw=true",
        "alt": "Tree Organization Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joaojmendes",
        "company": "Storm Technology Ltd",
        "pictureUrl": "https://github.com/joaojmendes.png",
        "name": "João Mendes",
        "twitter": "joaojmendes"
      },
      {
        "gitHubAccount": "petkir",
        "company": "Cubido Business Solutions GmbH",
        "pictureUrl": "https://github.com/petkir.png",
        "name": "Peter Paul Kirschner",
        "twitter": "petkir_at"
      },
      {
        "gitHubAccount": "tom-daly",
        "company": "SoHo Dragon",
        "pictureUrl": "https://github.com/tom-daly.png",
        "name": "Thomas Daly"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-twitter",
    "source": "pnp",
    "title": "Twitter Timeline Web Part",
    "shortDescription": "Sample web part to display Twitter timeline.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-twitter",
    "longDescription": [
      "Sample web part to display Twitter timeline."
    ],
    "creationDateTime": "2020-01-20",
    "updateDateTime": "2023-02-27",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.16.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-twitter/assets/twitter-timeline.png",
        "alt": "Twitter Timeline"
      },
      {
        "type": "video",
        "order": 101,
        "url": "https://www.youtube.com/embed/e8K_Hu4-Bx8",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AJIXuMuK",
        "company": "Sharepointalist",
        "pictureUrl": "https://avatars.githubusercontent.com/u/17036219?s=460&u=b8e83fb70a90eae0c0e0078c206990785e1a5b6f&v=4",
        "name": "Alex Terentiev",
        "twitter": "alexaterentiev"
      },
      {
        "gitHubAccount": "reshmee011",
        "name": "Reshmee Auckloo",
        "pictureUrl": "https://github.com/reshmee011.png"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-upgrade-me",
    "source": "pnp",
    "title": "Upgrade Me Web Part",
    "shortDescription": "Use this web part to test the CLI for Microsoft 365 SPFx Project Upgrade.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-upgrade-me",
    "longDescription": [
      "Use this web part to test the CLI for Microsoft 365 SPFx Project Upgrade."
    ],
    "creationDateTime": "2020-08-27",
    "updateDateTime": "2020-08-27",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-upgrade-me/assets/react-upgrade-me.png",
        "alt": "Upgrade Me"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "hugoabernier",
        "company": "Tahoe Ninjas",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier",
        "twitter": "bernierh"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-versiondisplay",
    "source": "pnp",
    "title": "Displaying the version number in a web part",
    "shortDescription": "This very simple sample demonstrates three different approaches to display the version number of your SharePoint solution in your web part.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-versiondisplay",
    "longDescription": [
      "This very simple sample demonstrates three different approaches to display the version number of your SharePoint solution in your web part."
    ],
    "creationDateTime": "2020-04-10",
    "updateDateTime": "2022-02-07",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.13.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-versiondisplay/assets/versiondisplay.gif",
        "alt": "Displaying the version number in a web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "hugoabernier",
        "company": "Tahoe Ninjas",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier",
        "twitter": "bernierh"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-video-banner",
    "source": "pnp",
    "title": "Video Banner Web Part",
    "shortDescription": "Use this Web Part to add a video banner with a text on top of it to your pages. ",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-video-banner",
    "longDescription": [
      "Use this Web Part to add a video banner with a text on top of it to your pages. "
    ],
    "creationDateTime": "2021-04-02",
    "updateDateTime": "2021-04-02",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "SPFX-FULLPAGEAPP",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-video-banner/assets/react-video-banner-demo1.gif",
        "alt": "React Video Banner"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "derhallim",
        "pictureUrl": "https://github.com/derhallim.png",
        "name": "Mohamed Derhalli",
        "twitter": "MohamedDerhalli"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Using single part app pages in SharePoint Online",
        "description": "Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/single-part-app-pages?tabs=pnpposh"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-videolibrary",
    "source": "pnp",
    "title": "Video Library Web Part",
    "shortDescription": "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",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-videolibrary",
    "longDescription": [
      "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"
    ],
    "creationDateTime": "2016-12-31",
    "updateDateTime": "2016-12-31",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "drop5"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-videolibrary/src/assets/react-3d-carousel.PNG",
        "alt": "Video Library"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "russgove",
        "company": "",
        "pictureUrl": "https://github.com/russgove.png",
        "name": "Russell Gove"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-visio",
    "source": "pnp",
    "title": "Visio Embed Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-visio",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-08-25",
    "updateDateTime": "2020-08-25",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-visio/assets/Preview.PNG",
        "alt": "Visio Embed"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "joelfmrodrigues",
        "company": "Storm Technology",
        "pictureUrl": "https://github.com/joelfmrodrigues.png",
        "name": "Joel Rodrigues",
        "twitter": "joelfmrodrigues"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-weather-information",
    "source": "pnp",
    "title": "Weather Information Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-weather-information",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-05-01",
    "updateDateTime": "2018-05-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-weather.gif",
        "alt": "Weather Information"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "eoverfield",
        "company": "PixelMill",
        "pictureUrl": "https://github.com/eoverfield.png",
        "name": "Eric Overfield",
        "twitter": "EricOverfield"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-webcam",
    "source": "pnp",
    "title": "Web/Mobile Camera Demo Web Part",
    "shortDescription": "This is sample web part to showcase how to open webcam and take photo in SPFx web part.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-webcam",
    "longDescription": [
      "This is sample web part to showcase how to open webcam and take photo in SPFx web part."
    ],
    "creationDateTime": "2019-09-05",
    "updateDateTime": "2019-09-05",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-webcam/assets/4.png",
        "alt": "Web/Mobile Camera Demo"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-webcam/assets/3.png",
        "alt": "Web/Mobile Camera Demo"
      },
      {
        "type": "video",
        "order": 102,
        "url": "https://www.youtube.com/embed/YIaCEkjCTKc",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "siddharth-vaghasia",
        "company": "",
        "pictureUrl": "https://github.com/siddharth-vaghasia.png",
        "name": "Siddharth Vaghasia"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-webhooks-realtime",
    "source": "pnp",
    "title": "Webhooks Realtime",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-webhooks-realtime",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2017-10-29",
    "updateDateTime": "2017-10-29",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-webhooks-realtime/assets/spfx-react-webhooks-realtime.gif",
        "alt": "Webhooks Realtime"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-webhooks-realtime/assets/Architecture.png?raw=true",
        "alt": "Webhooks Realtime"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "giuleon",
        "company": "",
        "pictureUrl": "https://github.com/giuleon.png",
        "name": "Giuliano De Luca",
        "twitter": "delucagiulian"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-webpartdetails",
    "source": "pnp",
    "title": "Web Part Details",
    "shortDescription": "The web part illustrates how to get all the web part present in the current page, bind them in a multi-select dropdown.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-webpartdetails",
    "longDescription": [
      "The web part illustrates how to get all the web part present in the current page, bind them in a multi-select dropdown."
    ],
    "creationDateTime": "2020-06-13",
    "updateDateTime": "2020-06-13",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-webpartdetails/assets/webpartDetails.png",
        "alt": "Web Part Details"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "Harshagracy",
        "company": "",
        "pictureUrl": "https://github.com/Harshagracy.png",
        "name": "Harsha Vardhini",
        "twitter": "harshagracy"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-word-game",
    "source": "pnp",
    "title": "Word Game Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-word-game",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-05-27",
    "updateDateTime": "2020-05-27",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.4.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-word-game/assets/preview.gif",
        "alt": "Word Game"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-word-game/assets/settings.PNG?raw=true",
        "alt": "Word Game"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-word-game/assets/wordgame_mobile.png?raw=true",
        "alt": "Word Game"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "nbarkhina",
        "company": "",
        "pictureUrl": "https://github.com/nbarkhina.png",
        "name": "Neil Barkhina"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-world-clocks",
    "source": "pnp",
    "title": "World Clocks Web Part",
    "shortDescription": "This sample is extension of the single World time clock sample that was provided in SP Starter Kit.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-world-clocks",
    "longDescription": [
      "This sample is extension of the single World time clock sample that was provided in SP Starter Kit."
    ],
    "creationDateTime": "2020-09-26",
    "updateDateTime": "2020-09-26",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11.0"
      },
      {
        "key": "PNPCONTROLS",
        "value": "WebPartTitle, Placeholder"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-world-clocks/assets/ClocksInAction.gif?raw=true",
        "alt": "React World Clocks"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-world-clocks/assets/WebPart.png?raw=true",
        "alt": "React World Clocks"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-world-clocks/assets/WorldClockList.png?raw=true",
        "alt": "React World Clocks"
      },
      {
        "type": "video",
        "order": 103,
        "url": "https://www.youtube.com/embed/91uQHUgpKo8",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "jerryyasir",
        "company": "DXC Technology",
        "pictureUrl": "https://github.com/jerryyasir.png",
        "name": "Jerry Yasir",
        "twitter": "jerryyasir"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-world-time",
    "source": "pnp",
    "title": "World Time Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-world-time",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2018-05-01",
    "updateDateTime": "2018-05-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-world-time.gif",
        "alt": "World Time"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "eoverfield",
        "pictureUrl": "https://github.com/eoverfield.png",
        "name": "Eric Overfield"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-yammer-api",
    "source": "pnp",
    "title": "Yammer REST API web part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-yammer-api",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2017-04-19",
    "updateDateTime": "2017-04-19",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-yammer-api/assets/spfx-yammer-api-webpart.jpg",
        "alt": "Yammer REST API web part"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-yammer-api/assets/yammer-enabled-screen.png?raw=true",
        "alt": "Yammer REST API web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "VelinGeorgiev",
        "company": "",
        "pictureUrl": "https://github.com/VelinGeorgiev.png",
        "name": "Velin Georgiev"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-yammer-praise",
    "source": "pnp",
    "title": "Yammer Praise using aadTokenProvider",
    "shortDescription": "This sample shows how to post a praise to Yammer using aadTokenProvider (without Yammer JavaScript SDK).",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-yammer-praise",
    "longDescription": [
      "This sample shows how to post a praise to Yammer using aadTokenProvider (without Yammer JavaScript SDK)."
    ],
    "creationDateTime": "2020-03-23",
    "updateDateTime": "2020-03-23",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      },
      {
        "key": "SPFX-TEAMSTAB",
        "value": "true"
      },
      {
        "key": "SPFX-TEAMSPERSONALAPP",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-yammer-praise/assets/screenshot.gif",
        "alt": "Yammer Praise using aadTokenProvider"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-yammer-praise/assets/screenshot2.gif?raw=true",
        "alt": "Yammer Praise using aadTokenProvider"
      },
      {
        "type": "video",
        "order": 102,
        "url": "https://www.youtube.com/embed/fYDqjOEuTKY",
        "alt": "Community demo of the web part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AhmadiRamin",
        "company": "Content and Cloud",
        "pictureUrl": "https://github.com/AhmadiRamin.png",
        "name": "Ramin Ahmadi",
        "twitter": "raminahmadi1986"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Building Microsoft Teams Tabs using SharePoint Framework",
        "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-youtube",
    "source": "pnp",
    "title": "Youtube Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-youtube",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-10-01",
    "updateDateTime": "2020-10-01",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.11"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-youtube/assets/Preview.gif",
        "alt": "Youtube Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "giuleon",
        "company": "",
        "pictureUrl": "https://github.com/giuleon.png",
        "name": "Giuliano De Luca",
        "twitter": "delucagiulian"
      },
      {
        "gitHubAccount": "Ravikadri",
        "company": "Netwoven",
        "pictureUrl": "https://github.com/Ravikadri.png",
        "name": "Ravi Chandra"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-zod",
    "source": "pnp",
    "title": "Zod Web Part",
    "shortDescription": "This sample shows the usage of Zod to eliminate manual cast and validation of the data coming from external API.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-zod",
    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-zod",
    "longDescription": [
      "This sample shows the usage of Zod to eliminate manual cast and validation of the data coming from external API (e.g. SharePoint REST API, Graph API, etc.)."
    ],
    "creationDateTime": "2022-11-08",
    "updateDateTime": "2022-11-08",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.15.2"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-zod/assets/data-usage.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-zod/assets/result.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-zod/assets/parse-data.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-zod/assets/failed-parse.png",
        "alt": "Web Part Preview"
      },
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-zod/assets/schema.png",
        "alt": "Web Part Preview"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "AriGunawan",
        "pictureUrl": "https://github.com/AriGunawan.png",
        "name": "Ari Gunawan"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-react-zpl-viewer",
    "source": "pnp",
    "title": "ZPL Viewer Web Part",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-zpl-viewer",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-02-13",
    "updateDateTime": "2020-02-13",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.9.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-zpl-viewer/assets/preview.gif",
        "alt": "ZPL Viewer"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "zachroberts8668",
        "company": "",
        "pictureUrl": "https://github.com/zachroberts8668.png",
        "name": "Zach Roberts"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-riot-list",
    "source": "pnp",
    "title": "List RiotJS Client-Side Web Part",
    "shortDescription": "Simplistic sample Web Part that demonstrates the use of RiotJS in creating a SharePoint Framework web part.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/riot-list",
    "longDescription": [
      "Simplistic sample Web Part that demonstrates the use of RiotJS in creating a SharePoint Framework web part."
    ],
    "creationDateTime": "2017-04-26",
    "updateDateTime": "2017-04-26",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "Other"
      },
      {
        "key": "SPFX-VERSION",
        "value": "GA"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/riot-list/assets/riot-list-preview.gif",
        "alt": "List RiotJS Client-Side Web Part"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "sebastienlevert",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/sebastienlevert.png",
        "name": "Sébastien Levert",
        "twitter": "sebastienlevert"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-section-backgrounds",
    "source": "pnp",
    "title": "Supporting section backgrounds in your web parts",
    "shortDescription": "These samples show how to implement support for section backgrounds in your web parts.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/section-backgrounds",
    "longDescription": [
      "These samples show how to implement support for section backgrounds in your web parts."
    ],
    "creationDateTime": "2019-03-13",
    "updateDateTime": "2019-03-13",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.7.1"
      },
      {
        "key": "SPFX-SUPPORTSTHEMEVARIANTS",
        "value": "true"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/section-backgrounds/assets/webpartexample3.png",
        "alt": "Supporting section backgrounds in your web parts"
      },
      {
        "type": "image",
        "order": 101,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/section-backgrounds/assets/webpartexample1.png?raw=true",
        "alt": "Supporting section backgrounds in your web parts"
      },
      {
        "type": "image",
        "order": 102,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/section-backgrounds/assets/webpartexample2.png?raw=true",
        "alt": "Supporting section backgrounds in your web parts"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "thechriskent",
        "company": "DMI",
        "pictureUrl": "https://avatars.githubusercontent.com/u/8364109?s=460&v=4",
        "name": "Chris Kent",
        "twitter": "thechriskent"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      },
      {
        "name": "Supporting section backgrounds",
        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-sharepoint-crud",
    "source": "pnp",
    "title": "SharePoint CRUD operations",
    "shortDescription": "Sample Web Parts illustrating performing SharePoint CRUD operations in React, Angular, JavaScript without any framework and using the @pnp/sp library.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/sharepoint-crud",
    "longDescription": [
      "Sample Web Parts illustrating performing SharePoint CRUD operations in React, Angular, JavaScript without any framework and using the @pnp/sp library."
    ],
    "creationDateTime": "2018-11-01",
    "updateDateTime": "2021-09-26",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "React"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.12.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/sharepoint-crud/assets/preview.png",
        "alt": "SharePoint CRUD operations"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "waldekmastykarz",
        "company": "Microsoft",
        "pictureUrl": "https://github.com/waldekmastykarz.png",
        "name": "Waldek Mastykarz",
        "twitter": "waldekm"
      },
      {
        "gitHubAccount": "gautamdsheth",
        "company": "Rapid Circle",
        "pictureUrl": "https://github.com/gautamdsheth.png",
        "name": "Gautam Sheth",
        "twitter": "gautamdsheth"
      },
      {
        "gitHubAccount": "AriGunawan",
        "pictureUrl": "https://github.com/AriGunawan.png",
        "name": "Ari Gunawan"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-vue-js-org-chart",
    "source": "pnp",
    "title": "VueJS Org Chart Web Part",
    "shortDescription": "A simple Organisation Chart web part using Office UI Fabric, VueJS, REST API.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/vue-js-org-chart",
    "longDescription": [
      "A simple Organisation Chart web part using Office UI Fabric, VueJS, REST API."
    ],
    "creationDateTime": "2019-06-11",
    "updateDateTime": "2019-06-11",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "VueJS"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.8.1"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/vue-js-org-chart/assets/preview.gif",
        "alt": "VueJS Org Chart"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "serdarketenci",
        "company": "",
        "pictureUrl": "https://github.com/serdarketenci.png",
        "name": "Serdar Ketenci̇"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  },
  {
    "name": "pnp-sp-dev-spfx-web-parts-vuejs-todo-single-file-component",
    "source": "pnp",
    "title": "Todo Client Web Part built with Vue.js and Vue's single-file components",
    "shortDescription": "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.",
    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/vuejs-todo-single-file-component",
    "longDescription": [
      "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."
    ],
    "creationDateTime": "2020-04-27",
    "updateDateTime": "2022-04-04",
    "products": [
      "SharePoint"
    ],
    "metadata": [
      {
        "key": "CLIENT-SIDE-DEV",
        "value": "VueJS"
      },
      {
        "key": "SPFX-VERSION",
        "value": "1.10.0"
      }
    ],
    "thumbnails": [
      {
        "type": "image",
        "order": 100,
        "url": "https://github.com/pnp/media/raw/master/parker/pnp/300w/parker.png",
        "alt": "Todo Client Web Part built with Vue.js and Vue's single-file components"
      }
    ],
    "authors": [
      {
        "gitHubAccount": "s-KaiNet",
        "company": "Mastaq",
        "pictureUrl": "https://github.com/s-KaiNet.png",
        "name": "Sergei Sergeev",
        "twitter": "sergeev_srg"
      }
    ],
    "references": [
      {
        "name": "Build your first SharePoint client-side web part",
        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
      }
    ]
  }
]