Introduction to SharePoint Framework 12/1/2018 11: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.
Sponsors & Partners
About me @gosiaborzecka
Agenda SharePoint Framework Deployment What next?
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
SharePoint Framework Modern Client Site Development Lightweight web and mobile Powers our own experience Backward compatible Supports open source tools and JavaScript Web Frameworks
SharePoint Framework Tooling Node.js Yeoman Gulp TypeScipt Visual Studio Code Frameworks: React Angular.js Knockout etc
https://www.voitanos.io/
Client-side Web Part Build Flow
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
Workbench Local SharePoint 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
Browser Visual Studio Code Debugging code Developer Console Chrome Debugger Extension
Property Pane PropertyPaneText PropertyPaneButton PropertyPaneCheckbox PropertyPaneChoiseGroup PropertyPaneDropdown PropertyPaneLabel PropertyPaneLink PropertyPaneSlider
Environment import { Environment, EnvironmentType } from '@microsoft/sp-core-library’; Values: EnvironmentType.Tests EnvironmentType.Local EnvironmentType.SharePoint EnvironmentType.ClassicSharePoint
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 the @pnp 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
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
https://developer.microsoft.com/en-us/fabric Office Fabric
Microsoft Graph
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
Deploy to Office 365 Public CDN
Deploy to Azure CDN https://docs. microsoft
deploy-azure-storage.json Deploy to Azure CDN { "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json", "workingDir": "./temp/deploy/", "account": “accountName", "container": "azurehosted-webpart", "accessKey": “accessKey“ }
write-manifest.json Deploy to Azure CDN { "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json", "cdnBasePath": "https://XXX.azureedge.net/xxx/“ }
DEMO
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.
SPFx Extensions
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!"}}}
SPFx Extension: Field Customizer ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"Percent":{"id":"45a1d299-990d-4917-ba62-7cb67158be16","properties":{"sampleText":"Hello!"}}}
SPFx Extension: ListView Command Set ?loadSpfx=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"a8047e2f-30d5-40fc-b880-b2890c7c16d6":{"location":"ClientSideExtension.ListViewCommandSet.CommandBar","properties":{"sampleTextOne":"One item is selected in the list.","sampleTextTwo":"This command is always visible."}}}
Update SPFx version Find outdated packages Update specific package 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
Update SPFx version - Yeoman Find outdated Yeoman generator (installed globally) npm outdated –g Update npm install @microsoft/generator-sharepoint@latest -g
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
https://developer.microsoft.com/en-us/office/dev-program
Soon… Global deployment of SPFx Extensions SharePoint Framework Solution in MS Teams
Sharing is caring! Use hashtags: #Office365Dev #MicrosoftGraph #SPFx Log issues & questions on GitHub Repos
Thank you! #SPSWarsaw