Application Customizer

What is application customizer and why we use it?
Application customizer is part of the “SharePoint Framework (SPFx) extensions” and replace some methodology to develop SharePoint stuffs such as
1. Adding JavaScript to every page in a site/web
2. Injecting some content (e.g. a mega-menu/global navigation or message bar) into every page
3. Popping up dialog boxes in an integrated way
4. Adding items into certain toolbars/menus in SharePoint
5. Changing the rendering/behavior of a specific field in a list

In other words, SPFx extensions provide the equivalent of CustomActions and JSLink – previous dev approaches which didn’t necessarily translate to modern pages.

SharePoint Framework (SPFx) Extensions are client-side components that run inside the context of a SharePoint page. You can deploy extensions to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.

In this article we will focus on how can we add some customized contents in header and footer portion in modern page.
1. Create a new project directory in your favorite location.
Open Node Command Prompt
Go to Drive where you want to save the Project
D:/
md SharePoint
cd SharePoint
D:\SharePoint> yo @microsoft/sharepoint
2. Provide Solution Name
3. Select Target resource (SharePoint Online, SharePoint 2016 or SharePoint 2019)
4. Select Folder to place the files
5. Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? N
6. Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant ? N
7. Select components to create ? Extension
8.Which type of client-side extension to create ? Application Customizer
9. What is your Application Customizer name? Application-Customizer
10. What is your Application Customizer description? Application-Customizer description
Waiting for some time while the source are downloading

Once all the files are downloaded then below message is display in node command prompt.
###########| .———————————————–.
###/ (##|(@) | Congratulations! |
### ######| \ | Solution application-customizer is created. |
###/ /###| (@) | Run gulp serve to play with it! |
####### ##| / ‘———————————————–‘
### /##|(@)
###########|
**=+####!

D:\SharePoint\Learning\extensions>code . (Will open your code in visual studio code as a default editor.)
Once the code is open in visual studio code then structure should be as below image.
It means that you have successfully created spfx application customizer project.

Let’s Do some code to add the application customizer.
Click on file “ApplicationCustomizerApplicationCustomizer.ts”

Add below code in opened file
import {
BaseApplicationCustomizer,
PlaceholderContent,
PlaceholderName
} from ‘@microsoft/sp-application-base’;

private _topPlaceholder: PlaceholderContent | undefined;
private _bottomPlaceholder: PlaceholderContent | undefined;

Replace Onit() method code with below code in your file.
public onInit(): Promise<void> {
Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
this.context.placeholderProvider.changedEvent.add(this, this._RenderPLaceHolders);
return Promise.resolve();
}

Copy below method and add it in your file after oninit().
private _onDispose(): void {
console.log(‘[ApplicationCustomizerApplicationCustomizer._onDispose] Disposed custom top and bottom placeholders.’);
}

Create a new method _RenderPLaceHolders()
private _RenderPLaceHolders(): void {
// Get top header element from the current context using below code.
if (!this._topPlaceholder) {
this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top,
{
onDispose: this._onDispose });
}
// Get the properties from the current context as below code.
if (this.properties) {
let topString: string = “Top”;
// Check domelement of top header element using below code
if (this._topPlaceholder.domElement) {
//this._topPlaceholder.domElement.innerHTML = ` [Place your HTML here to display in top header]
this._topPlaceholder.domElement.innerHTML = `
<div class=”${styles.app}”>            
<div class=”${styles.top}”>
<i class=”ms-Icon ms-Icon–Info” aria-hidden=”true”></i>
${escape(topString)}            
</div>          
</div>` ;}}}

Create new file with name “applicationCustomizer.module.scss” to add custom css in application & add below code in your new created file.
@import ‘~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss’;
.app {
.top {
height:60px;
text-align:center;
line-height:2.5;
font-weight:bold;
display: flex;
align-items: center;
justify-content: center;
background-color: $ms-color-themePrimary;
color: $ms-color-white;
}
}
import file in ApplicationCustomizerApplicationCustomizer.ts using below line
import styles from ‘./applicationCustomizer.module.scss’;

To debug the program , Set below settings in your project.
Open your serve.json file under config folder from your project structure

Copy guid from the serve.json file and create below url to debug the code.

https://%5BDomainName%5D.sharepoint.com/sites/%5BSiteName%5D/SitePages/Home.aspx?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={“fe03d515-9a9d-4933-97b0-81b1914ce73a”:{“location”:”ClientSideExtension.ApplicationCustomizer”,”properties”:{“testMessage”:”Hello as property!”}}}”

Open Terminal in visual studio code using ctrl+shift+~
run “Gulp clean
run “Gulp Build” to check error
run “Gulp serve –nobrowser

open above Url in browser and you will get below message.

Select Load debug scripts button.
You will get below out put in your site

Same code will apply for the bottom header in SPFx modern site.
Please contact me if have any query or concern.

SharePoint Swagger
🙂 Happy Coding 🙂

Will back soon with field customizer and list view command action button.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.