Microsoft 365 Community SharePoint, 1 Apr 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Lists formatting with header and footer settings

Description

In this 17-minute Developer-focused demo, Chris Kent expands upon a demo delivered in this call on April 1st. In this demo, we are reminded there are layers of formatting options for lists and there is sample code for each layer. Review options for header and footer settings, for groups and entire list, beyond the vanilla capabilities shared previously. Focusing on Collapsed Simple formatting used for Q&A, see usage of groupProps, aggregates, hiding, along with tips on double nesting and more. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on April 1, 2021.

Demo Presenter - Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Documentation - Use column formatting to customize SharePoint | https://aka.ms/spdocs-column-formatting
• Documentation - Use view formatting to customize SharePoint | http://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting
• Repo - SharePoint List Formatting Samples | https://github.com/pnp/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, hello, hello, I'm chris! Let's talk about some cool stuff here, so I've shown uh something like this before, but I think it's important to uh kind of take a look at list formatting, so there's lots of different options in list formatting. We started off with just being able to do columns, and now we can go kind of crazy with all sorts of stuff, which is awesome, but it can be a little confusing if you're, just starting out. So let's take a look at it and we're going to dive into one specific section.

A

So we looked at this before right. You've got this idea of a surface so where your list is going to render whether it's the list view microsoft list web part. um You know mobile app, that kind of thing there's going to be standard, ui elements, there's going to be the headers, the unformatted groups and aggregates row and all those kind of things.

A

That's a standard ui and all this extra stuff that's going to come along then you're going to have your data right, that's just where you know your fields are going to render and, however they normally look and then we can do some actual formatting here and that's those column formats. We can apply those at the field or site column level right to one or more of our columns here and those will just have a nice display.

A

uh We can even do what's called a view format, row class, which is just a simple. We can put an expression and say for every row that matches this expression. You know slap this class on there and that again will play nicely with our column formats, all nice and stacks, or we can go a little crazier. We can use what's called a row formatter where we can control the entire render of the surface row by row right. So we control this whole render.

A

Then it gets applied on each row as it goes with our view formats which are applied at the view level. So you can have multiple per list as you switch between views. Even within the view you can switch to what's called the gallery view and we can control that separately through a tile props format where we can apply this, and these can live simultaneously together, all right and then we have this idea that we can go even a little further and we can get rid of the column header. We can substitute our own right.

A

We can't really customize the call headers. This is a just kind of hacking it in there, but there's also this new stuff.

A

We saw demo by naveed a couple weeks ago, uh which is where you've got uh groups right, so you've got your grouping, you've decided to group by a column and then you've got some aggregates, so you've got a a footer per group that shows the aggregates for that individual group, but you've also got a footer for the entire list, which shows the aggregates what counts, averages sums all that kind of thing across the entire list.

A

So those are some things and now we've got the ability to customize those we can use.

A

What's called group props to kind of customize our header and footer with the individual groups, and then we've got this other guy called the footer formatter, which allows us to touch that kind of aggregate row and both the footer and the aggregates at the bottom, and the footer in the individual groups can be hidden all right and then, of course, we've got our form where you know by default, we've got kind of a standard ui, but we can customize that further our column formats are going to show up there they're going to be translated over, but then we also have control over both the header up at the top here and we control the footer down here and while that's not really formatting, we can control the body layout in terms of sections right.

A

So we've got a detail section, an unnamed section up here and we've got attachments down here with the lines. So there's quite a bit. We can do so. All of that to say, we've got samples and everything else and guidance and multiple videos on each of these areas and a couple weeks ago we look take a look specifically at group, props and kind of that for footer formatter.

A

uh What I want to do so that was done by microsoft, and there was a great presentation check that out on youtube right, that kind of introduced the concepts and kind of the vanilla view. What I want to do is I want to dive a little bit deeper into it kind of look through our options and kind of play and experiment a little with you, okay. So let's take a look at that: let's see we go back to the yeah, all right.

A

We go to our classic war, horse's side we get the vest out get out of here. All right, you know. So we take our look over here now. We've got this faqs list right, pretty common scenario and in fact, we've actually shown this off before with a format. So we applied like a format like this right, which is cool, um and this format is a sample that is available as part of our our github repo, and you can check that out.

A

But what, if we wanted to do something a little more classic like one of the things, people have always been frustrated with with this kind of thing, is I want to collapse these right? For you know, for this case, I've got pretty small answers here, but what if I've got really long ones? I want to collapse that I want to group these by various things. Well, that's what we're going to talk about. Imagine that so, let's take a look at the easiest way to accomplish that. So I've got this collapsed. Simple.

A

I've got the title field which I've just renamed a question, and I've got a multi-text field called answer, and what I want to do is I want to apply some grouping and some formatting to that now. One of the things that can be frustrating is there's not a group by option for the title field, so we've got to go to our list settings and go old school view settings.

A

So if we scroll all the way down, we find our collapsed simple view. Some of you are having ptsd just seeing this. So sorry, so sorry, we've come down to group. By now we can select our title field which in this case has been reading into question. So I'm going to select that all that just to get the grouping so now I've got it grouped and that's cool. So now I've got this kind of faq look right. So I've got a question: expanded, hey, there's the answer.

A

It's a little awkward right, so we can do a few things like we could take this, so we could say hide this column right. It still works because it's part of the grouping. So now it's not as awkward. The question isn't repeated inside there, but it's still a little weird that it says question colon. Can I have a hug- and it's always going to say one right, because we always have a one-to-one answer? What if we want to customize that a little further?

A

Well, it wouldn't be a demo if it wasn't possible, so we're gonna format. This current view, in this case we're gonna, go to advanced mode and for this demo I'm just gonna delete the schema just to get it out of the way all right. In this case you know this is a view format. So I could apply all the things I would normally apply, but in this case I'm going to do group props. When I say group props.

A

Now I've got access to a variety of things I can set the header, which is all we're showing here. We don't have any aggregates or anything like that. So I'm going to say, header formatter. I always write header formats, header formatter right, you hit that and then this is just same rules as column formatting here. So I'm saying helm type right in this case we're going to say, div and we're just going to say, text, content right and just for our purpose.

A

We say wow right and look at that now we are controlling that you notice we can't control. uh You know the the carrot that goes up or down here. We don't have any access to that, but everything from the carrot over we can control that experience here, we're just putting text what if we want to put that value like we had before. Well, we have a magic stream called at group which has three different properties on it all right. We have the column, display, name all right and notice.

A

That n is capital, unlike in the body sections, and if we preview that uh well, we have to type it correctly. Apparently you'll see my uh I don't know we'll move on from that that type wrong here. Okay, add group and we'll say uh value or field data, we'll come back to the column, display name in a second preview that there we go so group dot field data is really the one we're after in this case, so group dot field data is going to be just whatever that field is right.

A

So if it's a person field, you'll have access to the sub properties. The same way, you would anywhere else you can say: dot, title dot, email.

A

um If this is say a you know, a currency column or it's a yes, no and you don't want it to say true or false when it's yes, no, you could say display value in this case with with text is gonna, be the exact same, and so it doesn't change anything there, but so, in other words, field data. Consider that a placeholder for whatever your value is so you can do a lot with that right. What if I want some of those other things right, I want to say count.

A

I want to know the number of items displayed there right, that's that one. So I can do all sorts of things with that right. If I want to highlight colors or go crazy that I can but again in this case I just want the field out, I'm just trying to simplify things. So it doesn't say, question with that number.

A

So that looks cool right. Can we go a little further and make this a little better? Well, of course, we can right. So we're going to go up here and we're going to add, add hide column header all right. We're going to add that I'm just going to say true on that, because we don't need this up here right. So, let's preview that bam. That's now gone now. We've got this selection going on here. We don't need that either. So, let's put hide selection.

A

True on that and put a comma preview that sucker and what did I type wrong, I'm having trouble about typing? Okay by the way, whatever the uh someone got in the text, I don't remember what the uh the hide hide, selection or height selector or whatever it is, uh there's a value for that.

A

I will tell you there is a oh. You know what it is. It's it's showing here, there's a bug and that's what it is showing so you'll notice when I hide the selection, which is correct, you see, I have no selection. There is a bug right now. It's submitted on the issues list, we'll see where it goes, whereas as soon as you expand, you now have a selector. So that's a little weird, uh but it's it's. It's still workable here right. So this is pretty good. I'm just gonna save this right and that's cool. Now.

A

I've got a very, very different view. It does not look like a standard list view and I can even come over to like a page right if I edit this page and I just grab a web part and I'll grab that list web part.

A

You know here I'm going to put it to uh the faq's list, all right, let's edit this thing. So I can pick my view and the view is collapse simple and hit apply right and there we go, and I can you know, take away the command bar. uh You know if I don't want this display fun fact. If I, if I just put a space there, it's no longer going to display right.

A

So now we hit that and I'm going to hit publish, I can't really get rid of the c all, but from there you can imagine you know, especially if I add other things to this right.

A

This is a we've just made basically a little web part or a little application where you can display this stuff, and if you want to put fancier styles on there right, you want to make this a big cool, looking bar right with icons or anything else, all of that's available to you and all of that now can be done with formatting, and you get really that interactive piece. This collapsing expand which we didn't have before.

A

If you combine that with something like the hover cards, you really start getting into a little miniature application here, all right, so that's really cool. Let's go a little further. Shall we yeah? We got five minutes. Why not? So if we take a look, I've got a couple of extra columns on here, so this is just a standard non-grouped view of the same faq's list right. I've got a ratings column and a really important.

A

