Practical SharePoint Framework (SPFx) Development E-Book

Franck Cornu

• Herausgeber: Packt Publishing
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Veröffentlichungsjahr: 2025

Beschreibung

The SharePoint Framework (SPFx) has revolutionized how developers create custom solutions for Microsoft 365. Whether you're building Web Parts, extensions, or full-fledged applications, mastering SPFx is essential for delivering modern and scalable SharePoint solutions.
Authored by experienced SPFx developers, this book serves as a comprehensive guide to developing with SPFx, offering practical examples, structured guidance, and best practices. You’ll start by understanding the Microsoft SharePoint and Microsoft 365 ecosystem before exploring hands-on development with SPFx. You’ll learn how to create Web Parts, work with the property pane, connect to APIs, deploy solutions, and implement different types of extensions. Additionally, the book covers debugging, testing, and upgrading solutions efficiently.
By the end of this book, you’ll be able to confidently build, deploy, and manage SharePoint solutions using SPFx while leveraging community tools and libraries to enhance development efficiency.

Leseprobe

Practical SharePoint Framework (SPFx) Development

Build modern, scalable, and efficient business solutions for SharePoint and Microsoft 365

Franck Cornu

Anoop T.

Practical SharePoint Framework (SPFx) Development

Copyright © 2025 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Portfolio Director: Pavan Ramchandani

Program Manager: Divij Kotian

Content Engineer: Rounak Kulkarni

Technical Editor: Vidhisha Patidar

Copy Editor: Safis Editing

Proofreader: Rounak Kulkarni

Indexer: Tejal Soni

Production Designer: Aparna Bhagat

Relationship Lead: Mohd Riyan Khan

Growth Lead: Nivedita Singh

First published: June 2025

Production reference: 1290525

Published by Packt Publishing Ltd.

Grosvenor House

11 St Paul’s Square

Birmingham

B3 1RB, UK.

ISBN 978-1-83546-678-0

www.packtpub.com

I dedicate this book to my beloved wife, Anahite, and my two wonderful children, Noan and Daria, whose unwavering support and inspiration continually motivate me.

-Franck C.

To my beloved parents, Rekha and Shivarao, whose unwavering love and guidance have shaped my life and dreams. To my sister, Arpita, for her endless encouragement and belief in me. And to my wonderful wife, Daya, for being my rock and my greatest inspiration on this journey together.

– Anoop T.

Foreword

Anoop T. and Franck Cornu have been closely involved in the journey of the SharePoint Framework (SPFx) since the early dawn of this technology, which has transformed and modernized SharePoint and Microsoft 365 extensibility in recent years. This is not just about technology, but also about the power of open source and community initiatives to influence the modernization of the product.

I was personally involved with the creation of the first public version of SPFx, which was initially released to preview status back in May 2016 as part of the announcement of the so-called “Future of SharePoint.” This was a fundamental shift away from the experiences and technology that SharePoint had been using on-premises.

Modern SharePoint meant a cloud-first approach focused on building out-of-the-box experiences, but more importantly, also a cloud-first approach to build extensibility for SharePoint Online, and further, across Microsoft 365. As I’m writing this, SPFx has been generally available for more than 8 years, with tens of millions of monthly active users of custom extensibility built by our customers and partners. During these years, there have been more than 25 public releases, and usage is still growing rapidly across Microsoft 365.

SPFx introduced a completely new way to build experiences to Microsoft 365, with web stack tooling, building the model on industry standards and moving away from proprietary technologies for extensibility. This also means that anyone with previous web stack development experience can easily extend SharePoint and Microsoft 365 without a need to learn product-specific programming patterns. They can simply use, for example, React as their chosen framework and build with the standard HTTP exposed API surface, as with other similar SaaS products.

This transition was not just about technology, but at Microsoft, we also focused on building an active open source community to help drive the adoption of this shift. Both Franck and Anoop have been active people as part of this amazing community for years, and they are great people to share their learnings from their day-to-day work, and from the community side, with others. It’s the “best community in tech” to learn from others.

This book does a great job of explaining how to get started with SPFx, but also, more importantly, learning the recommended patterns to build your experiences within Microsoft 365 using SPFx. There are great real-world examples and code, which will help you to be successful in creating your solutions.

Whether you are a new developer familiar with the SharePoint Framework or a professional developer with previous experience, Practical SharePoint Framework (SPFx) Development offers something for everyone.

I’m hoping to see you involved in our open source and community efforts in sharing what you’ve built.

Sharing is caring!

Vesa Juvonen

Principal Product Manager, Microsoft

Contributors

About the authors

Franck Cornu is a Microsoft 365 developer, Microsoft MVP, and international speaker who has worked with Microsoft technologies for more than 15 years. He started in 2010 as a SharePoint consultant implementing solutions with MOSS 2007 and WSS 3.0. Since then, he has had the opportunity to work for several companies in many fields, especially around intranet and search topics, giving him a very good understanding of Microsoft technologies’ usage.

A conference speaker since 2013 and the author of several SharePoint white papers and eBooks over the years, he is also very involved in the open source community through the Microsoft 365 & Power Platform community, formerly known as Pattern and Practices(PnP) initiative. He is the original author of the PnP Modern Search solution, one of the most used SharePoint Framework open source solutions in the world. He also created the “PnP Modern Search Core Components” solution, a solution focusing on bringing Microsoft Search-based experiences inside and outside the Microsoft 365 ecosystem.

I want to thank the amazing PnP community and all the dedicated individuals who generously share their expertise. The passion, creativity, and enthusiasm within this group are truly inspiring and uplifting. It’s a powerful reminder that knowledge grows when shared—because sharing is caring!

Anoop T. is a Microsoft MVP in the M365 Development category and currently works at Advania Ltd, based in London, UK. He has worked across the entire lifecycle of projects, from gathering and analyzing requirements to completing the design and development of the projects. He has around 10 years of experience in Microsoft 365 development and has worked mainly on SharePoint Online, SharePoint 2013, and SharePoint 2010.

Anoop is a member of the core team of the Microsoft 365 & Power Platform community, formerly known as the Patterns and Practices(PnP) team, and is a regular contributor to PnP projects on GitHub. He is also a speaker at conferences and user groups and writes blog articles dedicated to his experience with M365 development, which can be found at https://anoopt.medium.com.

I want to thank the people who have been close to me and supported me, especially my wife, my parents, my sister, and my best friend, Rohit.

About the reviewers

Yves Habersaat is a business applications consultant and AI tech lead at Sword Group in Switzerland, specializing in building applications and solutions with Microsoft 365, Azure, Dynamics 365, and the Power Platform.

