overview of sharepoint framework (spfx)
TRANSCRIPT
SharePoint Framework (SPFx)
Gosia Borzecka
@gosiaborzecka
SharePoint Development
Farm based
Sanboxes
SharePoint Add-ins
Manual injecting JS file
What is SharePoint Framework (SPFx)?
Client-side SharePoint development
Open Source tooling
Responsive and mobile-ready
Works for SharePoint Online and SharePoint on-premises
Main Components• build & run the applicationsNodeJS
• manages the dependencies required for the applicationNpmjs
• automate the tasks of building and running the solutionGulp
• Build the application and compile into clean, simple JavaScript codeTypeScript
• create a solution structure for the applicationYeoman
Extra Components
• edit and manage the source codeVisual Studio Code
• contribute the source GitHub
• use any type of JS Framework (React, AngularJS, KnockoutJS etc..)JS Frameworks
How to start?
npm install –g bower npm install –g yo npm install –g tsd npm install –g gulp-clinpm i
@microsoft/generator-sharepoint
DEMO
Helpful commands yo@microsoft/sharepoint create new project / add new web partgulp bundle
build and bundle projectgulp serve
bundle project and start Workbenchgulp package-solution
build solution package (.spapp)gulp nuke
delete build and intermediate foldersgulp test
run tests--ship
argument to execute a release build
Property PanePropertyPaneTextField – get this by default with project
PropertyPaneButton
PropertyPaneCheckbox
PropertyPaneChoiceGroup
PropertyPaneCustomField
PropertyPaneDropdown
PropertyPaneHorizontalRule
PropertyPaneLabel
PropertyPaneLink
PropertyPaneSlider
Environmentimport { EnvironmentType } from '@microsoft/sp-client-base';
this.context.environment.type
Values:
•EnvironmentType.Tests – Tests context
•EnvironmentType.Local – SharePoint Workbench
•EnvironmentType.SharePoint – Modern SharePoint page
•EnvironmentType.ClassicSharePoint – Classic SharePoint Page
UI Fabric
Fonts, icon Colour
Microsoft Graph
SPFx is open source
https://github.com/OfficeDev/office-ui-fabric-react
https://github.com/OfficeDev/generator-office
https://github.com/SharePoint/sp-dev-docs
If you want to know more!
Dev Office• https://dev.office.com/sharepoint/docs/spfx/sharepoint-
framework-overview
Waldek Mastykarz • https://blog.mastykarz.nl/
Andrew Connell • http://www.andrewconnell.com/
SharePoint Saturday • http://www.spsevents.org/
UK Community Days • http://uk.communities.tech/
