uCertify

Mastering SharePoint Framework

Master the SharePoint Framework course to learn new skills, upgrade your expertise, and grow your career with fun, hands-on lessons.

(MASTER-SHAREPOINT.AW1) / ISBN : 978-1-64459-680-7
Lessons
Lab
TestPrep
AI Tutor (Add-on)
Get A Free Trial

About This Course

Enroll in our SharePoint Framework course to master client-side development and build powerful, modern SharePoint solutions from scratch.

In this course, you’ll learn SharePoint Framework with hands-on projects — setting up your environment, developing web parts with React, Angular, and Knockout, deploying to Azure CDN, and integrating Microsoft Graph. Discover best practices for debugging, upgrades, CI/CD pipelines, and even extending Microsoft Teams with SPFx.

From basic web parts to advanced customizations, you’ll gain real-world skills to solve business challenges and boost your career as a SharePoint developer.

Skills You’ll Get

  • SPFx web parts: Develop custom solutions using React, Angular, and Knockout JS.
  • SPFx solutions deployment: Host web parts on Azure CDN, SharePoint libraries, and Office 365 CDN.
  • APIs integration: Connect to Microsoft Graph, third-party APIs, and Azure Functions.
  • Extend SharePoint & Teams: Create SPFx extensions, custom app pages, and Microsoft Teams tabs.
  • CI/CD pipelines: Automate deployments using Azure DevOps.
  • SPFx optimization: Master logging, testing (Jest/Enzyme), and performance best practices.
Download Course Outline

1

Preface

2

Getting Started with the SharePoint Framework

  • SharePoint Evolution Across Versions
  • Birth of the SharePoint Framework
  • Key Features of the SharePoint Framework
  • Script Editor Web Part vs App Part vs the SPFx Web Part
  • Lightweight Components/Tools Used (SPFx Toolchain)
  • ALM of the Client-side Web Part
  • Setup the Developer Environment for SPFx
  • Conclusion
3

Develop Your First SPFx Web Part

  • Features of SPFx Client-side Web Parts
  • Conclusion
4

SPFx Web Part Property Pane

  • Property Pane Metadata
  • Supported Typed Object Properties
  • Test the Property Pane
  • Conclusion
5

Custom Control for the Web Part Property Pane

  • Build the List Dropdown Custom Control
  • Define the Web Part Property
  • Add the Dropdown Property Pane Control
  • Add List Dropdown to the Property Pane Control
  • Use the Dropdown Property Pane Control in the Web Part
  • Test the Custom Property Pane
  • Conclusion
6

PnP Control for the Web Part Property Pane

  • PnP Reusable Property Pane Controls
  • Use List Picker Control in the Web Part Property Pane
  • Conclusion
7

CSS Considerations

  • Manage CSS files in the SPFx solution
  • Use of Sass
  •  Override externally referenced CSS
  • Conclusion
8

Configure the SPFx WebPart Icon

  • Out-of-the-box look and feel
  • Office UI Fabric Icons
  • Use an External Icon Image
  • Use the base64 Encoded Image
  • Conclusion
9

Examine SPFx WebParts on Modern SharePoint

  • Understand the SharePoint Workbench
  • Configure SPFx web parts for Modern Pages
  • Conclusion
10

Host SPFx WebParts from MS Azure CDN

  • Configure the MS Azure Storage Account
  • Configure the BLOB container
  • Enable Azure CDN for Storage Account
  • Configure the SPFx Solution to use Azure CDN
  • Conclusion
11

Host SPFx WebParts from the Office 365 Public CDN

  • Configure the CDN for the Office 365 Tenant
  • Setup the New Office 365 CDN
  • Conclusion
12

Host SPFx Web Parts From the SharePoint Document Library

  • Deployment to CDN
  • Configure the SharePoint Library as CDN
  • Configure the SPFx Solution for the SharePoint Library CDN
  • Conclusion
13

Integrating jQuery with SPFx WebParts

  • Integrate jQuery with the SPFx Web Part
  •  Configure the Required Packages and Dependencies
14

CRUD Operations with No Framework

  • Develop a SPFx Solution with No Framework for CRUD operations
  •  Configure the Property for the List Name
  • Conclusion
15

CRUD Operations with React JS

  • Brief about React JS
  • The SPFx Solution for CRUD operations with React JS
  • Configure the Property for the List Name
  • Add Controls to the WebPart
  • Implement the Create Operation
  • Implement the Read Operation
  • Implement the Update Operation
  • Implement the Delete Operation
  • Create Operation
  • Read Operation
  • Update Operation
  • Delete Operation
  • Conclusion
16

CRUD Operations with AngularJS

  • Brief information about AngularJS
  • Create the SPFx Solution
  • Configure AngularJS
  • Configure the Property for List Name
  • Build an Angular application
  • Implement the Create Operation
  • Implement the Read Operation
  • Implement the Update Operation
  • Implement the Delete Operation
  • Configure the Controller
  • Configure the Module
  • Add Controls to the WebPart
  • Create Operation
  • Read Operation
  • Update Operation
  • Delete Operation
  • Conclusion
