Developing with the SharePoint Framework

What is SharePoint Framework

In this introduction we will talk about the development options you have in SharePoint and Office 365. you 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, Heft and Webpack
• LAB - Preparing your Environment for SharePoint Framework

Building Client-Side Web Parts

The SharePoint Framework allows you to build modern client-side web parts that can be used in SharePoint and Teams. You will use the Yeoman generator to create a web part project. During this module, you will explore the project structure and make some basic changes to your 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 HttpClient to Get Data
• Accessing SharePoint data through SPHttpClient
• SharePoint List Subscriptions (webhooks)
• LAB - Customize Web Part Properties and Load SharePoint Data

Loading other frameworks and libraries

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 you 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 you will cover the basics of React and how its component system works. It will guide you to use the framework to build SPFx webparts.

• React App Structure
• What is JSX?
• React Components
• JSX Tips and Tricks

React Components Deep-Dive

To be able to reuse and split our application into logical parts, we need components. These components are what you use to create interactivity in the application. You 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 components
• LAB - Using Sass and Fluent UI in SPFx

Connecting to Microsoft Graph and Entra ID secured APIs

Microsoft Graph is a unified API for getting data from the entire Microsoft 365 platform. You 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. You will also see how to call and give access to API's secured with Entra ID.

• Register Custom Applications on Entra ID
• Granting API Permissions
• The Microsoft Graph API
• Consuming Microsoft Graph
• Using Other Protected APIs

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 SharePoint Form
• Build Adaptive Card Extensions

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

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
• Customing Heft
• Bundles in WebPack