How To Create Header And Footer In Modern SharePoint Site

Introduction

In this article, we will see how can we add header and footer in modern SharePoint site using SPFx Application Customizer.

Follow the below steps to create a custom header and footer.

Steps

Step 1

Open a command prompt with run as administrator and go to the directory where you want to create an Application Customizer solution,

Step 2

Now type the below command and press enter key.

yo @microsoft/SharePoint

Step 3

It will ask the name of the solution. So, type the solution name and press enter key.

Step 4

Next, it will ask for the target environment. You can select the option by using the up-down arrow key,

Step 5

Next, it will ask for where we want to store all files of solution either on a current folder or create a subfolder with solution name,

Step 6

Now, it will ask if we want to allow to deploy this solution by default in all site collections once it deployed in-app catalog. Type N, if you don’t want to allow to deploy by default in all site collection, else type Y and press enter.

Step 7

Next select Y if you want to create an isolated web part, else select N. Refer to this blog to know what is isolated web part.

Step 8

Next, it will ask which client-side component want to create. Select Extension here using the up-down arrow key.

Step 9

Now select which type of extension we want to create. Select Application Customizer here.

Step 10

Next, it will ask for the name of the application customizer. Type the name of your application customizer.

Step 11

Next, it will ask for an application customizer description. Here type the description for your extension.

Step 12

Now open this solution in visual studio code. Our solution is ready so we will implement a custom header and footer.

Step 13

Go to the CustomHeaderFooterApplicationCustomizer.ts file available in the src folder.

Step 14

Now to get access to placeholders on the page, we need to use the below imports,

import {
BaseApplicationCustomizer,
PlaceholderContent,
PlaceholderName
} from '@microsoft/sp-application-base';

Step 15

Next, we will add our custom property Top and Bottom in the ICustomHeaderFooterApplicationCustomizerProperties interface.

export interface ICustomHeaderFooterApplicationCustomizerProperties {
  // This is an example; replace with your own property
  testMessage: string;
  Top: string; 
  Bottom: string;
}

Step 16

Now we will add the OnInit() method.

Below is the code for OnInit() method. It will be executed when the page loading starts, then it will call the render method to display the header and footer.

private _topPlaceholderHeader: PlaceholderContent | undefined;
  private _bottomPlaceholderFooter: PlaceholderContent | undefined;

  @override
  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
    this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHoldersHeaderandFooter);
    //Added the below line code to handle the possible changes on the existence of placeholders.  
    this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHoldersHeaderandFooter);
    //The below code is used to call render method for generating the HTML elements.  
    this._renderPlaceHoldersHeaderandFooter();
    return Promise.resolve();
  }

Step 17

Now we will write the code for the renderPlaceHoldersHeaderandFooter() method.

private _renderPlaceHoldersHeaderandFooter(): void {
    //Adding top header section
    if (!this._topPlaceholderHeader) {
      this._topPlaceholderHeader =
        this.context.placeholderProvider.tryCreateContent(
          PlaceholderName.Top,
          {
            onDispose: this._onDispose
          });

      if (!this._topPlaceholderHeader) {
        console.error('Top placeholder was not found.');
        return;
      }

      if (this.properties) {
        let topString: string = this.properties.Top;
        if (!topString) {
          topString = 'CustomHeader';
        }
        if (this._topPlaceholderHeader.domElement) {

          this._topPlaceholderHeader.domElement.innerHTML = ` 
            <div>  
              <div> 
                 ${escape(topString)} 
              </div>  
            </div>`;
        }
      }
    }

    //Adding bottom footer section

    if (!this._bottomPlaceholderFooter) {

      this._bottomPlaceholderFooter =

        this.context.placeholderProvider.tryCreateContent(

          PlaceholderName.Bottom,

          { onDispose: this._onDispose });

      if (!this._bottomPlaceholderFooter) {

        console.error('Bottom placeholder was not found.');
        return;
      }

      if (this.properties) {
        let bottomString: string = this.properties.Bottom;
        if (!bottomString) {
          bottomString = 'CustomFooter';
        }
        if (this._bottomPlaceholderFooter.domElement) {

          this._bottomPlaceholderFooter.domElement.innerHTML = `  
            <div>               
             <div>  
                ${escape(bottomString)} 
              </div>  
            </div>`;
        }
      }
    }
  }

Step 18

Now we will implement _onDispose() method.

private _onDispose(): void {
    console.log('Header footer disposed');
}

Step 19

Now we will update the serve.json file which is available in the config folder to test our extension. In the server configurations section, update the page URL to your site collection.

Step 20

Now execute the gulp serve command to test and verify your header-footer.

This example will show simple messages. At the top, it will show CustomHeader the top and at the bottom, it will show CustomFooter at the bottom.

Conclusion

Hope this article will helpful for you to create a custom header and footer in modern SharePoint!