17

CRUD Operations Using Knockout JS

  • Brief information about KnockoutJS
  • Create the SPFx Solution
  • Configure Property for List Name
  • Implement the Create Operation
  • Implement the Read Operation
  • Implement the Update Operation
  • Implement the Delete Operation
  • Add Controls to the Knockout template
  • Test the WebPart
  • Create Operation
  • Read Operation
  • Update Operation
  • Delete Operation
  • Conclusion
18

CRUD Operations with SP-PnP-JS

  • Brief information about SP-PnP-JS
  • Create the SPFx Solution
  • Configure sp-pnp-js
  • Configure Property for List Name
  • Add Controls to the WebPart
  • Implement the Create Operation
  • Implement the Read Operation
  • Implement the Update Operation
  • Implement the Delete Operation
  • Test the WebPart
  • Create Operation
  • Read Operation
  • Update Operation
  • Delete Operation
  • Conclusion
19

Transition to @pnp/sp from sp-pnp-js

  • Why sp-pnp-js is deprecated?
  • The SPFx WebPart with sp-pnp-js
  • Code the WebPart
  • Test the WebPart
  • Transition to @pnp/sp from sp-pnp-js
  • Test the web part after the @pnp/sp transition
  • Conclusion
20

SPFx Development with ReactJS

  • Life with JavaScript before React JS
  • Overview of ReactJS
  • React/Virtual DOM
  • Primary Building Blocks of React
  • Conclusion
21

React Lifecycle Events in SPFx

  • React Component Life Cycle
  • Render Method of the React Component
  • Conclusion
22

Autobind Control Events in SPFx

  • Develop the SPFx Web Part
  • Binding the event to the control
  • Binding all the events at once
  • Conclusion
23

Partial State Update for React-based SPFx WebParts

  • React State
  • Spread operator
  • Test the WebPart
  • Conclusion
24

Using Office UI Fabric in SPFx

  • The UI Challenges
  • Overview of Office UI Fabric
  • Office UI Fabric for the SharePoint Framework
  • Office UI Fabric Components
  • Use Office UI Fabric Components in the SPFx WebPart
  • Implement the Greet Message WebPart using Office UI Fabric
  • Conclusion
25

Provision SharePoint Assets in SPFx Solutions

  • SharePoint Assets
  • Create the SPFx Solution
  • Add SharePoint Assets to the SPFxSolution
  • Package the assets as part of the SPFx Solution
  • Conclusion
26

Connect to the MS Graph API with MSGraphClient

  • Brief information about Microsoft Graph
  • MSGraphClient to consume the Graph APIs
  • Retrieve User Information using MS Graph
  • Conclusion
27

Connect to the MS Graph API with AadHttpClient

  • AadHttpClient vs MSGraphClient
  • Access MS Graph using AadHttpClient
  • Get user details using MS Graph
  • Configure your Office 365 Tenant as the First Release Tenant
  • API Management
  • Conclusion
28

SPFx Logging Mechanism

  • Understand the Logging API
  • Develop the SPFx Solution for Implementing Logging
  • Conclusion
29

Debug SPFx Solutions

  • Develop the SharePoint Framework Web Part
  • Debugging with a Browser
  • Debug while developing
  • Debug with Visual Studio Code
  • Debugging on the Local Workbench
  • Debugging on the Hosted Workbench
  • Conclusion
30

Overview of SPFx Extensions

  • SharePoint Framework Extensions
  • Update the SPFxYeoman Generator
  • Create the SharePoint Framework Extensions Project
  • Conclusion
31

SPFx Extensions-Application Customizer

  • Overview of an Application Customizer
  • Application Customizer the SPFx Solution
  • Implement the Application Customizer
  • Conclusion
32

Extend an Application Customizer with React Components

  • Generate the SPFx Solution for an Application Customizer
  • Application Customizer Implementation
  • Conclusion
33

SPFx Extensions-Field Customizer

  • Overview of a Field Customizer
  • Column Formatting VS SPFx Field Customizer
  • Develop the SPFx Solution for a Field Customizer
  • Conclusion
34

SPFx Extensions-ListView Command Set

  • Overview of ListView Command Set
  • Develop the ListView Command Set SPFx Solution
  • Develop the ListViewCommand Set
  • Debugging the List View Command Set
  • Define the ListView Command Sets
  • Implement the ListView Command Set Customization
  • Conclusion
35

Anonymously Call MS Azure Functions

  • Introduction to Azure Functions
  • Empower CORS for the Azure Function
  • Call the Azure function from the SPFx Web Part
  • Call Anonymous Azure Function from the Web Part
  • Conclusion
36