With a strong passion for modern development technologies and application lifecycles, Yves focuses on Microsoft 365 services such as Microsoft Teams, SharePoint Online, OneDrive for Business, Microsoft Viva, and Microsoft Copilot. He possesses expertise in modern development tools, including SharePoint Framework (SPFx), Teams SDK, Microsoft Graph, Git, TypeScript, React, Visual Studio, and Azure DevOps.

He actively shares his knowledge and experience through speaking engagements and his blog at www.yhabersaat.ch, always ready to support and assist the community.

Denis Morielli is a Cloud Architect specializing in Azure and Microsoft 365. With over 20 years of experience, he began his career in traditional IT and has worked with SharePoint since its earliest versions. Throughout his career, he has held various roles, including business consultant, developer, trainer, and solution architect, before shifting his focus to cloud modernization.

As an independent consultant, Denis designs and implements solutions that bridge the gap between enterprise needs and modern cloud capabilities. He advises organizations on secure, scalable, and automated architectures, and leads hands-on workshops to ensure effective knowledge transfer.

Denis is passionate about productivity enhancement, automation, solution design, process management, and driving innovation.

Table of Contents

Preface

Part 1: Getting Started with the SharePoint Framework

1

Introducing Microsoft 365 and SharePoint Online for Developers

Understanding the Microsoft 365 ecosystem

SharePoint Online

Unveiling SPFx

SharePoint Add-ins

Script Editor web part

Evolution of SPFx

Exploring SPFx capabilities

Enumerating differences between SharePoint Online and SharePoint On-Premises

Web parts

Extensions

Microsoft Teams, Outlook, and the Microsoft 365 app

The Microsoft 365 & Power Platform Community

Summary

2

Ecosystem and Building Blocks around the SharePoint Framework

Overview of the Microsoft 365 architecture

Understanding the SharePoint logical architecture

Understanding Teams’ logical architecture

Accessing data within Microsoft 365

Overview of SharePoint REST API

Overview of Microsoft Graph API

Summary

3

Your First Steps with the SharePoint Framework

Understanding the development tools and ecosystem

Visual Studio Code

Node Package Manager (npm)

Yeoman

Gulp

Webpack

Other tools and libraries

Understanding the development process and application life cycle

Setting up the development environment

Installing the required tools

Setting up a Microsoft 365 developer tenant

Creating your first SPFx solution (step by step)

Configuring your development environment

Create a new SPFx project

SPFx solution structure overview

Folders generated post build and package

Summary

4

Packt Product Management Solution: A Practical Use Case

Planning a business solution with SPFx

Requirement 1 – viewing products as a catalog

Requirement 2 – selecting the color and size for a product item

Requirement 3 – getting a visual notification when a product is low in stock

Requirement 4 – placing a new order when a product is low in stock

Requirement 5 – searching for products by model, size, or color using free-text keywords

Requirement 6 – searching for a product from the site

Requirement 7 – visualizing the products dashboard in Viva Connections

Requirement 8 – visualizing the product catalog in Teams, Outlook, and Office

Requirements and solutions overview

Summary

Part 2: Building Web Parts with the SharePoint Framework

5

Building a SharePoint Web Part

Technical requirements

Building a web part

Creating the solution

Updating the solution configuration

Defining business entities and services

Initializing services and wiring up sub-components

Rendering the products

Using the Microsoft Graph API to get items

Updating the packages

Getting a Microsoft Graph client instance

Defining and retrieving information from the context

Updating the products service

Passing site ID and list name to sub-components

Handling styles, themes, and dark mode

Creating the SASS style sheet

Updating the render() function

Handling themes and dark mode

Localizing a web part

Localizing web part content

Localizing the web part manifest

Testing locales

Using web part top actions

Defining top actions

Testing top actions

Summary

6

Working with the Property Pane

Technical requirements

Understanding the property pane

Web part property bag

Property pane structure

Using property pane default controls

Defining the Slider field

Validating field values

Creating custom property pane controls

Understanding the typical structure of a custom property pane field

Tips and tricks for working with the property pane

Handling property pane events

Handling asynchronous controls

Configuring property pane fields dynamically

Setting attributes on property bag properties

Using reusable fields from the community

Summary

7

Connecting to Other Web Parts

Technical requirements

Why connect web parts?

Exposing data from a search box web part

Creating and configuring the new web part

Creating the search box control

Exposing data to other components

Consuming data in the products catalog web part

Defining dynamic properties

Creating property pane controls for a dynamic property

Handling static/dynamic value scenarios

Updating the products service class to support the search capability

Summary

8

Deploying a SharePoint Web Part

Technical requirements

Understanding the deployment cycle

Building the solution

Bundling the solution

Packaging and deploying the solution

Publish to AppSource

DevOps with the SharePoint Framework

Understanding CI/CD

Managing versions and updates

Automating the deployment of your solution

Integrating with CI/CD tools

Summary

Part 3: Building Extensions with the SharePoint Framework

9

Building a Form Customizer

Technical requirements

What is a Form Customizer?

Why is it needed?

Uses of an SPFx Form Customizer

Simple examples

Building a Form Customizer

Adding a Form Customizer to the solution

Updating the configuration

Business requirement

Initial render check

Rendering static product data

Setting static data

Displaying static data

Custom display of fields

Binding fields to events

Using Microsoft Graph to interact with item

Getting a Microsoft Graph client instance

Defining and retrieving information from the context

Updating the products service

Calling the service methods from the component

Saving the data in the list

Summary

10

Building an Application Customizer

Technical requirements

What is an application customizer?

Why is it needed?

Uses of an SPFx application customizer

When to use an SPFx application customizer

Simple examples

Building an application customizer

Adding an application customizer to the solution

Updating the configuration

Initial render check

Placeholders

Adding a React component to an application customizer

React component

Root class update

Using the Microsoft Graph API to get items

Filtering items

Calling the API from the component

Summary

11

Building a Field Customizer

Technical requirements

What is a Field Customizer?

Why is it needed?

Uses of an SPFx Field Customizer

Simple examples

Building a Field Customizer

Adding a Field Customizer to the solution

Updating the configuration

Initial render check

Lifecycle methods

Updating the Field Customizer

Summary

12

Building a ListView Command Set

Technical requirements

What is a ListView Command Set?

Why is it needed?

Uses of a ListView Command Set

Simple examples

Building a ListView Command Set

Adding a ListView Command Set to the solution

Updating the configuration

Initial render check

Life cycle methods

Updating the ListView Command Set

HTTP service

Command and properties

Updating the code

