Microsoft 365 Community SharePoint, 4 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: List formatting fundamentals - options and considerations

Description

In this 14-minute Developer-focused demo, Chris Kent shares insights on how not to drown in the sea of list formatting options! He starts with UI fundamentals 101 to illustrate the layered approach to formatting and rendering list data. Making changes in one layer may not translate well to other layers. The complexity reducer is to use “columnFormatterReference” that applies changes across all layers or views. Confidently use PnP list formatting samples. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on March 4, 2021.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting documents:
• Documentation - Use column formatting to customize SharePoint | https://aka.ms/spdocs-column-formatting
• Samples – SharePoint List Formatting Samples | https://github.com/pnp/sp-dev-list-formatting

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

All right, everybody, I'm chris. Let's talk about some list format and stuff right. So the first thing I want to do is kind of talk about formatting in general. Right, so when we say list formatting we mean column formatting, we mean view formatting and we even mean some form customization right. So we can do some things where we can make columns conditionally show or high use the same kind of expression. Syntax.

A

We can add a header and a footer, so we have lots and lots of things we can do and the fact there's even multiple types of view formats. So it can be easy to get kind of lost in a sea of this and there are some things we can do to improve it as we get through that confusion. So let's take a look at what formatting is first, so I've got an exciting.

A

Screenshot of uh you know a pretty basic list on things with uh my warrior horses site, and here you can see, there's a column format everywhere. Let's take a look. What makes that up all right, so the first thing we've got is a surface. So whether that's your list view you're inside microsoft, list you've got it in the list, web part etc.

A

That's here, so then, on top of that, we've got things like kind of a standard ui. So in general it's going to be your headers. If you've got groups, it's going to be various groups in here or aggregate id. You know all these pieces here and then you have your actual data all right. So these are the list items coming back row by row and there's some pretty standard ways these get formatted right. So we've got a uh a multi-person select field.

A

Here you can see kind of the out of the box puts each name on its individual line and so on right. So we've got this as a number column, but it's formatted as a percent. So sharepoint gives us a lot kind of out of the box or microsoft list right. So then, if we want to take that a little further, we can start to apply things called column formats right. So each one of these columns.

A

You can apply this to the individual list field or you can apply it at the site, column level, so that wherever that column shows up it has this fancy format and what that does is it gets applied to every item as each row is rendered right. So as each one hump happens, your format is evaluated and applied, and it's a nice kind of overlay while still giving you that same surface and giving you the standard ui.

A

So you can do your filtering and your sorting and everything else and, as you can see here, I've put a column format on every single column, but you can certainly mix those with kind of the standard and column formats and so on. Okay, now the next layer on top of that is view formats now there's one that plays nicely with all of this and it's kind of a simple one and that's called the row class. So when you apply a view format, you can apply.

A

What's called an additional row class- and here you just provide an expression- and you say whatever my expression is apply a class right. So we could say every row that has assigned to equals to b make it purple in this case right. So now the nice thing with these row classes is you get your standard ui you get all your data flowing through and whether that's got a column format or not. It's just going to kind of sit over on top of that.

A

So all this kind of combines together to create some pretty cool layers and give you a lot of options.

A

Now you can actually go even further than that and that's where you're going to control this entire rendering space and that's a view format. So now this type of view format, unlike the row class, will override everything right. So this is going to override all of your column formats.

A

It's going to write any row classes you want, and it's gonna you're gonna control the entire rendering. Here now you can do cool things here, because this is applied at the view itself. The views themselves can have multiple displays. You can have a gallery style view where you can have both the view format here and what called tile props internally.

A

It's called gallery when you go into the little view menu and you can apply formats there, which is really cool, and even if you want to so, we still got the standard ui here we can go even further and override that standard ui with our own right. So we can now we're doing some fancy things to kind of detect the first item and we're building our own kind of column. So we can move that entirely. So you can see lots of customization options here and you can really layer your views and the nice thing is.

A

These are going to show up on all of these surfaces so and it's going to look the same, whether it's in microsoft lists inside the app or it's in a web part, I'm going to say most of the time 99 of the time it's going to look exactly the same and that's really really powerful. You can do a lot with that, but there are a couple of issues here, so you can see here like in this format.

