Microsoft 365 Community Community Demos, 2 Jul 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building modern page hierarchy presentation with SharePoint Framework

Description

In this 14-minute Site Admin focused demo, Bo George introduces viewers to a (SPFx React) Page Hierarchy web part that allows Site Admins to manually define relationships between pages as an alternative to hard-coded links, quick links or a folder defined hierarchy. Behind the scenes in a list, Admins align each page (containing the web part) to a parent page, i.e., home page or other page in the site collection… effectively defining the breadcrumb trail users see on the page. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 2, 2020.

Demo Presenter(s): Bo George (ThreeWill) | @bo_george

Supporting materials:
• Modern SharePoint Page Breadcrumbs Fix | https://threewill.com/modern-sharepoint-page-breadcrumbs-fix/
• React Pages Hierarchy | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-pages-hierarchy

Learn more:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos

A

Enough about me principal consultant, three will and all my contact stuff three wheels gold partner in the southeast. We do collaborative solutions, migrations all that kind of stuff. So today, what am I here for I am too I'm going to talk about another web part. I did react, pages, hierarchy solution and that's the link to where it is in github. So it's already open sourced and available for people to download immediately got a lot of good feedback from everybody in it. So so why did I build that thing?

A

A lot of customers I was talking to you know now in modern SharePoint. We can create so many pages so quickly and easily that we kind of have page for all, sometimes insights and there's always a desire to say well. You know I want to link these things together to sort of navigate within my particular site collection, and you know I want to know where I am in this site. So you know before writing. Code I was like well, I could use the rich text editor and put hyperlinks in there.

A

I could use a quick links web part and link to pages, but those were a little bit brittle. I could get a little smarter and use highlight content to filter child pages based on some attribute, and that would work okay, but then I didn't have like a. Where am I breadcrumb up kind of thing?

A

So you know I was thinking about that and obviously we have mega navigation that it part of its intent is maybe to show a hierarchy sometimes, but it's kind of limited of three levels and some of the customers I was talking to, were you know, seven levels of hierarchy and I was like really so so you know with that and I. Like writing. Code I just made an excuse to create this thing, so so I'm just gonna switch over to show in it, because that's actually what's what's fun and before I show the code.

A

Let me show you what it does so so I've got this spaceship earth site. I just did because I'm kind of a geography, dork and I thought that's a great way to show a hierarchy. So you know I've got earth and then I've got the continents going across the top and just this big old image that I found somewhere and so if I went into North America, you know from the homepage. The hierarchy really starts to show. So you know I've come from home and I'm on North America and then hey.

A

What are the you know the countries that are in North America, so Canada and United, States and so on. So you can kind of you know. You've got your. Where am I and how do I get back up from here and then?

A

What's beneath me in this hierarchy, so I could go to the United States kind of drill in there and you see that I've got all the 50 states each one of these is an aspx page, that's being filtered by my web part and so I think the one I actually puts stuff in is because I live in Georgia. So you know you could drill into Georgia and again your breadcrumb Trail builds out, and you know: I've got my cities in Georgia and I.

A

Think I live in Columbus, there's probably nothing below this one, except for how to get back up from there. So you know no children found and stuff like that. So that's you know. If I go back up to Georgia, you can kind of see the the relationship, so so, what's what's in the web part that makes it do that really really there's when you put the web part on the page, there's just one decision to make.

A

You know what am I rendering am I rendering the ancestor pages who's who's myself and above me, in this hierarchy or am I written during children pages of this one if I switch to it, it's rendering children pages. So you know who has chosen me as a parent and those two relationships drive everything in this webpart and you know not not much else to do it, so it should make it simple for an end user to edit. The other thing that I I did is thinking about responsive.

A

You know we always think about responsive in terms of a device with, but in SharePoint you actually have to think about what column it is. Is it in so if this webpart was in a well, let me click the right place, so they click here. Let's try it talk. If I make this, you know to column or a three column I'm still in the wrong wrong to zone. Let's try this one more time there we go so there it responded. So if I switch to a3, you see things will stack.