Summary

13

Building a Search Query Modifier

Technical requirements

What is a Search Query Modifier?

Why is it needed?

Simple examples

Building a Search Query Modifier

Prerequisites

Adding a Search Query Modifier to the solution

Initial render check

Updating the Search Query Modifier

Custom search results page updates

Using the modified query

Summary

14

Building an Adaptive Card Extension

Technical requirements

What is an SPFx ACE?

Why is it needed?

Uses of an SPFx ACE

Key features of SPFx ACEs

Simple examples

Building an ACE

Adding an ACE to the solution

Initial render check

Updating the ACE

State

Properties

Getting data

Binding data in the quick view

Summary

15

Deploying Extensions

Technical requirements

Packaging solution with extensions

Scope of deployment for extensions

Tenant-level scope

Site collection-level scope

The skipFeatureDeployment property

Deploying extensions

Usage of scripts during deployment

Deploying the Application Customizer

Decision on scope

Controlling the behavior using a script

Deploying the ListView Command Set

PnP PowerShell

CLI for Microsoft 365

Deploying the Search Query modifier

PnP PowerShell

CLI for Microsoft 365

Deploying a Field Customizer

PnP PowerShell

CLI for Microsoft 365

Deploying Form customizers

PnP PowerShell

CLI for Microsoft 365

Deploying ACEs

Summary

Part 4: Going Further with the SharePoint Framework

16

Sharing Your Code Using Library Components

Technical requirements

Understanding what a library component is

Building a library component

Configuring the library

Sharing utility classes and interfaces

Linking solutions locally

Deploying a library component

Comparing npm packages with SPFx library components

Summary

17

Debugging Your Solution Efficiently

Technical requirements

Understanding how debugging works

Debugging Web Parts

Debugging using the hosted workbench

Debugging Web Parts from a real modern page

Debugging Web Parts in production

Debugging extensions

Using the SPFx developer dashboard and maintenance mode

Using the SPFx developer dashboard

Using maintenance mode

Leveraging other tools to debug

Summary

18

Consuming APIs

Technical requirements

Getting started with SPFx clients

Connecting to secured APIs

Using the Microsoft Graph API

Using the SharePoint REST API

Using Entra ID-protected APIs

Configuring an Azure function with EasyAuth

Using AadHttpClient

Using AadTokenProvider

Using anonymous APIs

Summary

19

Writing Tests with SPFx

Technical requirements

Understanding the importance of testing

Implementing tests with Jest

Preparing the test environment

Writing your first test

Organizing your tests

Rendering the component and mocking the products data

Defining test assertions

Fixing SPFx-related issues with Jest

Summary

20

Upgrading Your Solutions

Staying up to date with SPFx releases and updates

Upgrading your SPFx solution

Upgrading your solution manually

Upgrading your solution using the Microsoft 365 CLI

Summary

21

Leveraging Community Tools and Libraries

Technical requirements

Exploring Microsoft 365 & Power Platform Community initiatives

Using the PnPjs library

Using the PnP React and property pane controls libraries

Using the PnP Modern Search solution

Experimenting with other tools

Microsoft Dev Proxy

SPFx Fast Serve

Tools and libraries summary

Summary

22

Development Platforms

Understanding the need for virtualization

How does virtualization work for SPFx?

Docker

GitHub Codespaces

WSL

Azure virtual machines

Summary

Index

Other Books You May Enjoy

Preface

Hello fellow developers!

SharePoint usage has grown massively over the past decade, driven by the advent of the Microsoft 365 platform and SharePoint Online. More and more companies invest in the Microsoft 365 platform, either starting from scratch or migrating from SharePoint on-premises.

However, to leverage its full potential, customization and development steps are often necessary to tailor the platform to business needs. In addition to being a collaboration and document management platform, SharePoint is also a development platform that can be personalized to accommodate various business requirements. To this end, Microsoft offers several customization options, ranging from simple configuration in the interface, going through low-code solutions, and finally custom development. For the latter, the SharePoint Framework (SPFx) is the preferred and only option provided by Microsoft to cover this scenario.

For many years, SharePoint development has suffered from a bad reputation among developers (both frontend and backend developers). SharePoint is quite an old tool now (the first version was SharePoint 2001!), but for some reason, it still carries this reputation from its legacy on-premises development experience. This experience, we’re sure you’ll agree, was probably not the best development experience we’ve seen.

Regardless of your opinions on SharePoint development, set them aside. There is nothing comparable between on-premises SharePoint development as you knew it (or not, lucky you) and SPFx. With SPFx, SharePoint development (and beyond) is cool again, and we’ll try to prove it with this book.

With this book, we’ll guide you through your SPFx journey, starting with the basics and progressing to advanced development concepts. Additionally, we’ll explore the underlying mechanisms of SharePoint and Microsoft 365 and discuss the vibrant community initiatives surrounding this tool to help you better understand the landscape in which SPFx fits.

This book has been written by experienced SPFx developers with several years of expertise. We’ve got you covered!

Who this book is for

This book is ideal for experienced web developers or existing SharePoint developers looking to build modern SharePoint solutions using the SharePoint Framework. The book covers everything from basics to advanced topics. Therefore, it is suited to the following audiences:

Web developers new to SPFx with good knowledge of JavaScript/TypeScript but without any prior knowledge of SharePoint and its ecosystem and looking for guidance to get startedExperienced on-premises SharePoint developers already familiar with SharePoint underlying concepts and making the transition to SPFxExisting SPFx developers wanting to enhance and refresh their skills with the latest features of the framework

What this book covers

Chapter 1, Introducing Microsoft 365 and SharePoint Online for Developers, provides an overview of SPFx, its evolution, and its role within Microsoft 365 and SharePoint. It explains SPFx’s key features, the differences between cloud and on-premises versions, and the types of solutions developers can create. Additionally, it highlights valuable community resources and best practices to help developers make informed customization choices.

Chapter 2, Ecosystem and Building Blocks around the SharePoint Framework, explores the core elements of the Microsoft 365 ecosystem relevant to SPFx development, focusing on SharePoint and Teams logical structures. Developers will gain a deep understanding of key concepts, available APIs for accessing Microsoft 365 data, and how to integrate them into SPFx solutions.

Chapter 3, Your First Steps with the SharePoint Framework, outlines the essential configuration for an SPFx development environment and details the general development process for building solutions. Key topics include development tools, application lifecycle, environment setup, solution creation, and understanding the solution structure.

