Customize SharePoint Online site header and footer using SPFx Application Customizer

In this SPFx tutorial, we will discuss how to customize SharePoint Online site header and footer using the SPFx application customizer.

By using SPFx or SharePoint Framework extensions, we can customizer SharePoint Online site header, footer, alert, notifications listview, etc.

If you are new to SharePoint Framework development, you can check out the below tutorials:

• Setup SharePoint Framework (SPFx) development environment in Windows 10 workstation
• Steps to use bootstrap in SPFx webpart
• How to display SharePoint list items in a table using SPFX
• Get user outlook messages using Microsoft graph api in SPFx with React JS

Microsoft provided a good feature to customize the page using extensions and its available in all office 365 subscriptions.

You can use SPFx extensions, we can customize the SharePoint modern page, libraries, or lists.

Types of Extensions in SharePoint Framework Extensions

There are 3 types of SPFx extensions:

• Application Customizers: Using application customization, you can customize the modern page header, footer using a placeholder. You can add your HTML Code to design those control.
• Field Customizers: Using field customizers, you can customize the SharePoint list, libraries, and modify the view of the list.
• ListView Command Sets: You can add your custom command in the list, libraries through client-side code to create an action.

SPFx Application Customizer Example

Now, we will see how we can create an SPFx application customizer for SharePoint Online.

Step 1: Open Node.js command prompt and create a new project as same as the below screenshot.

Here you need to choose Extension in Which type of client-side component to create?

And then select the customizer as Application Customizer like below:

Step 2: Here I have created an extension called AddingLogo and provide the description, next click enter.

So after the execution of the above command, our new extension got created successfully in the solution folder.

Now you type code . in the command prompt to open this project in Visual Studio code.

Now you can see the below screenshot where the new extensions has been created successfully and the solution looks like below.

Step 3: Next click on AddingLogoApplicationCustomizer.ts and replace the below code.

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
  BaseApplicationCustomizer,PlaceholderContent, 
  PlaceholderName, 
  PlaceholderProvider 
} from '@microsoft/sp-application-base';
import { Dialog } from '@microsoft/sp-dialog';

import * as strings from 'AddingLogoApplicationCustomizerStrings';

const LOG_SOURCE: string = 'AddingLogoApplicationCustomizer';

/**
 * If your command set uses the ClientSideComponentProperties JSON input,
 * it will be deserialized into the BaseExtension.properties object.
 * You can define an interface to describe it.
 */
export interface IAddingLogoApplicationCustomizerProperties {
  // This is an example; replace with your own property
  testMessage: string;

}

/** A Custom Action which can be run during execution of a Client Side Application */
export default class AddingLogoApplicationCustomizer
  extends BaseApplicationCustomizer<IAddingLogoApplicationCustomizerProperties> {

  @override
  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 style="background-color: yellow;height: 40px;"><div style="text-align:center;font-optical-sizing: auto; color: red;" ><h1> Blogs For SharePoint Header .</h1> </div> </div>';

           let bottomPlaceholder: PlaceholderContent = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom); 
           if (bottomPlaceholder) { 
             bottomPlaceholder.domElement.innerHTML = '<div style="background-color: red;height: 40px;"><div style="text-align:center;color: white;font-size: 30px;font-weight: bold;" > Blogs For SharePoint Footer. </div> </div>';
           return Promise.resolve();
  }
}
  }
}

Step 4: Now I am going to explain clearly, how this will work exactly. In the below image you can see, I have added two placeHolder to add Top header and footer.

I have included a few styles to change the height, color, and font of the text.

Step 5: In the below image, you can see, I marked as yellow for PageUrl in serve.json. So you replace your existing URL to your site collection URL. So that once you execute Gulp serve, it will directly open in SharePoint Page.

Step 6: Next go to your command prompt and execute this code using below command.

• gulp clean
• gulp build
• gulp serve
• gulp bundle –ship
• gulp package-solution -ship

So you can run the above command as per the order. So once you click on gulp serve, it will open a new page where you have to add your newly added web part or extensions.

If you added a extensions so you will get a popup screen like below so no need to worry. Just click on Load debug script button.

Step 7: Once page will properly loaded, it will looks like below screenshot. Top header and footer now visible in my site.

Step 8: Once confirmed, everything is OK, you have to create a pkg to deploy this in your site. You can use the deployment command to prepare a solution package.

In this tutorial, we learned how to create and use SharePoint Framework or SPFx application customizer.