How to build SPFx Extensions with React

The SharePoint Framework, or most commonly referred to as SPFx, is the new page and part model used for rich SharePoint experience development. These can be divided into two categories:

  1. Web parts – client-site components that can be added using a placeholder on the page.
  2. Extensions – used for extending the user experience of SharePoint.

In this blog post I will create an ApplicationCustomizer that will use the page header to display predefined collection of company stocks. The UI framework of choice is React, but you can use any other or none at all.

Getting started

I will be using Visual Studio Code as a source code editor. To set up your development environment you can follow the steps described here. Below are the commands I executed to get me started.

Navigated to my Projects folder and created a new directory:

Navigated to the new directory:

Executed Yeoman using the @microsoft/sharepoint generator:

Followed the steps on the screen and provided name and description. Selected the type of project to be Extension. At the time of this post was written, the Extension project type was in Preview.

Added React and ReactDom to my project:

I am using the –save attribute to add it to my package.json file as a dependency.

Created a trust for the development certificate:

In this case you don’t have to explicitly trust the certificate every time you navigate to your localhost server.

Loaded the files in Visual Studio Code:

Stocks data

To get an up to date stock information I am using Alpha Vantage’s API. Make sure to generate your API KEY (it is free) and replace it in Stocks.tsx file

Project structure

Project structure
Project structure

In my components folder I have the following items:

  1. My two components – Stocks and StockItem. The first is displaying a collection of the second.
  2. The .scss files contain the style definitions used by each component.
  3. The interfaces used are defined in IStocks.ts

The ApplicationCustomizer is automatically created by the Yeoman generator, I only modified it to match my needs.

Testing

To test the code you can run

and append the following URL to your SharePoint Online environment

It is that easy to execute code running on your local server in your SharePoint Online environment. The query parameters define the manifest.js file, the unique custom action ID, and the location of the extension. That can be either of the three – ApplicationCustomizer, FieldCustomizer, CommandSet.

The output must look like

Sample output
Sample output

The order of the companies is not guarantied to be exactly as defined in the array due to the asynchronous calls made to the stocks web service. What I like about React is that if you want to change how stock data is displayed, all you have to do is modify the render function in StockItem component.

Conclusion

Despite still being in Preview, I found the process of writing my own Extension to be a rather easy one. Microsoft have provided a great collection of samples that can be used as reference, Yeoman generator is great for providing the skeleton, and testing on your environment does not require any heavy development.

Complete project can be found here.

Summary
Building SPFx Extensions with React
Article Name
Building SPFx Extensions with React
Description
Build SPFx Extension using React to display stock information in the page header.
Author
Publisher Name
Atos Consulting CH
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *