Introduction to SharePoint Framework (SPFx, WebPart, Extensions)

1. Gosia Borzecka

2. Sponsors & Partners

3. About me
@gosiaborzecka

4. Agenda
SharePoint Framework
Deployment
What next?

5. SharePoint Development options
Add-Ins
•Decoupling customizations from SharePoint
•Provides security model for the customization permissions
•Limited web part experience as add-in part
•Additional operational and maintenance requirements
External Apps/SPAs
•Decouples customizations from SharePoint
•Bring your own technology stack
•Provides security model for customization permissions
•Requires custom implementation of user interface
SharePoint Framework
•Customization runs as part of the SharePoint page
•Flexible web part experience
•Runs under permissions of current user
•Industry standard development model

6. SharePoint Framework
Modern Client Site Development
Lightweight web and mobile
Powers our own experience
Backward compatible
Supports open source tools and JavaScript Web Frameworks

7. SharePoint Framework Tooling
Tooling
• Node.js
• Yeoman
• Gulp
• TypeScipt
• Visual Studio Code
Frameworks:
• React
• Angular.js
• Knockout
• etc

8. https://www.voitanos.io/

9. Client-side Web Part Build Flow

10. Build SPFx solution
Package your webpart:
• Use bundle gulp task to build, localize, and bundle the
project
• Use the package-solution gulp task to package the
project into a .sppkg file
• The ship parameter build task created a minified version
of the bundle and copies all of the webpart assets

11. Workbench
Local
• Runs on https://localhost:4321/temp/workbench.html
• Has no SharePoint Context
• Use Mock Data
• Available offline
SharePoint
• Runs on SharePoint Site https://<YOUR-SHAREPOINT-
SITE>/_layouts/15/workbench.aspx
• Has SharePoint Context
• Use SharePoint Data

12. Debugging code
Browser
•Developer Console
Visual Studio Code
•Chrome Debugger Extension

13. Property Pane
PropertyPaneText
PropertyPaneButton
PropertyPaneCheckbox
PropertyPaneChoiseGroup
PropertyPaneDropdown
PropertyPaneLabel
PropertyPaneLink
PropertyPaneSlider

14. Environment
import { Environment, EnvironmentType } from
'@microsoft/sp-core-library’;
Values:
• EnvironmentType.Tests
• EnvironmentType.Local
• EnvironmentType.SharePoint
• EnvironmentType.ClassicSharePoint

15. Rest API
•Provides shared functionality across all pnp librariescommon
•Provides a way to manage configuration within your applicationconfig-store
•Provides a fluent api for working with Microsoft Graphgraph
•Light-weight, subscribable logging frameworklogging
•Provides functionality enabling the @pnp libraries within nodejsnodejs
•Provides shared odata functionality and base classesodata
•Rollup library of core functionality (mimics sp-pnp-js)pnpjs
•Provides a fluent api for working with SharePoint RESTsp
•Provides functionality for working within SharePoint add-inssp-addinhelpers
•Provides based classes used to create a fluent api for working with SharePoint Managed
Metadatasp-clientsvc
•Provides a fluent api for working with SharePoint Managed Metadatasp-taxonomy

16. Rest API
•Alias Parameters •ALM api •Attachments •Client-side Pages
•Features •Fields •Files •List Items
•Navigation
Service
•Permissions •Related Items •Search
•Sharing •Social •SP.Utilities.Utility •Tenant Properties
•Views •Webs
•Comments and
Likes
https://pnp.github.io/pnpjs/sp/index.html

17. Office Fabric
https://developer.microsoft.com/en-us/fabric

18. Microsoft Graph

19. Deploy to Office 365 Public CDN
• Connect-SPOService -Url https://contoso-admin.sharepoint.com
• Get-SPOTenantCdnEnabled -CdnType Public
• Get-SPOTenantCdnOrigins -CdnType Public
• Get-SPOTenantCdnPolicies -CdnType Public
• Set-SPOTenantCdnEnabled -CdnType Public

20. Deploy to Office 365 Public CDN

21. Deploy to Azure CDN
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/deploy-web-
part-to-cdn

22. Deploy to Azure CDN
deploy-azure-
storage.json {
"$schema": "https://developer.microsoft.com/json-
schemas/spfx-build/deploy-azure-storage.schema.json",
"workingDir": "./temp/deploy/",
"account": “accountName",
"container": "azurehosted-webpart",
"accessKey": “accessKey“
}

23. Deploy to Azure CDN
write-
manifest.json {
"$schema":
"https://developer.microsoft.com/json-
schemas/spfx-build/write-
manifests.schema.json",
"cdnBasePath":
"https://XXX.azureedge.net/xxx/“
}

24. DEMO

25. SPFx Extensions
•Application
Customizers
• Adds scripts to the
page, and accesses
well-known HTML
element placeholders
and extends them
with custom
renderings.
•Field Customizers
• Provides modified
views to data for
fields within a list.
•Command Sets
• Extends the
SharePoint command
surfaces to add new
actions, and provides
client-side code that
you can use to
implement
behaviours.

26. SPFx Extensions

27. SPFx Extensions: Application Customizer
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"e5625e23-
5c5a-4007-a335-
e6c2c3afa485":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"testMessage":"Hello as
property!"}}}

28. SPFx Extension: Field Customizer
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"Percent":{"
id":"45a1d299-990d-4917-ba62-7cb67158be16","properties":{"sampleText":"Hello!"}}}

29. SPFx Extension: ListView Command Set
?loadSpfx=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"a8047e2
f-30d5-40fc-b880-
b2890c7c16d6":{"location":"ClientSideExtension.ListViewCommandSet.CommandBar","properties":{"sampl
eTextOne":"One item is selected in the list.","sampleTextTwo":"This command is always visible."}}}

30. Update SPFx version
Find outdated packages
• npm outdated
Update specific package
• npm install mypackage@newversion –save
Clean old build artifacts
• Gulp clean
Any problems?
• Delete node_modules and execute npm install

31. Update SPFx version - Yeoman
Find outdated Yeoman generator (installed
globally)
• npm outdated –g
Update
• npm install @microsoft/generator-sharepoint@latest -g

32. Open source Starter Kit
Automated provisioning of simple demo content within a
communication site
Automated provisioning of the whole solution to any tenant within
minutes
Automated configuration of Site Scripts and Site Designs at the
tenant level using the PnP Remote Provisioning engine
Implementation of different customizations for SharePoint Online
Usage of Office UI Fabric and reusable PnP SPFx controls within the
customizations

34. https://developer.microsoft.com/en-us/office/dev-program

35. Soon…
• Global deployment of SPFx Extensions
• SharePoint Framework Solution in MS Teams

36. Sharing is caring!
• Use hashtags:
• #Office365Dev
• #MicrosoftGraph
• #SPFx
• Log issues & questions on GitHub Repos

37. Thank you!
#SPSWarsaw