Microsoft 365 Community Column and view formatting tips, 5 Aug 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started with Microsoft Lists - Templates, formatting and more

Description

In this 18-minute developer-focused demo – are you getting started with Lists? Chris Kent suggests using richly formatted list templates and designers from Microsoft, along with PnP samples. See tips for customizing a newly created list - add/delete and format columns, add and stylize font, set colors, add data. Use Wizards and jump into Advanced mode anytime. Much can be learned from OOB template script and schema. Simpler add date math expressions reviewed as well. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on August 5, 2021.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Icons – Flicon | https://www.flicon.io/
• Documentation - Use column formatting to customize SharePoint | https://aka.ms/spdocs-column-formatting
• Samples - SharePoint List Formatting Samples | https://github.com/pnp/List-Formatting
• Video channel – Microsoft Lists | http://bit.ly/lf-videos

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, I'm chris, all right! Everybody I'd like to remind you all uh that I may not have some fancy animations, but that's you know, that's largely because with great power comes great responsibility, as as uncle ben said, so very important to get that corrected. Now, let's move on here. So let's take a look: let's go to our warrior horses site, there's a jewel! I'm going to drag you over here to the bag.

A

Okay! Now one of the things we're going to talk about is some ways to get started here like how do you dive in? How do you get going right now? It's if you've got an existing list or you know you've seen some samples. Maybe you start there and that's a great way to start, uh but some of the other ways you might want to start are taking a look at what microsoft puts out there.

A

So in this case we're going to add a new list and we're going to add one of these templates right, so the warrior horses they are expanding. They need more warriors. Some of them just keep dying, it's horrible, so they need a recruitment tracker. Now, if you pick these you'll notice got a preview here and you'll see, there's actually quite a bit of formatting right that comes in here. Some of them may not be obvious to you that this is formatted, but because the choices kind of happen automatically now, but this is all formatted.

A

So, let's start with this recruitment tracker we're going to use this template first thing I'll tell you is remove this space all right, make it improvement tracker, so you don't get an ugly url with that percent 20 in we're going to create that and there we go now you can see our url here is beautiful. It has no ugliness in it and then we just plug this to add that space back in bam all right, give it a second there we go so there's a nice fun thing here now.

A

The first thing we want to do is we've got this kind of list going, but we want to come over here and we want to remove a couple of columns that we don't need. For instance, horses do not use phones, you guys may not have done that. uh So nice thing about these templates: is you don't need it get rid of it or add to it right?

A

No big deal I'm going to remove both these phones screen to columns just edit I'm going to delete down here bye and, of course the horses actually have a rule that if you have a linkedin profile, you automatically don't get the job. So we're going to remove that one as well all right there we go beautiful, beautiful now.

A

Of course our positions are going to be very different, so we're going to edit that- and so you see by default I'll- give you kind of this list here now we want to change that to what makes sense for us right, so we would hire some assassins right. We could just type over there hit enter to the next line. You know maybe a battlefield engineer, all right, a lot of a mindless grunt and, of course everyone needs customer support, so keep that. But we don't need any account managers.

A

We just x to delete that now we can set some colors here right, so assassins will make those red bottles of engineers uh orange minus grunts yeah. You could have a nice blue that looks lovely customer support. You get agree all right and we can move these around by just grabbing this little thing here all right and drag them around put them in the order. We want them so very cool. All that now one of the things we can't do yet is edit that icon from here.

A

But if we go ahead and just save our changes, you know, let's add in some data I'm not going to make you watch we type in all of our candidates. Here, there's an edit in grid view here and I haven't have it on another screen. So let me just grab all of that and copy one more down copy over here and I'm gonna just paste it does. Anyone else have this problem with a quick edit. All the time come on come on there.

A

We go okay, so now we'll paste all that in so now, we've got some data in there, so we can start manipulating it right all right now that it's done saving this grid view and see that it's got this stuff here now we mentioned this icon right. What? If we want to change those icons around, because you know check mark for minus grunt that makes zero sense. Let's zoom this just a little bit, so we can see that all right, so we can go into settings.

