Background

One of the things that a lot of us have been missing from classic SharePoint is the page breadcrumbs we used to have. These let us know where we are and how to go up to a more generic place.  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?  It is a document library and it “can” support folders, but it is not really a great idea.  First, the New button is always going to want to create the page in the root of the library. Then there is a weird create, move to the folder where you want it scenario that makes you feel all kinds of wrong.  In Modern SharePoint though, creating pages for news and content is just so easy that I am certain it will be more common than it ever was in Classic, where there was often just a Home Page.

I’ve sensed that many ThreeWill customers are confronted with an organizational challenge. They ask themselves, “How do I stitch together relationships between many pages (hundreds or even thousands)?”  News and Highlighted Content can work for some specific scenarios to roll up pages based on a filter.  However, it tends to be more labor-intensive and is most valuable for showing a parent to child scenario.

Solution

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.  You should be able to clone the repo, run npm install and then run gulp serve.  No SharePoint needed to check it out.  I’m planning on a future post on Mocking SharePoint where I review how I used a Custom Fetch Client to mock SharePoint List Data while changing nothing about how I use the PnP Fluent API calls.

One other note is that as part of this web part development, I decided to do everything using react hooks.  A huge debt of gratitude goes out to Mike Homol whose Function Components and Hooks – Bringing It All Together blog and code were instrumental in me taking to react hooks and moving away from a dependence on Redux.

A huge debt of gratitude goes out to Mike Homol whose Function Components and Hooks – Bringing It All Together blog and code were instrumental in me taking to react hooks and moving away from a dependence on Redux.

Usage

For a page author, the process should be as easy as:

    1. Create a Page
    2. Add the Page Hierarchy web part

    1. Configure it to either show breadcrumbs (ancestors) of this page or children of this page

    1. Configure the Page Property to choose your Parent Page if you have one


In the end, what you enable is something like below.

      • For ancestors, the breadcrumbs automatically show by walking the page relationships from your parent page, to their parent and so on. Now you can navigate up a faux hierarchy of pages easily.
      • If you want to show children, it will figure out all the pages that have chosen your page as their parent so you can navigate down.

What’s Next?

A big reason I open-sourced this sample on sp-dev-fx-webparts is I knew that others might have lots of good ideas for how to extend and improve on my sample.  Just in the time I was writing this, I have had a lot of ideas for various directions we could go with it.

      • Like the News and Highlighted Content web parts, we could support a lot of different layouts that render things as buttons, cards, stacked, with different icons, and so on. Those ideas are limitless for sure.  I anticipated this, so I have a tsx component that is ready to plug in more new controls for different rendering options.
      • Another idea would be to turn this from a web part to an intelligent application extension. This would alleviate the need for users to add a web part to a page and it could simply figure out if a page participates (e.g. has a parent page) and then render breadcrumbs for it.

What about you, do you have any ideas or use cases for this web part?  If so like me know.

Related Content: