Contents
The breadcrumb is built using JSOM but the dependencies to use it are not loaded by default on modern pages. To use JSOM with SPFx solutions you need to explicitly load it first. You can find detailed information about this process in this link.
Obviously, this hierarchy-based paradigm has shifted in Modern SharePoint where sub-sites are generally frowned upon. Now, breadcrumbs do still exist for document libraries, since nesting of folders with documents is probably something we will never escape. But what about Site Pages ?
Why do I need react pages hierarchy SPFX?
I came up with the React Pages Hierarchy SPFx Web Part to provide page authors with a simple web part to support viewing page-to-page relationships. The relationships can be managed through a simple page property that is a self-referencing lookup. To make it easy to understand and test the solution, I have also include mock data.
What do the SPFX extensions do in SharePoint?
The SPFx Extensions are client-side components that run inside the context of the SharePoint and provide the possibility to manipulate the page DOM to add or modify components. In this article I’ll provide you the final solution but I’ll also explain step by step how I migrated the code from the old solution to the SPFx.
Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.
How to control the scope of the Customizer?
You can control the scope by deciding where or how the Application Customizer is registered in your SharePoint tenant. Feature XML based registration of Application Customizer is only supported with web or list level.
How does the SPFX customizer display a banner?
I have a SPFX customizer that displays a banner in the topPlaceholder. When the page loads, if it’s a list, then it performs a calculation and then displays the banner. When I move from one library to another, because the page isn’t performing a full load, I found out I need use the navigatedEvent.