SharePoint Framework (SPFx)
Arturo De la Garza
@agzertuche
👨💻 🎮 🎲 📚 🍺 ☕
Requisites
- SharePoint Fundamentals
- NPM Basics
- Git Basics
- Office 365 Tenant
- Development environment
Agenda
| Topic | Duration ⏳ (minutes) |
|---|---|
| SPFx Basics | 10 |
| TypeScript Basics | 10 |
| React Basics | 10 |
| Excercise part 1 | 90 |
| Break | 15 |
| Excercise part 2 | 90 |
| Examples | 15 |
SPFx
- New SharePoint development model
- 100% of JavaScript
- SPFx runs in the context of the current user (no elevated privilages)
- SPFx work in classic and modern sites
Toolchain Comparison
TypeScript
- Interfaces
- Classes
- Enum
- Types
- 📚 TypeScript Docs
React
-
Components
-
Props & State
-
Lifecycle methods
-
Conditional rendering
-
React with TypeScript
SPFx Excersice Part 1
-
Set up dev environment
- What is the workbench
- How to debug
-
Requirement + Desing
-
Think in components
-
Developing the webpart
Set up dev environment
# make sure node v8.x is installed
node -v
# install global packages
npm install -g yo gulp
npm install -g @microsoft/generator-sharepointCreate web part project
# create project
yo @microsoft/sharepoint
# answer Yeoman questions...
# wait until the project scaffold is completed
# then run below command from the project directory
gulp trust-dev-cert
# run project
gulp serveWorkbench
How to debug
- Browser
- debugger;
- VS Code
- .vscode/launch.json
Requirement + Desing
- Hero slider that shows news page
- It features stunning photos
- There’s clear navigation – each image has a description that puts it into context.
- There are clear calls-to-action labelled “Read More”.
Think in components
<Nav />
<Headline />
<Slide />
<Controls />
<HeroSlider />
<HeroSlider />
State
-
Array of slides
-
Active slide
-
Component status
Props
- Data provider
- Content type to query
- ...Property pane props
<Slide />
State
-
N/A
Props
-
Title
-
Description
-
Categories
- Button
- Image
- Is slide selected?
<Nav />
State
-
N/A
Props
-
Navigation items
-
Index of selected item
-
Select item on click
<Controls />
State
-
N/A
Props
-
go to next slide
- go to previous slide
Break time!
15
SPFx Excersice Part 2
-
Config property pane
-
Component status
-
Data providers
-
Deployment process
Config property pane
- PropertyPaneCheckbox
- PropertyPaneToggle
- PropertyPaneSlider
- PropertyPaneTextField
- etc...
Component status
Loading data... ⏳
Error 😢
Missing configuration 😪
Everything is good 😃
Data Providers
- Mock data
- SP Rest Service
- SP Search Rest service
- PnP
- SP JSOM object model
- MS Graph
Deployment process
gulp clean
gulp bundle --ship
gulp package-solution --ship- Update ./config/package-solution.json
- name
- id
- Package solution
- Upload package to an app catalog
- Smoke test wp