Overview of SharePoint Framework (SPFx)

SharePoint Framework (SPFx)

Gosia Borzecka

@gosiaborzecka

About me

@gosiaborzecka

www.gosiaborzecka.net

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/

@gosiaborzecka

www.gosiaborzecka.net