Articles about European Sharepoint Hosting Service
SharePoint Hosting – 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
@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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
{ "$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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
{ "$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,
|
1 2 3 4 5 6 7 8 9 |
<?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
|
1 2 |
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.
| Print article | This entry was posted by Peter on August 13, 2020 at 8:22 am, and is filed under European SharePoint 2013 Hosting. Follow any responses to this post through RSS 2.0. Both comments and pings are currently closed. |
