As a beginner to SharePoint here is how to build first Application Customizer extension and customize Header & Footer in modern SharePoint pages.
SPFx extensions allows you to extend SharePoint user experience, where you can customize your header, footer, toolbar, notifications etc. within the Modern pages for the Client-side development.
The SPFx extensions includes three types.
- Application Customizer
- Field Customizer
- Command sets.
In this blog, we are going to see about Application Customizer.
Application Customizer allows you to modify the header, footer, toolbar, notifications etc. according to your business requirements.
Before you start creating SPFx extension make sure you have setup your development environment required for SPFx. Here is my previous article how to setup the SPFx development environment.
Here is another article which can help you to create SPFx webpart
Here’s the step-by-step instruction to build SharePoint Framework extension
- Create a separate project folder for extensions using command
md app-extension
- Switch to the project directory using below command
cd app-extension
- Create SPFx project solution t by running the Yeoman SharePoint generator. It will help to create a sample SPFx extension with the required files to build and deploy the extension using the command
yo @microsoft/sharepoint
- It will ask you series of questions, in that choose the answers as below
Extension
Application customizer

- If you are using Visual Studio Code as your editor, to view the source code use the below command
code .
Compile and Run SPFx Application Customizer
In SharePoint Framework Extension you cannot use local workbench to test, so you need to test in your SharePoint online tenant.
- Open serve.json file to update the page URL to match your page details on which you are going to apply and test this extension.
“pageUrl”:https://yourtenantname.sharepoint.com/sites/yoursite/SitePages/Home.aspx
- Compile & run your code using the command
gulp serve
- Open your browser and select Load debug scripts to continue loading scripts in your page.

- You will see the alert box appears on your page which says successfully your SharePoint Extension is running.

Customize Header & Footer in SPFx Application customizer
- Open your ApplicationCustomizer.ts file to add header and footer.
- Add the import PlaceholderContent, PlaceholderName from
@microsoft/sp-application-base
by updating the code as given bellow.
import {
BaseApplicationCustomizer, PlaceholderContent,
PlaceholderName,
PlaceholderProvider
} from '@microsoft/sp-application-base';
- The OnInit() method contains the logical code of customized header and footer. Replace your onInit method with the below 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}`);
let topPlaceholder: PlaceholderContent = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top);
if (topPlaceholder) {
topPlaceholder.domElement.innerHTML = '<div><div style="text-align:center;"><div style="background-color:blue" > <h1>This is to demo SPFx extension to customize app header.</h1> </div></div> </div>';
let bottomPlaceholder: PlaceholderContent = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom);
if (bottomPlaceholder) {
bottomPlaceholder.domElement.innerHTML = '<div style="background-color: white;"><div style="text-align:center;" > <h3>This is to demo SPFx extension to customize app footer.</h3> </div> </div>';
return Promise.resolve();
}
}
- Compile your code and move to your browser and select load debug scripts to continue loading. Now you can view header and footer in your page.

Successfully, you have built the customized header and footer.
Issues faced during the SPFx Extension setup
Issue 1
When I tried to execute the command gulp trust -dev-cert
or gulp serve
I faced an issue { Error: Cannot find module ‘@microsoft/sp-build-web’ as below image,

Solution:
To solve this run the command npm install
. It installs all the modules which you missed.
I hope this article was helpful to build SPFx extension and customized header and footer in SharePoint Online.
Thank you for Reading!