Interested in a private company training? Request it here.
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.
Learn the essentials of each tool used with SPFx.
In this chapter you will learn about project dependencies and how to install, update and maintain them using NPM.
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.
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.
Just like with classic web parts, we have a property pane that can be customized. In this chapter you will learn how to customize the property pane controls and how to build your own.
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.
You will learn how to integrate other packages into your SharePoint framework project, but also what the impact is on your JavaScript code bundles. We will see how you can efficiently reference external frameworks.
In this chapter we will discuss general project structure strategy. How do you handle shared code? How do you build your own packages?
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 about versioning? Where do we deploy our JavaScript? How do we deploy to Teams? etc.
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. Then we'll learn about JSX. This module talks about the how, which and when of expressions in a React application. We'll explore what Babel does, how html tags and components are combined and how a JavaScript expression gets evaluated.
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.
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 Office365 look.
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.
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.
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 an application customizer extension, we can run JavaScript on any modern page, while leveraging some of the tools provided to us by SharePoint
Similar to JSLink in classic SharePoint development, a Field Customizer allows us to override part of the render process
Just like the Custom Actions we built in the past, a Command Set will extend the interface with extra buttons.
With search extensions we can modify a search query before it is executed and manipulate the results
Using the Office libraries we can build an Outlook plugin that shows up as a web part
Dynamic Data allows you to connect components and share data between them
In this chapter, we will take a look at some of the debugging and testing options we have available for SharePoint Framework.
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!
SharePoint Framework / SPFx offers us the tools to build custom solutions for the modern SharePoint and Office 365 experience. 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 and other UI extensions. We will see how to connect to various data sources like Microsoft Graph, Microsoft Identity Platform, Azure Functions, etc.
Participants ideally have a few years of development experience. No TypeScript or JavaScript experience is required, but recommended. Knowing how to use SharePoint is advised.