A

We can format this column and you notice that it's already got uh kind of a design wizard set up here, so we can hit edit styles and we want to change that.

A

We can just click here more styles and then we've got a bunch of options here now, if you don't want one of these icons- and I definitely don't for mine this grunt right- you can use all sorts of icons, but you can't specify them here so to do that, we're going to do is we're going to come in here and we're going to format this column. Now that we've got it set up the way we want, we use the design wizard to get it. It's pretty close to what we want.

A

We go down to advanced mode. We can see what microsoft put together for us by using that little wizard- and this is you- know, lots of fun to look at, but let's a little bigger, we can hit control f to just look for what we're looking for we're gonna look for icon, oh there it is icon name, and so we can do is we can just come over to say flanking?

A

So that's flykn.io you head over there and we're just going to look at uh like the stuff category and we'll say uh you know a mindless grunt right. You can have this defect solid, we'll set this copy to get that name and I'll go back here, and so we can see when position is minus grunt. It's currently, as the accept is the name of the icon, a little bit defect, solid, right, battlefield, engineer. Well, you know why don't we do a construction code?

A

That sounds exciting, so we'll come back here, but you can see the nice thing. Is I'm not really writing a format, I'm just editing one they put together for me. So an assassin yeah drop a blood that makes sense copy that and we'll put that in for the assassin and we'll keep the little mail icon for the uh customer support preview. That looks great now. We've got our nice icons. We didn't really have to do any real formatting right. We just search for icon and there we go. We've got it now.

A

There are some cool things we can do here right. So let's save this off as a view for ourselves. So let's go ahead and save you as and we'll just call this my interviews right. So I'm trying to track what interviews do I have coming up so I'll hit save, and in order to do that right, I might come over here and say: yeah. I only care about the ones where I'm one of the interviewers right. So I don't care about little sebastian or sir horses in the third right.

A

So I can do this filter and you've got this nice little thing here this dynamic at me. I click that, and so it's going to automatically say. Whoever is looking at this view only show the ones where they are inside this group right. So that's really helpful and in fact, I'm going to then sort by the interview date. All right we'll go over to newer, so we can see what entries are coming up all right and then we're going to save this view. Just hit, save you as and say so, that's cool.

A

But what, if I want to you know, have a dynamic filter kind of like I do for interviewers on the interview date. So if I went to here, ah sadly that is not here in this interface, so I have to go kind of old school here, I'm going to edit the current view.

A

We'll see this old screen, I'm not going to really touch anything, but down here to show items only the phone is true. So this is what that did with that at me, we saw so now we're just going to say and the interview date is greater than or equal to right. We can say today, but now we want not just today, we want like the past couple of days as well right, so we're gonna say you know today minus two that sounds good all right.

A

So then we just hit okay, that'll save and now we've got a nice view. All right, that's customized! For that, and one of the cool things is. I can make this a gallery all right, so I pop it over to a gallery. Oh fancy, and now I can save this view again. Let's get a little star there and I save it again to say that when you go to this view it should be the gallery by default. So I'm going to do that and now what?

A

If I want to change this around right, so I can again I can go, get some samples. I can jump in there and start editing that or I can say format current view and you'll see. I've got this nice card designer. Let's start with that, so we start with the card designer the recruiter is always the same guy. We don't want to show that all right, we'll show the candidate name. The position share progress.

A

We don't really care when they applied all right, we'll show all those interviews and we'll make sure we show that nice face in it. So that's pretty cool all right. We can even drag things around so say we care more about progress right, we'll drag that up there and so on. So I've got that kind of where I want it.

A

I can choose to show the column names or not, I'm going to leave them in and hit save looking good, but now I want to change it even more right, so I got it pretty close to where I wanted without having to do a lot of work using their wizard here, but I can jump into advanced mode at any time and again, I've got this giant thing they put together.

A

