Microsoft 365 Community SharePoint, 22 Apr 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Advanced Page Properties web part solution

Description

During this 13-minute Developer-focused example, Mike Homol opens by showing the capabilities of the normal page properties web part followed by capabilities of the new Advanced Page Properties web part. New properties support theme variants, capsule format for list options, support for image fields, for links, for currency, and for dates. Tour the code for tracking available properties for drop downs, tracking property selections and parameters for refreshing and rendering the data. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on April 22, 2021.

Demo Presenter: Mike Homol (ThreeWill) | @homol

Supporting materials:
• Article - Improving the Page Properties web part | https://techcommunity.microsoft.com/t5/microsoft-365-pnp-blog/improving-the-page-properties-web-part/ba-p/2256651
• Repo - Advanced Page Properties | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-advanced-page-properties

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

I'm mike I'm gonna be showing you guys my advanced page properties. Web part.

A

This is my obligatory credit slide, um but the bottom line is uh I like building things and solving problems uh definitely hit me up on git or twitter.

A

One of the ways that I solve client problems at three will is we do a lot of this digital workplace consulting and a lot of times. That'll start with workshops and oftentimes will end in like full-blown automation, site, template provisioning, and I bring that up because it's a good segue into why I built this web part in the course of these digital workplace journeys. We inevitably end up with a set of pages that have both rich content and rich metadata.

A

um Some of that metadata is going to get used for news and highlighted content, roll ups, or it's just useful for search, and some of it is still going to make sense for display on a page and that's where you know, we might typically use the normal page properties web part, but we've run into a lot of instances where we want to do more and it can display a fair amount of that metadata, but it has some lackings when it comes to different types of data and- and you start to run into things when you realize you want to stretch it a little bit further sharepoint lists, you know, have continued to mature.

A

You know, we've got you know, for instance the the capsule display. You know over time. Things have have just continued to modernize in the lists, but the page properties web part has not so much uh improved over time. It's still got a little bit of that older look, it doesn't react to the theming, especially backgrounds. That's always a big one.

A

It doesn't support, links, currency images and then it has kind of this default behavior for dates and numbers. Not it doesn't necessarily abide by the actual sub properties that you configure it for so you know, like I said, like solving problems like building things, so my way to contribute was to try to take something that might normally look like this and actually address those uh those issues that I mentioned so that I can have something. That looks a little more like that.

A

So let's go ahead and look at it in action.

A

So I've got this employee spotlight page, and this is actually a fairly common. You know page template that uh that we combine with that metadata uh for a lot of customers, so this is a fairly common uh example that we might run into so. I've dropped my web part onto the page, go ahead and name it.

A

So you'll notice uh that out of the gate it it tries very hard to look almost identical to the original part, definitely wanted it to feel familiar, uh maybe slightly different icons, but otherwise everything's just about the same. The big difference is just that. I'm getting more uh properties available to me. uh You know it still does the same old ones like text, and um you know, like a term set, uh that's the usual, but you can see I'm trying to actually style it. A little more.

A

The way uh lists have modernized their displays for multi-choice or term sets, but let's go ahead and try something different like a link.

A

So that's something we couldn't have done previously. Another one would have been. uh Let's say: currency couldn't have done that before, let's see what else we got image is a big one.

A

Let's see what happens there and let's go ahead and add a date like an anniversary date and uh the big difference there is that it's, it is actually abiding by the format that you've even specified in the field as well. So that's kind of the part in action. uh You know the normal stuff is also there. You know I can I can uh I can delete, I can change just the standard. You know functionality that we've had in the past as well. Just does more right.

A

Okay, so I can go ahead and save that and things are looking good. So let's go ahead and look at the code um there's two main concepts. Well, there's there's a number of main commas, but the big thing here is trying to track the available properties for those drop downs and then needing to track each thing that you select or that our users are going to select and you can see that represented in the web.

A

Part properties uh in our selected properties array- and this is just tracking the internal names of the fields that they're going to select and then uh our available properties uh is tracking uh using the drop down option and that's just the uh name value pair right below that. You can see that I'm starting to scaffold the code necessary for tracking the theme when the theme changes and uh the actual variant that needs to get passed down to the component. Big shout out to hugo.

A

uh I essentially followed his blog post on this to the t to get this working and, uh in my blog post on this, I've referenced his as well so- um and you can see you know from the component perspective. uh The web part is taking the selected properties uh that the user selected and our theme variant and passing that down as a as properties for the component.

A

One of the core functions of the web part on the web part side is needing to actually establish what those available properties can be. You can see we're using the pmpjs library to establish uh the fields for site pages.

A

