Microsoft 365 Community SharePoint, 24 Nov 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using list formatting to improve SharePoint pages library experience for content creators

Description

In this 18-minute developer-focused demo delivered by Chris Kent, find site pages more quickly by using a few atypical and nicely formatted columns for communicating list contents. Start by creating a new view. Expose the Promoted State, Author Byline, and Banner Image columns. Format columns using formatting samples - person-hover-card, image-lightbox and promoted-state-icons from the PnP List Formatting Repo. As well, use icons, counts, colors, and conditions for more clarity. Rearrange columns in view. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on November 24, 2022.

Demo Presenter
• Chris Kent (DMI) | @theChrisKent

Supporting materials
• Repo – PnP List Formatting | https://github.com/pnp/List-Formatting
• Library – Flicon (Fluent UI icon search) | https://flicon.io/
• Sample - Person Hover Card | https://github.com/pnp/List-Formatting/tree/master/column-samples/person-hover-card
• Sample - Image Lightbox | https://github.com/pnp/List-Formatting/tree/master/column-samples/image-lightbox

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

A

Thanksgiving uh from the US, so really just probably David, maybe one or two of the other people on the call Josh is here too, because I have your credit and others there. You go well Happy Thanksgiving all around the world. There you go it's turkey, genocide day here in the U.S. So let's take a look, so we're gonna follow our Traditions I. Think, the third or fourth year in a row. We've done a list formatting demo on Thanksgiving, featuring the uh the turkeys here.

A

So we've got our turkey site, our gobble gobble site, and uh what we're gonna do is we're gonna. Take a look at a couple things. So the turkeys. uh You know, of course, anytime you're trying to prevent a genocide. You're, of course, you're going to use Office 365 to manage that and coordinate your efforts and, of course that's what they're doing so as a part of that they've created various pages over the years. uh You know they've got several different authors doing stuff.

A

uh You know, they've got like pages that do the video thing I think we showed this a couple years ago. Right like this is a list formatting demo and you can go look that up, but one of the things they've found difficult is managing the site pages library right.

A

So this particular site doesn't have a ton, but, as you can imagine some sites, especially when you start mixing the news and Pages all in the same Library here it gets a little nuts right, I'll Zoom that just a little bit there we go so we're going to take a look at a couple of ways to make this slightly better and, of course, we're going to use formatting surprising. Yes, no, not really, all right. Let's go so. We've got this die default. We've got this buy author and it's got this stuff here and that's okay.

A

What we're going to do is we're going to create a whole new view. We'll just call this while we because that's fun all right now. One thing to note is that uh you might think: oh, you know it'd be awesome if I come in here to this tiles, View and then I start editing that right so I come in here and I go to format. My current View and I'll be what I don't get the actual design mode.

A

If I switch the design mode, I don't get my card designer I, don't actually get anything working here. If I try and do the tile format, it just doesn't work. So there's no gallery view customization here in the site: Pages Library, so we cry. We cry we're very sad, but we'll move on from it right, so we're going to find a way to make this a little better. The first thing to note is: there's actually a lot of information in this list that just isn't displayed by default. So first thing we're going to do.

A

Is we're going to go to the show high columns, we're going to add them in here? So here's a few I like I, like the banner image URL like the promoted state. uh Let's see I like the title, because this is lovely the actual file name, but a lot of times. The title is a little more important and, let's say I like the light count and I, usually like the author, by line, where is that there's author byline okay, so we'll just apply that we can add those columns in here there they are all right.

A

So the first one uh is this promoted state right. So for whatever reason uh in their wisdom, they decided that they would distinguish between news and site pages. With this column, the promoted, State and the way it works is it's zero, but it's a site page. It is one when it's an unpublished news page. So it's news, that's in a draft form and it's two when it is news right, so we can use that to do a few things, but that's not very helpful right and telling people like. Oh when it's zero. It's this!

A