A

I've taken title right now: I've actually written out the you know title and then I've taken the field values from the title column and I've shown them here and what happens is what, if someone comes along like title? That's not really. You know that doesn't really apply here. Let's call that, like um I don't know standard id or whatever it is right, they rename the title column shock.

A

Why would they do this right and all they've done is they've changed the display name, nothing, but your format breaks, except now it says title, whereas in every other view of this it doesn't say title right, and so that can be a little confusing. So when someone changes, the display name, you've got to go and update all of your view formats where you've overridden that and that could be a real pain.

A

This is especially true in a gallery view where you're definitely not going to have this kind of standard, ui and you're oftentimes kind of putting those labels out there or what, if you've, got another problem right. So I have this really cool column format. If we go back right and it's take all the took all these faces, you know what it put them in nice, little circles and kind of took care of understanding. There was more than you know three here that could display, so it's called the face file and that's cool. What?

A

If I want that to show up in say here right, I want to show up here. Well, traditionally, I've got to go and copy that whole format, and then I've got to nest it inside here and that works, and we've got a few formats that do that. But what, if you've got? You know pretty complex logic, say you're showing an icon based on the status. That also has to look at the completion field right, so it's got various colors and it has icons and it's all pretty complex.

A

And now someone says- and you copy that in multiple view formats and now someone says yeah- we actually want to use. You know icon xyz, instead of icon, yzx right so now, you've got to go and you've got to fix that everywhere and it's very easy to make those mistakes or if they change those colors, and so you get into this kind of layering issue right. So let's take a look at how we can solve that a little bit.

A

So, let's head over to our exciting warrior horses list site now we're gonna go to that same list, and it's almost like. I just screenshotted this thing, so I'm just gonna take this. So this is a standard list. No formats at all are applied right, so we've got that kind of out of the box, rendering and very quickly, I'm going to show you how to apply some formats. All of these are samples that are available, so you could call them settings format this column, all right.

A

You get some options here, I'm going to go to advanced mode and I'm just going to paste once I've got another window all right, so I've got check boxes and let's grab a couple, others these we won't do them all and now we'll go to title all right and we'll advance mode, and here we're crossing things out if they're marked as complete and then we've got a progress field and percentage is okay, but you know we want to show that uh we can just that kind of data bars in this case, I'm actually going to show these data bars, ooh, pretty, yellow and let's just grab one more just for for fun, because this is a complex one.

A

That's that one we mentioned, which is called the face pile again. All of these are samples that are available to you for free, which is not taste like I'm doing so. No, I didn't save on the other one. Today my yellow someone says, yellow I swear. I turned off notifications, but uh I guess I lied so by swearing. I don't know what I've done now: okay, let's preview, that, let's save it, okay, so here's the idea right so now, we've got column formats, that's really cool! All right!

A

If I come here and I create a new view and we'll just call it magical right doesn't matter and we create that- and you can see. Oh I've got other columns that are part of that. So I've got the formats, those all kind of show up here um and that's great right. So let me go back to my all items and that all works now, if I want to apply one of those row class formats we talked about, I would come in here and I would go to format current view.

A

I'm going to go advanced right, just like a paste one in here and in this case let's grab one of these, since I remember which one it is in my little list over here ah and this one yeah. This is also a sample. All these are samples that are available. This is a little weird. Well, if you look right here, it's just look inside the science column and saying hey. If it includes me, then uh you know make it. uh I think it's gonna, be red or yellow, yellow, right and red on hover.

A

So the idea here is: is this beautiful? No, in fact, I would really question whether or not it's a good idea to combine, yellow and yellow here. But the whole point is that I'm able to apply a view, format, custom logic um and samples are available. It's in a github repo, but you don't have to do any kind of fancy coding you just cut and paste okay. So the idea here right is now I've got all these layered and that's really cool, but this applies to a specific view.

A

So if I close that and go back to the new queue, we created magical right- I don't have that anymore, but I could do things like uh format this view and I could set up my you know my own thing right here.

A

So, in this case, I'm just gonna just grab some really exciting format, just to show what we can do so we're overriding the whole thing so, instead of a row class, now we're doing a row formatter and in this case we're just putting a div, and this is a title and then the actual value of the title. So if we preview that wow, what an exciting format, we have many more complicated samples and everything else for that which I encourage you to look at.

A

But what I want to point out here is what we can do so just going to keep it simple is instead of saying title with a colon right. We mentioned this idea of what, if someone comes in here and they, let's save, that they come in here and they say, column settings and they go to you know what is it rename right and they're going to call this? You know my special column right. They name it that oh, no, now we got to go back and we got to update the format here.

A

If we updated it, you know we use title anywhere else and we gotta actually search inside this json that we just cut and paste from github. We didn't think we're. Gonna have to actually touch this stuff. Well, the good news is, we can do fancy things like. Instead of referencing title, we can say exclamation points of the dollar sign grab that internal name of the column dot display.

A

So this is called field metadata, all right.

A

Let's preview, that bam so now by using instead of a dollar sign like we normally do to reference uh internal columns right, we're referencing the field metadata now right now, the only property available in the field metadata is this display name and it is case sensitive. So this is really really cool right. So, if I hit save on that, I come in here and someone says I'm going to rename that again right and they're going to name it.

A

You know horses is that high school horses sure you do all right. They named horses bam. Our format takes care of that which is awesome. So the nice thing with that is now. These formats can apply all over the place right, so I don't need to know anything about this list other than it has a title column, and I don't care what you call your title column. We can now put this same thing everywhere, but what about I had some cool stuff right. I had some displays right in this case.

A

I had this kind of crossed out look. So how do we get that everywhere? Well, good news! I wouldn't have told you all this if there wasn't a way to do that, as so in this case, we're going to remove everything out of this element instead of showing the title value now, we're going to say, column, formatter reference, whoo, very catchy right in this case we're going to use that those brackets with a dollar sign and we're just reference whatever. So in this case, we're going to say title right, so we want.

A

However, the format would be applied to the title field. Put it inside my view, format. Preview. Maybe I didn't do that right. Let me look at that again, uh let's not do title. Let's do a sign too how's that assigned to all right so preview that boom, so we'll just do that so look at this, instead of taking that whole format and sticking inside our view, format and bloating it there and having copied and paste code everywhere, we've got to go update. I can now just simply say hey for this element.

A

The whole thing needs to be just whatever that column format would be normally now, there's some caveats right. You can't uh do some inheritance with some other stuff, but this is huge. So this takes away all of the kind of maintenance and stuff between all of these layers and makes it much easier to kind of open up holes. So if we jump back to our right here, so the idea is here: we're actually opening up holes inside our format.

A

So, instead of this, we cut a hole and we just bring in whatever that format is, for the column right, whether it's the site, column, you've got your complex logic on like say a due date. That's looking at other fields, and you want to put all that in there. Well, you could just sub that out to the column, format that way, it's consistent between all of your views, whether you've applied a view, format or not or you've, got a gallery or not.

A

You've got the same display by using that column, format a reference and in the same regard, if you want to show uh you know certain field names, you can use that display name so huge, huge, huge, it's exciting. So here's that column formula reference again, you give the internal column name and you're going to use that dollar sign. So this is exactly how we reference the value. Normally right.

A

Square bracket, dollar sign another square bracket, internal name right here, but instead all you do is put it inside your squiggly braces column, format of reference with that and bam it works. Now. You can technically use this in your column formats as well.

A

I'm not sure exactly why you would, but I'm sure there are reasons right. If you wanted to wrap all that up so and then next thing is that field metadata right now. It's just that display name thing that might trip you up is that the period goes inside the square brackets and the exclamation point right there instead of a dollar sign, but these are hugely powerful for making your formats, um which can get out of hand a little bit.

A

You know it's easy to get a little complicated there, uh but keep them all consistent between them, while giving that flexibility to really provide that kind of wrapper and outer surface all right, that's it for me all right go ahead and check out our full documentation. Here, someone asked about those samples- uh it's just like this, but instead it's instead of sharepoint gotta update that I'm sure david's pasted the correct link and that's all I got thanks everybody.

A

Thank you. Thank you chris. Like always a great demo.