A

So this thing will respond not only to the page-width but the particular column, you're in and start doing, wrapping and stuff like that, so you know I. Definitely that was kind of something new to me to to respond to. You know the bounding, rectangle and not just the page, so so there's that and then just to show you in SharePoint a little bit more behind the scenes. So what controls those relationships?

A

When you add this webpart to the first page, so in my QA solution, I use the old elements, XML style, but this one I actually wait till you add it to the page and when you add it to the page, it'll create this column behind the scenes, and so, in that case, in this column, I'll actually do a group by because I think that's a good way to show it. So you can kind of see the relationships that people manage. So all they have to do in the page properties of the web.

A

Part is, you know, say if I'm editing this Albany page I would pick my parent is Georgia and that would establish the relationships and I would follow Georgia's parent all the way up and stuff like that. So you know looking at the home down, you see that North America has picked home as its parent and then in North America. All these pages have picked it as their parent at Canada and stuff, and so relationship management is pretty easy and that thing to to keep track of stuff so that that was the simple part of it.

A

Not not a lot of lists changes and and not a ton of UI stuff, the the other thing that I wanted to show you guys. So when I was developing, this I used a pattern and I'll show the code for this. This might be one of the more interesting things is.

A

You know this is running on localhost and I'm gonna put two copies of this webpart on there just to show you kind of what I do so if I click configure this debug page ID will only show when you're in debug, debug mode, localhost or running the workbench off of the page and SharePoint, and so I'm gonna put the parents ID at one just because I think I have something there for that and I'm gonna pick ancestor pages.

A

So so we see earth and then I'm gonna put this one at one as well and pick children. So so we kind of you know this is debugging in the workbench and I even went so far as to utilize, a query string just for my testing, so I could test this. You know I'll call it headless without SharePoint, so as I click through this I'm passing the debug page ID that I only use in debug mode as well and I could sort of test.

A

This thing you know, without SharePoint at all and I use that using mock data and in a custom, fetch, client and stuff like that, that I can mock all this data to make it look like SharePoint still go through the fluent API as part of PNP, but return data locally. So you know this is kind of it running on localhost as well, just to show you that it works, and so with that I'll kind of switch over to the code to show you what's kind of interesting there. So I've got my tabs across the top.

A

That I I think are most interesting to show you in this the the first one, this use page API, so I've done react without you. First eight and props without a framework, I've done it with redux and Mike Hummel who works at three will did a really good write-up on using react.

A

Hooks and functional components and I really took to his pattern, so this use page API is using react hooks and it's got some of the flavors of Redux in here, so I've got I've got my actions and my action types and my reducers for updating state based on the particular action and then I've got my used page API that everybody calls as well as my collection of ancestor and child pages.

A

Anybody that's done hooks knows how use effect runs. I've got some stuff in here so that it only runs when certain things change and then, of course, I've got. You know my actual API calls.

A

So this is where I call the site pages list and I get my lookups for the parent page and I, build out everything and all that kind of stuff and populate my ancestor and children and then dispatch my actions and so yeah I've got stuff for checking if a page exists and dispatching that one determining if the user can manage the site pages.

A

So that tells me whether or not I can actually create that column in the list for the user when they add the web part to the page, because somebody could edit a page but maybe not necessarily be able to manage, schema and stuff like that. So I deal with that kind of stuff, and so this guy is, is a lot like what I've done in Redux in the past, for my services and and making those available kind of going to the right. The container.

A

It's you know, one of the things I used to love in angular is uh is routing and and redrawing components and all that kind of stuff. So this this isn't routing based on URL changes, but it's routing based on web part config changes. So you know, if I've chosen, to show ancestors then I'm going to render my breadcrumb control if I've chosen to show children I'm going to show a list layout control, otherwise show the thing that says: hey you need to finish doing some work.

A

