Overview of SharePoint Framework (SPFx)

1. SharePoint
Framework
(SPFx)
Gosia Borzecka
@gosiaborzecka

2. About me
@gosiaborzecka
www.gosiaborzecka.net

3. SharePoint Development
Farm based
Sanboxes
SharePoint Add-ins
Manual injecting JS file

4. What is SharePoint Framework (SPFx)?
Client-side SharePoint development
Open Source tooling
Responsive and mobile-ready
Works for SharePoint Online and SharePoint on-premises

5. Main Components
• build & run the applications
NodeJS
• manages the dependencies required for the application
Npmjs
• automate the tasks of building and running the solution
Gulp
• Build the application and compile into clean, simple
JavaScript codeTypeScript
• create a solution structure for the application
Yeoman

6. Extra Components
• edit and manage the source code
Visual Studio Code
• contribute the source
GitHub
• use any type of JS Framework
(React, AngularJS, KnockoutJS etc..)JS Frameworks

7. How to start?
npm install –g bower npm install –g yo npm install –g tsd npm install –g gulp-cli
npm i
@microsoft/generator-
sharepoint

12. DEMO

13. Helpful commands
yo
@microsoft/sharepoint
create new project / add new web part
gulp bundle
build and bundle project
gulp serve
bundle project and start Workbench
gulp package-solution
build solution package (.spapp)
gulp nuke
delete build and intermediate folders
gulp test
run tests
--ship
argument to execute a release build

14. Property Pane
PropertyPaneTextField – get this by default with project
PropertyPaneButton
PropertyPaneCheckbox
PropertyPaneChoiceGroup
PropertyPaneCustomField
PropertyPaneDropdown
PropertyPaneHorizontalRule
PropertyPaneLabel
PropertyPaneLink
PropertyPaneSlider

15. Environment
import { 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

16. UI Fabric
Fonts, icon Colour

17. Microsoft Graph

18. 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

19. 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/

21. @gosiaborzecka
www.gosiaborzecka.net