Last month at the Microsoft Ignite 2017, SharePoint Framework Extensions became GA. It gave us whole new capabilities how we can customize Modern Team sites and Communication sites.

Even though there are lots of PnP examples on SPFx extensions, while presenting at Office 365 Bootcamp, Melbourne and taking hands-on lab, I realised not many people are aware about the new capabilities that SPFx extensions provide. One of the burning question we often get from clients, if we can have custom header, footer and global navigation in the modern sites and the answer is YES. Here is an example where Global Navigation has been derived from Managed Metadata:

Communication Site with header and footer:

Modern Team Site with header and footer (same navigation):

With the latest Yeoman SharePoint generator, along with the SPFx Web Part now we have options to create extensions:

To create header and footer for the modern site, we need to select the Application Customizer extension.

After the solution has been created, one noticeable difference is TenantGlobalNavBarApplicationCustomizer is extending from BaseApplicationCustomizer and not BaseClientSideWebPart.

export default class TenantGlobalNavBarApplicationCustomizer
extends BaseApplicationCustomizer

Basic Header and Footer

Now to create a very basic Application Customizer with header/footer, make sure to import the React, ReactDom, PlaceholderContent and PlaceholderName:

import * as ReactDom from 'react-dom';
import * as React from 'react';
import {
  BaseApplicationCustomizer,
  PlaceholderContent,
  PlaceholderName
} from '@microsoft/sp-application-base';

In the onInit() function, the top(header) and the bottom (footer) placeholders need to be created:

const topPlaceholder =  this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top);
const bottomPlaceholder =  this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom);

Create the appropriate elements for the header and footer:

const topElement =  React.createElement('h1', {}, 'This is Header');
const bottomElement =   React.createElement('h1', {}, 'This is Footer');

Those elements can be render within placeholder domElement:

ReactDom.render(topElement, topPlaceholder.domElement);
ReactDom.render(bottomElement, bottomPlaceholder.domElement);

If you now run the solution:

  • gulp serve –nobrowser
  • Copy the id from src\extensions\.manifest.json file e.g. “7650cbbb-688f-4c62-b5e3-5b3781413223”
  • Open a modern site and append the following URL (change the id as per your solution):
    ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={“7650cbbb-688f-4c62-b5e3-5b3781413223”:{“location”:”ClientSideExtension.ApplicationCustomizer”}}

The above 6 lines code will give the following outcome:

Managed Metadata Navigation

Now back to the first example. That solution has been copied from SPFx Sample and has been updated.

To get the above header and footer:

Go to command line and run

  • npm i
  • gulp serve –nobrowser
  • To see the code running, go to the SharePoint Online Modern site and append the following with the site URL:

    ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={“b1efedb9-b371-4f5c-a90f-3742d1842cf3”:{“location”:”ClientSideExtension.ApplicationCustomizer”,”properties”:{“TopMenuTermSet”:”TopNav”,”BottomMenuTermSet”:”Footer”}}}

Deployment

Create an Office 365 CDN

Update config\write-manifests.json file “cdnBasePath” to the new location. E.g.

"cdnBasePath":"https://publiccdn.sharepointonline.com/<YourTenantName>.sharepoint.com//<YourSiteName>//<YourLibName>/<FoldeNameifAny>"

In the command line, run

  • gulp bundle –ship
  • gulp package-solution –ship

and upload all artefacts from \temp\deploy\ to the CDN location

Upload \sharepoint\solution.sppkg to the App Library

Go to the Modern Site > Site Content > New > App > select and add the app:

Hopefully this post has given an overview how to implement SPFx Application Customizers. There are many samples available in the GitHub SharePoint.

Category:
Office 365, SharePoint, User Experience
Tags:
, , ,

Join the conversation! 9 Comments

  1. […] Global Navigation and Branding for Modern Site using SharePoint Framework Extensions […]

    Reply
  2. […] Global Navigation and Branding for Modern Site using SharePoint Framework Extensions […]

    Reply
  3. Hi Thank you so much for this article. Has this been tested in Modern team sites and communication sites? Is this a details info required to implement global nav across all site collections?

    Reply
    • Hi Prakash, The screenshot in the blog is from modern team site and communication site. So it is a working prototype.
      Here I have shown how to deploy the global nav into one site collection. You can add the app to other site collections to make the nav available.

      Reply
  4. Any idea how to make the footer not to stick to the bottom of the page? Just have a regular end of page footer?

    Reply
    • The header and footer placeholders given by SPFx extensions are sticky. If is must for you to make the footer part of the content, you can dynamically add the footer content as the last div element of

      . This (hack) is not a supported change, so be aware of the risk that this change can be impacted by any future update.
      Reply
  5. It’s not showing up at all?

    I used gulp serve –nobrowser and the CDN / app deployment similar to webparts

    temp/deploy assets are in the cdn hosted in sharepoint like my other working webparts
    app has been added and trusted in appcatalog like my other working webparts

    i used the same url query and adjusted the quotations that were left / right double quotes on the page here with the customActions guid shown in the serve.json – customactions

    my code is exactly the same within the OnInit override function…

    Reply
    • You need to append a URL such as the following to the page you’re on (not within the workbench):

      ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={“c5d41c05-99d1-459a-a9ab-c5d030dbd207”:{“location”:”ClientSideExtension.ApplicationCustomizer”}}

      Then your extension will show up from gulp serve –nobrowser

      customActions GUID is specific to your extension.

      Reply
    • If you open the Developer tools in the browser and refresh the page, do you see any error?

      Reply

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: