SharePoint Hosting – Global Navigation In Modern SharePoint Using SPFx, PnP And Fluent UI

Modern SharePoint architecture gives fantastic OOTB global navigation, and hub site navigation has amazing potential to maintain consistency throughout the portal. Then why do we need to develop custom global navigation in modern SharePoint sites?

Let us talk about the business scenario.

Nowadays, a number of organizations are migrating classic intranet portals to modern sites. Many of them have implemented custom global navigation in a classic environment with a number of links and complex tree structures.

Employees are habitual with this global navigation. So, many organizations prefer similar global navigation in Modern SharePoint sites.

Steps

Configure Terms in Term Stores
Create Solution for Application Customizer
Import Required Packages
Create React Component
Add React Component Reference to Application Customizer
Get Terms using PnP
Render Terms using Command Bar and styling
Test Solution

Step 1 – Configure Terms in Term Store.

Go to URL : https://<TenantName>-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/termStoreAdminCenter

Create Term Group.

Copy Group GUID and Paste it into one document

Create Term Set inside created Term Group

Enable Use Term set for Site Navigation
Copy term Set Id and Paste it in one document.

Create Terms Inside create Term Sets.

Step 2 – Create SPFx Solution for Application Customizer

Open Node command Prompt.

Go to your physical location where you want to create a solution.

Once all required packages are installed then you will get the below message.

open Code in visual studio code by typing below one line code in node command prompt.

The solution structure looks like the ad below,

Step 3 – Import required packages from npm

Install PnP npm package,

Install React Fluent UI Package,

Install react and react Dom and Its Dev Dependencies.

Open package.json file which should look like as below,

package.json

Step 4 – Create React Component

Create new folder called “Components” to “..src\extensions\gobalNavigationBar”.

Create 3 files inside the components folder.

GlobalNav.tsx
IGlobalNavProps.ts
IGlobalNavState.ts

Add below code to IGlobalNavProps.ts

Add below code to IGlobalNavState.ts,

Add below code to IGlobalNav.tsx,

Step 5 – Add React Component Reference to Application Customizer

Open GobalNavigationBarApplicationCustomizer.ts file and add the below code.

GobalNavigationBarApplicationCustomizer.ts

Step 6: Get Terms using PnP

Open GlobalNav.tsx file and do the below changes.

GlobalNav.tsx

Add below references to the file.

<span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span> sp <span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">"@pnp/sp"</span><span class="token punctuation">;</span>
<span class="token keyword module keyword-import">import</span> <span class="token string">"@pnp/sp/taxonomy"</span><span class="token punctuation">;</span>
<span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span> dateAdd<span class="token punctuation">,</span> <span class="token maybe-class-name">PnPClientStorage</span> <span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">"@pnp/common"</span><span class="token punctuation">;</span>
<span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">IOrderedTermInfo</span> <span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">'@pnp/sp/taxonomy'</span><span class="token punctuation">;</span>

<span class="token keyword keyword-const">const</span> myKey<span class="token operator">:</span> string <span class="token operator">=</span> <span class="token string">"navigationElements"</span><span class="token punctuation">;</span>

import { sp } from "@pnp/sp";

import "@pnp/sp/taxonomy";

import { dateAdd, PnPClientStorage } from "@pnp/common";

import { IOrderedTermInfo } from '@pnp/sp/taxonomy';

const myKey: string = "navigationElements";

Update below code to GlobalNav.tsx.

<span class="token keyword keyword-private">private</span> store <span class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">PnPClientStorage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token operator">:</span> <span class="token maybe-class-name">IGlobalNavProps</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
       <span class="token keyword keyword-super">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
       <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
           loading<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
           terms<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
       <span class="token punctuation">}</span>
   <span class="token punctuation">}</span>

private store = new PnPClientStorage();

constructor(props: IGlobalNavProps) {

super(props);

this.state = {

loading: false,

terms: []

}

Update componentdidmount() method with below code in GlobalNav.tsx.

<span class="token keyword keyword-public">public</span> <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword keyword-async">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token comment">// this portion is responsible for getting terms from term store</span>
            <span class="token keyword keyword-const">const</span> cachedTermInfo <span class="token operator">=</span> <span class="token keyword control-flow keyword-await">await</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">store</span><span class="token punctuation">.</span><span class="token property-access">local</span><span class="token punctuation">.</span><span class="token method function property-access">getOrPut</span><span class="token punctuation">(</span>myKey<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
                <span class="token keyword control-flow keyword-return">return</span> sp<span class="token punctuation">.</span><span class="token property-access">termStore</span><span class="token punctuation">.</span><span class="token property-access">groups</span><span class="token punctuation">.</span><span class="token method function property-access">getById</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">termGroupId</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">sets</span><span class="token punctuation">.</span><span class="token method function property-access">getById</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">termSetId</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">getAllChildrenAsOrderedTree</span><span class="token punctuation">(</span><span class="token punctuation">{</span> retrieveProperties<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">dateAdd</span><span class="token punctuation">(</span><span class="token keyword keyword-new">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">"minute"</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword control-flow keyword-if">if</span> <span class="token punctuation">(</span>cachedTermInfo<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>cachedTermInfo<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> terms<span class="token operator">:</span> cachedTermInfo <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

public componentDidMount() {

this.setState({}, async () => {

// this portion is responsible for getting terms from term store

const cachedTermInfo = await this.store.local.getOrPut(myKey, () => {

return sp.termStore.groups.getById(this.props.termGroupId).sets.getById(this.props.termSetId).getAllChildrenAsOrderedTree({ retrieveProperties: true });

}, dateAdd(new Date(), "minute", 10));

if (cachedTermInfo.length > 0) {

console.log(cachedTermInfo);

this.setState({ terms: cachedTermInfo });

}

});

}

Step 7 – Render Terms using Command Bar

Open GlobalNav.tsx file.

Add below code before default class.

Create new method menuItems() in GlobalNav.tsx file.

Update render() method in GlobalNav.tsx file.

Step 8 – Test Solution

Open “../config/serve.json” file and update a couple of properties.

Update pageUrl Property and Properties,

Run below command in Visual Studio Code Terminal.

Copy URL which is highlighted in yellow and paste it into the browser.

Conclusion

We have implemented the SPFx solution and get terms from the term store using PnP and render items in the command bar which is fluent UI control.

SharePoint Hosting – Global Navigation In Modern SharePoint Using SPFx, PnP And Fluent UI

Steps

Conclusion

BLOGROLL

Featured On

SharePoint Hosting – Global Navigation In Modern SharePoint Using SPFx, PnP And Fluent UI

Steps

Conclusion

BLOGROLL

Featured On

Tags