The Greatest Introduction to SharePoint Framework (SPFx) on earth!
Download as PPTX, PDF3 likes600 views
The document discusses various options for developing customizations for SharePoint, including SharePoint Add-ins, external apps/SPAs, and the SharePoint Framework (SPFx). It provides an overview of SPFx, describing how it allows customizations to run within the SharePoint page context using modern development tools and frameworks. It also outlines the SPFx build process and deployment options like the Office 365 public CDN and Azure CDN.
The Greatest Introduction to SharePoint Framework (SPFx) on earth!
- 4. 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
- 5. SharePoint Framework Modern Client Site Development Lightweight web and mobile Powers our own experience Backward compatible Supports open source tools and JavaScript Web Frameworks
- 6. SharePoint Framework Tooling Tooling • Node.js • Yeoman • Gulp • TypeScipt • Visual Studio Code Frameworks: • React • Angular.js • Knockout • etc
- 8. Client-side Web Part Build Flow
- 9. 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
- 10. 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
- 11. Debugging code Browser •Developer Console Visual Studio Code •Chrome Debugger Extension
- 13. Environment import { Environment, EnvironmentType } from '@microsoft/sp-core-library’; Values: • EnvironmentType.Tests • EnvironmentType.Local • EnvironmentType.SharePoint • EnvironmentType.ClassicSharePoint
- 14. 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
- 15. 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. Microsoft Graph
- 18. 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
- 19. Deploy to Office 365 Public CDN
- 20. Deploy to Azure CDN https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/deploy-web- part-to-cdn
- 21. 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“ }
- 22. 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/“ }
- 23. DEMO
- 24. 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.
- 25. SPFx Extensions
- 26. 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!"}}}
- 27. SPFx Extension: Field Customizer ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"Percent":{" id":"45a1d299-990d-4917-ba62-7cb67158be16","properties":{"sampleText":"Hello!"}}}
- 28. 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."}}}
- 29. 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
- 30. Update SPFx version - Yeoman Find outdated Yeoman generator (installed globally) • npm outdated –g Update • npm install @microsoft/generator-sharepoint@latest -g
- 31. 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. Just few days ago..
- 35. Sharing is caring! • Use hashtags: • #Office365Dev • #MicrosoftGraph • #SPFx • Log issues & questions on GitHub Repos
- 36. Thank you! #SPSLeicester Thank You To All Of Our Sponsors! #spsleicester