How to create SPFx Extension and customize Header & Footer

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.

1. Application Customizer
2. Field Customizer
3. 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

• 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!