SPFx React Controls – SiteBreadcrumb Control

yo @microsoft/sharepoint

npm install @pnp/spfx-controls-react --save --save-exact

code .

"ControlStrings": "./node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"

Create new folder named components on src/extensions/helloWorld path. Create three new files in that folder:

Open IHelloWorldProps.ts file and create interface for our React component:

import ApplicationCustomizerContext from '@microsoft/sp-application-base/lib/extensibility/ApplicationCustomizerContext';

export interface IHelloWorldProps {
    context: ApplicationCustomizerContext;
}

Open HelloWorld.module.scss file and insert this simple style for our breadcrumb:

.helloWorld {
    background-color: lightblue;
    padding: 5px;
}

Then open HelloWorld.tsx file and create React component class for breadcrumb with render method and SiteBreadcrumb element inside it.

import * as React from 'react';
import styles from './HelloWorld.module.scss';
import { IHelloWorldProps } from './IHelloWorldProps';
import { SiteBreadcrumb } from "@pnp/spfx-controls-react/lib/SiteBreadcrumb";

export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
  public render(): React.ReactElement<IHelloWorldProps> {
    return (
        <div className={ styles.helloWorld }>
            <SiteBreadcrumb context={this.props.context} />
        </div>
    );
  }
}

Open main TypeScript file from src folder where you have class extended from

Add import statement for React, ReactDom and previously created HelloWorld React component.

import * as React from 'react';
import * as ReactDom from 'react-dom';

import HelloWorld from './components/HelloWorld';

Create _topPlaceholder variable and _onDispose function inside class:

private _topPlaceholder: PlaceholderContent | undefined;

private _onDispose(): void {
    console.log('[HelloWorldApplicationCustomizer._onDispose] Disposed custom nav placeholders.');
}

And modify existing onInit() method with searching for Top placeholder and creating React element inside it from previously created React component:

@override
public onInit(): Promise<void> {

    if (!this._topPlaceholder) {
      this._topPlaceholder =
        this.context.placeholderProvider.tryCreateContent(
          PlaceholderName.Top,
          { onDispose: this._onDispose });

      // The extension should not assume that the expected placeholder is available.
      if (!this._topPlaceholder) {
        console.error('The expected placeholder (Top) was not found.');
        return;
      }

      const element: React.ReactElement<IHelloWorldApplicationCustomizerProperties> = React.createElement(
        HelloWorld,
        {
          context: this.context
        }
      );
 
      ReactDom.render(element, this._topPlaceholder.domElement);
    }

    return Promise.resolve();
}

This is all folks. Run next command to serve our breadcrumb SPFx extension:

gulp serve --nobrowser

Go to one of your SharePoint Online modern site and append the following query string:

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"071cbaef-2d2a-4f4a-bd74-cebfc9de7a8a":{"location":"ClientSideExtension.ApplicationCustomizer"}}

[ Complete code on GitHub ]

Cheers!
Gašper Rupnik

{End.}