Developing with the SharePoint Framework

What is SharePoint Framework

In this introduction we will talk about the development options we have in SharePoint and Office 365. 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, Yeoman, 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 that can be used in SharePoint and Teams. 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

Strongly typed JavaScript with TypeScript

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 scale applications.

• 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 own.

• The Property Pane
• Custom Property Controls
• Validation
• 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
• PnPjs
• 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, but also what the impact is on your JavaScript code bundles.

• npm Modules
• Loading JavaScript libraries
• Using CDNs for getting libraries
• Bundling and Externals
• LAB - Loading Frameworks and Libraries

Deployment Overview

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
• Versioning
• 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?
• JavaScript Expressions
• JSX Tips and Tricks
• React Components

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 will see how to access the information from the Graph API and what is needed for giving your application the right to access the graph on your behalf. We will also see how to call and give access to API's secured with Entra ID.

• Register Custom Applications 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 like Application customizers, Field customizers and other

• 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 API. 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

Dynamic Data allows you to connect different SPFX components and share data between them

• Writing a Data Provider and Data Consumer
• Data Serialization
• Handling Data Updates

Unit Testing

In this chapter, we will take a look at some of the debugging and testing options we have available for SharePoint Framework.

• 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!

• Debugging
• Application Insights
• Custom Gulp Tasks
• Bundles in WebPack