Part 1 - Getting Started with the SharePoint Framework
What is SharePoint Framework
During this introduction we will talk about the development options we have in SharePoint. We will take a look at the
toolchain of SharePoint Framework and how it fits into the modern SharePoint development story.
- SharePoint Framework overview
- SharePoint Framework tools
Preparing your machine for the SharePoint Framework
In this module we will talk about the SharePoint Framework development process and how each of the tools fits into that
- Visual Studio Code
- Node.js/NPM - local hosting and module management
- Yeoman - project scaffolding
- Gulp - task runner
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
- Namespaces and Modules
Part 2 - Developing SharePoint Framework Client-Side Web Parts
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
Web part properties
Just like with classic web parts, we have a property pane that can be customized. In this chapter you will learn how to do just that
- Changing the web part property pane
- Validating web part properties
- Using custom controls in the property pane
- Property pane life cycle
- Storing web part data
Deploying SPFx solutions
SPFx solutions need to be deployed through a SharePoint app catalog. In this chapter we will see how to create an app catalog and how to deploy.
- What is an app catalog and how do we create it?
- Deploying your solution
- Global vs local deployment
- Adding your deployed components to sites and pages
Part 3 - Loading Data in SPFx
Loading SharePoint data in SharePoint Framework
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
Connecting to Microsoft Graph
Microsoft Graph is a unified API for getting data from the entire Office 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
- Isolated Web Parts
Consuming AzureAD protected API's
For Azure AD protected API's, other than SharePoint or Graph, we can use another built-in client to get to the data.
- Using the AadHttpClient
- Registering and setting permissions
With a List Subscription we can subscribe to a document library and receive a notification when something happens to a document!
- Creating a document library subscription
- Receiving the update
- Getting the document changes from SharePoint
Part 4- SharePoint Framework and React
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
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.
- Components are State Machines
- How does component state work
- Multiple (child) components
- Transferring Props
- Form Components
Component Lifecycle and Performance
React gives us hooks to execute code at different points in the component lifecycle. A lot of performance gains can be made by using lifecycle hooks to your advantage, and in this chapter, you'll learn all about it.
- Component Lifecycle
- Lifecycle Methods
- Loading Data into a component
- React's Virtual DOM
Part 5 - Loading frameworks and working with externals
Loading other frameworks
We will see how you can efficiently reference external frameworks.
- Loading jQuery and plugins
- Using Angular and Angular Elements
- Bundling and Externals
Brand your client web parts with SASS and Office-UI-Fabric
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 Office UI Fabric which offers you styles and components that match the Office365 look.
- SASS, the dynamic stylesheet language
- SASS Variables, Mixins, Nesting, functions, ...
- SASS Preprocessing
- Office UI Fabric styles
- Office UI Fabric components
Part 6 - SharePoint Framework Extensions
- 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.
Part 7 - Advanced Development
In this chapter we will learn what the advanced options are when deploying.
- Debug and Release builds
- Packaging your web parts and extensions
- Bundle deployment location options
- 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
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
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.
- Using the AzureAD platform to register an application
- Setting application permissions
- Getting SharePoint data using an app-only call from a custom API, an Azure Funtion, etc.
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, ...
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!
- Using containers to get around versioning issues
- 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