An introduction to the SharePoint Framework #SPFx webpart build process

1. BUILD YOUR
FIRST SHAREPOINT
FRAMEWORK WEBPART
https://github.com/eoverfield/SPFx-Demos
ERIC OVERFIELD | PixelMill
Microsoft MVP & RD
SharePoint Advocate & Enthusiast
@ericoverfield

2. ERIC OVERFIELD
President & Co-Founder of PixelMill
Microsoft MVP, Office Servers & Services
Microsoft Regional Director
Published SharePoint Author
SharePoint Community Organizer & Contributor @ericoverfield
ericoverfield.com

3. PixelMill is a modern SharePoint Design Agency based in Northern California. On the forefront of
web design trends since 1998, PixelMill provides innovative collaboration portals to enhance the
user adoption of SharePoint intranets, extranets, and public facing sites.
PIXELMILL
@pixelmillteam
pixelmill.com

4. 1. SharePoint Framework (SPFx) Overview
2. SPFx Toolchain – the Build Environment
3. SPFx Webpart Components
4. Webpart Properties, Packaging & More
OVERVIEW

5. @ericoverfieldericoverfield.com
HISTORY OF SHAREPOINT DEVELOPMENT MODELS
2013
APP/ADD-IN MODEL
2010
SANDBOX
2003
FULL TRUST
2016
CLOUD FRIENDLY SPFx

6. A page and web part model with full support for client-side SharePoint development
• Open source tooling / toolchain
• nodeJS, npm, Yeoman, gulp, TypeScript, webpack and more
• Easy integration with SharePoint data
• Rest API wrapper classes
• Available in the cloud and On-prem*
• Generally available on SharePoint Online
• On-prem availability scheduled for 2017
WHAT IS THE SHAREPOINT FRAMEWORK?

7. SPFx – Welcome to integrated client-side rendering
• Client-side rendering
• No server side/compiled code / C#
• IDE / Development platform agnostic
• New / modern tool chain
• nodeJS / Yeoman / Gulp / Reach / etc
• Not dependent on JavaScript Injection
• No iFrame
• Direct integration with the page model
HOW THE FRAMEWORK IS DIFFERENT

8. @ericoverfieldericoverfield.com
TOOLSET COMPARISION
Project Templates
SERVER SIDE DEVELOPMENT VS SPFx TOOL CHAIN

9. THE SPFx TOOLCHAIN
A DEVELOPMENT ENVIRONMENT

10. • Office 365 / SharePoint Online tenant
• App catalog for deployment
• http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant#create-app-catalog-site
• Development workstation
• PC / iOS / Linux – few limitations
• Toolchain is open source – do not need a dedicated dev env
• Much more simple than classic SharePoint Development
PREREQUISITES

11. • https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview
• Use any most OS / workstation
• Install nodeJS (current Long Term Support (LTS) version)
• Yeoman and Gulp
• C:> npm i –g yo gulp
• SPFx Yeoman generator
• C:> npm i –g @microsoft/generator-sharepoint
• C:> npm update –g @microsoft/generator-sharepoint
• Use code editor
• VS Code / Sublime Text / NotePad++, etc
A SHAREPOINT FRAMEWORK DEVELOPMENT ENVIRONMENT

12. Demo
SPFx DEVELOPMENT ENVIRONMENT

13. • C:> md helloworld-webpart
• C:> cd helloworld-webpart
• C:> yo @microsoft/sharepoint
• Grab a cup of coffee – first time in a project, this will take a while
• You can execute yo command again to add more webparts to project
• Each addition of a webpart to a project will take much less time to scaffold
• C:> gulp serve
• Check out your first webpart!
• It “should” be that simple
• May also load in SPO workbench:
https://”tenant”.sharepoint.com/sites/”site”/_layouts/15/workbench.aspx
CREATE YOUR FIRST SPFx WEBPART

14. Demo
YOUR FIRST
SPFx WEBPART

15. WELCOME TO A NEW
DEVELOPMENT PARADIGM

16. WEBPART SOURCE OVERVIEW
Get to know your Webpart folder structure
• src: primary webpart TypeScript source code
• config: json configuration files for build process
• typings: TypeScript typings for JS libs – legacy
• lib: Build files (TS compiled JS) ready for bundle
• dist: Final web ready code for distribution
• sharepoint: .spapp file for App Catalog
• node_modules: NodeJS modules (JS) for toolchain

17. @ericoverfieldericoverfield.com
WEBPART PROPERTIES
Webparts normally need custom properties
• Webparts normally need custom properties
• Define: /src/webparts/”webpart”/”webpart”Props.ts
• Add in JSON
• Default values: /src/webparts/”webpart”/”webpart”.manifest.json
• Add in JSON: preconfiguredEntries.properties
• Display: /src/webparts/”webpart”/”webpart”.ts
• Method: protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {}
• Override onchange: /src/webparts/”webpart”/”webpart”.ts
• Method: public onPropertyPaneFieldChanged (propertyPath: string, oldValue: any ,
newValue: any) {}