That's not great! So, let's do this we're going to format this column and what we're going to do today is we're going to make this Library a little easier to read, but we're also going to take a look at a couple of the ways that I find it easy to work uh when I'm working on new formats right so I'm going to switch to advanced mode. So I can just write this here. Let's make this a little bigger, so we can see what's going on so now, let's be just a little bigger.

A

Even there we go so the first thing we do is we need an Elm type, all right! That's the box that holds things we're going to say it's a div all right and then we're going to say attributes, because the one on the Zero don't mean anything. It would be better if we had an icon instead right. So if we wanted an icon, we could come over here and we say you know what's a good uh page right.

A

So we've got all these Pages I'm on fliken.io and here's one file.aspx sounds great as an icon name. So I can come back here to this guy and I can say boom and if I preview that well now I have an icon not very helpful just yet, but let's make it a little more helpful, uh that's awesome! So we can see it so we're gonna do that with a class and we're just going to say the MS font site of s font size is XXL all right.

A

So, let's preview that there we go now it's a little bigger. We can actually see it very exciting, but let's make that uh you know be a little better. So let's put a title in there, so we have like a tool tip- and this case we'll just put news all right. So now, if we preview that we get that now, that's actually not accurate right, since these are site pages and those are new. So let's make that a little bit conditional.

A

So we do that when we run around an expression, we want to start with equal sign and then we can write an expression. So in this case, we're going to say, if we're going to look at the promoted, State column, I could just say current field because that's when I'm on, but just for clarity, I'm going to say promoted State directly. So we can see what the internal field looks like I'm going to say if it equals zero.

A

Well, then that is when I want you to do that, file aspx right and we want to put that in single quotes and then, if it's not, then I want you to do something else right. So in this case, let's go get another icon and let's head on back over here and let's just search for news and there's one beautiful news, catchy name all right, we'll just paste that in there news now we preview that now we get news here now we're still not a single screen promoted state.

A

So when you want to do that, there's no real switch statement, so we want to do is just Nest your if statement right. So the the way. The if statement works, is here's your condition, followed by a comma. This is the true value, and then this is the false value. So what we want to do is instead of a false value. Now we actually want to put another if statement so we'll just say. If and we'll just repeat our promoted state equals 1 this time.

A

Well, instead of news, we want to do something else, let's put a comma and then we'll add another parenthesis here to show our nested. Let's go back to our I, don't know we're just going to grab just for Simplicity the news search just to have a slightly different icon and we'll just place that in there and now we preview that, and now we can see that now we've got a different icon and that's okay, but I want to repeat this uh same kind of logic right.

A

So one of the things I do is um when you write these kind of. If statements a lot of times, you want to set multiple properties conditionally and there's no real way to set like a variable where I evaluate this just once so, I have to reevaluate that each time I want to set something conditionally so write it once and then cut and paste right.

A

So let's grab this, let's copy that so instead of title, let's just paste this in here and we can say instead of file hpx right, we could do the exact same thing. We could say uh you know site page and they'll come over here. Instead of new search, we're going to say news draft, and then news is fine for that one! Okay! So let's preview that and now we hover over and we get our tool tip all right, so we didn't have to rewrite all that again.

A

We just replaced the true false values and now, if we want to convert this the class right, so maybe we want to do colors or something like that into an expression. We can write an equals stick thing and then we might have wrapped this in quotes.

A

We'll do space because we'll add an extra thing, we're going to say plus to add to our string and let's get rid of that extra equals all right and in this case I want to put a Ms uh font, color Dash and then we're going to determine what that font color is and for us we want to say hey if uh you're the same page, we're gonna, say feed primary and if you're the news in draft we're going to say your neutral primary and then.

A

Finally, if you are actually news, then we're going to say your theme secondary, so you could put in whatever values you wanted there. If you don't want to be theme based, we've got all sorts of other colors for you there you go so there's something nice for us and that's a lot easier to understand uh than just a zero one or two and also gives us something to work with there. Now. One thing I like to do also is: let's save that just so we can see, is I want it to be right, aligned right.

