On-Demand Video Course

Mastering the SharePoint Framework (SPFx)

This course gets you up-to-speed on the SharePoint Framework (SPFx), the recommended way to extend SharePoint Online & SharePoint Server.

Chapters: 32
Lessons: 239
Hours: 41+

Join 1000’s of developers who’ve trusted Voitanos & Andrew Connell with their SharePoint Framework education!

In 2017, Microsoft launched the SharePoint Framework (SPFx) as the recommended way to customize and extend the SharePoint modern experience. Subsequent updates expanded the framework’s capabilities and brought it to SharePoint on-premises deployments including SharePoint Server 2016, SharePoint Server 2019, & SharePoint Server Subscription Edition (SE).

Tip: What is the SharePoint Framework?

Not sure what the SharePoint Framework is, why Microsoft created it, or who & where it can be used? In his 5-part series SharePoint Framework Five “W"s & One “H” answered, Andrew Connell answers the most common questions about the SharePoint Framework.

The SharePoint Framework represents a significant pivot from how we customized & extended SharePoint in the past, but also how we built these solutions. Consider…

We no longer build server-side solutions that are deployed to SharePoint Servers. Instead, all customizations are implemented as client-side solutions written in TypeScript and use popular web frameworks such as React.
We’ve traded ASP.NET and Visual Studio for a popular & light-weight web development stack of tools including tools like Visual Studio Code, Node.js, npm, Webpack, and Gulp.

Make no mistake, this is a huge change for long-time SharePoint developers. If you’re a traditional server-side SharePoint developer, it can be quite a bit to learn. Even seasoned web developers have a lot to learn to be productive in extending and customizing the SharePoint Framework.

This course is the best resource available to learn the SharePoint Framework development model to extend and customize SharePoint. Whether you are just starting out and need the basics, or you’re an experienced developer looking for dive deep into the nuts and bolts and incorporate DevOps practices, you’ll find a package for you!

Meet your Instructor » Andrew Connell
Microsoft MVP, Microsoft 365 Development
Andrew is a long-time web developer who's worked with every SharePoint development model going back to SharePoint Portal Server 2003. He's seen farm solutions, sandbox solutions, add-ins, JavaScript injection... if you can do it in SharePoint, Andrew's done it!
His work with the SharePoint Framework and Microsoft goes back prior to the first public release in early 2017. Andrew's taken all this experience, knowledge, guidance and packed it into this course, Mastering the SharePoint Framework. Learn the SharePoint Framework with Andrew from 41+ hours of theory, explanations, and demos across 250+ lessons in his flagship course, Mastering the SharePoint Framework!

Quality content, always current

Course Bundles

All course bundles include the following:

Lifetime access
Your one-time purchase gets you lifetime access to the course. There's no recurring subscription or fees down the road. It includes lifetime access to all current and future updates to the course.
Evergreen content
Lessons in this course are updated as the SharePoint Framework is updated and expanded. Your enrollment in the course gets you access to all future updates.
24/7 Access
Learn at work, home, or on the go at your own pace. All videos are streamed and available on-demand 24 x 7 x 365.
70+ sample projects (updated to SPFx v1.16)
Each of the paid bundles of the course includes sample projects students can download for reference. The Fundamentals Bundle includes 43 projects & the Ultimate Bundle includes 33 projects!
Prescriptive guidance & best practices
Every lesson explains how something works with more detail you'll find from the official documentation in an unopinionated way. You'll also gain insights into the best practices on on how and why you should select some options over others.

Flexible Learning Options

Three Bundles to Choose From

The Mastering the SharePoint Framework is available in one of three bundles. Pick the bundle that meets your learning needs and goals.

Got a question not addressed on this page?
Check our frequently asked questions!

Starter Bundle

This bundle is 100% FREE and includes chapters (3+ hours of instruction in 21 lessons) that introduce the course and explain what the SharePoint Framework is as well as what you can expect to learn. A final chapter in this bundle explains and walks you through installing & configuring up your environment so you can start SharePoint Framework development right away!

Fundamentals Bundle

Understand the core parts of being productive with the SharePoint Framework in this bundle! Packed with 19+ hours instruction in 119 lessons, you'll learn how to build client-side web parts & extensions, use React, jQuery, and the Office UI Fabric to customize your SharePoint deployment. You'll also learn how to incorporate data from SharePoint, Microsoft Graph and other third-party web APIs in your SPFx components!

Ultimate Bundle

Want to become a master of the SharePoint Framework? This is the bundle for you! This bundle includes everything in the Fundamentals Bundle plus an additional 18+ hours of instruction in 99 lessons to help you master the SharePoint Framework. Learn how to collaborate with a team of developers, implement robust automated test processes with Jest, incorporate DevOps CI/CD and process with Azure Piplines and Github Actions, measure and analyze the usage of your customizations, and so much more!

Pricing

Pay once, own it forever, lifetime updates

Starter Bundle

$ 0

Setup your SPFx dev environment
Over 3 hours of videos
3 chapters & 21 lessons
Instructor-led demos
Evergreen content
Access to student-only channels in the Voitanos community on Discord
Monthly office hours with author Andrew Connell
Access to mastermind group

Start learning today!

Ultimate Bundle

$ 995

Full access to all chapters, lessons, & downloads in our Mastering the SharePoint Framework
Perfect for enterprise developers who want to master the SharePoint Framework
Includes the Starter & Fundamentals Bundles
Adds 18+ hours of videos & demos
Adds 13 chapters & 99 lessons
Download code demos in this bundle
Priority access to monthly office hours with author Andrew Connell
Access to student-only mastermind channel (Voitanos community on Discord) for Q/A & discussions with the author Andrew Connell

Start learning today!

Fundamentals Bundle

$ 495

Learn SPFx basics
Includes the Starter Bundle
Adds 19 hours of videos & demos
Adds 16 chapters & 119 lessons
Download code demos in this bundle
Monthly office hours with author Andrew Connell
Access to mastermind group

Start learning today!

Live outside the United States? We support Purchasing Power Parity with discounts up to 60% off!

Course Syllabus

Here's what's inside...

Explore what and lessons you'll find in this course.
Every chapter in the course, including lesson descriptions, are as follows:

Chapters: 3
Lessons: 21
Hours: 3+

