What is SharePoint Framework
In this introduction we will talk about the development options we have in SharePoint. We will take a look at the
tool chain of SharePoint Framework and how it fits into the modern SharePoint development story.
- SharePoint Framework overview
- SharePoint Framework tools
- Key SPFx features
- Road map
Preparing your machine for the SharePoint Framework
Learn the essentials of each tool used with SPFx.
- Visual Studio Code
- Introducing Node.js, Yeaman, Gulp and Webpack
- LAB - Preparing your Environment for SharePoint Framework
Building Client-Side Web Parts
The SharePoint Framework allows us to build modern client-side web parts. We will use the Yeoman generator to
create a web part project. During this module, we will explore the project structure and make some basic changes
to our first web part.
- Client-side Web Parts Fundamentals
- Web Part Project Structure
- Full Page Apps
- Creating Teams Tabs with SPFx
- LAB - Building a First Web Part
TypeScript is programming language used by default in all SPFx generated projects.
In this module, we will talk about the TypeScript language and how it can help you in building your enterprise
- What is Typescript?
- Typescript Transpilation and Configuration
- Language Features
- Namespaces and Modules
- LAB - Using TypeScript
Web Part Properties
Web parts should be easily configurable by the users. For this we need to define and expose properties to the UI.
In this chapter you will learn how to customize properties and the property pane controls and how to build your
- The Property Pane
- Custom Property Controls
- Property Pane Life Cycle
Loading SharePoint data in SPFx
When loading data from client-side code, we use REST.
This module will teach you how to use the Framework HTTP clients to consume these services.
- The REST Endpoints
- Using the SPClient to Get Data
- SharePoint List Subscriptions (webhooks)
- LAB - Customize Web Part Properties and Load SharePoint Data
Loading other frameworks
You will learn how to integrate other packages into your SharePoint framework project,
- npm Modules
- Bundling and Externals
- LAB - Loading Frameworks and Libraries
SPFx solutions need to be deployed through a SharePoint app catalog. In this chapter we will learn what the
advanced options are when deploying.
- The App Catalog
- Deploying SharePoint Assets & Extensions
- Tenant-wide, Site Collection or Site specific deployments
- Deploying to Microsoft Teams
- LAB - Deploying SPFx Projects
Using and building React components for the SharePoint Framework
During this module we will cover the basics of React and how it's component system works.
It will guide you to use the framework to build SPFx webparts.
- React App Structure
- What is JSX?
- JSX Tips and Tricks
- React Component
React Components Deep-Dive
To be able to reuse and split our application into logical parts, we need components. These components are what
we'll use to create interactivity in the application. We will take a look at the concepts of state and
properties to add this interactivity.
- Multiple Components
- Transferring Props
- Component State & Lifecycle
- Form Components
- React Virtual DOM
- LAB - SPFx and React
Brand your client web parts with SASS and Fluent UI
In this module you will learn how to make your SharePoint Framework projects look good. We will talk about SASS,
which is a CSS pre-compiler and Fluent UI, the styling framework from Microsoft.
- Introducing SASS
- SASS Variables, Mixins, Nesting, functions, ...
- SASS Preprocessing
- Fluent UI styles
- Fluent UI Fabric components
- LAB - Using SASS in SPFx
Connecting to Microsoft Graph and Entra ID secured API's
Microsoft Graph is a unified API for getting data from the entire Microsoft 365 platform. We can also use the
native client and permission system to access this data.
- Register Custom Application on Entra ID
- The Microsoft Graph API
- Consuming Microsoft Graph
- API Permissions in SharePoint
- Using Other Protected API's
- Domain Isolated Web Parts
SharePoint Framework Extensions
There are a bunch of other development possibilities within SPFx, we will take a look at Application customizers,
Field customizers and other extensions within the framework
- Creating an Application Customizer
- Creating a Field Customizer
- Creating a Command Set
- Executing Scripts
- Build your own Form
- Build Adaptive Card Extensions
Using the Graph Toolkit with SPFX
The Graph toolkit contains a set of web components which makes it easier to make solutions targetting the Graph
We will have a look at the components offered and how we can use them in SPFX
- Graph Toolkit
- React Components
- Building Teams Tab
- Customizing Graph Toolkit Components
- Authentication Providers
Dynamic Data allows you to connect components and share data between them
- Writing a Data Provider and Data Consumer
- Data Serialization
- Handling Data Updates
In this chapter, we will take a look at some of the debugging and testing options we have available for
- Unit testing with Enzyme, Sinon and Chai
- Running tests using Karma & Jest
- LAB - SPFx Unit Testing
Tips and Tricks
Now that we know all about SharePoint Framework development, it's time to look at some things that will make your
life easier while developing!
- Application Insights
- Custom Gulp Tasks
- Bundles in WebPack
SharePoint Framework, abbreviated as SPFx, offers us the tools to build custom solutions for the modern Office
365 experience, targeting SharePoint Framework / SPFx offers us the tools to build custom solutions for the
modern Office 365 experience, targeting SharePoint, Viva and Teams. In this deep-dive development course we will
learn the way to efficiently work with Node.js, React and Typescript. Using this tool set we can build modern
SharePoint web parts, Teams tabs, Viva Connections Cards and other extensions to Office 365. We will see how to
connect to various data sources like Microsoft Graph, Microsoft Identity Platform, Azure Functions, etc.