This is a great place, so, whether it's a gallery or these other formats they kind of put together for you. This is a great place to learn what is available to you, oftentimes things that aren't necessarily even documented yet will be in here. You might see things like these extra classes, so you'll see one of the things that happens is when you click on one of these anywhere. You click. It opens up the item and they're accomplishing that they've got this button elements the very first child element and they're.

A

Just using this class sp card default click button and then we've got the row action. What this does is actually positions a button over the whole thing, so you don't have to do that yourself. You can use this exact same piece here and you could have that you know you could do default click you can do share. You know, launch a flow whatever you want right.

A

So that's pretty neat, but you can also see really cool things like how they're using the colors and so on and they've got all sorts of things for how the columns are laid out. You've got nice things to learn about the metadata, for instance, so we can see. Candidate name is really just the title field that they've changed the display name on, and we can see that here. So no matter what you change, that display name by using this little exclamation point here, we're pulling out the metadata from that column.

A

So we can access things like the display name. That's really cool! Now in this one particular case yeah we don't care. We don't want to show that here all right, so we're going to kill that all right. We just killed that whole thing preview. It hey that's cool right. We come in here and we can see a couple of things like this sp card highlighted content like that's. What's making this slightly bigger and bold we're just going to get rid of that, but we don't need that.

A

We're going to add some styles ourselves right and we're going to say, make the font size, dot, 18, pixels and we'll add uh you got a comma there we'll add our font weight right and we'll put that at say. 600 sounds very exciting, let's see, oh so pretty, but then he is. We can start to customize it. So we kept all the labels for everything else, but we got rid of it for the top all right. We can also see interesting things like this right. Why is this underlined right? So they've got a p tag.

A

They've got a paragraph element and they're saying that's not allowed. This is an example of where sticking out some of these uh things they generate can clue you into things that aren't yet documented, yet aren't necessarily part of the schema and but it also can be helpful to take a look at the schema. So if you've ever wondered what the heck this stupid thing is it's what defines what's allowed here right and it's not stupid.

A

So sorry, all right, we'll just open up a new window, I'm going to open that up, we'll go into the schema and it's cool, so you can actually see what's in here. So this is for the tile view. The main thing we care about, though, is that formatter you can just click. This link it'll. Take you right in so you can see things like. Oh, I can open context menu, that's cool right! Here's all the different things! I could do with that button or here's all the operators right.

A

So all the different expressions and, of course you can check out the documentation, but sometimes this is a much easier way to check these things out. You'll notice, the p tag is missing from the elements. That's the reason for that error. So on you can see all sorts of really interesting things by checking out the schema. So I encourage you to check that out sometime, let's head back in here, look at a couple more items here and so let's go on down. So we're gonna.

A

Take a look at this interviewers right. So we already know this view is, is already filtered to where I am one of the interviewers. I don't really need to see my own face every time right, so I can come down here again. I can do a quick find for interviews.

A

Ors right are so this is where they're displaying right and instead of saying the display name in this case. What? If I want to put other interviewers right, because I don't care about seeing my own self there so now I'll change the label- and you can see here- uh we've got this whole section and nice thing is: you can expand and collapse that right? So, if I just want to remove all of it, I can just do that and get rid of it, but in this case they're going through they're doing some really fancy stuff.

A

So you're looking for some advanced ways to display this stuff check out this little section on how to handle these people with these previous, it's very neat, but we can edit some of that ourselves right.

A

So, let's pull ourselves out so we're going to say uh you know if the length is equal to 1 that just play a line because hey that makes sense right, um because we we're always going to have at least one we know ourselves are going to be in there and the other thing we can do, then, is we come down here to this main display of this object and they're, saying hey if it's over five don't display them, but we can do that exact same thing, except we can also put an or like hey if it's over five or we say the person, iterator dot, email equals.

A

Add me, then don't show it all right.

A

We gotta put that in the right spot, all right ignore that we'll put it up here in the actual uh condition, that's kind of important there we go and we'll preview that there we go so sort of removing a little bit here. We got some weirdness with the name, but the idea here is you can pull yourselves out all right. So now we're just editing this we're starting there. That's really cool and we got one more thing: we're going to do here and that's this interview date right, that's cool! It's got this nice display value.

A

If you haven't seen that yet we'll just scroll up here to where we got the uh interview date right, if you use that display value, that's instead of getting exact date value, you get this nice friendly, looking right so four days from now yesterday, tomorrow, all that kind of stuff. What if we wanted to add a little bit to this?

A

So let's say we want to take this and we want to add a little icon when it's coming up right like when I need to start preparing things I really kind of care about. So one of the things we can do is we can add this lovely thing here where we're going to go in we're going to say instead of text content here, let's, instead we're going to break this up into children all right, so children, children and here so children said you can either have text content or you can have children.

A

That's already say: elm type: uh it will make this a p as well, because that's fun all right, we'll just take our text content which we'll just grab like this and we'll actually just drag it down. So that's nice. Now our text content is a child element instead of being actual part of the the main element, and that allows us to put like another element here, which this case uh we're going to add a span right. So actually, let's make this one a spam 2 just for fun.

A

Time span and in this case we're going to put an icon right, so we can just grab some attributes. I'm just gonna grab those and stick them in there. So you can not watch me type. I can always right click and format. The document ooh fancy all right, so I've got an icon. If we preview that now I got this little icon showing up here right next to our text. We didn't change anything else. So let's add some styles to that.

A

You know make that look a little better style and we'll just add, like a vertical line. It's padding and all those fun things there. We go beautiful again, I'm going to format that document just because I like it there so now that looks good. But again I want to conditionally display that.

A

So traditionally we would write something like display and you added an if statement right. So you hit equals, and you put if we're going to say say like the display value is nothing that we want to do nothing right. We don't want to show it. So if the interview date display value equals nothing, then we'll say none.

A

Otherwise, let's do inline right. So that's one way to do it so now we can make sure we're only showing this if that actually has a date. But what if we want to show it based on time?

A

Well, normally we would do that by adding another condition here, we're going to look at now, so there's an app now we're going to look at that compared to the interview date, and so you might write like number around interview date, new date and then we're going to say you know: minus 1 000 for milliseconds times 60 for seconds times, 60 for minutes times, 24 for that of hours and times seven for our days right and we're going to do all of that and we're going to write it out like that to make it obvious we're trying to say seven days because the giant number's not going to make a lot of sense to us, we're going to say greater than equal to now.

A

So this is kind of a complex way. To do that, you got to write the symptoms correctly. There we go and preview that do we have any that don't have a update. I forgot to test it correctly.

A

All right make myself laugh, okay, but the idea here is you could do this, there's an easier way to do this now, and that's really what I want to show you and that's that we can replace all of this with a nice new operator called add days, so we just put in our whatever date we want to add to so. In this case we're going to say interview date and we're going to say the number of days we want to add in this case we're going to say negative 7.

A

We want to look seven days in the past and then we could preview that right so that one I've messed up the uh but yeah. It is. If you want to study within seven days, you wanna say about five days and so on, and you start seeing those show like that. Okay, all right so ad day, is really helpful and let's wrap up real, quick.

A

Okay, so the idea is to start use. The templates use the designer start with the samples right really dive in that's the best way to learn this stuff, and you can change them you're going to break them, you send them, you go mash them all up.

A

That is the absolute best way to learn this stuff learn what's available um and it's a lot easier than trying to just you know start with empty json, blinking cursor at your screen at you, okay and then there's a couple of easier date, math expressions that were just added- and that's this add days and add minutes, so you just put in a date and it will bring back the date with the appropriate amount of days or minutes added or subtracted so to subtract, just put a negative number in there.

A

Okay and finally, you could always check out the documentation or the samples and there's a all these videos and various demos, and everything is all a nice playlist there for you as well. Alright- and that's all I got for you- that was awesome. Thank you.

A