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
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
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
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
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();
});
}
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
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
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
Slides will be available from blog and twitter
Look at introduction webpart for SPFx
Who has looked at the framework? Anyone install it already? You have the dev tenant configured?
101 level overview. Good demos of options but going to limit how deep we go right now. Lots of valuable resources at the end to help you with your journey
http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview
Key features of the SharePoint Framework include:
Runs in the context of the current user and connection in the browser. There are no iFrames.
The controls are rendered in the normal page DOM.
The controls are responsive and accessible by nature.
Enables the developer to access the lifecycle - including, in addition to render - load, serialize and deserialize, configuration changes, and more.
It's framework agnostic. You can use any browser framework that you like: React, Handlebars, Knockout, Angular, and more.
The toolchain is based on common open source client development tools like npm, TypeScript, Yeoman, webpack, and gulp.
Performance is reliable.
End users can use SPFx client-side solutions that are approved by the tenant administrators (or their delegates) on all sites, including self-service team, group, or personal sites.
Solutions can be deployed in both classic web part and publishing pages and modern pages.
NodeJS - root - current Long Term Support (LTS) version
npm V3
npm -g install npm@3
On a PC, install windows-build-tools. will also install Python 2.7, needed for a few modules
npm install --global --production windows-build-tools
Need Yeoman generator
npm i -g @microsoft/generator-sharepoint
npm i -g @microsoft/generator-sharepoint@latest (to get latest)
Look at developer tenant and dev env
node –v
gulp –v
yo --generators
code .
Create our first SPFx webpart
md helloworld-webpart
cd helloworld-webpart
yo @microsoft/sharepoint
gulp serve
Now open workbench in dev tenant, while local gulp is running
Go to helloworld folder
yo @microsoft/sharepoint
--give a new webpart name
gulp serve
Also can load in SPO workbench /_layouts/15/workbench.aspx