Chapter 4, Packt Product Management Solution: A Practical Use Case, presents a real-world example of building a product inventory management solution for Packt using SPF within Microsoft 365. It defines business requirements, plans SPFx capabilities, and sets the stage for implementing key features such as web parts and extensions, supported by a GitHub repository. Developers will gain insights into SPFx’s practical applications beyond basic examples.

Chapter 5, Building a SharePoint Web Part, guides developers through the complete process of building an SPFx web part from scratch. It covers using SPFx features to meet functional requirements, integrating React lifecycle methods, accessing SharePoint data via Microsoft Graph, styling and theme support, localization, and adding top actions for quick configuration.

Chapter 6, Working with the Property Pane, explores how to configure SPFx web parts using the Property pane, leveraging both Microsoft-provided and custom controls. Developers will learn how to use default property controls, create custom integrations, and apply advanced techniques to manage complex configurations.

Chapter 7, Connecting to Other Web Parts, focuses on implementing a product catalog search using SPFx dynamic data to connect multiple components on a page. It covers creating a search box web part, exposing data to other components, and consuming that data in an existing web part, enabling developers to build flexible and interactive solutions.

Chapter 8, Deploying a SharePoint Web Part, covers the deployment of SPFx solutions in a Microsoft 365 environment, starting with manual steps and progressing to automation using DevOps tools such as GitHub Actions and Azure DevOps. Developers will learn about the deployment pipeline, packaging, customization, compatibility with Teams, Office, and Outlook, and automating deployment for production readiness.

Chapter 9, Building a Form Customizer, explores SPFx extensions, specifically the “Form Customizer”, guiding developers through its creation and integration with SharePoint list items. It covers development using React lifecycle methods, Microsoft Graph for data interaction, and custom rendering of forms for creating, viewing, and editing list items.

Chapter 10, Building an Application Customizer, introduces the SPFx Application Customizer extension, detailing its development process using React lifecycle methods. Developers will learn how to create an Application Customizer from scratch, integrate Microsoft Graph for SharePoint list data, and understand its role in enhancing user experiences across SharePoint sites.

Chapter 11, Building a Field Customizer, focuses on the SPFx Field Customizer, enabling developers to visually highlight low-stock products by customizing the Stock Level field in the Products list. It covers creating a Field Customizer from scratch, understanding its development flow, and using custom SCSS for display control.

Chapter 12, Building a ListView Command Set, focuses on using SPFx’s ListView Command Set to take action on low-stock products. Developers will learn how to create command sets that appear in list views, execute actions for specific items, and integrate external systems such as Power Automate or third-party services to enhance functionality.

Chapter 13, Building a Search Query Modifier, introduces the SPFx “Search Query Modifier”A, enabling developers to refine and customize product searches within SharePoint lists. It covers creating a Search Query Modifier from scratch, leveraging SPFx lifecycle methods, and using Microsoft Graph to filter search results effectively.

Chapter 14, Building an Adaptive Card Extension, demonstrates Adaptive Card Extensions (ACEs) within Viva Connections, enabling users to surface and interact with organizational data. It covers creating custom ACEs using SPFx, understanding their development flow, and integrating data with Microsoft Graph for personalized experiences.

Chapter 15, Deploying Extensions, covers packaging and deploying SPFx extensions, building on concepts from Chapter 8. Developers will learn about deployment scopes (tenant vs. site collection) and how to use PnP PowerShell and the Microsoft 365 CLI for efficient extension deployment.

Chapter 16, Sharing Your Code Using Library Components, introduces library components in SPFx, explaining their purpose and usage in customization. It covers adapting code for reuse in a product catalog solution, deploying library components, and comparing them to npm packages for effective implementation.

Chapter 17, Debugging Your Solution Efficiently, provides best practices for debugging SPFx solutions efficiently. Developers will learn multiple techniques for debugging web parts and extensions, using the SPFx developer dashboard and maintenance mode, and leveraging additional tools to streamline troubleshooting.

Chapter 18, Consuming APIs, explores API usage in SPFx solutions, focusing on secure data retrieval from SharePoint and Microsoft 365 using built-in utility classes. It covers authentication complexities, integration with Microsoft Graph and SharePoint APIs, and consuming external or Entra ID-secured APIs for seamless development.

Chapter 19, Writing Tests with SPFx, explores the role of testing in SPFx development, highlighting when and why tests are necessary. It covers different testing approaches, focusing on web parts, and introduces Jest as a framework for writing efficient tests in SPFx solutions.

Chapter 20, Upgrading Your Solutions, emphasizes the importance of upgrading SPFx solutions to maintain security, performance, and access to new features. It covers staying informed about updates, as well as upgrading manually or using the Microsoft 365 CLI for efficient maintenance.

Chapter 21, Leveraging Community Tools and Libraries, highlights key open source tools and libraries that can enhance SPFx development within Microsoft 365 and SharePoint. It introduces PnP.js, PnP React controls, PnP Modern Search, Microsoft Dev Proxy, and SPFx Fast Serve, while emphasizing the broader contributions of the active developer community.

Chapter 22, Development Platforms, explores alternative platforms for developing SPFx solutions beyond a local machine, including Docker, GitHub Codespaces, Windows Subsystem for Linux (WSL), and Azure Virtual Machines. It covers the benefits of virtualization and compares different options for efficient SPFx development.

To get the most out of this book

Before reading this book, experience with web development is strongly recommended. Also, having a basic understanding of Microsoft 365 and especially SharePoint is also nice to have (but not required).

Software/hardware covered in the book

Operating system requirements

Visual Studio Code (recommended code editor for SPFx development)

Windows 10 or higher, macOS, or Linux

Yeoman

Gulp

Node.js long-term support (LTS) version, preferably Node.js 18.x

Microsoft 365 developer tenant

To run the samples from the GitHub repository, you will also need the following:

Visual Studio Code installed on your machine.A Git client to clone the GitHub repository and run the samples locally. You can use the built-in Git feature of Visual Studio or a tool such as Sourcetree or GitHub Desktop.A Microsoft 365 tenant to test and deploy samples. You can get one for free by joining the Microsoft 365 developer program: https://developer.microsoft.com/en-us/microsoft-365/dev-program.

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Mastering-SharePoint-Development-with-the-SharePoint-Framework-. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and X/Twitter handles. Here is an example: “We first create a models folder under the src folder and create a new IProductCatalogItem.ts file with the following content.”

A block of code is set as follows:

export interface IProductCatalogItem {   modelName: string;   retailPrice: number;   stockLevel: number;   lastOrderDate: Date;   itemPicture: string;   itemColour: string;   size: ProductSizes;   productReference: string; }

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

