1. Introduction to SharePoint Framework
12/1/ :35 PM
Introduction to SharePoint Framework
Gosia Borzecka
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

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
Node.js
Yeoman
Gulp
TypeScipt
Visual Studio Code
Frameworks:
React
Angular.js
Knockout
etc

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 SharePoint
Runs on
Has no SharePoint Context
Use Mock Data
Available offline
SharePoint
Runs on SharePoint Site
Has SharePoint Context
Use SharePoint Data

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

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

14. Environment
import { Environment, EnvironmentType } from
Values:
EnvironmentType.Tests
EnvironmentType.Local
EnvironmentType.SharePoint
EnvironmentType.ClassicSharePoint

15. Rest API common config-store graph logging nodejs odata pnpjs sp
Provides shared functionality across all pnp libraries
common
Provides a way to manage configuration within your application
config-store
Provides a fluent api for working with Microsoft Graph
graph
Light-weight, subscribable logging framework
logging
Provides functionality enabling libraries within nodejs
nodejs
Provides shared odata functionality and base classes
odata
Rollup library of core functionality (mimics sp-pnp-js)
pnpjs
Provides a fluent api for working with SharePoint REST sp
Provides functionality for working within SharePoint add-ins
sp-addinhelpers
Provides based classes used to create a fluent api for working with SharePoint Managed Metadata
sp-clientsvc
Provides a fluent api for working with SharePoint Managed Metadata
sp-taxonomy

16. Rest API https://pnp.github.io/pnpjs/sp/index.html 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

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

18. Microsoft Graph

19. Deploy to Office 365 Public CDN
Connect-SPOService -Url
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

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

23. write-manifest.json Deploy to Azure CDN
{ "$schema": " "cdnBasePath": " }

24. DEMO

25. Application Customizers
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= as property!"}}}

28. SPFx Extension: Field Customizer
?loadSPFX=true&debugManifestsFile=

29. SPFx Extension: ListView Command Set
?loadSpfx=true&debugManifestsFile= item is selected in the list.","sampleTextTwo":"This command is always visible."}}}

30. Update SPFx version Find outdated packages Update specific package
npm outdated
Update specific package
npm install –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 -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