SharePoint Patterns & Practices

SharePoint Framework Client-Side Web Part Samples & Tutorial Materials

SharePoint client-side web parts are controls that appear inside a SharePoint page but run locally in the browser. They're the building blocks of pages that appear on a SharePoint site. You can build client-side web parts using modern script development tools and the SharePoint workbench (a development test surface), and you can deploy your client-side web parts to classic web part pages in Office 365 tenants. In addition to plain JavaScript projects, you can build web parts alongside common scripting frameworks, such as AngularJS and React. For example, you can use React along with components from Office UI Fabric React to quickly create experiences based on the same components used in Office 365.

Organization

This repo is divided up into 3 main sections:

  • samples: Samples around the SharePoint Framework client-side web parts to demonstrate different capabilities and possibilities on the framework. Each sample has it's own dedicated readme file to explain setup instructions and demonstrated capability.
  • tutorials: Tutorials around the SharePoint Framework client-side web parts to demonstrate different capabilities and possibilities on the framework. Each tutorial has it's own dedicated readme file to explain setup instructions and demonstrated capability.

You can head directly to those folders and start looking around if you'd like. But if you're looking for something specific, we've grouped our samples into various categories:

Detailed Documentation

Contributing

These samples are direct from the feature teams, SharePoint PnP core team (http://aka.ms/SharePointPnP) or shared by the community. We welcome your input on issues and suggestions for new samples. We do also welcome community contributions around the client-side web parts. If there's any questions around that, just let us know.

Please have a look on our Contribution Guide before submitting your pull requests, so that we can get your contribution processed as fast as possible.

Sharing is caring!