Skip to content

Latest commit

 

History

History
138 lines (86 loc) · 6.59 KB

spfx.md

File metadata and controls

138 lines (86 loc) · 6.59 KB

SharePoint Framework (SPFx)

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

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

Usecases

Persistence

API calls

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

# installs Yeoman
npm install --global yo

# installs Gulp
npm install --global gulp

# installs SharePoint Framework generator
npm install --global @microsoft/generator-sharepoint
# creates a SharePoint Framework client-side web part
yo @microsoft/sharepoint
# 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