In this SPFx tutorial, we will discuss what are SharePoint framework extensions and how to create SPFx application customizer for SharePoint Online Office 365.
- set up a development environment for the SharePoint framework
- Create and deploy SharePoint Framework (SPFx) listview command set extension
- Create and Deploy SharePoint Framework (SPFx) extension field customizer
SharePoint Framework Extensions Overview
Now, let us understand what are SharePoint framework extensions.
By using SPFx extension, we can extend the user experience within modern pages and SharePoint document libraries.
We can customize the SharePoint notification areas, toolbars, and list data views using SPFx extensions.
There are 3 types of extensions:
- Application Customizers: By using SPFx application customizers, we can add scripts, access HTML element placeholders, and extend those placeholders.
- Field Customizers: By using SPFx field customizers we can modify the list views.
- Command Sets: By using command sets, we can add new actions with client-side code to implement the behaviors.
We can create application customizers using plain JavaScript, AngularJS, or ReactJS, etc. With react, we can also use Fluent UI for a similar user experience to Office 365.
Create SharePoint Framework Extension Application Customizer
Now, we will see how to create an SPFx application customizer for SharePoint Online Office 365.
Open node.js command prompt (Run as administrator).
Then create a folder where you want to create the solution. Run the below commands:
md App-Cust-Example
cd App-Cust-Example

Then run the Yeoman SharePoint Generator.
yo @microsoft/sharepoint

Then you can select the options like below:
- What is your solution name?
- Then select SharePoint Online only (latest) for the baseline packages.
- Where you want to place the files? Select Use the current folder
- Select N, to allow the solution to be deployed to all sites immediately.
- Select N, select solution contains unique permissions.
- Then select Extension, which type of client-side component to create?
- Then which type of client-side extension to create? Select Application Customizer from (Application Customizer/Field Customizer/ListViw Command Sets)

Then provide the Application customizer name and application customizer description.

Then it will take sometime and create the project and it will show a successful message like below:

Now, Open the solution using visual studio code.
code .
The folder structure looks like below:

Here in the onInit() method, by default we are displaying the alert message.

Code:
public onInit(): Promise<void> {
Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
let message: string = this.properties.testMessage;
if (!message) {
message = '(No properties were provided.)';
}
Dialog.alert(`Hello from ${strings.Title}:\n\n${message}`);
return Promise.resolve();
}
SharePoint framework extensions like Application customizers, we can not run in the local workbench. We need to test directly on the SharePoint Online pages.
To proceed further, first create a SharePoint Online site page and copy the URL.
Now, open the serve.json file, which is located in config folder.
There enter the page URL like below:
You can put any page url.
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"https": true,
"serveConfigurations": {
"default": {
"pageUrl": "https://tsinfo.sharepoint.com/sites/SPFxTraining/SitePages/SPFx-Application-Customizer-Example.aspx",
"customActions": {
"3e9d7e33-edf4-481f-ab04-70ca13ac17d8": {
"location": "ClientSideExtension.ApplicationCustomizer",
"properties": {
"testMessage": "Test message"
}
}
}
},
"firstAppCustomizer": {
"pageUrl": "https://tsinfo.sharepoint.com/sites/SPFxTraining/SitePages/SPFx-Application-Customizer-Example.aspx",
"customActions": {
"3e9d7e33-edf4-481f-ab04-70ca13ac17d8": {
"location": "ClientSideExtension.ApplicationCustomizer",
"properties": {
"testMessage": "Test message"
}
}
}
}
}
}
If you are developing any SPFx solution for the first time, then run the below command at least once:
gulp trust-dev-cert
Now run the below command which will open the SharePoint Online site URL.
gulp serve
gulp serve --nobrowser
Now, it will open the SharePoint page directly open the browser.
Here, click on Load debug scripts like below:

Now, it will display the dialog box like below:

Deploy SPFx Extension to SharePoint Online
Now, we will see how to deploy the SharePoint Framework (SPFx) extension to SharePoint Online Office 365.
You can stop the solution using the below command.
Ctrl + C
Now, run the below command to bundle and packages the solution (One by One in the same order).
gulp build
gulp bundle --ship
gulp package-solution --ship
Then it will create the .ppkg file in the SharePoint -> Solution folder. It looks like below:

Now, you can upload it into the .sppkg file in the App Catalog site in SharePoint Online.
Once you drag and drop in the Apps for SharePoint, click on Deploy like below:

Once deploy the package, you can see like below:

Once it is deployed, open the SharePoint Online site.
Then click on the gear icon -> Add an app.
Then select the client side solution like below:

Once you can see the Site Contents page, and you can see the solution deployed successfully.

Now, you can open the SharePoint site and you can see the dialog box like below:

This is how we can build and deploy SharePoint Framework SPFx application customizer in SharePoint Online Office 365.
You may like following SPFx tutorials:
- (SPFx) SharePoint framework client web part example
- SharePoint client-side web part configurable properties in Property Pane using spfx
- How to Create Site Columns, Content Type and Custom List using SharePoint Framework
- How to Create a list using SharePoint Framework (SPFx)
- Retrieve SharePoint list items using SharePoint framework (SPFx)
- Property welcome does not exist on type ‘JSX.IntrinsicElements’ in SPFx React
- The entry point for component has a dependency on “@microsoft/sp-http” that is not declared in the manifest react spfx
- SPFx – Bind dropdown list from SharePoint list using PnP
- no gulpfile found error in spfx
- SPFx SwatchColorPicker Office UI Fabric React Control example
In this SPFx tutorial, we discussed,
- SharePoint Framework Extensions Overview
- Create SharePoint Framework (SPFx) Extension Application Customizer
- Deploy SPFx Extension to SharePoint Online
I am Bijay a Microsoft MVP (8 times –Â My MVP Profile) in SharePoint and have more than 15 years of expertise in SharePoint Online Office 365, SharePoint subscription edition, and SharePoint 2019/2016/2013. Currently working in my own venture TSInfo Technologies a SharePoint development, consulting, and training company. I also run the popular SharePoint website EnjoySharePoint.com
Hi Thank you for the in detail explanation … It was really helpfull. My only doubt is that will application customizer works on only site pages or also on application pages too.