: This chapter introduces you to the author & instructor of the course, what topics you can expect to learn and find out how to get the most out of this course.
Chapter overview
Play 5:00
Course author introduction
In this lesson, learn who your instructor is, and why you should trust AC (me!) with your SharePoint Framework education!
2:11
Course bundles (Starter, Fundamentals & Ultimate) & their contents
This course is available in three different content bundles: Starter, Fundamentals & Ultimate. In this lesson, you'll learn what chapters each bundle contains as well as the additional benefits between the bundles.
11:45
How to get the most out of the course
Make sure that you get the most out of the course bundle that you subscribed to by watching this lesson! You'll learn how the course is constantly updated, how to be notified of updates, and how to get the details on the versions of different apps or libraries are recorded.
6:53
: This chapter explains why Microsoft created the SharePoint Framework to extend and customize SharePoint sites. You'll learn what the SharePoint Framework is and what scenarios it addresses.
Chapter overview
Play 2:16
History of SharePoint development
Before learning about the SharePoint Framework, take a moment to look back at this history of SharePoint development. This will help you understand what you are building when compared to what you used to build.
17:00
Introducing the SharePoint Framework
In this lesson, you'll be introduced to the SharePoint Framework. Learn what it is, what problems it solves, and under which scenarios it should be considered.
9:47
DEMO: Client-side web parts
Let's now see what the user experience is like with the client-side web parts built for the SharePoint Framework. In this demo, you'll see how the add & edit experience is different with these new client-side web parts to the more traditional classic web parts we are used to in SharePoint.
10:02
Comparing SharePoint development options
In this lesson, learn how the SharePoint Framework development differs from the traditional style of SharePoint development options in the past. This will help you understand what you are building and why in the SharePoint Framework.
12:05
SharePoint Framework documentation & resources
While a fantastic resource, this course will likely just be one arrow in your quiver. In this lesson, you'll learn what other resources are available to you for SharePoint Framework development offered by Microsoft.
10:22
: The SharePoint Framework introduces a completely new development toolchain from traditional SharePoint development. This chapter teaches you what this is all about and gets your environment set up.
Chapter overview
Play 4:10
Working with command prompts
SharePoint Framework developers will spend a good bit of time on the command line as you'll see throughout this chapter. In this lesson, you'll learn about alternate options you should consider regardless if you are using Windows or macOS as your primary development machine.
5:28
SharePoint solution & add-in vs. SharePoint Framework development
Before diving into the development toolchain for the SharePoint Framework, take a minute to consider what traditional SharePoint development was like. This helps in understanding why we have new tools and how they map to the tools you may have used if you did traditional SharePoint development.
6:02
SharePoint Framework development toolchain overview
This lesson will provide an overview of the SharePoint Framework development toolchain. As you'll quickly see, things are very different if you're a traditional SharePoint developer; you know, those Visual Studio days...
9:17
Setup SharePoint Online development environment
One of the first things you should do is create a development environment where you can test things against a real SharePoint environment. This lesson will show you how to configure your SharePoint Online environment for SharePoint Framework development.
7:12
Node.js & NPM
The modern web development toolchain that Microsoft chose for SharePoint Framework development is rooted in Node.js. In this lesson, you'll learn what Node.js and its associated package manager NPM are and how to install them. Regardless of your primary development platform of choice, you'll learn how to install, configure and manage Node.js on Windows or macOS in this lesson. You'll also see how the popular tool Node Version Manager (NVM), while not required, can be used to manage your installation.
33:01
Yeoman
SharePoint Framework projects are specifically organized files and folders. In this lesson, you'll learn how to install and use the tool Yeoman to simplify the creation of the project.
11:24
TypeScript & type declarations
This lesson will cover TypeScript, a superset of JavaScript. TypeScript is the primary language Microsoft is using for the SharePoint Framework. Among other things, it is best known for adding types to JavaScript & therefore, we'll also discuss type declarations in this lesson.
9:54
Gulp
Going from your code files to an artifact that'll be deployed to run in the context of the SharePoint Framework. This involves running multiple tasks, using a tool called Gulp that you'll learn about in this lesson.
10:07
Webpack
Just like compiled projects, JavaScript projects can consist of multiple source files that are compiled or merged into a single file that is deployed into production. In this lesson, you'll learn about the tool that will do this for us with SharePoint Framework projects: webpack.
5:27
IDEs & editors
In this lesson, we'll look at the different tooling options when creating SharePoint Framework projects.
2:39

Includes everything in the Starter bundle, plus...

Chapters: 16
Lessons: 119
Hours: 19+

: Let's start with a quick hands-on into. In this chapter, we'll create our first project and see it run in a real SharePoint environment. Then we'll make a few changes to experience the dev story.
Chapter overview
Play 2:54
Create your first SPFx project
In this lesson, you'll create your first SharePoint Framework project.
11:36
Run and test our project
After creating the project, in this lesson, you'll see how to run and test a SharePoint Framework project.
7:45
Exploring the code
With a project created, this lesson will walk through it and get it running in our test environment.
5:19
Understanding & modifying CSS styles
SharePoint Framework projects, like all other web projects, leverage CSS to control the rendering and styling of a project. This lesson will explain how CSS styles are used.
5:19
Understanding & modifying strings
In this lesson, learn how to work with replaceable strings in SharePoint Framework projects.
5:17
Deploying to SharePoint sites
Once a project has been created, it needs to be deployed to a SharePoint site. While another chapter will go into more depth on this subject, this lesson will explain enough so you understand what the process is like.
11:36
: SharePoint Framework projects share many concepts across all types of components developers can build in them. This chapter will explain the different files and folders in the project structure, the different display modes, page contexts, and environments, and how you can add multiple components to the same project.
Chapter overview
Play 4:19
Tour of generic & non-SPFx project files & folders
In this lesson, we'll take a look at the generic aspects of a SharePoint Framework project as many files and folders in a new project aren't specific to the SPFx at all.
7:34
Code: Important files and folders in a project
Learn what the package.json file is, why it is important and what it contains.
10:19
Code: Important solution folders - generated folders
Learn about the generated folders created by the build toolchain.
4:45
Page context and display mode
Developers should be familiar with the page context and what information it contains.
8:21
Upgrade the TypeScript version in SPFx projects
Starting with SPFx v1.8, you can control which version of TypeScript is used in your projects. This lesson will show you how to change the TypeScript version used.
7:16
Add additional components to existing SPFx solutions
In this lesson, you'll learn how to add multiple components to an existing SPFx solution.
6:02
: The SharePoint Framework initially, supported a single component type: client-side web parts. In this chapter, you''ll learn how to create web parts and the files involved within an SPFx project.
Chapter overview
Play 3:17
Creating and inspecting client-side web parts
In this lesson, we're going to create our first client-side web part and look at the initial project's code.
14:46
Client-side web part properties
In this lesson, we'll go further with the custom properties you can set in your custom web part's manifest.
8:28
Coding client-side web parts
In this lesson, we'll continue with our web part tour and take it to the next level - let's build something interesting.
9:10
Add configurable properties
In this lesson, you'll learn how to let your users configure the values of properties on the web part that are saved for others to see.
5:01
: In this chapter, you''ll learn the basics of how property panes work within the SharePoint Framework. We''ll also demonstrate all the controls available to developers.
Chapter overview
Play 1:46
Understanding how property panes work
In this lesson, we'll review how client-side web parts persist data with public properties and then explore how property panes work in the SharePoint Framework.
4:13
Adding controls to property panes
In this lesson, you'll learn how to add controls to custom property panes.
3:39
Change web part values in property panes
Learn how to manipulate and handle changes in the property pane within your client-side web parts.
4:19
Validate user input
In this lesson, you'll learn how to validate data entered in the property pane controls.
2:57
Adding groups and pages to property panes
Property panes offer the ability to group controls on a single page, as covered in this lesson. This lesson will show you how to collect multiple groups of controls in one or more pages within a property pane.
2:44
Property pane control showcase
This lesson will showcase all the controls (as well as options each one offers) provided by Microsoft for use in client-side web parts.
12:24
: Modern applications are rarely built within a silo. Developers commonly leverage external libraries and frameworks within web applications. Client-side applications present interesting challenges as you must consider how it is referenced, if it is included and the impact on the page size. This chapter will address leveraging external JavaScript and CSS style libraries in SharePoint Framework projects.
Chapter Overview
Play 2:04
Add External Libraries to SPFx Solutions
In this lesson you will see how to add external libraries to a SPFx project.
7:31
Understanding Building in Client-Side Projects
A key aspect of leveraging external libraries in client-side projects is understanding the process bundling resources.
4:48
JavaScript Library Formats: Modules vs. Non-Modules
This lesson explains the different types of JavaScript libraries that you can leverage in SPFx projects.
2:10
Managing AngularJS Application Bundles
This lesson will show you how to take the existing AngularJS application and configure it to not bundle the dependencies, but rather leverage CDN references.
4:11
Managing jQuery Application Bundles
This lesson will demonstrate how to manage external references for non-modules and mixed module scenarios.
7:48
Loading Libraries, Stylesheets and Files OnDemand
JavaScript libraries aren't the only external resources you may need. In this lesson learn how to deal with external CSS files.
3:17
Conclusion
In this brief last lesson, we will look at what this chapter covered.
0:45
: Microsoft''s goal is to provide parity in the things we can do with the SharePoint Framework with previous SharePoint customization models. In this chapter, you'll learn how SharePoint Framework extensions can be used to customize the user interface.
Chapter overview
Play 3:51
Development, testing & debugging
In this lesson learn how the development, testing, and debugging story differs with extensions from other SharePoint Framework component types.
5:41
Application customizers
The application customizer extension allows you to inject script on the page or add HTML to placeholders on the page.
23:31
Application customizers - deployment
This lesson covers the deployment story for application customizers.
4:33
Field customizers
In this lesson, learn what field customizers are, and how to create them for your SharePoint lists.
14:22
Field customizers - deployment
In this lesson, learn how to deploy field customizers using the Feature XML schema or using the SharePoint REST API.
15:23
ListView command sets (including deployment)
In this lesson, learn what ListView command sets are, how to create them for your SharePoint lists, and how to deploy them.
23:39
List form customizers
In this lesson, learn what list form customizers are and how you can use SPFx to create custom forms for your lists.
40:10
List form customizers - deployment
In this lesson, learn how to deploy list form customizers using the Feature XML schema or using the SharePoint REST API.
40:10
Tenant-scoped deployment for extensions
This lesson explains how you can deploy an extension one time to all sites across an entire tenant.
24:32
: While creating custom solutions, developers need to have a firm grasp on different debugging options and techniques. This chapter will walk you through different debugging options available to client-side developers. In addition, this chapter will also cover some of the logging options provided by Microsoft in the SharePoint Framework.
Chapter Overview
Play 2:09
Logging in SPFx Projects
Let’s now see what logging options the SharePoint Framework has to offer us and what we can use in the browser.
7:15
Debugging in SPFx Projects
In this lesson we will look at the debugging options available to web developers using just the browser, or more specifically, the browser’s debugging tools and console.
11:41
: Previous SharePoint development models enabled developers to provision assets in SharePoint sites. This included things like list templates, list instances and many other types. The SharePoint Framework provides vehicle for developers to provision assets. In this chapter, you will learn how to provision SharePoint assets in SPFx projects.
Chapter Overview
Play 1:49
Provisioning SharePoint Assets
This lesson introduces the four primary options for provisioning assets in SharePoint.
3:01
Approaches & Patterns to Provisioning Assets
This lesson, continuing from the previous lesson, explores each of the provisioning options in more detail.
9:50
Declaratively Provisioning SharePoint Assets
This lesson, continuing from the previous lesson, explores each of the provisioning options in more detail.
28:38
Upgrading Declaratively Provisioned SharePoint Assets
This lesson demonstrates how to use the Feature upgrade process in SharePoint to update provisioned assets.
13:42
: Building a SharePoint Framework solution is just the first part of a project. The goal is to get this thing into production, and that’s what this chapter will cover. You will learn how to package your solution, the different options for deploying assets including content delivery networks (CDNs) and various deployment nuances.
Chapter Overview
Play 0:58
Deployment Artifacts & Responsibilities
Let’s start out by examining the files that we need to deploy, their responsibilities and where they are supposed to go. Once you a solid understanding of these files and where they go, building, shipping and hosting them will be a lot less complex.
4:00
Building & Packaging Process
In this lesson we will focus on the process of creating the files that you will need to deploy your SharePoint Framework solution. This includes the files you will deploy to SharePoint as well as the files that make up your custom components that will be deployed elsewhere.
6:10
Configuring the Packaging Process
Let’s talk about this packaging process a bit more.
2:11
Tenant & Site Collection App Catalogs
SharePoint provides two different types of app catalogs you can use to scope the availability of customizations.
3:36
Deploying SPFx Projects to Production
The next step is deployment, so let’s look at what’s involved in this process in this lesson.
7:01
Baseline Deployment: Local Web Server
This lesson will start with a baseline deployment where the project’s assets are hosted from the local development web server. This scenario is one you will not use in production, but I’m using it to demonstrate the starting point.
5:15
Setup & Deploy: Non-CDN (AWS S3)
In this first demo on a real world deployment story, let's look at a manual deployment.
5:32
Setup & Deploy: Azure CDN
This lesson is going to walk you through the process of setting up an Azure CDN.
10:59
Application Lifecycle Management APIs
This lesson will show how you can manage the application lifecycle with APIs, PowerShell, and the Office 365 CLI.
12:21
Isolated Web Parts: Overview
In this lesson, learn how you can deploy secure web parts that run in isolated domains and processes.
8:06
Isolated Web Parts: Demo
After learning about isolated web parts in the previous lesson, this lesson will demonstrate creating one and how they work.
13:24
Setup & Deploy: Office 365 CDN
This lesson is going to walk you through the process of setting up and deploying to the Office 365 supplied CDN.
12:36
Parting Thoughts & Chapter Conclusion
In this brief last lesson, we will look at what this chapter covered and offer some recommendations for deployment.
1:53
: Once a SharePoint Framework solution has been deployed into production, there will likely come a time when you need to upgrade and add new features or address issues with the existing version. In this chapter you will learn how to properly upgrade and version your custom solutions.
Chapter Overview
Play 2:09
Semantic Versioning, NPM & SharePoint
This lesson will explain what Semantic Versioning is and how version numbers work with respect to NPM and SharePoint.
6:17
NPM Package Versioning
In this lesson you learn how to manage NPM packages and determine when you have outdated versions in your projects and dev environment.
13:36
Project / Code Versioning
This lesson will cover what is involved in versioning the code part of your project.
12:21
Conclusion
In this brief last lesson, we will look at what this chapter covered and offer some recommendations for deployment.
0:38
: SharePoint Framework developers are free to use any utility library or web framework in creating custom solutions for SharePoint. One popular JavaScript library that has been around for quite a while is jQuery. In this chapter you will see how to not only leverage jQuery in custom solutions but also how to properly reference it in projects and leverage popular jQuery plugins. When styling your applications, the popular jQueryUI project is a great option for jQuery based solutions that will also be covered in this module.
Chapter Overview
Play 1:14
jQuery Overview
While jQuery has been around for many years, it may not be familar to some. This lesson starts with a very brief overview into the popular areas of jQuery. Next, this lesson will look at the current state of jQuery and offer some opinions as to how you should approach and treat it when using it within SharePoint Framework solutions.
6:47
Using jQuery in SPFx Solutions
In this lesson you will learn how to add jQuery to a SharePoint Framework solution and ensure it is properly referenced. This done by configuring the SharePoint Framework build toolchain to externalize the jQuery library, not include it in the generated bundle, and ensure that it is pulled in from a CDN keeping your bundle as small as possible.
11:58
Using jQuery Plugins in SPFx Solutions
One of jQuery's most popular capabilities is that you can extend it with plugins. These plugins change the jQuery prototype object once loaded to provide new functionality to this very popular library. In this lesson, learn how to properly configure your project to reference and use jQuery plugins.
15:28
Using jQueryUI in SPFx Solutions
The jQuery community has created a popular library of reusable controls that are distribued like jQuery plugins that you can use in custom jQuery solutions. This is the jQueryUI project and it includes things like accordions, tab controls, dialogs and autocomplete input controls. This lesson shows how to leverage these components as well as include custom themes from the jQueryUI project.
13:01
Chapter Conclusion
In this brief last lesson, we will look at what this chapter covered.
1:27
: Microsoft, specifically the Office division and Office 365 related products elected to adopt the popular web framework by Facebook to implement many parts of their web applications. Specifically for SharePoint, React is the primary web framework for creating reusable components. In this chapter, you will learn the basics of using React within your SPFx solutions.
Chapter Overview & Introduction to React
Play 11:14
React Class Components
In this lesson, you'll learn about one of two ways you can create React applications: using class components. This is considered the legacy way of building React applications today as it's been replaced by the more performant and simpler React Hooks model. However, the version of React that introduced React Hooks is not available in SharePoint Server on-premises deployments. For more information and a demo on React Hooks, refer to the other lessons in this chapter.
11:30
DEMO: Leverage React Class Components in SharePoint Framework Solutions
With an understanding of React class components and how they fit into SharePoint Framework solutions, it's time for a demo! In this very walkthrough, you'll see how to create an interactive client-side web part using React class components.
51:38
React Hooks & Functional Components
In this lesson, you'll learn about one of two ways you can create React applications: using React Hooks and functional components. This is considered the modern and recommended way to build React applications today, but it's only available in SPFx solutions that use SPFx v1.9 or later. For more information and a demo on React Class Components, refer to the other lessons in this chapter.
10:11
DEMO: React Hooks & Functional Components
In this demo, you'll see how to create the same SPFx project we created in the previous demo on React class components, but this time we'll build it using React Hooks.
27:22
Fluent UI React
Microsoft created a library, Fluent UI React (formerly called "Office UI Fabric"), for implementing consistent themes, typography, and layouts across applications. This library was used to create interactive React-based components that SharePoint and other Office products leverage. You can use these in your project as well. In this lesson, you will learn about the Fluent UI React project.
4:54
DEMO: Leverage Fluent UI React in SharePoint Framework Solutions
In this lesson, you will see how to take the previously created solution from an earlier lesson and add some of the Fluent UI React components to it.
17:19
Testing React Solutions with Jest
In this lesson you will learn what is involved in testing React projects with Jest
15:13
DEMO: Testing React Solutions with Jest
This lesson demonstrates how to test React projects with Jest
34:18
: Design is something that all projects should factor into the development process as it has significant impacts on the usability, experience and therefore adoption of all custom solutions. You can think of design from two angles: organization and branding. This chapter will first look at some design elements to consider when building custom SPFx solutions. We will then cover the branding aspect from leveraging custom CSS, leveraging SharePoint themes as well as taking advantage of different visual design languages such as Bootstrap, Material and the Office UI Fabric from Microsoft.
Chapter Overview
Play 2:13
Designing SharePoint Customizations
This brief lesson provides an overview of the SharePoint design customization decisions and aspects developers should be aware of.
1:52
Designing Web Parts
This lesson covers some of the different design elements you should consider when creating custom client-side web parts.
3:53
Leveraging Dialogs
Dialogs are a useful tool for prompting and notifying the user of different events in a page. This lesson covers how to leverage and implement them in your customizations.
16:37
Leveraging Custom CSS
All web projects leverage CSS for branding and styling, including SharePoint Framework customizations. This lesson covers the different aspects of utilizing CSS in your SharePoint Framework customizations.
11:03
Utilizing Themes in Custom Solutions
SharePoint sites provide for site owners to switch the theme of a site for easy customization. This lesson shows you how to leverage the site's theme in your custom solutions.
8:15
Office UI Fabric
The visual language Office UI Fabric used by SharePoint and many other Office-related properties can be leveraged by your own customizations as covered in this lesson.
6:18
Conclusion
In this brief last lesson, we will look at what this chapter covered.
0:52
: For nearly two decades, SharePoint has been a repository for user and business data, sorting this information in lists in libraries. A common task you will be faced with in building custom SPFx solution is how to access these libraries, either reading or writing data to them. In this chapter you will learn how to leverage the SharePoint APIs to work with lists and libraries in your custom SPFx solutions.
Chapter Overview
Play 1:39
Understanding the SharePoint REST API & SPHttpClient
In this lesson, we will review the SharePoint REST API including authentication, authorization, and details on the OData 4.0 protocol.
11:00
Reading SharePoint List Items: Explore & Setup List / Project
In this first of a two-part lesson, we will explore the details of working with the SPHttpClient object. Then we will explore the list and sample project used in the demonstrations for the remainder of the chapter.
13:59
Reading SharePoint List Items: Get Multiple & Single Items
In this second part of the previous lesson, you will learn how to query for multiple and single items using the SPHttpClient API in SPFx.
20:13
Creating SharePoint List Items
In this lesson, you will learn how to programmatically create a new item in a SharePoint list.
14:21
Updating SharePoint List Items
In this lesson, you will learn how to programmatically update a new item in a SharePoint list.
10:30
Deleting SharePoint List Items
In this lesson, you will learn how to programmatically delete a new item in a SharePoint list.
9:41
Batching Requests with SPHttpClient
In this lesson, you will learn how to programmatically submit multiple requests in a single batch a new item in a SharePoint list.
20:43
Conclusion
In this brief last lesson, we will look at what this chapter covered.
0:56
: You will inevitably need to call external services in your SPFx projects - that's what this chapter is about! Learn how to call 3rd party services both anonymous and those protected with Azure AD.
Chapter Overview
Play 3:48
Leveraging External APIs in SPFx solutions
In this lesson, you will learn about the differen types of external APIs you can call from the SharePoint Framework, as well as how the remainder of chapter is organized.
5:06
Understanding SPFx’s Approach to Calling 3rd Party APIs
In this lesson, you will learn how the SharePoint Framework approaches calling external APIs.
5:14
Calling Open APIs with HttpClient
Learn how to interact with open 3rd party APIs using the HttpClient API in the SharePoint Framework.
3:18
Deploying a Simple REST API as an Azure Function
In this lesson, you will see how to create and deploy a simple REST API using an Azure Function App as well as securing it with Azure AD.
11:49
Calling Open APIs with HttpClient
Create a SharePoint Framework client-side web part that consumes and writes to a 3rd party open REST API.
26:01
Calling AzureAD Secured APIs with AadHttpClient
In this lesson, learn how the SharePoint Framework supports and implements calling Azure AD-secured APIs.
26:17
Calling Existing AzureAD Secured APIs with AadHttpClient
In this demo lesson, learn how to create a SharePoint Framework client-side web part that leverages an existing Microsoft API secured with Azure AD.
19:31
Deploying & Securing a Simple REST API as an Azure Function
In this lesson, you will see how to create and deploy a simple REST API using an Azure Function App as well as securing it with Azure AD.
13:35
Calling Custom Azure AD Secured APIs with AadHttpClient
Create a SharePoint Framework client-side web part that consumes and writes to our custom REST API deployed as an Azure Function and secured with Azure AD.
20:34
Conclusion
In this brief last lesson, we will look at what this chapter covered.
2:28
: In this chapter, you will learn how to work with the Microsoft Graph API in custom SPFx solutions to get access to a user's email, calendar, contacts files in OneDrive and many more services!
Chapter Overview
Play 3:18
Microsoft Graph Overview
New to the Microsoft Graph? This lesson is for you as it is the perfect primer answering the question: what is the Microsoft Graph?
14:52
Microsoft Graph & SharePoint Framework
In this lesson, you will learn how the SharePoint Framework API provides objects to make working with the Microsoft Graph easier for SPFx developers.
5:18
Calling the Microsoft Graph from SharePoint Framework Solutions
This lesson demonstrates using the SharePoint Framework to call the Microsoft Graph after granting SharePoint the necessary permissions.
22:02
Conclusion
In this brief last lesson, we will look at what this chapter covered.
2:10

