SharePoint Framework

Overview :
This course has been designed as an upgrade for existing SharePoint developers to understand
and implement the latest industry standards using the best from the open source community.
SPFx provides full support for client-side SharePoint development, easy integration with
SharePoint data and support for open source tooling. With the use of modern web technologies
and tools you can create apps that are responsive and mobile-ready which can work with the
SPO as well as on prem.

Prerequisite : Attendees should be well versed with SharePoint on-prem and O365
development, server side and client side object model development as well as on the SharePoint
app model of SharePoint 2013. They should also be familiar and have a basic understanding of
TypeScript and AngularJS.

Introduction to SharePoint Framework

 Overview of SPFx
 What is SPFx
 Key Features
 Why use SPFx
 SPFx Licenses

SPFx Open Source Development Model

 Understanding Open Source Development Model
 Client Side Development
 Getting ready to work with SPFx
o TypeScript Basics
o Angular Basics
o React Basics
o Nodejs Basics

Getting Started with SharePoint Framework

 Setup your Development Environment
 Setup your Office 365 Tenant
o Creating SPO Account
 Installing SharePoint Framework Tool Chain
 o Nodejs
o Yeomen
o Gulp
o WebPack
o Visual Studio Code
 SharePoint Yeoman Generator, Gulp, and Workbench

Creating First SPFx WebPart

 Using Yeomen Scafolding Template
o Create a basic WebPart without any Framework
o Testing the Helloworld web part in Workbench
o Understanding the generated code
o Modifying render() method

Debugging
 Debugging Solutions in Visual Studio Code
 Installing Debugger from Code Extensions
 Debug using local Workbench

SPFx Web Part property pane

 Adding custom properties
 Understanding interfaces
 Importing libraries
 Setting default values

Creating Web Part using other JavaScript Framework’s

 Different options to load JavaScript libraries
o React framework
o Angular 1.x
o Knockout
o jQuery

Querying SharePoint Data

 Using mocks to simulate SharePoint data
 Using HttpClient to talk to SharePoint
 Adding Mock Classes
 Understanding Promise syntax
Connect your web part to SharePoint
 Get access to page context
 Connecting to Lists
 Deploy package to the app catalog
 Host your web Part from O365 CDN
 Deploying WebParts to CDN
o Azure CDN

Basic CRUD with no framework

 CRUD operations using REST
 Using other Frameworks
o Angular 1.x framework
o Knockout framework
o jQuery

SPFx Extensions
 Application Customizers
 Field Customizers
 Command Sets
 Migrating exiting customizations

External Libraries
 Add External Libraries
 JavaScript Libraries
 CSS Styles
 SP PnP Js
 AngularJs

Working on the UI
 Office UI Fabric Core
 Office UI Fabric React

Modern UI
 Global Navigation and Branding
 Headers and Footers
 Managed Metadata Navigation
SPFx Feature Pack 2
 Differences between SPFx 1.1 and SPFx Feature Pack 2
 SPFx On Premise (WebPart on Classic Pages)
 Yeoman generator 1.3.2
 Modern Custom Themes