Practical SharePoint Framework (SPFx) Development
Description
Key Features
Learn how SPFx integrates with tools such as SharePoint, Teams, Outlook, and Viva within Microsoft 365
Explore all the capabilities of the SharePoint Framework, including Web Parts, extensions, and library components
Discover best practices and advanced development techniques for SPFx
Purchase of the print or Kindle book includes a free PDF eBook
Book DescriptionThe 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. Email sign-up and proof of purchase required What you will learn
Set up your machine and Microsoft 365 tenants to build SPFx solutions
Understand and build SPFx web parts and extensions
Share and reuse common code through SPFx library components
Consume SharePoint, Microsoft Graph, Entra ID-secured, and anonymous APIs
Automate solutions deployment with Azure DevOps pipelines or GitHub actions
Speed up your SPFx development with community tools and libraries
Publish and manage solutions on SharePoint AppSource
Who this book is forThis book is ideal for experienced web developers looking to build modern SharePoint solutions using the SharePoint Framework. Basic knowledge of JavaScript, TypeScript, and Microsoft 365 will be beneficial. Familiarity with the SharePoint ecosystem will come in handy but is not essential. Existing SPFx developers who want to refresh their skills and get up to date with the latest features will also benefit from this book.
All prices
More details
Other editions
Additional editions
Persons
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. 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 @anoopt.
Content
Introducing Microsoft 365 and SharePoint Online for Developers
Ecosystem and Building Blocks around the SharePoint Framework
Your First Steps with the SharePoint Framework
Packt Product Management Solution: A Practical Use Case
Building a SharePoint Web Part
Working with the Property Pane
Connecting to Other Web Parts
Deploying a SharePoint Web Part
Building a Form Customizer
Building an Application Customizer
Building a Field Customizer
Building a ListView Command Set
Building a Search Query Modifier
Building an Adaptive Card Extension
Deploying Extensions
Sharing Your Code Using Library Components
Debugging Your Solution Efficiently
Consuming APIs
Writing Tests with SPFx
Upgrading Your Solutions
Leveraging Community Tools and Libraries
Development Platforms
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 started
- Experienced on-premises SharePoint developers already familiar with SharePoint underlying concepts and making the transition to SPFx
- Existing 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...