Includes everything in the Starter & Fundamentals bundles, plus...

Chapters: 13
Lessons: 99
Hours: 18+

: In this lesson, you will learn how you can leverage SharePoint Framework client-side web parts in more than just SharePoint pages.
Chapter Overview
Play 1:06
Using SPFx for Custom Microsoft Teams Tabs
In this lesson, you will learn how you can leverage SharePoint Framework web parts to create custom tabs in Microsoft Teams.
16:24
SPFx for Custom Microsoft Teams Tabs: SharePoint Online Demo
Create and deploy a SharePoint Framework web part as a Microsoft Teams tab in this demonstration-based lesson.
13:59
SPFx for Custom Microsoft Teams Tabs: Microsoft Teams Demo
Create and deploy a SharePoint Framework web part as a Microsoft Teams tab in this demonstration-based lesson.
9:52
Single Page App Pages with Web Parts
In this lesson, you will learn how you can create full page applications, also known as single page applications (SPAs) using SharePoint Framework web parts.
8:23
Demo: Create Single Page App Pages with Web Parts
Create and deploy full page applications, also known as single page applications (SPAs) using SharePoint Framework web parts in SharePoint Online.
13:08
Conclusion
In this brief last lesson, we will look at what this chapter covered.
1:01
: Developers can use the property pane to enable users to modify the settings on client-side web parts using basic controls included in the SharePoint Framework API. For more complex scenarios, you can also use open source community-based solutions. In the case of more complex scenarios, you can build custom property pane controls. In this chapter, you’ll learn how to create a custom property pane control and use it within a client-side web part.
Chapter Overview
Play 2:23
Going beyond basic property pane controls
In this lesson, we'll look at what options you have for leveraging controls in web part property panes.
9:28
Custom property pane controls
In this lesson, you'll learn how to create a custom property pane control before we dive into a demo in the following lesson.
15:20
DEMO: Create a custom property pane control
In this demo, learn how to create a custom property pane control by example in this lesson.
34:32
Conclusion
In this brief last lesson, we will look at what this chapter covered.
1:21
: Connecting two web parts together was a very popular technique implemented in previous SharePoint development models. In this chapter, you will learn how to do the same thing with Dynamic Data.
Chapter Overview
Play 4:15
Introducing Dynamic Data in SPFx
In this lesson, you will learn what dynamic data is in SPFx and how you can leverage it.
7:55
Building Dynamic Data Components
In this lesson, you will learn what's involved in creating dynamic data components. This includes both providers and consumers as well as how to test and debug them.
13:43
DEMO: Create Provider Web Part
In this lesson, you will see how to create a web part that acts as the provider in a dynamic data scenario.
12:27
DEMO: Create Consumer Web Part & Subscribe Properties
In this lesson, you will learn how to subscribe to changes in properties.
17:10
DEMO: Create Consumer Web Part & Subscribe Objects
In this lesson, you will learn how to subscribe to changes in objects.
10:28
DEMO: Create Consumer Extension & Manually Subscribe to Dynamic Data
In this lesson, you will learn how to not only create a SPFx extension that uses dynamic data, but also manually subscribes to changes to a data source's property.
21:50
Conclusion
In this brief last lesson, we will look at what this chapter covered.
2:22
: Learn how to create custom Adaptive Card Extensions (ACEs) with the SPFx for use in Viva Connections dashboards to customize and extend the desktop and mobile experiences.
Chapter overview
Play 4:31
Adaptive Cards Primer
Developers must have a firm grasp of Adaptive Cards - the technology Adaptive Card Extensions are based on. This lesson serves as a primer to Adaptive Cards.
19:57
Introduction to Adaptive Card Extensions (ACEs)
Before we dive into Adaptive Card Extensions (ACEs), this lesson explains what they are and how all the pieces of an ACE are related to one another.
21:17
In-depth: the Adaptive Card Extension class
This lesson takes an in-depth look at the cornerstone of all ACEs and starts to create a project we'll expand on throughout the remainder of the chapter.
23:55
In-depth: the CardView
Building off the project you created in the last lesson, this lesson explores the ACE CardView component in-depth.
16:24
In-depth: the QuickView
This lesson continues with our in-depth look at all parts of ACEs by exploring the QuickView. Learn what you can do with a QuickView by extending our project.
38:48
Viva Connections-specific Actions
While ACEs are based on the Adaptive Card schema, Microsoft has added unique actions you can use in your ACEs for Viva Connections. In this lesson, you'll learn how to add these specialized actions by adding them to our existing project.
13:59
: When building SharePoint Framework solutions, regardless if they are client-side web parts or UI extensions, there is a visual component to these controls. While you could implement these interfaces by hand yourself, why not take advantage of a modern web framework? Frameworks make data binding, event handling and state management so much easier! Developers can use any web framework when building SharePoint Framework components. The selection of a web framework is based on various elements, one of which is an existing experience. In this chapter, you will learn how you can leverage Angular, specifically Angular Elements (introduced in Angular 6) in SPFx solutions.
Chapter Overview
Play 2:49
Elephant in the room: Angular or React?
One question, or decision, all SPFx developers have to decide on is if they should use React or Angular. This lesson looks at the pro's and con's of each web framework in the context of SPFx development.
4:16
History of Angular and AngularJS v1.7+
This lesson will briefly explain the history of Angular, back to v1 of the web framework.
6:25
Introducing Angular: Primer
New to Angular? This lesson is for you as it serves as the quickest primer to the popular web framework.
13:31
DEMO: Creating the Apollo Mission Viewer with Angular
In this lesson, we will build the Apollo Mission Viewer app as an Angular application.
32:50
Angular & the SharePoint Framework
In this lesson, we will explore the challenges with using Angular in SharePoint Framework applications.
6:29
Web Components, Custom Elements & Angular Elements
This lesson will explain the concept of web components and custom elements, native web technologies, and how they can be used to leverage Angular in SharePoint Framework projects.
5:22
DEMO: Converting Angular application to Angular Elements
Now that we see how custom elements and Angular Elements can be used in SharePoint Framework solutions, the first step is to port our Apollo Mission Viewer application to a custom element with Angular Elements. This lesson will demonstrate how to do this.
11:27
Leveraging Angular Elements in SPFx Solutions
In this lesson, we look at what is involved in building & hosting an Angular Elements based application in a SharePoint Framework solution.
8:33
DEMO: Hosting an Angular Elements Application in a SPFx Solution
In this demo lesson, we will take the Angular Elements NASA Apollo Viewer custom element and import it into a SharePoint Framework client-side web part.
14:26
Chapter Conclusion
In this brief last lesson, we will look at what this chapter covered and offer some recommendations for deployment.
1:20
: Implementing automated testing within your custom solutions, be they SharePoint Framework projects or any other custom code project, is widely considered a good practice. Projects that include automated tests are more robust and are of higher quality because the same tests can be easily run repeatedly to check for errors. Many developers skip this step of adding tests because it’s hard and confusing. In this chapter, you will learn the practices of not only why you should test, but the different types of tests, what you should test and how to implement automated testing in your SharePoint Framework projects.
Chapter Overview
Play 2:03
Automated Software Testing: Why? What? How?
This lesson will address the reasons why you should implement automated testing to your projects.
7:18
Tools of the JavaScript Testing Trade
In this lesson we explore the different testing tools available to developers in the JavaScript world and focus on the ones we will use in this chapter to test SharePoint Framework projects.
7:51
Testing SharePoint Framework Projects
In this lesson you learn what's involved in testing SharePoint Framework projects and how to configure your project for testing.
7:29
Setup Jest for SPFx Projects
In this lesson you will roll your sleeves up and implement the testing framework Jest in a SPFx project.
10:41
Creating Your First Jest Tests
In this lesson you will create your first few tests including async tests and testing promise-based methods.
17:19
Testing with Jest: Tips, Tricks & Debugging
After creating your first few tests, this lesson will show you some tips and tricks to SPFx testing. You will also learn how to debug your tests in Visual Studio Code.
14:16
Reporting on Jest Tests: Code Coverage
This lesson will demonstrate how to setup code coverage reports to give you confidence you are adequately testing your custom code.
13:27
Conclusion
In this brief last lesson, we will look at what this chapter covered.
1:44
: Development teams and organizations are always looking for ways to automate, streamline, and improve processes related to building software. SharePoint Framework development teams are no different. This process usually brings together development and operations, commonly called DevOps, to continually provide value to customers. DevOps is comprised of multiple practices and components. One aspect of DevOps is continuous monitoring. In this chapter, you’ll learn how to implement continuous monitoring into your SharePoint Framework projects using Azure Application Insights, one component in the larger Azure Monitor suite.
Chapter Overview
Play 1:54
What is DevOps? What is Continuous Monitoring?
In this lesson, we'll discuss what continuous monitoring is and some of the options available to you.
9:34
Azure Application Insights
In this lesson, you'll learn some of the core concepts and fundamentals of Azure Application Insights.
13:42
SharePoint Framework & Continuous Monitoring
In this lesson, we'll cover the options available to implementing continuous monitoring in your SharePoint Framework projects.
8:25
Implement Azure Application Insights in SPFx Projects
In this lesson, you'll learn how to implement continuous monitoring with Azure Application Insights into your SharePoint Framework projects.
14:38
DEMO: Implement Continuous Monitoring of SPO Tenants
In this lesson, you'll learn how to create a global SharePoint Online tenant monitoring component using Azure Application Insights.
45:42
DEMO: Implement Continuous Monitoring of SPFx components
In this lesson, you'll learn how to add Azure Application Insights to an existing SharePoint Framework component.
23:36
Conclusion
In this brief last lesson, we will look at what this chapter covered.
0:47
: Sharing code across multiple projects isn’t unique to SharePoint Framework projects. This is something developers have been striving to do since the very beginning. Whether it’s for performance or code maintainability reasons, it’s the right thing to do. The SharePoint Framework provides developers a unique way to share code across projects using a special type of component: a library component. In this chapter, you’ll learn how to create and utilize library components in SharePoint Framework projects. But that’s not all, you’ll learn how you can a more portable NPM package and use it in not just SharePoint Framework projects but in any web project.
Chapter Overview
Play 2:22
Sharing Code Across SharePoint Framework Projects
In this lesson, we'll discuss the challenges, goals, and options associated with sharing code across SharePoint Framework projects.
8:54
SharePoint Framework Library Components
This lesson introduces you SharePoint Framework library components, one way you can share code between SharePoint Framework projects. We'll cover the advantages and disadvantages associated with library components, and you'll learn how to develop, deploy, and consume library components in your SharePoint Framework projects.
20:00
DEMO: SharePoint Framework Library Components
In this lesson, you'll learn how to create and consume a SharePoint Framework library component. This demo refactors code out of an existing SharePoint Framework web part component into a library component and then updates the web part to consume the shared code from the library component. Finally, you'll learn how to prepare and deploy both components to your SharePoint environment.
30:55
NPM Packages and SharePoint Framework Projects
In this lesson, you'll learn about another option that you can use to share code across SharePoint Framework projects. NPM packages can be used to create, distribute, and generate JavaScript modules as bundles that can be consumed not just by SharePoint Framework projects, but also by any JavaScript based project.
22:15
DEMO: NPM Packages and SharePoint Framework Projects
In this lesson, you'll learn how to create and consume a JavaScript bundle generated using an NPM package. This demo refactors code out of an existing SharePoint Framework web part component into a NPM package, which is just a Node.js-based project, and then updates the web part to consume the shared code from the generated bundle. You'll learn how to prepare and deploy both components to your SharePoint environment and a public share. Finally, you'll see how you can leverage the same bundle in a non-SharePoint Framework JavaScript project.
31:26
Conclusion
In this brief last lesson, we will look at what this chapter covered.
2:12
: If you work for a multinational organization, or you are a consultant or ISV building SharePoint Framework solutions for customers who have users that speak different languages, why build a solution that targets just one locale? Building multi-lingual and localized SPFx solutions are easy and this chapter will show you how to do it!
Chapter Overview
Play 2:03
Understanding Localization in SharePoint
This lesson will provide an over to multilingual capabilities in SharePoint.
2:21
Understanding Localization within the SharePoint Framework
This lesson will cover the multilingual and localization aspects of the SharePoint Framework from a high level.
2:30
Localizing Metadata in SPFx Components
In this lesson you will learn how to localize SPFx component metadata.
7:54
Localizing Content in SPFx Components
In this lesson you will learn how to localize SPFx component content.
13:25
Localizing User Content in SPFx Components
This lesson will demonstrate some options for offering users translate their provided content.
11:09
Addressing Design Challenges with Pseudolocalization
In this lesson, learn how you can leverage pseudolocalization to address design challenges.
6:33
Understanding how Localization within Debug and Release Builds
In this lesson you will learn how the different build types can impact localization in SPFx projects.
4:45
Chapter Conclusion
In this brief last lesson, we will look at what this chapter covered.
1:33
: While some of us work independently on our own, many developers work on a team on shared projects. In this chapter we look at topics related to team-based development.
Chapter Overview
Play 1:13
SharePoint Framework Development isn’t Special
In this lesson we look at SharePoint Framework as a whole and how it shouldn't be approached as something special.
2:42
Development Environments
In this lesson, learn how you should handle your developer's environments.
5:36
Projects & Source Code
How should you manage the source code and projects as a whole? That's what this lesson is all about.
9:32
Conclusion
In this brief last lesson, we will look at what this chapter covered.
2:17
: Development teams and organizations are always looking for ways to automate, streamline, and improve processes related to building software. SharePoint Framework development teams are no different. This process usually brings together development and operations, commonly called DevOps, to continually provide value to customers. DevOps is comprised of multiple practices and components. One aspect of DevOps is continuous integration (CI) and continuous delivery (CD). In this chapter, you’ll learn how to incorporate CI/CD into your SharePoint Framework projects using two popular services: GitHub Actions and Azure Pipelines.
Chapter Overview
Play 4:51
What is DevOps? What is CI/CD?
This lesson introduces you to the concept of DevOps and explores one of the many DevOps practice: continuous integration (CI) and continuous delivery (CD).
12:48
SharePoint Framework & CI/CD
In this lesson, you'll learn what's involved in incorporating CI/CD practices with SharePoint Framework projects.
13:06
DevOps CI/CD Practices with GitHub Actions
GitHub Actions enable developers to add workflows to GitHub repositories. In this lesson, you'll learn the concepts of GitHub Actions before we add CI/CD practices to a SPFx project.
9:34
DEMO: Implement DevOps CI/CD Practices with GitHub Actions
In this demo, you'll learn how to implement a CI/CD process to your SPFx project using GitHub Actions. You'll see how to automate the builds, executing tests and conditionally deploying SPFx solutions to multiple SharePoint environments.
35:21
DevOps CI/CD Practices with Azure DevOps Pipelines
Azure DevOps Pipelines enable developers to add workflows to SPFx projects repositories. In this lesson, you'll learn the concepts of Azure DevOps Pipelines before we add CI/CD practices to a SPFx project.
12:40
DEMO: Implement DevOps CI/CD Practices with Azure DevOps Pipelines
In this demo, you'll learn how to implement a CI/CD process to your SPFx project using Azure DevOps Pipelines. You'll see how to automate the builds, executing tests and conditionally deploying SPFx solutions to multiple SharePoint environments.
37:09
Conclusion
In this brief last lesson, we will look at what this chapter covered.
1:49
: Microsoft uses the popular task runner gulp as the tool to perform common jobs when developing SharePoint Framework projects. This chapter will explore how it's used and how you can extend it.
Chapter Overview
Play 1:55
Gulp: Overview and How it Works
In this brief lesson, we will explore the basics of how gulp works.
4:43
How Gulp is Used in SharePoint Framework Projects
In this lesson, learn how gulp is implemented and leveraged in SharePoint Framework projects.
15:08
DEMO: Customizing Gulp with Custom Task Sequences
In this lesson, you will learn how you can create your own custom task sequences with Gulp.
6:28
DEMO: Microsoft Gulp Logging & Hook Into Existing Tasks
In this lesson, learn how to utilize existing SPFx's custom logging functions and hook into existing build tasks.
18:03
DEMO: Integrate 3rd Party Gulp Tasks
In this lesson, learn how you can incorporate 3rd party gulp tasks in SharePoint Framework projects.
9:43
DEMO: Creating Custom Gulp Tasks
In this lesson, you will learn how you can create your own custom gulp tasks
12:46
Conclusion
In this brief last lesson, we will look at what this chapter covered.
1:20
: Webpack is an integral part of the build toolchain in most web projects these days, including the SharePoint Framework. This chapter will explore how it's used in SharePoint Framework projects and how you can customize it by modifying its configuration a well as how you can extend it using loaders and plugins.
Chapter Overview
Play 3:26
Webpack: Overview and How it Works
In this lesson, we take a deeper look at what webpack is and how it works from the introductory lesson that we looked at back in chapter 3 of the Starter bundle.
7:29
How Webpack is Used in SharePoint Framework Projects
In this lesson, we look at how webpack is implemented and used in SharePoint Framework projects.
14:28
Customizing the Webpack Configuration
In this lesson, learn how you can change how webpack works by customizing the configuration settings prior to the SharePoint Framework running it.
9:17
Extending Webpack with Loaders
In this lesson, learn how you can further customize webpack by using custom loaders in your configuration.
10:39
Extending Webpack with Plugins
In this lesson, learn how you can further customize webpack by using custom plugins in your configuration.
13:48
Conclusion
In this brief last lesson, we will look at what this chapter covered.
1:19