A

So one of the things I like to do is use flexbox and the easiest way to use flexbox on the edge browser right is just go ahead and add a display style of flex.

A

That's not going to change anything just yet, but what I like to do that for is because, when I want to mess with the flex box I hit, uh you know I open my Dev tools here, which we don't need to do a whole lot with them. I know it looks a little scary, but you can click this guy right up here and you click on it. You say: hey you there. You are right, I, don't know! What's going on, that's awesome! uh Let's try that again!

A

Click on the right thing, Okay click on the correct thing, uh let's see as I click on it there. It is okay, so now see how we got this I. Should click on that guy see what this little Flex icon is. You can click that and you can adjust Flex properties here. So I don't have to know all these fancy properties for Flex right, but if I want to just say yeah, can you uh put it over to the right? I can say: uh Flex n!

A

That's how I'm going to do that and you can see it says, justify content Flex end well, I can do that all right, so I come in here and I say justify content and I, say Flex int, I preview that hey it worked so now, I don't need these scary tools anymore, but that's how I figured out how the flexbox would work for me without having to really know Flex box right. So that's great, we'll save that and then we're going to move that over because that's the reason we did.

A

That is because we're going to bring this all the way over, because I don't find this particular thing helpful. This type so I'm going to come in here and I'm going to go to my show, hide columns and I'm going to remove type hit, apply and then I've got my promoted state right up front. You can see the name and I'm actually going to bring title over, because I think title is better than the file name. Let's bring that over like that file name is helpful.

A

It's got these extra Fields, so we don't want to lose it necessarily, but that's important. Okay, so that's cool! So now we've made that a little bit better. Let's go a little further. Shall we I think we shall because um yeah I'm running this thing. So let's take a look at that author byline right, so we've got the Modified by and we've got the created uh information, but a lot of times the modified buy, isn't always the same as the author byline right.

A

You may not always have an author by line, so the author byline refers to. If we look at this page right. This is what happens here so in there, when you add a user here, that's the author byline, which isn't necessarily the person who wrote the article right. It might be your CEO writing his uh weekly blog post, that's really written by his administrative assistant right and published by you, so, but that information is still helpful because that acts as the owner.

A

So what I want to do here is I want to take a look at how we could take an existing sample and kind of apply it here.

A

So we're going to say format that, let's head over to our list, formatting repo and these are organized by column, samples view samples, form, samples and column samples, and these are organized by the column type. This is a person column, so I'm just going to scroll down until these things start to say person on them and let's grab the person hover card and I'm just going to click on the Json file and hit the copy button and come over here and while I don't necessarily know everything it does. I can copy and paste it here.

A

One thing we'll notice is it doesn't really work because, for whatever reason, editor is hard coded in there. That's the modified Buy, so we can hit Ctrl F, because this is the Monaco editor and we can see wherever this is editor and we can do this little drop down. We can replace it with at current field right and we'll just replace that everywhere and I will do some small cleanup to remove that extra square bracket on there and when we've done that we say preview and boom, but there we go now.

A

We've got it's actually pulling in that author by line. The only other thing we want to add here is we don't want to show anything when the author, by line isn't set so we'll just add a style and we'll add a display and we'll say, equals if at current field right, so it has a value, then uh you know, let's do inherit or something like that right, so it just keeps it.

A

Otherwise, let's do none and then let's preview that boom, so we just took a sample, that's meant for something else and we just were able to customize it by only changing a couple things and using that fine to replace. So, let's save that that's helpful and let's do another one here all right. So let's come over here to our Banner image, all right! So we've got this Banner image URL, and so this refers to that image.

A

That's at the very top of the page and the URL is very helpful to have that right, but it'll be much more helpful. We can actually see the image so again, if we head back over here and we'll go back to our column, samples this this column type. If we take a look here, we go to column settings and we hit edit I can't do a lot with it, but it's a hyperlink column right. So it's one of those picture columns.

