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”.
 
Add Top and Bottom Placeholder using App Customizer
 
Step 3
 
Run the command “yo @microsoft/sharepoint”.
 
Add Top and Bottom Placeholder using App Customizer
 
Step 4
 
After performing step3, questions will appear as shown below. So please refer to the below image and create the project as shown.
 
Add Top and Bottom Placeholder using App Customizer
 
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.
 
Add Top and Bottom Placeholder using App Customizer
 
Step 7
 
Copy the code and paste it in “NewElementApplicationCustomizer,ts”.
  1. import {  
  2.     override  
  3. } from '@microsoft/decorators';  
  4. import {  
  5.     Log  
  6. } from '@microsoft/sp-core-library';  
  7. import {  
  8.     BaseApplicationCustomizer,  
  9.     PlaceholderContent,  
  10.     PlaceholderName  
  11. } from '@microsoft/sp-application-base';  
  12. import {  
  13.     Dialog  
  14. } from '@microsoft/sp-dialog';  
  15. import * asstringsfrom 'NewElementApplicationCustomizerStrings';  
  16. constLOG_SOURCE: string = 'NewElementApplicationCustomizer';  
  17. exportinterfaceINewElementApplicationCustomizerProperties {  
  18.     testMessage: string;  
  19. }  
  20. exportdefaultclassNewElementApplicationCustomizer  
  21. extendsBaseApplicationCustomizer < INewElementApplicationCustomizerProperties > {  
  22.     @override  
  23.     publiconInit(): Promise < void > {  
  24.         Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);  
  25.         letmessage: string = this.properties.testMessage;  
  26.         if (!message) {  
  27.             message = '(No properties were provided.)';  
  28.         }  
  29.         lettopPlaceholder: PlaceholderContent = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top);  
  30.         letbottomPlaceholder: PlaceholderContent = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom);  
  31.         topPlaceholder.domElement.innerHTML = '<div><div style="text-align:center;color:blue;font-size:24px"> <b>Top Place Holder </b></div> </div>';  
  32.         bottomPlaceholder.domElement.innerHTML = '<div><div style="text-align:center;color:blue;font-size:24px"> <b>Bottom Place Holder </b></div> </div>';  
  33.         returnPromise.resolve();  
  34.     }  
  35. }  
Step 8
 
Open the serve.json file and change the site URL as shown below.
 
Add Top and Bottom Placeholder using App Customizer
 
Step 9
 
Go to the command prompt and run the command “gulp serve”.
 
Add Top and Bottom Placeholder using App Customizer
 
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.
 
Add Top and Bottom Placeholder using App Customizer
 
Before
 
Add Top and Bottom Placeholder using App Customizer
 
After
 
Add Top and Bottom Placeholder using App Customizer
 

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.