This one just has a simple column format, just to show that that's going to be respected with our grouping all right. So in this case I'm going to group by really important right. So now you have the node. I got the yes, and in this case I want to add some of those total columns.

A

So I'm going to add a total of let's see on the rating, we'll do an average right and we'll just put a count here just so we can see one all right so not on that of totals and we'll just go count right. So now what you'll notice here is every group right has its own uh footer right, which shows the average and the count for that group. This count isn't very accurate because it's uh yeah, it's just counting the yeses right, but then we've got here uh the same thing.

A

We have an aggregate footer on the very bottom, so that's cool right, but what about?

A

uh If we want to change some of that around so let's format this view now in this case, let's target this uh list forward footer at the bottom right now, which only shows up their aggregate row and get rid of all that again. This one is going to be footer formatter and everything go in column. Formatting go here right, so I'm going to say: elm type is div and I'm gonna say text content is, I don't know donkey. That's some kind of lesser horse sounds right, all right, so preview that now here's what's interesting.

A

You notice that it drew it in both spots right, so the footer format formatter, because it's called like row formatter and all the other ones you might expect. I can now control this entire footer row and that's not true, it's more of a template that applies and it will be drawn in the same spot as your original column.

A

So, even if you're coming in here and you're doing something like row, formatter, which we're just going to put some junk here, just to show that that works all right, we'll just put a elm type of div as well, and then we're just saying text content just to show that we're overriding the whole thing is wow.

A

That sounds great okay, so the idea here is, even though I'm controlling the entire render of the row where my footer formats go right here is still going to be in line with those original columns. Even if I hide these columns. So it's just something to keep in mind it's a bit of a limitation in some ways. In other ways, it's really nice not to have to draw those uh where they go all right. So let's get rid of that, though, because that's distracting get rid of that guy.

A

So that's how we can have a footer format, that's beautiful! We can also do something like maybe we just like this is the aggregate value for l cross. Everything is not important to us right, so we want to say hide footer, and we only I'm going to set that to true all right. I'm going to preview that and now we only have the footer for the group right. So that's deet! Now what? If I want to apply a cool format to do some other stuff with it?

A

Well good news: we can I'm going to hurry it up here because we're running out of time, and so, if I grab a footer formatter, I've already got over here on my magic hidden screen all right, I'm just going to grab this and just paste it in here. So I got a footer formatter and we preview that now the only thing it's really doing is it's taking a look at what is called but column aggregate, it's a magic uh string as well. That can only be used inside.

A

uh You know the groupings, so the footers, so we've got add column aggregate you can get the type. So, in this case, I've got an icon based on the type right. If it's count, I'm going to show this, you know oglethorpe this hashtag or if it's you know any other type. I've just shown a calculator, but if I want to go a little crazier, uh we can do that right and I've also got the type uh showing up as a tooltip.

A

And meanwhile I can get the type here, but I've also got the value. So I get the value and of course, if I really want that column display name, I can get that as well. Now you'll notice that this footer was applied, but this footer still looks like the standard. Well, that's! Okay! All we've got to do is get our group props, I'm going to copy this whole thing, I'm going to paste it again, we'll take a look boom, so you'll see I've still got that same thing.

A

We just did with the footer formatter down here, but up here, I've just taken group props and pasted the exact same footer formatter here, except that I changed the font size so preview that, and now you have it so we can specify that for footer format separate from the main footer format, so you can do quite a bit with that which is cool. It's pretty fancy right, all right, one last so we're out of time, so I'm just gonna we'll have to skip the next part.

A

uh There is some uh complications if you're doing a double nesting uh of groups and when you're doing something along those lines. You're gonna want to take a look at that column, display name and maybe set your display to none on multiple elements. So there is a sample for that, but I'm going to skip it in interest of time. So I can just go to the wrap up. Sylvester doesn't uh cry, don't cry! That's it all right!

A

So last little thing here so header, formatter, footer, formatter and then hide footer. That's all within that group props and then you've got the group here uh where you get these various values. uh One thing to note is it is the display name when you pull that out. It is not the internal name. You don't have any access to that right now. That is something I've requested. Hopefully we get that at some point and then, of course, the list footer itself again you've got another footer formatter.

A

So now we've got three different spots to put possible footer formatters, but they are a little different, each spot, so the form the aggregate bar and within the group- and of course you can hide that footer and then you get all the column aggregate information here very exciting stuff and then, of course, there is full documentation on this. In the view, formatting so check that out you'll notice, there is a section in there called aggregates uh where they suggest using the for each uh don't say I can't figure it out.

A

So if anyone else uh wants to figure that- and let me know how that one works- that'd be great, but we've got a ton of samples on this, uh both about view formatting column formatting, but also illustrating how to do the groups from the very simple uh we looked at to some pretty elaborate things where you're doing nested groups and so on. So that's it. That's all. I got excellent. Thank you. Chris.