There's a bit of strange alchemy, just below here, where I had to kind of by trial and error start to figure out what properties microsoft was using to determine what goes into that drop down, and that's kind of these. uh The stuff that you see up here in the top part of the condition and then down here, are some uh different types that I've had to exclude for now.

A

Just because I hadn't figured out the right way to display it. Yet so there are. You can already see that there's room for improvement uh in other ways to contribute.

A

The only other thing to point out about the web part is the way that we have to render out the property pane, because that's really the big deal with the web part and everything's governed by what's in the selected properties array so as they add, as they delete we're affecting change on the selected properties array. So you can see that I've got an event handler for when they click delete when they click add we're either pushing uh pulling or or changing an actual value, and that's all against our selected properties.

A

If I go down just a little bit more to where we render out the uh the property pane, you can see again, the selected properties array is being employed where we're looping through that and that's where we're actually pulling in a drop down uh of the available properties and that delete button, and that add button.

A

So, let's jump over to the component itself that the web parts loading out it doesn't have to do that much it's just all.

A

In the logic right, you can see we're using react hooks and the main thing we need uh to track state on is this value page prop values I'll, take a quick detour just to show you that object type, just because it's worth pointing out, because this is really at the heart of it right I at at runtime, I need to know as much metadata about the field itself uh and then I need to be able to capture any and all possible values for that field for the page, so we need to cast the widest net possible, and so it's in any array, oh- and I guess I'll point out too.

A

This is just the standard pmp object for the field information, but that gives us everything that we need uh just below that you can see where I'm setting the theme variant again, uh making use of that all in the display uh at runtime, so refresh properties. This kind of the lifeblood uh function of the component. Again I, like I mentioned we've, got two main things we're trying to get down to and that's uh we need to know all of the actual values for that specific page.

A

In the list, so that's the first thing that we're going to go ahead and grab. We know the selected properties, so we're going to go ahead and make a call using pmp to actually get that list item out and all of the values, regardless of what they are, and then we also need to establish all the metadata for each field so that we can figure out how we're gonna. You know what rules we're gonna employ right.

A

Like I mentioned before, I need to ensure that I'm casting the widest net, so I've gotta make sure that I can convert anything to that any array. So that's kind of you know what's going on here, uh some of the fields based on their type they come down. You know you don't know exactly which way they're going to come down. They could have different properties, they're they're, completely different objects.

A

You got to be prepared for that so, and that includes having to convert it to an array can be a little bit different depending on the type again use effect whenever the property gets changed in the property pane. We're pushing that down to the component and that's going to trigger another refresh of the uh of the display.

A

um The the rendering is a little bit nested. You know as we go down, you know we're we're looping through all of the properties right here and then we're actually displaying all the actual property values based on the property. So that gets us to the main method, which is our render page prop values for display and again it's very reactive.

A

The the whole idea is to just ins, essentially interrogate the type of field it is and use that type to help us determine the ways that we're going to actually display that data, and that includes that could include making entirely different elements on the page or just having different styles.

A

You can even see as we get into something like a daytime display. We might interrogate some of those sub properties uh that you save it, as in the list, that's going to help us know which way to format the date um according to, and I basically I I used the way it gets displayed in the list, as my baseline for how I was going to display it in the uh in the web part and that's essentially it the only other thing again. I'll just point out, you may have already noticed it throughout.

A

You know up here in some of the rendering is, is again we're just interrogating our theme variant uh to decide. um You know, based on uh what's going on behind the scenes which background we should be using, and that's the same here in our main render method.

A

So that's basically the part. I did want to point out that I've already had a number of other ideas, and I wanted to make sure I just threw up this slide for other folks, because I would love to get more contributors and I'd love to continue to grow. This part, like I said we do, use the normal.

A

You know page properties, part on a number of pages still for customers, and they always want to be able to click the capsules uh they kind of they they feel like they should be kind of almost like tags, so I'd love to come up with uh with a solution to actually allow those to actually be clickable and do something with it. uh People fields is the only one that I don't support that the original does so I'd definitely like to get that and I'd love to get any other ideas from the community.

A

So please, if you feel inclined, go out to the get repo of pnp samples and uh if you put in an issue- and that mentioned me- I'd I'd- be happy to help or contribute with you. Thank you again for your time. uh Like I said you can read up on this part on the tech community, blog and.

B

You can access.

A

The code in the pnp samples, repo and please contribute thank you guys.

B

Really fantastic stuff mike. Thank you for sharing that and, uh if folks are interested, you know he's asking for contribution. Help so that'd be a great way if you're looking for a place to contribute and get involved. This seems like a really fantastic.

A