Add A Top and Bottom Placeholder Using App Customizer

Introduction

Here, we will learn how we can dynamically modify the SharePoint pages based on the business and functional requirements. In this article, we will dynamically add a header and footer which will render across all the pages in SharePoint Online. For this operation, we have created an application customizer using SharePoint Framework (SPFx).

Follow the below steps to achieve the requirement.

Step 1

Open command prompt in Administrative mode. Go to the corresponding drive where you want to create your project. Then run the command “md testing”.

Add Top and Bottom Placeholder using App Customizer

Step 2

Run the command “cd testing”.

Step 3

Run the command “yo @microsoft/sharepoint”.

Step 4

After performing step3, questions will appear as shown below. So please refer to the below image and create the project as shown.

Step 5

After successful creation of the project, enter the command “code .” to open the project.

Step 6

Open the file “NewElementApplicationCustomizer,ts” by referring to the below image.

Step 7

Copy the code and paste it in “NewElementApplicationCustomizer,ts”.

import {
override
} from '@microsoft/decorators';
import {
Log
} from '@microsoft/sp-core-library';
import {
BaseApplicationCustomizer,
PlaceholderContent,
PlaceholderName
} from '@microsoft/sp-application-base';
import {
Dialog
} from '@microsoft/sp-dialog';
import * asstringsfrom 'NewElementApplicationCustomizerStrings';
constLOG_SOURCE: string = 'NewElementApplicationCustomizer';
exportinterfaceINewElementApplicationCustomizerProperties {
testMessage: string;
}
exportdefaultclassNewElementApplicationCustomizer
extendsBaseApplicationCustomizer < INewElementApplicationCustomizerProperties > {
@override
publiconInit(): Promise < void > {
Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
letmessage: string = this.properties.testMessage;
if (!message) {
message = '(No properties were provided.)';
}
lettopPlaceholder: PlaceholderContent = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top);
letbottomPlaceholder: PlaceholderContent = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom);
topPlaceholder.domElement.innerHTML = '<div><div style="text-align:center;color:blue;font-size:24px"> <b>Top Place Holder </b></div> </div>';
bottomPlaceholder.domElement.innerHTML = '<div><div style="text-align:center;color:blue;font-size:24px"> <b>Bottom Place Holder </b></div> </div>';
returnPromise.resolve();
}
}

Step 8

Open the serve.json file and change the site URL as shown below.

Step 9

Go to the command prompt and run the command “gulp serve”.

Step 10

A page will automatically appear, and the below will be shown, then click on “Load debug Scripts”. Then you can check your site with a header and footer Placeholder. You can also modify that according to your requirement.

Before

After

Conclusion

Using the application customizer, we can add user custom action in the SharePoint online pages. The above-mentioned code is another way to add the placeholder.