Navigation Bar In SPFx With Current User Greetings

Here we will see how to create a navigation bar using spfx extension. So let's see how we can achieve this.

md ext2

cd ext2

yo @ microsoft/sharepoint

What is your solution name?: ext2

Which type of client-side como you want to target for your component(s)? SharePoint Online only (latest)

Component to create?: Extension

What is your Application Customizer name? ext2

What is your Application Customizer description? ext description

After the scaffolding run the below command to install the office fabric ui:

npm install @microsoft/sp-office-ui-fabric-core

Then code.

Create a new file named ./src/extensions/ext2/AppCustomizer.module.scss.

Update AppCustomizer.module.scss as follows:

@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';.app {
.top {
height: 60 px;
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;
}.bottom {
height: 40 px;
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;
}
}.topnav {
overflow: hidden;
background - color: black;
}.topnav a {
float: left;
color: #f2f2f2;
text - align: center;
padding: 14 px 16 px;
text - decoration: none;
font - size: 17 px;
}.topnav a: hover {
background - color: #ddd;
color: black;
}.topnav a.active {
background - color: #4CAF50;
color: white;
}

In the Ext2ApplicationCustomizer.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 * as strings from 'Ext2ApplicationCustomizerStrings';
import styles from './AppCustomizer.module.scss';
import {
escape
} from '@microsoft/sp-lodash-subset';
const LOG_SOURCE: string = 'Ext2ApplicationCustomizer';
export interface IExt2ApplicationCustomizerProperties {
Top: string;
Bottom: string;
}
/** A Custom Action which can be run during execution of a Client Side Application */
export default class Ext2ApplicationCustomizer
extends BaseApplicationCustomizer < IExt2ApplicationCustomizerProperties > {
private _bottomPlaceholder: PlaceholderContent | undefined;
@override
public onInit(): Promise < void > {
this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
return Promise.resolve();
}
private _renderPlaceHolders(): void {
const topPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top, {
onDispose: this.onDispose
});
if (!topPlaceholder) {
console.error("The expected placeholder (Top) was not found.");
return;
}
if (topPlaceholder.domElement) {
topPlaceholder.domElement.innerHTML = `
<div class = "${styles.topnav}">
<a class = "${styles.active}" href = "https://dronzer.sharepoint.com/sites/Barcelona/SitePages/Home.aspx">Home</a>
<a href = "https://dronzer.sharepoint.com/sites/Liverpool">News</a>
<a href = "https://dronzer.sharepoint.com/sites/chelsea">About us</a>
<a href = "https://dronzer.sharepoint.com/sites/mancity">Find Mentor</a>
</div>
<span class = "${styles.top}">Hello! ${escape(this.context.pageContext.user.displayName)}</span>
`;
}
// Handling the bottom placeholder
if (!this._bottomPlaceholder) {
this._bottomPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom, {
onDispose: this._onDispose
});
// The extension should not assume that the expected placeholder is available.
if (!this._bottomPlaceholder) {
console.error("The expected placeholder (Bottom) was not found.");
return;
}
if (this.properties) {
let bottomString: string = this.properties.Bottom;
if (!bottomString) {
bottomString = "(Bottom property was not defined.)";
}
if (this._bottomPlaceholder.domElement) {
this._bottomPlaceholder.domElement.innerHTML = `
<div class="${styles.app}">
<div class="${styles.bottom}">
<i aria-hidden="true"></i> ${escape(
bottomString
)}
</div>
</div>`
}
}
}
}
private _onDispose(): void {
console.log('[HelloWorldApplicationCustomizer._onDispose] Disposed custom top and bottom placeholders.');
}
}

Update the serve.json file as

{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"https": true,
"serveConfigurations": {
"default": {
"pageUrl": "enter the site url",
"customActions": {
"716b612c-e184-4ccc-a24e-604a7c837821": {
"location": "ClientSideExtension.ApplicationCustomizer",
"properties": {
"Top": "DRONZER10",
"Bottom": "Nilanjan Mukherjee"
}
}
}
},
"ext2": {
"pageUrl": "enter the site url",
"customActions": {
"716b612c-e184-4ccc-a24e-604a7c837821": {
"location": "ClientSideExtension.ApplicationCustomizer",
"properties": {
"Top": "DRONZER10",
"Bottom": "Nilanjan Mukherjee"
}
}
}
}
}
}

Update the package-solution.json file as

{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "ext-2-client-side-solution",
"id": "8e90fd7b-a799-4834-82c6-d55b530af66c",
"version": "4.0.0.0",
"includeClientSideAssets": true,
"isDomainIsolated": false,
"developer": {
"name": "",
"websiteUrl": "",
"privacyUrl": "",
"termsOfUseUrl": "",
"mpnId": ""
},
"features": [{
"title": "Application Extension - Deployment of custom action.",
"description": "Deploys a custom action with ClientSideComponentId association",
"id": "e53cf4f6-9ca9-4060-8f09-bca3286ecf18",
"version": "1.0.0.0",
"assets": {
"elementManifests": ["elements.xml"]
}
}]
},
"paths": {
"zippedPackage": "solution/ext-2.sppkg"
}
}

Update the elements.xml file as,

<?xml version="1.0" encoding="utf-8"?>
<Elements
xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction
Title="Ext2"
Location="ClientSideExtension.ApplicationCustomizer"
ClientSideComponentId="716b612c-e184-4ccc-a24e-604a7c837821"
ClientSideComponentProperties="{"Top":"DRONZER10","Bottom":"Nilanjan Mukherjee"}"></CustomAction>
</Elements>

You can test the extension in the local workbench using command gulp serve.

For using in sharepoint please package the solution

gulp bundle --ship

gulp package-solution --ship

Under the SharePoint folder find the ext-2.sppkg file. Here you can right click and then click on reveal in file explorer.

Upload the solution in the sharepoint app catalog. From the site content page add the solution. After the solution is added successfully, the extension will be visible in the modern page.

If you do any enhancement in the solution please go to the package-solution.json file and update the version before uploading it to the Sharepoint app catalog.