public async getProducts(   siteId: string,   listName: string,   itemsCount?: number,   searchQuery?: string,   filterClause?: string ): Promise<IProductCatalogItem[]> {

Any command-line input or output is written as follows:

gulp serve --config=packtProductApplicationCustomizer

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “A ListView Command Set extension allows you to provide custom buttons to the default list or library experience.”

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [email protected] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you’ve read Practical SharePoint Framework (SPFx) Development, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?

Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

Scan the QR code or visit the link below

https://packt.link/free-ebook/978-1-83546-678-0

Submit your proof of purchaseThat’s it! We’ll send your free PDF and other benefits to your email directly

Part 1: Getting Started with the SharePoint Framework

Part 1 starts with explaining the history of SPFx, its capabilities, and the core building blocks around it, including SharePoint, Microsoft 365, Teams, and so on. It also details how to set SPFX up on your local machine to begin the development. In this part, we also outline a technical solution based on fictitious requirements, which will enable us to demonstrate a specific functionality in each subsequent chapter offered by SPFx through practical business examples. 

This part has the following chapters:

Chapter 1, Introducing Microsoft 365 and SharePoint Online for DevelopersChapter 2, Ecosystem and Building Blocks around the SharePoint FrameworkChapter 3, Your First Steps with the SharePoint FrameworkChapter 4, Packt Product Management Solution: A Practical Use Case

1

Introducing Microsoft 365 and SharePoint Online for Developers

Microsoft released the first version of the SharePoint Framework (SPFx) back in 2016. A lot of updates have been made since then (spoiler, this is not only about SharePoint anymore!) and it can be overwhelming to get started due to the amount of information available out there.

In this book, we try to give you the essential information you need as a professional developer to get started with this framework. Being SPFx developers ourselves, we try to focus on practical aspects of the framework, keeping in mind that we all need to deliver quality and valuable solutions to users.

This first chapter gives you the overall picture of SPFx, how it evolved, what it is now, and what type of solutions you can deliver with it. We introduce you to SPFx and its ecosystem, going from on-premises versions of SharePoint to the Microsoft 365 suite, and detail its evolution through the years and key features delivered.

At the end of this chapter, you will have a clear understanding of what the SPFx is, what its philosophy is, and what type of solutions you can create with it. You will also understand the key differences and limitations between cloud and on-premises SharePoint versions regarding SPFx capabilities.

This will give you the big picture of the environment where the SPFx takes place and all the possibilities it offers across many different tools in the Microsoft 365 ecosystem and SharePoint On-Premises. As a developer, this will help you to wisely choose between customization types according to your business requirements.

For those wanting to go beyond the traditional Microsoft documentation, we also provide useful resources leveraging the vivid community around SPFx, a must-know for every SPFx developer.

To summarize, we will be covering the following main topics in this chapter:

Understanding the Microsoft 365 ecosystemCapabilities overview per extensibility platformsThe Microsoft 365 & Power Platform Community [formerly Pattern and Practices (PnP)]

Understanding the Microsoft 365 ecosystem

Before digging into SPFx development, it is important to understand the ecosystem it applies to. Microsoft 365 is a cloud platform dedicated to productivity offered by Microsoft and regrouping several workloads (aka applications), such as the following:

Office applications (Word, Excel, and PowerPoint)Specialized tools, like:Exchange (Outlook for emails and calendars)SharePoint (organizational document storage, intranet portals, collaboration and sharing, and so on)Teams (real-time communications, meetings)OneDrive (personal storage)

Microsoft 365 is accessible through several subscription plans suitable for both individuals and companies (https://www.microsoft.com/en-us/microsoft-365/buy/compare-all-microsoft-365-products), determining the available applications and features for users.

Being a software-as-a-service (SaaS) platform, the platform itself is cloud-based only and most of the offered applications are accessible through a web browser (although, you can install the Word, Excel, and Teams clients on your desktop). It means Microsoft handles updates and patches, ensuring these won’t break existing features. It also means new features and capabilities are pushed automatically, whether you want/use it or not. As a developer, it implies staying up to date about the latest features and capabilities of the platform as this is a platform that moves quickly. To help you in this process, you can follow the public Microsoft 365 roadmap (https://www.microsoft.com/en-us/microsoft-365/roadmap).

Last but not least, a key aspect of the Microsoft 365 ecosystem is its identity platform relying on Microsoft Azure and Entra ID (formerly Azure Active Directory). For an SPFx developer, identity is a key topic, especially authentication flows available to you (OAuth). As long as you need to get data from the Microsoft 365 workload, identity and authentication will be involved so basic knowledge is recommended. We will get the chance to cover this part later in this book.

In the next section, we detail a little bit more about the primary target of SPFx within Microsoft 365: SharePoint Online.

SharePoint Online

SharePoint Online is a cloud-based service provided by Microsoft that allows you to create intranet sites, share documents, and collaborate with colleagues, partners, and customers. It offers a centralized, secure space for document sharing, editing, and downloading. It’s part of the Microsoft 365 suite and integrates with other services, such as Teams and OneDrive, for a comprehensive collaboration experience.

SharePoint is historically an on-premises product (i.e., with physical server infrastructure) and the first version was released in 2001 followed by several on-premises versions up to the SharePoint Server 2019 and SharePoint Server Subscription editions we have today in 2025.

The online version (or SharePoint in Microsoft 365) is the cloud-only version of SharePoint offered either as a standalone subscription (i.e., SharePoint + OneDrive + Microsoft Lists) or through Microsoft 365 plans alongside other tools.

SharePoint Online is deeply integrated with other Microsoft 365 tools, such as Teams and OneDrive, as it is the storage platform behind these tools.

Over the years and versions, the core concepts of SharePoint information architecture haven’t changed that much (site collection, sites, lists and libraries, columns, and content types). The main difference with on-premises versions is the abstraction of infrastructure-oriented concepts such as farms, web applications, and services as all of these are managed now by Microsoft.

SharePoint Online evolves quickly and contains the latest features deployed by Microsoft. It means many of these aren’t and won’t be available in on-premises versions, impacting the possibilities offered through SPFx as well.

What about SharePoint On-Premises?

For SharePoint, there is still an option to get it on-premises through the 2019 version or the Server Subscription Edition (https://learn.microsoft.com/en-ca/sharepoint/what-s-new/new-and-improved-features-in-sharepoint-server-subscription-edition). However, the Microsoft focus is clearly set on Microsoft 365 and cloud-based products. On-premises versions are likely used by companies with high technical constraints preventing them from moving to the cloud.

With on-premises versions, you usually have fewer features than the cloud-based application counterpart and this applies to SPFx as well.

In this first section, we introduced the ecosystem of Microsoft 365 and its applications, including SharePoint Online. We learned about the differences between cloud-based and on-premises versions of SharePoint and the importance of understanding the ecosystem for SPFx development. Moving on to the second section, we will delve deeper into SharePoint Online, its history, and its integration with other Microsoft 365 tools.

Unveiling SPFx

SPFx is the preferred development model when it comes to customizing or extending the SharePoint experience and beyond. It was initially introduced for SharePoint as part of the modern SharePoint experiences introduced in Microsoft 365 (at the time called Office 365) and is the evolution of the traditional add-in development model that appeared with SharePoint 2013.

SharePoint Add-ins

With SharePoint add-ins, applications were hosted either directly on SharePoint (SharePoint-hosted solutions) or in your own server (provider-hosted solutions) and integrated into the user experience through an iframe. The main goals were mainly to do the following:

Reduce the risk involved by historical SharePoint farm solutions (developed server-side with .NET), hosted, and executed directly on SharePoint servers that could harm the entire farmControl customizations by providing “placeholders” on sites where add-ins can be integrated safely without interfering with the rest of the user interface (UI) or breaking the experience (full page application, app parts, custom actions)

This development model had major limitations due to the iframe model causing issues with performances and UI integration (e.g., an iframe can’t interact with its parent Document Object Model (DOM) and inherit the same styles easily, etc.).

Note

The SharePoint Add-in model in SharePoint Online will be fully retired as of April 2nd, 2026, and stopped working for new tenants as of November 1st, 2024.

SPFx is also an answer to another widely used approach to customize SharePoint: the Script Editor web part, which we will see next.

Script Editor web part

SPFx is a way for Microsoft to propose a more robust and future-proof extensibility model for SharePoint development. In previous versions of SharePoint, developers were used to using the Script Editor web part to inject their JavaScript snippets/entire applications into SharePoint pages (for instance to bypass some add-in model limitations). However, this approach had also several drawbacks:

It was hard to package solutions and configurationsIt exposed the code directly to any user having edit permissions on the page with the possibility of breaking the applicationIt required enabling the NoScript flag on sites and potentially introducing security risk by loading untrusted scripts and files

Note

Despite an open source version of the Script Editor web part existing, Microsoft does not provide such a web part by default for all the reasons mentioned previously and SPFx should always be used instead.

With SPFx, all code is client-side, or, in other terms, developed in JavaScript and executed in the browser running in the context of the currently connected user. SPFx solutions can be completed with backend solutions written in other languages (for instance, within Azure via HTTP APIs) but that is not the subject of this book.

However, don’t be mistaken by the “SharePoint” word in the name; SPFx is no longer only about SharePoint. Over the years, SPFx has been extended to integrate with other applications within the Microsoft 365 ecosystem, such as Teams, Viva Connections, Outlook, and Office.

Is SPFx only for developers with a SharePoint background? No. Any web developer can develop with SPFx as it uses the modern web stack development tooling. However, depending on the customization you make and the data you retrieve, SharePoint knowledge and its concepts are clearly an advantage.

Evolution of SPFx

The first generally available version of SPFx (1.0.0) was released back on the 22nd of February 2017. Since then, several versions have been released. At the time of writing, the current version is 1.21.1 (see all releases).

We list here all the major evolutions and new features delivered over the years (excluding fixes, previews, and so on):

1.0.0 (February 2017):Only client-side web parts support.3 project templates supported:Knockout.jsReactNo JavaScript framework1.3.0 (September 2017):Introduction of SharePoint Application Customizer, Field Customizer, and ListView extensions.1.5.0 (June 2018):SharePoint On-Premises is no longer compatible. From this point, SPFx versions become for cloud products only.1.6.0 (September 2018):Web API feature. Now, SPFx comes with a prebuilt set of classes to connect to secured APIs (e.g., GraphHttpClient, SPHttpClient, HttpClient).Support of tenant-wide deployment for extensions.1.7.0 (November 2018):Dynamic data (ability to connect components together).1.8.0 (March 2019):Microsoft Teams tabs support (integrates web parts in Teams).App pages (a full-page application integrated into the SharePoint experience)Domain-isolated web parts (run components in an iframe with isolated permissions).1.9.1 (August 2019):Library components support.1.10.0 (January 2020):Microsoft Teams personal apps support.List subscription.Application Customizer top/bottom placeholders.1.11.0 (July 2020):AppSource support (ability to publish to the marketplace).Removed support of the Knockout.js template.Teams tasks modules support (expose web part as Teams messaging extension).1.13.0 (October 2021):Viva Connection Adaptive Card Extension (ACE) support.1.15.0 (June 2022):Form Customizer extension support.1.16.0 (November 2022):Publish Teams solutions build with SPFx to Outlook and Office.Search query extension support.1.17.0 (April 2023):Top actions for custom web parts in SharePoint.1.19.0 (April 2024):Webpack 5 support.

Let’s look at the timeline:

The focus was initially set on SharePoint only and slowly evolved to integrate with other popular Microsoft 365 products, such as Teams and Viva Connections. You can now build SPFx-built solutions with no relationship with SharePoint whatsoever (e.g., Viva Connections ACE). The name “SharePoint Framework” may evolve in the future to something else to be more meaningful.React.js is by far the preferred JavaScript UI library to use if you want to benefit from the many examples and resources available. Microsoft tried to support other frameworks in the first versions, but it wasn’t very popular (e.g., Knockout.js). You still have the option to use plain JavaScript, but we don’t recommend it.

Note

You can build SPFx solutions using other technologies such as Angular.js or Vue.js but there won’t be any scaffolding or templates provided by default to get you started easily and you won’t benefit from many examples.

It’s important to note that SPFx IS NOT state-of-the-art web development and will never be.

From a technical point of view, the tools and libraries used in SPFx greatly evolved over the years. For instance, the Node.js version has been upgraded from version 6 with SPFx 1.1.0 to version 18 with SPFx 1.19.0. Therefore, it is important to regularly upgrade your development environment accordingly.

You can refer to the table in the official Microsoft documentation (https://learn.microsoft.com/en-us/sharepoint/dev/spfx/compatibility) to see all the Node.js/TypeScript/React versions per version (mark it as a bookmark).

Also, SPFx is and will always be behind the latest trends and libraries you will encounter in the web development area. As an example, the support of Webpack 5, (a version released in 2020 and widely used in web development) is only supported in SPFx in 2024! For experienced web developers used to working with the latest tools, yes, working with SPFx can be frustrating sometimes and we get that.

This is easily understandable as Microsoft needs to support all versions of the framework used in its platform (from v1.0.0 to 1.19.0) and needs to be very careful with any introduced breaking changes that could impact millions of users and third-party products.

While, yes, you can still build and deploy SPFx v1.0.0 solutions in 2025 – it will be supported – please don’t.

As we’ve seen in this chapter, SPFx was initially created to solve security and usability issues regarding custom JavaScript development inside SharePoint pages and evolved over the years to go progressively beyond SharePoint, supporting customizations for other tools within the Microsoft platform, such as Teams or Viva Connections.

In the next section, we will see an overview of all the possibilities offered by the framework per extensibility platform.

Exploring SPFx capabilities

SPFx is not only about SharePoint anymore and offers a lot of capabilities beyond it, for instance, for other tools in the Microsoft 365 suite.

Depending on whether you work with the cloud or on-premises, possibilities won’t be the same due to technical limitations.

Enumerating differences between SharePoint Online and SharePoint On-Premises

SPFx lets you customize parts or integrate within the default SharePoint UI experience. It can be used both with SharePoint Online and SharePoint On-Premises. However, with the on-premises products, the maximum version of SPFx you can use is 1.4.1 for SharePoint Server 2019 and 1.5.0 for SharePoint Server Subscription Edition. For SharePoint Server 2016 SP2, the maximum version is 1.1.0. It means you are limited to the following solution types with on-premises products:

Web parts for modern or classic pagesApplication CustomizerField CustomizerListView extension

All other features are only compatible with SharePoint Online.

In the rest of this book, we mainly focus on SharePoint Online capabilities as it is the most widely used application.

SPFx offers two types of solutions that can be created: web parts and extensions. Each type of solution has its own specificities that we detail in the following subsection.

Web parts

The web part customization was the very first capability of SPFx to be released back in 2017. It allows you to create visual components that can be inserted into SharePoint pages (modern and classic), Teams (as tab, personal app meeting apps, and even messaging extensions), Outlook, and Microsoft 365 apps (thanks to Microsoft Teams compatibility).

Figure 1.1 – The native web parts offered in SharePoint Online

A web part is composed of the following elements:

A UI canvas: This is where the content is displayed to the user. It can be literally anything as you get total control of it using JavaScript, HTML, and CSS. This canvas adapts dynamically to the dimensions of its parent container (such as a section/column or the full-page width) and the layout of the page (e.g., it will be stacked automatically on mobile view, and so on).

Note

The canvas is by itself “responsive” in its layout, but it does mean your content will be by default. It is up to you to implement your visuals to adapt the dimensions of the web part canvas container itself.

A property pane: A visual panel only available in edit mode and used to configure web part options. Options are persisted into the web part property bag depending on the integration context (see the following figure).

Figure 1.2 – The structure of a SharePoint web part

Web parts can be used in different ways:

As components in modern or classic SharePoint pages and inserted inside sections and columns along other web parts:

Figure 1.3 – The web part used as a component on a modern SharePoint page

As full-page applications in SharePoint (such as single-page applications), through a special App page SharePoint page. In this case, a single web part is presented containing the entire application. In such pages, there are no sections or columns to configure:

Figure 1.4 – A web part used as a full-page app on a modern SharePoint page

As a channel tab, personal app, meeting app, or messaging extension in Microsoft Teams. Just like the full-page scenario, a single web part acting as the application is presented with this mode.

Here is an example of integration as a channel tab:

Figure 1.5 – A web part used as a Teams channel tab

Teams meeting app

SPFx web parts can be integrated in multiple ways for a Teams meeting, such as a side panel during the meeting itself, a tab inside the meeting details, or directly in the meeting chat (in this case, it behaves the same as a messaging extension).

Here is an example of an SPFx web part integrated as a meeting application:

Contents

Practical SharePoint Framework (SPFx) Development

Foreword

Contributors

About the authors

About the reviewers

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Conventions used

Get in touch

Share Your Thoughts

Download a free PDF copy of this book

Part 1: Getting Started with the SharePoint Framework

Chapter 1: Introducing Microsoft 365 and SharePoint Online for Developers

Understanding the Microsoft 365 ecosystem

SharePoint Online

Unveiling SPFx

SharePoint Add-ins

Script Editor web part

Evolution of SPFx

Exploring SPFx capabilities

Enumerating differences between SharePoint Online and SharePoint On-Premises

Web parts

Extensions

Microsoft Teams, Outlook, and the Microsoft 365 app

The Microsoft 365 & Power Platform Community

Summary

Chapter 2: Ecosystem and Building Blocks around the SharePoint Framework

Overview of the Microsoft 365 architecture

Understanding the SharePoint logical architecture

Understanding Teams’ logical architecture

Accessing data within Microsoft 365

Overview of SharePoint REST API

Overview of Microsoft Graph API

Summary

Chapter 3: Your First Steps with the SharePoint Framework

Understanding the development tools and ecosystem

Visual Studio Code

Node Package Manager (npm)

Yeoman

Gulp

Webpack

Other tools and libraries

Understanding the development process and application life cycle

Setting up the development environment

Installing the required tools

Setting up a Microsoft 365 developer tenant

Creating your first SPFx solution (step by step)

Configuring your development environment

Create a new SPFx project

SPFx solution structure overview

Folders generated post build and package

Summary

Chapter 4: Packt Product Management Solution: A Practical Use Case

Planning a business solution with SPFx

Requirement 1 – viewing products as a catalog

Requirement 2 – selecting the color and size for a product item

Requirement 3 – getting a visual notification when a product is low in stock

Requirement 4 – placing a new order when a product is low in stock

Requirement 5 – searching for products by model, size, or color using free-text keywords

Requirement 6 – searching for a product from the site

Requirement 7 – visualizing the products dashboard in Viva Connections

Requirement 8 – visualizing the product catalog in Teams, Outlook, and Office

Requirements and solutions overview

Summary

Part 2: Building Web Parts with the SharePoint Framework

Chapter 5: Building a SharePoint Web Part

Technical requirements

Building a web part

Creating the solution

Updating the solution configuration

Defining business entities and services

Initializing services and wiring up sub-components

Rendering the products

Using the Microsoft Graph API to get items

Updating the packages

Getting a Microsoft Graph client instance

Defining and retrieving information from the context

Updating the products service

Passing site ID and list name to sub-components

Handling styles, themes, and dark mode

Creating the SASS style sheet

Updating the render() function

Handling themes and dark mode

Localizing a web part

Localizing web part content

Localizing the web part manifest

Testing locales

Using web part top actions

Defining top actions

Testing top actions

Summary

Chapter 6: Working with the Property Pane

Technical requirements

Understanding the property pane

Web part property bag

Property pane structure

Using property pane default controls

Defining the Slider field

Validating field values

Creating custom property pane controls

Understanding the typical structure of a custom property pane field

Tips and tricks for working with the property pane

Handling property pane events

Handling asynchronous controls

Configuring property pane fields dynamically

Setting attributes on property bag properties

Using reusable fields from the community

Summary

Chapter 7: Connecting to Other Web Parts

Technical requirements

Why connect web parts?

Exposing data from a search box web part

Creating and configuring the new web part

Creating the search box control

Exposing data to other components

Consuming data in the products catalog web part

Defining dynamic properties

Creating property pane controls for a dynamic property

Handling static/dynamic value scenarios

Updating the products service class to support the search capability

Summary

Chapter 8: Deploying a SharePoint Web Part

Technical requirements

Understanding the deployment cycle

Building the solution

Bundling the solution

Packaging and deploying the solution

Publish to AppSource

DevOps with the SharePoint Framework

Understanding CI/CD

Managing versions and updates

Automating the deployment of your solution

Integrating with CI/CD tools

Summary

Part 3: Building Extensions with the SharePoint Framework

Chapter 9: Building a Form Customizer

Technical requirements

What is a Form Customizer?

Why is it needed?

Uses of an SPFx Form Customizer

Simple examples

Building a Form Customizer

Adding a Form Customizer to the solution

Updating the configuration

Business requirement

Initial render check

Rendering static product data

Setting static data

Displaying static data

Custom display of fields

Binding fields to events

Using Microsoft Graph to interact with item

Getting a Microsoft Graph client instance

Defining and retrieving information from the context

Updating the products service

Calling the service methods from the component

Saving the data in the list

Summary

Chapter 10: Building an Application Customizer

Technical requirements

What is an application customizer?

Why is it needed?

Uses of an SPFx application customizer

When to use an SPFx application customizer

Simple examples

Building an application customizer

Adding an application customizer to the solution

Updating the configuration

Initial render check

Placeholders

Adding a React component to an application customizer

React component

Root class update

Using the Microsoft Graph API to get items

Filtering items

Calling the API from the component

Summary

Chapter 11: Building a Field Customizer

Technical requirements

What is a Field Customizer?

Why is it needed?

Uses of an SPFx Field Customizer

Simple examples

Building a Field Customizer

Adding a Field Customizer to the solution

Updating the configuration

Initial render check

Lifecycle methods

Updating the Field Customizer

Summary

Chapter 12: Building a ListView Command Set

Technical requirements

What is a ListView Command Set?

Why is it needed?

Uses of a ListView Command Set

Simple examples

Building a ListView Command Set

Adding a ListView Command Set to the solution

Updating the configuration

Initial render check

Life cycle methods

Updating the ListView Command Set

HTTP service

Command and properties

Updating the code

Summary

Chapter 13: Building a Search Query Modifier

Technical requirements

What is a Search Query Modifier?

Why is it needed?

Simple examples

Building a Search Query Modifier

Prerequisites

Adding a Search Query Modifier to the solution

Initial render check

Updating the Search Query Modifier

Custom search results page updates

Using the modified query

Summary

Chapter 14: Building an Adaptive Card Extension

Technical requirements

What is an SPFx ACE?

Why is it needed?

Uses of an SPFx ACE

Key features of SPFx ACEs

Simple examples

Building an ACE

Adding an ACE to the solution

Initial render check

Updating the ACE

State

Properties

Getting data

Binding data in the quick view

Summary

Chapter 15: Deploying Extensions

Technical requirements

Packaging solution with extensions

Scope of deployment for extensions

Tenant-level scope

Site collection-level scope

The skipFeatureDeployment property

Deploying extensions

Usage of scripts during deployment

Deploying the Application Customizer

Decision on scope

Controlling the behavior using a script

Deploying the ListView Command Set

PnP PowerShell

CLI for Microsoft 365

Deploying the Search Query modifier

PnP PowerShell

CLI for Microsoft 365

Deploying a Field Customizer

PnP PowerShell

CLI for Microsoft 365

Deploying Form customizers

PnP PowerShell

CLI for Microsoft 365

Deploying ACEs

Summary

Part 4: Going Further with the SharePoint Framework

Chapter 16: Sharing Your Code Using Library Components

Technical requirements

Understanding what a library component is

Building a library component

Configuring the library

Sharing utility classes and interfaces

Linking solutions locally

Deploying a library component

Comparing npm packages with SPFx library components

Summary

Chapter 17: Debugging Your Solution Efficiently

Technical requirements

Understanding how debugging works

Debugging Web Parts

Debugging using the hosted workbench

Debugging Web Parts from a real modern page

Debugging Web Parts in production

Debugging extensions

Using the SPFx developer dashboard and maintenance mode

Using the SPFx developer dashboard

Using maintenance mode

Leveraging other tools to debug

Summary

Chapter 18: Consuming APIs

Technical requirements

Getting started with SPFx clients

Connecting to secured APIs

Using the Microsoft Graph API

Using the SharePoint REST API

Using Entra ID-protected APIs

Configuring an Azure function with EasyAuth

Using AadHttpClient

Using AadTokenProvider

Using anonymous APIs

Summary

Chapter 19: Writing Tests with SPFx

Technical requirements

Understanding the importance of testing

Implementing tests with Jest

Preparing the test environment

Writing your first test

Organizing your tests

Rendering the component and mocking the products data

Defining test assertions

Fixing SPFx-related issues with Jest

Summary

Chapter 20: Upgrading Your Solutions

Staying up to date with SPFx releases and updates

Upgrading your SPFx solution

Upgrading your solution manually

Upgrading your solution using the Microsoft 365 CLI

Summary

Chapter 21: Leveraging Community Tools and Libraries

Technical requirements

Exploring Microsoft 365 & Power Platform Community initiatives

Using the PnPjs library

Using the PnP React and property pane controls libraries

Using the PnP Modern Search solution

Experimenting with other tools

Microsoft Dev Proxy

SPFx Fast Serve

Tools and libraries summary

Summary

Chapter 22: Development Platforms

Understanding the need for virtualization

How does virtualization work for SPFx?

Docker

GitHub Codespaces

WSL

Azure virtual machines

Summary

Index

Why subscribe?

Other Books You May Enjoy

Packt is searching for authors like you

Share Your Thoughts

Download a free PDF copy of this book

Landmarks

Cover

Frontmatter

Backmatter

Table of Contents

Preface

Index