Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Practical SharePoint Framework (SPFx) Development
  • Table Of Contents Toc
  • Feedback & Rating feedback
Practical SharePoint Framework (SPFx) Development

Practical SharePoint Framework (SPFx) Development

By : Franck Cornu, Anoop T.
Buy this Book
close
close
Practical SharePoint Framework (SPFx) Development

Practical SharePoint Framework (SPFx) Development

By: Franck Cornu, Anoop T.
Buy this Book

Overview of this book

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.
Table of Contents (29 chapters)
close
close
close
Preface
Icon
Preface
Icon
Who this book is for
Icon
What this book covers
Icon
To get the most out of this book
Icon
Download the example code files
Icon
Conventions used
Icon
Get in touch
Icon
Share Your Thoughts
Icon
Download a free PDF copy of this book
Lock Free Chapter
1
Part 1: Getting Started with the SharePoint Framework
Icon
Part 1: Getting Started with the SharePoint Framework
2
Chapter 1: Introducing Microsoft 365 and SharePoint Online for Developers
Icon
Chapter 1: Introducing Microsoft 365 and SharePoint Online for Developers
Icon
Understanding the Microsoft 365 ecosystem
Icon
Unveiling SPFx
Icon
Exploring SPFx capabilities
Icon
The Microsoft 365 & Power Platform Community
Icon
Summary
3
Chapter 2: Ecosystem and Building Blocks around the SharePoint Framework
Icon
Chapter 2: Ecosystem and Building Blocks around the SharePoint Framework
Icon
Overview of the Microsoft 365 architecture
Icon
Accessing data within Microsoft 365
Icon
Summary
4
Chapter 3: Your First Steps with the SharePoint Framework
Icon
Chapter 3: Your First Steps with the SharePoint Framework
Icon
Understanding the development tools and ecosystem
Icon
Understanding the development process and application life cycle
Icon
Setting up the development environment
Icon
Creating your first SPFx solution (step by step)
Icon
SPFx solution structure overview
Icon
Summary
5
Chapter 4: Packt Product Management Solution: A Practical Use Case
Icon
Chapter 4: Packt Product Management Solution: A Practical Use Case
Icon
Planning a business solution with SPFx
Icon
Requirements and solutions overview
Icon
Summary
6
Part 2: Building Web Parts with the SharePoint Framework
Icon
Part 2: Building Web Parts with the SharePoint Framework
7
Chapter 5: Building a SharePoint Web Part
Icon
Chapter 5: Building a SharePoint Web Part
Icon
Technical requirements
Icon
Building a web part
Icon
Using the Microsoft Graph API to get items
Icon
Handling styles, themes, and dark mode
Icon
Localizing a web part
Icon
Using web part top actions
Icon
Summary
8
Chapter 6: Working with the Property Pane
Icon
Chapter 6: Working with the Property Pane
Icon
Technical requirements
Icon
Understanding the property pane
Icon
Using property pane default controls
Icon
Creating custom property pane controls
Icon
Tips and tricks for working with the property pane
Icon
Summary
9
Chapter 7: Connecting to Other Web Parts
Icon
Chapter 7: Connecting to Other Web Parts
Icon
Technical requirements
Icon
Why connect web parts?
Icon
Exposing data from a search box web part
Icon
Consuming data in the products catalog web part
Icon
Summary
10
Chapter 8: Deploying a SharePoint Web Part
Icon
Chapter 8: Deploying a SharePoint Web Part
Icon
Technical requirements
Icon
Understanding the deployment cycle
Icon
DevOps with the SharePoint Framework
Icon
Summary
11
Part 3: Building Extensions with the SharePoint Framework
Icon
Part 3: Building Extensions with the SharePoint Framework
12
Chapter 9: Building a Form Customizer
Icon
Chapter 9: Building a Form Customizer
Icon
Technical requirements
Icon
What is a Form Customizer?
Icon
Building a Form Customizer
Icon
Rendering static product data
Icon
Using Microsoft Graph to interact with item
Icon
Summary
13
Chapter 10: Building an Application Customizer
Icon
Chapter 10: Building an Application Customizer
Icon
Technical requirements
Icon
What is an application customizer?
Icon
Building an application customizer
Icon
Adding a React component to an application customizer
Icon
Using the Microsoft Graph API to get items
Icon
Summary
14
Chapter 11: Building a Field Customizer
Icon
Chapter 11: Building a Field Customizer
Icon
Technical requirements
Icon
What is a Field Customizer?
Icon
Building a Field Customizer
Icon
Updating the Field Customizer
Icon
Summary
15
Chapter 12: Building a ListView Command Set
Icon
Chapter 12: Building a ListView Command Set
Icon
Technical requirements
Icon
What is a ListView Command Set?
Icon
Building a ListView Command Set
Icon
Updating the ListView Command Set
Icon
Summary
16
Chapter 13: Building a Search Query Modifier
Icon
Chapter 13: Building a Search Query Modifier
Icon
Technical requirements
Icon
What is a Search Query Modifier?
Icon
Building a Search Query Modifier
Icon
Updating the Search Query Modifier
Icon
Summary
17
Chapter 14: Building an Adaptive Card Extension
Icon
Chapter 14: Building an Adaptive Card Extension
Icon
Technical requirements
Icon
What is an SPFx ACE?
Icon
Building an ACE
Icon
Updating the ACE
Icon
Summary
18
Chapter 15: Deploying Extensions
Icon
Chapter 15: Deploying Extensions
Icon
Technical requirements
Icon
Packaging solution with extensions
Icon
Scope of deployment for extensions
Icon
Deploying extensions
Icon
Deploying the Application Customizer
Icon
Deploying the ListView Command Set
Icon
Deploying the Search Query modifier
Icon
Deploying a Field Customizer
Icon
Deploying Form customizers
Icon
Deploying ACEs
Icon
Summary
19
Part 4: Going Further with the SharePoint Framework
Icon
Part 4: Going Further with the SharePoint Framework
20
Chapter 16: Sharing Your Code Using Library Components
Icon
Chapter 16: Sharing Your Code Using Library Components
Icon
Technical requirements
Icon
Understanding what a library component is
Icon
Building a library component
Icon
Deploying a library component
Icon
Comparing npm packages with SPFx library components
Icon
Summary
21
Chapter 17: Debugging Your Solution Efficiently
Icon
Chapter 17: Debugging Your Solution Efficiently
Icon
Technical requirements
Icon
Understanding how debugging works
Icon
Debugging Web Parts
Icon
Debugging extensions
Icon
Using the SPFx developer dashboard and maintenance mode
Icon
Leveraging other tools to debug
Icon
Summary
22
Chapter 18: Consuming APIs
chevron up
Icon
Chapter 18: Consuming APIs
Icon
Technical requirements
Icon
Getting started with SPFx clients
Icon
Connecting to secured APIs
Icon
Using the Microsoft Graph API
Icon
Using the SharePoint REST API
Icon
Using Entra ID-protected APIs
Icon
Using anonymous APIs
Icon
Summary
23
Chapter 19: Writing Tests with SPFx
Icon
Chapter 19: Writing Tests with SPFx
Icon
Technical requirements
Icon
Understanding the importance of testing
Icon
Implementing tests with Jest
Icon
Writing your first test
Icon
Summary
24
Chapter 20: Upgrading Your Solutions
Icon
Chapter 20: Upgrading Your Solutions
Icon
Staying up to date with SPFx releases and updates
Icon
Upgrading your SPFx solution
Icon
Summary
25
Chapter 21: Leveraging Community Tools and Libraries
Icon
Chapter 21: Leveraging Community Tools and Libraries
Icon
Technical requirements
Icon
Exploring Microsoft 365 & Power Platform Community initiatives
Icon
Experimenting with other tools
Icon
Tools and libraries summary
Icon
Summary
26
Chapter 22: Development Platforms
Icon
Chapter 22: Development Platforms
Icon
Understanding the need for virtualization
Icon
Docker
Icon
GitHub Codespaces
Icon
WSL
Icon
Azure virtual machines
Icon
Summary
27
Index
Icon
Index
Icon
Why subscribe?
28
Other Books You May Enjoy
Icon
Other Books You May Enjoy
Icon
Packt is searching for authors like you
Icon
Share Your Thoughts
Icon
Download a free PDF copy of this book

Using the SharePoint REST API

To demonstrate how to use the SharePoint REST API, we will now update the getProducts() method of the ProductCatalogService class to use the SPHttpClient client to fetch the list of products from a SharePoint list instead of the Microsoft Graph API.

First, we update the constructor of the class to take an SPHttpClient parameter and the absolute web URL from where the products list is located:

export class ProductCatalogService implements IProductCatalogService {
  private _spHttpClient: SPHttpClient;
  private _webUrl: string;
  constructor(spHttpClient: SPHttpClient, webUrl: string) {
    this._spHttpClient = spHttpClient;
    this._webUrl = webUrl;
  }
  ...

Unlike the Microsoft Graph API, all HTTP requests with the SharePoint REST API are made relative to the site where the data is located. We use the /_api/web/lists/GetByTitle('Products')/items...

Subscribe to access the full title

Advance your knowledge in tech

A Packt subscription gives you instant online access to our library of over 8,000 practical eBooks and videos, constantly updated with the latest in tech
Continue Learning
End of Section 22
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options
font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon