Part 1 - Building SharePoint Framework Components
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
- On-Prem vs Online
- Road map
Preparing your machine for the SharePoint Framework
Learn the essentials of each tool used with SPFx.
- Visual Studio Code
- Node.js/NPM - local hosting and module management
- Yeoman - project scaffolding
- Gulp - task runner
- Webpack - bundling tool
- 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
- Client-side web parts fundamentals
- Web Part Project Structure
- Adding multiple web parts to a project
- Full Page Apps
- Creating Teams Tabs with SPFX
- LAB - Building a First Web Part
By using TypeScript we improve the way we write client-side code.
We can use all the latest ECMAScript features, while still supporting all browsers.
TypeScript adds type annotations and code compilation to your development process so that you write better code.
TypeScript is 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 scale applications.
- Overview of the TypeScript language
- The ECMAScript standard
- Why use TypeScript as a SharePoint developer?
- Typescript transpilation and configuration
- Variables, Objects, Interfaces, Classes and more
- Base classes and inheritance 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 own.
- Extending the web part property pane with property controls
- Validating web part properties
- Using custom controls in the property pane
- Property pane life cycle
- Storing web part data
Loading SharePoint data in SPFx
When loading data from client-side code, we use REST. SharePoint has REST services.
This module will teach you how to use the Framework HTTP clients to consume these services.
- Working with OData REST Services
- Discovering the SharePoint REST endpoints
- Using the built-in SharePoint client to get data
- Adding or updating data from client-side code
- Using PNP/JS to fetch data
- Using list subscriptions to receive updates from a list/library (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,
We will see how you can efficiently reference external frameworks.
- Npm modules
- Dependencies and types
- Typescript intellisense with declaration files
- Using Angular and Angular Elements
- Loading packages from a CDN
- Bundling and Externals
- LAB - Loading Frameworks and Libraries
Creating apps for Teams
SPFX Webparts can easily be used as Tabs in Teams as well. But there is more. In this chapter we will look at some
gotcha's and options when targetting Teams with SPFX.
- Exposing Web Parts as Tabs
- Exposing Web Parts as Messaging Extensions
- Configuring Web Parts used in Teams
SPFx solutions need to be deployed through a SharePoint app catalog. In this chapter we will learn what the advanced options are when deploying.
- What is an app catalog and how do we create it?
- Deploying your bundle and package
- Versioning in SPFx
- Deploying SharePoint Assets like Lists, Content Types and more
- Deploying Extensions
- Tenant-wide, Site Collection or Site specific deployments
- Deploying to Microsoft Teams as shared or personal apps
- Deploying to Outlook
- LAB - Deploying SPFx Projects
Part 2 - Working with React and other Libraries
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.
First of all, we'll get started by looking at how React is integrated into SPFx.
- React App Structure
- What is JSX
- JSX Tips and Tricks
- Building your first 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. Interactivity however, can only work if we keep track of the state of the application. This chapter explores the data flow of a React application and how React components communicate with each other.
- Working with multiple components
- Transferring Props
- Dynamic data with component state
- Form Components
- Component Lifecycle
- Loading Data into a component
- 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.
Also, you will learn about Fluent UI (Office UI Fabric) which offers you styles and components that match the Microsoft 365 look.
- SASS, the dynamic stylesheet language
- SASS Variables, Mixins, Nesting, functions, ...
- SASS Preprocessing
- Fluent UI styles
- Fluent UI Fabric components
- LAB - Using SASS in SPFx
Connecting to Microsoft Graph
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.
- Microsoft Graph API
- The Graph API Client
- Consuming Microsoft Graph
- Registering and approving permissions to access Microsoft Graph
- Domain Isolated Web Parts
Consuming AzureAD protected APIs
For Azure AD protected APIs, other than SharePoint or Graph - think Azure Functions, your own API, ... - we can use another built-in client to get to the data.
- Using the AadHttpClient
- Azure AD applications
- Setting permissions
- Calling Azure AD protected resources
Call SharePoint through your own API
One restriction of using client side code, is that we do not have control over the code running - it could be manipulated - and that we are restricted
by the permissions of the user running the code. We can solve this by using code on another platform that makes (app-only) API calls to SharePoint.
- Make secure calls into SharePoint using your own API
- Elevated privileges with App Only calls
- Pick a technology: .NET/JAVA/Azure Functions...
Part 3 - SharePoint Framework Components
- Creating an application customizer
- Using dialogs and alerts
- Injecting controls into modern page placeholders
Similar to JSLink in classic SharePoint development, a Field Customizer allows us to override part of the render process
- Creating a Field Customizer
- Using field data
- Injecting React controls into your field customizer
Just like the Custom Actions we built in the past, a Command Set will extend the interface with extra buttons.
- Creating a Command Set
- Executing scripts when a button is clicked
- Show your button conditionally based on item selection, location, etc.
- LAB - Calling Graph from an Extension
With search extensions we can modify a search query before it is executed and manipulate the results
- Creating a Search Extension
- Manipulating the search results
Viva Connections Extensibility
Viva Connections brings together relevant news, conversations, and resources in the apps and devices you use every day!
Even better, it's built using modern SharePoint! Deploy your own cards to the dashboard in Teams and the SharePoint home site.
- Build Adaptive Card Extensions
- Advanced Card Configuration
- Quick Views
- Viva and Teams
Form Customizer Extension
Just like with Power Apps, we can now use SPFx to customize a SharePoint list form.
Implempent your own logic and validation using this extension type.
- Build your own form
- Add logic and validation
- Deploy and activate the custom form
Part 4 - Advanced Development
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 API.
We will have a look at the components offered and how we can use them in SPFX
- Graph Toolkit for SPFX
- Graph Toolkit React Components
- Preparing your tenant for the Graph Toolkit
- Building Teams Tabs with the Graph Toolkit
- Customizing Graph Toolkit Components
- Authentication Providers
Dynamic Data allows you to connect components and share data between them
- Writing a data provider
- Writing a data consumer
- Data serialization
- Handling data updates
SPFx Project Architecture
In this chapter we will discuss general project structure strategy.
How do you handle shared code? How do you build your own packages?
- General project structure strategies
- Shared code using the library component
- Creating your own npm packages
In this chapter, we will take a look at some of the debugging and testing options we have available for SharePoint Framework.
- Creating unit tests for your typescript code using Enzyme, Sinon, Chai, ...
- Running tests using Karma
- Running tests with 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!
- Debugging with Visual Studio Code
- Logging with Azure Application Insights
- Extending the build process with your own Gulp tasks
- Taking control over your bundles with WebPack configuration