SharePoint Framework

Page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and extending Microsoft Teams.

→ docs.microsoft.com/spfx

Learn

History

• 2017: Microsoft introduced the SharePoint Framework as the recommended way to customize and extend SharePoint Online

Key elements

• SharePoint Framework is modern client-side development

• Extensions

  • Types: Application customizers, Field customizers, Command sets

• Workbench: a special SharePoint page that contains a single canvas that developers can add their web parts to. There are two different workbench options: local and hosted.

• Web parts

  • Property pane

    • The property pane has two different modes: reactive and non-reactive

• JavaScript agnostic but can be used with a framework (React in particular)

Read further: SharePoint Framework UI components

Quick start

• Set up your Microsoft 365 tenant

Learning path

1. Introduction to customizing and extending SharePoint

2. Get started with the SharePoint Framework (code, video)

3. Develop web parts with the SharePoint Framework

4. Enable SharePoint Framework web part configuration with property panes (code, video)

5. Work with SharePoint Content using the SharePoint Framework (code, video)

6. Extend the SharePoint user interface with SharePoint Framework extensions (code, video)

7. Leverage Microsoft Graph & third-party APIs (code, video)

8. Deploy SharePoint Framework Components to Production (code, video)

9. Use Office UI Fabric React components in your SharePoint client-side web part (video)

10. Consume the Microsoft Graph in the SharePoint Framework

Code samples

• Microsoft 365 Patterns and Practices (PnP)

  • pnp/sp-starter-kit

  • PnP SharePoint Framework Client-Side Extension Samples

    • pnp/sp-dev-fx-extensions

  • PnP SharePoint Framework Client-Side Web Part Samples

    • pnp/sp-dev-fx-webparts

  • pnp/sp-dev-fx-library-components

Usecases

Persistence

• Improve performance in SharePoint provider-hosted add-ins

API calls

• Connect to Azure AD-secured APIs in SharePoint Framework solutions

• Use Microsoft Graph in your solution

Logging

• Default logging works on local workbench but not on SharePoint Online workbench

  • Install the PnP library

npm install @pnp/logging

Develop

→ Set up your SharePoint Framework development environment

Command line

• NPM

# installs Yeoman
npm install --global yo

# installs Gulp
npm install --global gulp

# installs SharePoint Framework generator
npm install --global @microsoft/generator-sharepoint

• Microsoft SPFx Yeoman generator

# creates a SharePoint Framework client-side web part
yo @microsoft/sharepoint

• PnP SPFx Yeoman generator (GitHub)

• Gulp

# builds local resources
gulp build

# starts the local web server without launching the browser
gulp serve --nobrowser

# opens configuration to edit initialPage (workbench URL, local or hosted)
vi config/serve.json

# bundles the solution
gulp bundle --ship

# packages the solution
gulp package-solution --ship

# tracks the generated SharePoint package
ls /sharepoint/solution/*.sppkg

Read more about Gulp commands: Explore a SharePoint Framework project

Operate

Deployment

• Publish SharePoint Framework applications to the Marketplace