A

So we come down here. We could find a picture but I actually really like uh this image light box sample. So let's grab the image, light box, click that and we're going to copy this, but this actually is a sample intended for an image column type right. So it's not going to work by default, but we're going to customize it so that it does okay, we'll preview, that it's all broken as expected, because it's trying to pull in from an image type right now.

A

One thing to note is normally you would access the description by saying DSC, but because this is the banner image, no one ever sets that so we'll just get rid of the tooltip. All together now come down here, wherever it says, Source we just want to be current field, because that is the URL and then we'll come down here. We've got it again here and we're going to say all this extra stuff.

A

We don't need that and again we don't need the tooltip, because this will just be the URL, and we preview that now we start to see something a little better all right and in fact we can click it. We can see.

A

This looks a little weird for a second, but that's because uh previously we relied on that sample to size or image for us and so we're just going to size it ourselves by adding a quick thing here, we're going to say style, I'm, going to say Max, height or wax width is 100 all right fit in that tiny little box, and we want to put our Max height also at 100 percent.

A

We like that, how exciting, okay so preview that there we go. So that was the letter. Let's save that get rid of that, because that's messing up some of our spacing, but now we get the banner image. We can actually see that a lot more detail and that's cool. That looks a little better, that also Associates that visually with that page right. So we can begin to see things a little better.

A

So let's bring that let's maybe bring that one back over here, because I think that's more helpful to have here and then let's bring the author by line here also, okay and the last one is this light count all right. So let's do something with the light count. So the light count is not uh likes like everywhere else, because you know the site pages is a silly little Library.

A

uh So what we're going to do here in the light count, is I'm just going to copy and paste um a sample here that I've got so we can wrap this up and I can get to cooking that turkey all right. So, let's preview that and the main thing I want to note here is so this is a quick sample. All it's really doing is adding an icon and it's got two spans, there's an icon and then the actual count of likes.

A

One thing to note is that until someone has liked it the it is a blank value like we saw. So what you want to just do is check if it's a blank value and then show zero right in that case and then, if you're not going to show it or you're going to show a different color like I've done, zero is a valid value right. So if someone unlikes it, so you just want to make sure that you're, not just relying on that same check there, and you want to check if it's greater than zero.

A

Okay. Now again this this wasn't really the point. The point was just to point out that likes are a little bit different. The idea here is just for a few column formats. We could start to see that we can make this a much more usable library right and we can go a lot further by using grouping and some other things we want to do there. uh You know several people like uh family and some other people have put together some pretty cool things.

A

They suggest for your default views and here for authors, to make this a little better and I'm, suggesting that column formatting can go a long way with it as well. Okay, so all that, let's head back to our slides, which are a little less fancy, but still uh still slides. So there we go all right. So a couple reminders the separate types of content: if only there were some way to separate types of content like a Content, I, don't know whatever, but they are denoted by promoted state in the site.

A

Pages Library, so you'll want to use that right and then the gallery view cannot be customized and that light count is not the same as likes elsewhere. So when you go to our sample repo and you're, like oh I, want to apply one of our likes samples to it. It's not going to be the same because we don't get things like like Scotland liked by behind the scenes using the rating stuff. Instead, we get this internal column called likes. So just keep that in mind and then.

A

Lastly, here's a reminder of what those promoted, State values mean and I highly recommend, even if you don't like the icon idea, but finding a way to denote that even if you're grouping by it, you can apply some of those group. Props I always find Icons and colors make it a lot quicker to find stuff. But if you'd rather have the text, I suggest that I I would never suggest showing those zero one and two to authors, though, because that's just as that's just confusing. Okay.

A

So, lastly, are some resources for you to check out on this nice Thanksgiving day and be thankful for these are the three samples we looked at, so you can take a look at those and uh check out that tool if you want to find some icons and, of course, the documentation's there and uh that's it for me- awesome Chris, everybody's happy. So thank you for sharing your amazing list. Formatting Magic.