Join some of the 1000's of developers who've taken this course!

The Mastering the SharePoint Framework is available in one of three bundles. Pick the bundle that meets your learning needs and goals.

Frequently Asked Questions

These are the most common questions we get about this course.

Still have a question? Check the site FAQ for general questions or Contact us!

How's this course, Mastering the SharePoint Framework, related to the course "Build Web Parts with the SharePoint Framework"?

The course, Build Web Parts with the SharePoint Framework, includes the exact same content in this course’s chapters on Web Parts & property panes found in the Fundamentals bundle.

In other words, if you’re enrolled in Mastering the SharePoint Framework’s Fundamentals or Ultimate bundle, you don’t need to enroll in Build Web Parts with the SharePoint Framework course.

How's this course, Mastering the SharePoint Framework, related to the course "Extend the SharePoint UX with the SharePoint Framework Extensions"?

The course, Extend the SharePoint UX with the SharePoint Framework Extensions, includes the exact same content in the chapter on Extensions found in the Fundamentals bundle.

In other words, if you’re enrolled in Mastering the SharePoint Framework’s Fundamentals or Ultimate bundle, you don’t need to enroll in Extend the SharePoint UX with the SharePoint Framework Extensions course.

How's this course, Mastering the SharePoint Framework, related to the course "Extend Viva Connections with the SharePoint Framework Adaptive Card Extensions"?

The course, Extend Viva Connections with the SharePoint Framework Adaptive Card Extensions, includes the exact same content in the chapter on Adaptive Card Extensions found in the Ultimate bundle.

In other words, if you’re enrolled in Mastering the SharePoint Framework’s Fundamentals or Ultimate bundle, you don’t need to enroll in Extend Viva Connections with the SharePoint Framework Adaptive Card Extensions course.

Can I upgrade from the Mastering the SharePoint Framework Fundamentals Bundle to Ultimate Bundle in the future?

Sure! We’re happy to upgrade your enrollment in this course to the Mastering the SharePoint Framework Ultimate bundle.

To arrange an upgrade, please contact us.

Course Bundles

Lifetime access

Evergreen content

24/7 Access

70+ sample projects (updated to SPFx v1.16)

Prescriptive guidance & best practices

Three Bundles to Choose From

Starter Bundle

Fundamentals Bundle

Ultimate Bundle

Pricing

Starter Bundle

Ultimate Bundle

Fundamentals Bundle

Here's what's inside...

Join some of the 1000's of developers who've taken this course!

Frequently Asked Questions