Securing Azure Functions with Azure Active Directory

  • Azure Active Directory App Registration
  • CORS Enablement for Azure Function
  • Develop the Azure Function with Visual Studio
  • Conclusion
37

Consume Azure AD Secured Function with SPFx

  • Consume the Azure function with the SPFx web part
  • Set permissions to the SPFx webpart
  • Grant permissionsto test the webpart
  • Conclusion
38

Implementing Separation of Concerns (SoC)

  • Separation of Concerns (SoC)
  • Develop an SoC scenario
  • Mock data service implementation
  • Consume service inside the SPFx webpart
  • Conclusion
39

Localization Support for SPFx

  • Develop localization solutions for SPFx
  • Support for localization
  • Conclusion
40

Office 365 CLI

  • Installation of the Office 365 CLI
  • Usage of the Office 365 CLI
  • Office 365 Tenant Management
  • Office 365 CLI Cmdlets
  • Office 365 CLI Upgrade
  • Conclusion
41

SPFx Solutions Upgrade

  • The upgrade puzzle
  • The upgrade plan
  • Conclusion
42

SPFx Solution Upgrade with the Office 365 CLI

  • Introduction to the Office 365 CLI
  • SPFx Solution Upgrade to the Latest Version
  • SPFx Solution Upgrade to a Specific Version
  • Conclusion
43

Common Issues and Resolutions with Upgrading npm Packages

  • Why to upgrade npm packages?
  • Common Issues and Resolutions for npm Upgrade
  • Conclusion
44

Extend MS Teams with SPFx

  • Develop the MS Teams Tab SPFx Solution
  • Support for MS Teams in SPFx
  • Handle MS Teams Context in the Web Part
  • Package and Deploy the web part to SharePoint
  • Make the web part accessible in MS Teams
  • Conclusion
45

Library Component Types

  • Introduction to a Library Component
  • Create the Library Component
  • Develop the Library Component
  • Utilize the library component in the SPFx web part
  • Deploy a library to the tenant app catalog
  • Consume the Library from the Tenant App Catalog
  • Conclusion
46

Develop Custom App Pages with SPFx

  • Develop custom app pages with SPFx
  • Configure the web part for a single part page
  • Deploy the Package
  • Verify the Custom App Page Creation
  • Conclusion
47

Optimizing SPFx Solutions

  • SPFx implementation common issues
  • Conclusion
48

Unit Test with Jest and Enzyme

  • Need of unit tests
  • Implement Unit Tests
  • Automate Unit Testing with Azure DevOps
  • Conclusion
49

DevOps for SPFx

  • Continuous Integration (CI)
  • Create a Build Definition
  • Continuous Deployment
  • Setup Deployment Trigger
  • Conclusion
50

Query User Profile Details

  • User Profile Service Outline
  • Query User Profile Details from SPFx
  • Conclusion
51

Querying SP Search Results

  • SPFx Web Part to Query Search Results
  • Implement Service to Query Search Results
  • Conclusion
52

React-based Tree View

  • Develop a SPFx Solution for a React-based Tree View
  • Tree View Control
  • Conclusion
53

React-based Carousel

  • Develop the SPFx Solution for Carousel
  • NPM Carousel Package
  • Conclusion
54

Implement a React-based Organogram

  • Develop the SPFx Solution for an Organogram
  • Conclusion
55

Integrating Adaptive Cards with SPFx

  • Introduction to Adaptive Cards
  • Conclusion
56

Integrating the Google API with SPFx Functions

  • Google Fit REST API
  • Google Developer Playground
  • Develop the SPFx web part to display Google Fit information
  • Conclusion
57

SPFx Development with SharePoint On-Premises

  • Decide the SPFx Version
  • Conclusion
58

APPENDIX

  • SPFx Commands Cheat Sheet

Any questions?
Check out the FAQs

  Want to Learn More?

Contact Us Now

This SharePoint Framework course is designed for:

  • Aspiring SharePoint developers looking to build modern solutions.
  • Experienced SharePoint professionals transitioning from classic to client-side development.
  • Developers familiar with JavaScript/TypeScript who want to specialize in SPFx.

You should have:

  • Basic knowledge of JavaScript/TypeScript and Node.js.
  • Experience with SharePoint Online (intermediate level).
  • Familiarity with Visual Studio Code.

The SharePoint developer course covers:

  • SPFx toolchain (Node.js, npm, Yeoman, Gulp, Webpack).
  • Frameworks like React, Angular, and Knockout for SPFx web parts.
  • Deployment to Azure CDN, Office 365 CDN, and SharePoint libraries.

SPFx is client-side, framework-agnostic, and uses modern tools (e.g., TypeScript, React), unlike server-side classic solutions. 

Master SPFx Development Now

  Develop your SPFx skills while you build, deploy, and customize powerful SharePoint solutions as a modern web developer.

$279.99

Buy Now

Related Courses

All Course