18. @ericoverfieldericoverfield.com
ACCESS DYNAMIC DATA IN PROPERTY PANE
• Method getPropertyPaneConfiguration returns a static IPropertyPaneConfiguration
• Method does not allow for Promises / dynamic data
• Solution: Load dynamic data within onPropertyPaneConfigurationStart() or onInit() then
trigger pane refresh
• this.context.propertyPane.refresh(); //cause pane to refresh with new data

19. @ericoverfieldericoverfield.com
CONNECT TO SHAREPOINT / DYNAMIC DATA
• SPFx provides tools to quickly interact with external API data
• TypeScript Http classes within @microsoft/sp-http
• this.context always includes spHttpClient!
• HttpClient
• Basic set of features for REST operations with any external resource
• SPHttpClient
• REST calls against SharePoint
• Handles context, security, etc. Could use HttpClient if desired
import { SPHttpClient } from '@microsoft/sp-http';
this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl +
`/_api/Lists/?$select=Id,Title&$filter=Hidden ne true`, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}

20. Demo
SPFx WEBPART: OVERVIEW,
PROPERTIES AND SHAREPOINT DATA

21. PACKAGE YOUR WEBPART FOR DEPLOYMENT
• Set deployment configuration
• config/package-solution.json – general settings and package name
• write-manifests.json – CDN / bundle location – for dev, can serve locally: gulp serve --nobrowser
• C:> gulp clean (cleans sharepoint and temp folders)
• C:> gulp build (Rebuilds the solution)
• C:> gulp bundle (Creates the solution bundles)
• C:> gulp package-solution (Creates /sharepoint/”webpart”.spapp)
• C:> gulp –ship (minifies bundle and reads in CDN info from config/write-manifests.json)
• C:> gulp package-solution --ship (Recreates /sharepoint/”webpart”.spapp with CDN info)

22. PACKAGE YOUR WEBPART FOR DEPLOYMENT
• After solution created, can then add to SharePoint
• Add .spapp to app catalog
• Add app to SharePoint site
• Add webpart in site to content page
• Webpart is still pointing to local host for JS
• Configure CDN for full webpart deployment
• https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/deploy-web-part-to-cdn
• Or manually deploy solution bundle and config write-manifests.json

23. Demo
DEPLOY SPFx WEBPART
TO SHAREPOINT

24. CONNECT TO EXTERNAL LIBRARIES / FRAMEWORKS / RESOURCES
• External libraries and component require Typings
• i.e. for jQuery:
• C:> npm install --save jquery
• C:> npm install --save @types/jquery
• Add to bundle – config/config.json
"externals": {
"jquery":"node_modules/jquery/dist/jquery.min.js“
},
• Within webpart
• import * as myjQuery from 'jquery';
• Access: let $workspace: jQuery = myjQuery(‘#spPageChromeAppDiv');

25. SPFx COMMAND REFERENCE
• yo @microsoft/sharepoint // create a new base project
• gulp serve // compile and start up local workbench
• gulp serve --nobrowser // same as serve, but with no browser loaded
• gulp package-solution // compile / create spapp file for redeployment in "Sharepoint" folder
• gulp package-solution --ship // create minified component assets
• gulp bundle // generate assets (js, css, etc) for deployment to CDN
• gulp deploy-azure-storage // deploy assets to Azure storage as defined in config/deploy-azure-
storage.json

26. 1. Learn TypeScript!
2. Use SPHttpClient to connect to SharePoint
• HttpClient for other API’s
3. Use frameworks and libraries that already has typings
4. Office UI Fabric available for consistent styling
5. Further Documentation Likely Exists
• https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview
RECOMMENDATIONS

27. REVIEW
1. SharePoint Framework (SPFx) Overview
2. SPFx Toolchain – the Build Environment
3. SPFx Webpart Components
4. Webpart Properties, Packaging & More

28. RESOURCES

29. RESOURCES
• SharePoint Framework documentation
https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview
• SharePoint Framework API
https://dev.office.com/sharepoint/reference/spfx/sharepoint-framework-reference-overview
• Build your first webpart
https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part
• Add properties to a SPFx Webpart
https://dev.office.com/sharepoint/docs/spfx/web-parts/basics/integrate-with-property-pane
• Connect a SPFx webpart to SharePoint Data
https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/connect-to-sharepoint
• Webpart with React and Office UI Fabric
https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/use-fabric-react-components
• Get an introduction to the SharePoint Framework
https://channel9.msdn.com/Events/Ignite/2016/BRK2114-TS
• Demo Source Code
https://github.com/eoverfield/SPFx-Demos

30. THANK YOU
BUILD YOUR
FIRST SHAREPOINT
FRAMEWORK WEBPART