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.
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.
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.
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.
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.
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 Microsoft 365 look.
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.
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
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.
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.
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
Dynamic Data allows you to connect components and share data between them
In this chapter we will discuss general project structure strategy. How do you handle shared code? How do you build your own packages?
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 Office 365 experience, targetting SharePoint, Viva and Teams. 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, Viva Connections Cards and other extensions to Office 365. We will see how to connect to various data sources like Microsoft Graph, Microsoft Identity Platform, Azure Functions, etc.
Participants ideally have some development experience. No TypeScript or JavaScript experience is required, but recommended. Knowing how to use SharePoint is advised.