build your first sharepoint framework...
TRANSCRIPT
![Page 1: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/1.jpg)
SharePoint Advocate and Enthusiast
PixelMill
ERIC OVERFIELD | @ericoverfield
BUILD YOUR FIRST
SHAREPOINT
FRAMEWORK (SPFx)
WEBPART
SPTechCon San Francisco 2016
Tuesday December 6th
2:15 PM – 3:30 PM https://github.com/eoverfield/SPFx-Workshop-Demos
![Page 2: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/2.jpg)
Founder and SharePoint Branding/UI Lead, PixelMill
Speaker, Teacher, Advocate, Author
SharePoint Community Organizer
Located in Davis, CA
Co-author: “Black Magic Solutions for White Hat SharePoint”
(August, 2013)
Co-author: “Pro SharePoint 2013 Branding and Responsive Web Development”
(Apress – June 12th, 2013)
Order Your Copy
http://pxml.ly/zsqykd
ericoverfield.com @ericoverfield
INTRODUCTION ERIC OVERFIELD
![Page 3: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/3.jpg)
WHAT YOU WILL LEARN TODAY SHAREPOINT FRAMEWORK INTRODUCTION
1 SHAREPOINT FRAMEWORK OVERVIEW
2 FRAMEWORK BUILD ENVIRONMENT
3 FRAMEWORK WEBPART COMPONENTS
ericoverfield.com @ericoverfield
4 WEBPART PROPERTIES, PACKAGING & MORE
![Page 4: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/4.jpg)
HISTORY OF SHAREPOINT DEVELOPMENT MODELS
ericoverfield.com @ericoverfield
2013
APP/ADD-IN MODEL
2010
SANDBOX
2003
FULL TRUST
2016
CLOUD FRIENDLY SPFx
![Page 5: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/5.jpg)
WHAT IS THE FRAMEWORK?
A page and web part model with full support for client-side
SharePoint development
Open source tooling
nodeJS, npm, Yeoman, gulp, TypeScript, webpack and more
Easy integration with SharePoint data
Rest API wrapper classes
Available in the cloud and On-prem*
Now on SPO First Release tenants
On-prem availability scheduled for 2017
ericoverfield.com @ericoverfield
![Page 6: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/6.jpg)
HOW IT IS DIFFERENT
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
ericoverfield.com @ericoverfield
![Page 7: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/7.jpg)
TOOLSET COMPARISION
ericoverfield.com @ericoverfield
Project Templates
SERVER SIDE DEVELOPMENT VS SPFx TOOL CHAIN
![Page 8: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/8.jpg)
SET UP A BUILD
ENVIRONMENT
![Page 9: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/9.jpg)
PREREQUISITES
Developer Tenant
Now available to First Release Tenants
App catalog for deployment
http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant#create-app-catalog-site
Developer Site Collection
Document Library with custom site column – “ClientSideApplicationId” - text
May be any document library as long as site column exists
Upload the SharePoint Workbench (workbench.aspx) to dev site “Document” library
https://github.com/SharePoint/sp-dev-docs/blob/master/workbench.aspx
Or use PnP SharePoint Framework Developer Site Template
https://templates-gallery.sharepointpnp.com/template/sharepoint-framework-developer-site
ericoverfield.com @ericoverfield
![Page 10: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/10.jpg)
YOUR SPFx DEVELOPMENT ENVIRONMENT
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
Use code editor
VS Code / Sublime Text / NotePad++, etc
ericoverfield.com @ericoverfield
![Page 11: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/11.jpg)
DEMO
DEVELOPMENT
ENVIRONMENT
![Page 12: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/12.jpg)
CREATE YOUR FIRST SPFx Webpart
C:\> md helloworld-webpart
C:\> cd helloworld-webpart
C:\> yo @microsoft/sharepoint
This will take a while to load all components
C:\> gulp serve
Check out your first webpart!
It “should” be that simple
ericoverfield.com @ericoverfield
![Page 13: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/13.jpg)
DEMO
YOUR FIRST
SPFx WEBPART
![Page 14: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/14.jpg)
WELCOME TO A
NEW DEVELOPMENT
PARADIGM
![Page 15: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/15.jpg)
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
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 toolchainericoverfield.com @ericoverfield
![Page 16: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/16.jpg)
WEBPART 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 get propertyPaneSettings(): IPropertyPaneSettings {}
Override onchange: /src/webparts/”webpart”/”webpart”.ts
Method: public onPropertyChange(propertyPath: string, newValue: any) {}
ericoverfield.com @ericoverfield
![Page 17: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/17.jpg)
ACCESS DYNAMIC DATA IN PROPERTY PANE
Method propertyPaneSettings returns a static IPropertyPaneSettings
Method does not allow for Promises / dynamic data
Solution: Load dynamic data within propertyPaneSettings
then trigger pane refresh
this.configureStart(); //cause pane to refresh with new data
ericoverfield.com @ericoverfield
![Page 18: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/18.jpg)
CONNECT TO SHAREPOINT / DYNAMIC DATA
SPFx provides tools to quickly interact with external API data
TypeScript Http classes within @microsoft/sp-client-base
BasicHttpClient
Basic set of features for REST operations with any external resource
HttpClient
REST calls against SharePoint
Handles context, security, etc. Could use BasicHttpClient if desired
import { HttpClient } from '@microsoft/sp-client-base';
private _httpClient: HttpClient;
this._httpClient.get(this._webAbsoluteUrl + `/_api/Lists/?$select=Id,Title&$filter=Hidden ne true`)
.then((response: Response) => {return response.json();
});
}
![Page 19: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/19.jpg)
DEMO
SPFx WEBPART:
OVERVIEW,
PROPERTIES AND
SHAREPOINT DATA
![Page 20: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/20.jpg)
PACKAGE YOUR WEBPART FOR DEPLOYMENT
C:\> gulp package-solution
Creates /sharepoint/”webpart”.spapp
Add .spapp to app catalog
Add app to SharePoint development site
Add webpart in development 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
ericoverfield.com @ericoverfield
![Page 21: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/21.jpg)
CONNECT TO EXTERNAL LIBRARIES / FRAMEWORKS / RESOURCES
External libraries and component require Typings
i.e. for jQuery:
C:\> npm i --save jquery
C:\> npm i -g tsd
C:\> tsd install jquery jqueryui –save
Within webpart
import * as myjQuery from 'jquery';
Access: let $workspace: jQuery = myjQuery(‘#spPageChromeAppDiv')
ericoverfield.com @ericoverfield
![Page 22: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/22.jpg)
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 bundle --ship // generate assets (js, css, etc) for deployment to CDN
gulp package-solution –ship // package ready for shipment --ship is just
temporary during dev preview
gulp deploy-azure-storage // deploy assets to Azure storage as defined
in config/deploy-azure-storage.json
ericoverfield.com @ericoverfield
![Page 23: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/23.jpg)
BEST PRACTICES
Learn TypeScript!
Use HttpClient to connect to SharePoint
BasicHttpClient for other API’s
Use frameworks and libraries that already has typings
Office UI Fabric available for consistent styling
ericoverfield.com @ericoverfield
![Page 24: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/24.jpg)
RESOURCES THE SHAREPOINT FRAMEWORK
ericoverfield.com @ericoverfield
SharePoint Framework documentation
https://github.com/SharePoint/sp-dev-docs
Set up an Office 365 Developer Tenant
https://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant
SharePoint Framework API
https://sharepoint.github.io/
Webpart with React and Office UI Fabric
https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/use-fabric-react-components
Build your first webpart
https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part
Get an introduction to the SharePoint Framework
https://channel9.msdn.com/Events/Ignite/2016/BRK2114-TS
Demo Source Code
https://github.com/eoverfield/SPFx-Workshop-Demos
![Page 25: BUILD YOUR FIRST SHAREPOINT FRAMEWORK (SPFx…nellisconsultingllc.com/Resources/SPTechConSF2016Slides/Dec 6... · build your first sharepoint framework (spfx) webpart sptechcon san](https://reader034.vdocuments.net/reader034/viewer/2022050720/5a9f2cae7f8b9a76178c6f92/html5/thumbnails/25.jpg)
BUILD YOUR FIRST
SHAREPOINT FRAMEWORK WEBPART
THANK YOUQUESTIONS?
@ericoverfieldSPTechCon SF 2016
http://pxml.ly/EO-SPFx-Webpart
Order Your Copy
http://pxml.ly/zsqykd
“Pro SharePoint 2013 Branding and Responsive Web Development”
(Apress – June 12th, 2013)