You know configuration so I've got this thing in here and part of the reason I did this pattern is because I wanted this to be quasi pluggable, where other different layout mechanisms could be used. Maybe buttons and sort of the carrot based breadcrumb are not enough, and so we could have other webpart config options and layout options and choose different controls to render that's really all this guy is good for and, of course, getting all my page state.

A

So looking at one of those that actually the the list layout, you know not anything special in here. The main thing to call out is that I do that get bounding rectangle to tell me how big I need to render am I in a you know, a wide or a three column, or what and all that stuff and then the rest of this is just rendering the HTML really that's. All there is I did use the react, resize detector that helps me know to redraw when people do that stuff.

A

The breadcrumb layout, which I hadn't brought over pretty much the same thing. It looks very similar to the other one, except for it's got a little more logic around a window show Chevron down and Chevron right, based on the width of the zone, you're in and all that kind of stuff, so just UI rendering stuff but I'm going through that stuff.

A

Really quick, because I only have five more minutes and I want to show you a pattern that I've had for a long time that I started with angular that I use for the localhost, so I use the custom. Fetch client that you basically configure so I have a base web part in here and I configure the fetch client factory to my custom, fetch client and then in that fetch client.

A

All it's job is to figure out if I'm, if I'm, using SharePoint, proper or not, and if I am not that I'm gonna mock response data for the P and P fluent API to use so I have a mock, Alice, Factory and I handle the fetch and I manipulate data right. So my mock list Factory here.

A

The only thing that that's important about this to kind of point out is this base list collection right here is where I mock up all of the SharePoint lists and libraries that I want to fake out with arrays, and so you know, I've had projects where I had ten or fifteen related lists with lookups and all that sort of stuff, and so this would be bigger. The rest of this code is pretty boilerplate.

A

It doesn't change it's just it's managing that list data and in particular it's using local storage, so that I could actually do updates to list items and it's a and then I could use the updated list items. So that's what mock list Factory is for the other. Probably this is where my labor of love over you know time has been so. This is where I handle all of those calls and figure out how to craft it up and make it look like what the API, the the PMP API would return to me.

A

So most of these are not used by this particular web part because I'm just really working with list items, but getting a user site users getting the current web attached files. Relative things items context info doing batch calls where you wrap multiple calls in a batch all that stuff I've a long time ago, coded stuff to deal with that, and so that this is what we're all the the workhorse is and then as a consumer.

A

What I do is copy this from project to project and then all I really have to do is create array of items. So this page list is what represents my SharePoint pages. So if you guys kind of remember that localhost one everything is a self referencing lookup, so I have a lookup field and then I have an ID a title of the thing and in this case I'm using for my debug my file, references that that debug page ID. So that's how I was able to drill through those things and then my parent page ID.

A

So these are my lookups and so going this stuff all gets returned through the the mock response and the custom, fetch client and all that stuff, and so, when I use this page, API and I make one of these calls like this in here or or really. More importantly, this call my mock data returns it back through here, so that the items collection, I get here, looks exactly like it would in native SharePoint and that's how I can develop and test without SharePoint at all.

A

So it's been really helpful to me, building that out and being able to test without SharePoint and just fire something up and run it on localhost workbench is great and I love. How easy it is to run that now, with just gulp serve and hanging off a URL, but sometimes you just want to run on localhost too, so so I just wanted to show that and I think.

A

The only thing else I have to show is my last slide just shoutouts to everybody, especially my camels, heroes, SPF RAC react hooks's, where I stole all that stuff for use, page API and then all their community stuff. So that's that's my time. Hopefully everybody enjoy that and certainly can answer questions. If there are some. If we have time.

B

Excellent thanks both really really really cool stuff and a great sample and and and the the way you're handling behind of the scenes. The the mocking and everything this is really really great and highly useful for everybody to take an advantage so Whitaker yeah.

A

At some point, I'd like to turn that into a PNP package, or so I mean a node package or something in PM, but it's just not enough hours. In the day, yeah.

B

It's we need to prioritize our time. I absolutely understand that, but really really cool really creates clarification as well, how it's actually being implemented and the whole functionality is also really cool, so awesome, stuff.