Microsoft 365 Community SharePoint, 29 Oct 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Extending Microsoft Lists templates with View Formatting

Description

In this 9-minute Developer-focused demo, Chris Kent takes the awesome new modern Microsoft List templates and shows viewers how to extend them even further. Specifically, he shows the tiles views – effectively Onboarding Step cards and Planner cards, for 2 View Formatting samples (PnP extensions) – Employee onboarding and Issue Tracker. One may implement the view easily by copying the entire JSON sample file and pasting it in the list Format View’s properties pane. Cards are editable. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on October 15, 2020.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Repo - Issue Tracker: Planner Cards | https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/issue-tracker-planner-cards
• Repo - Employee Onboarding: Steps | https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/employee-onboarding-steps
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 stopper, all right, so we're gonna head over to our warriors site uh and uh the warrior horses are pretty excited about some of the new microsoft list stuff and for those of you who haven't seen it. In addition to be able to go to microsoft, list right and create new list templates everything you can now go right here on your communication or your modern team site, your new list and bam. Look at that.

A

You got that nice interface, where you can still do the the standard list or from excel or copy one. But you also have all these nice templates down here now. We've gone over some of these before, but I wanted to take a look at uh how the horses have chosen to extend these right. So if we do something like the issue tracker, I get a nice little preview here and we're going to go ahead and use that template.

A

Actually, we've already done that, so I'm going to skip hidden use template, but we'll take a look at what the horses have already put together come on over here. We've got an issue tracker here and now this is just the standard issue tracker with some information entered here now, you'll notice, it's got all sorts of formatting applied to it right, so we've got several column formats. Here we even have a view format. That's highlighting any blocked issues here with a nice, pinkish red and that's really cool right.

A

If we want to change some of those, we certainly can or we go to column settings and we can format this column all right, this one's using rules. So we just manage those rules, and so you can see this is the one that's making anything over 30 days. Have this interesting border, an icon, or if we want to change that, you know we can come in here and go more styles right. We switch that icon to a thumbs down right. You can start to do all sorts of cool stuff. Maybe you don't like that?

A

It's on the right we're on the left and that's awesome right. So I didn't have to do anything. I just hit that button to add the issue. Tracker template and I've got all this, and I've got all this really nice formatting, as I add items just show up, and I can quickly customize those right. So even if I want to change it from 30 days, I can hit edit rule, and I can say you know anything over uh 10 days. I want that exciting format right.

A

So I see my 13 day old one is showing there now for this. I want to go ahead and cancel, and so that's really cool, but what if we could take this a little further right? What if we wanted to uh visualize this in a couple different ways, so you can see they've already provided multiple views here, but what? If we want to take this exact view- and we want to look at a little differently? Well, good news.

A

I wasn't just asking that question for no reason if we head over to our sbw list, formatting repo, in our view, samples folder here, if we scroll down, we can actually look for the name of the template in this case issue tracker and we've got this issue tracker planner card sample click on that I'm going to click on this little json file and I'm just going to take all of this stuff scroll down to the very bottom.

A

It's very easy format, I'm going to right click, I'm going to copy that sucker and I'm going to come back here all items I'm going to format the current view right so right now you can see it's got that additional row class here, um which is doing this. Don't worry we're not going to lose that when we come here we're going to paste ours. In fact, if you look at the top got that additional row class here, let me make that a little bigger.

A

So let's see it, we just didn't to a one liner, but it's the exact same thing. So if I hit preview wow, that's great, so what did we really just? Do right so, let's save it! What we did is now we've added a tiles view all right. So if we click over to tiles, we can see this whole thing displayed, and now they imitate planner cards all right. So it's nice to look at the list and see all that, but sometimes it's really nice to be able to see it on a familiar kind of interface.

A

We've got some nice things here with the planner cards right. You can come in here and you've got the kind of little drop down here. So this is demonstrating um the idea of using that hover card to create kind of a contextual menu. All right, so I'm gonna hit the share and we can do all the you gotta hit the stick around with it remember the idea is you can quickly edit these things, so I can just open them, see, what's going on, see the hover cards for individuals right.

A

So if I want to find out more about who it's assigned to, I can get all that. So it's a really nice way to kind of see this issue tracker a whole different way. um It allows us to take the real power of microsoft lists and some of these templates um and extend them with our own formats all right, and we can certainly do that with that one. um But of course you can also do that with any of these columns right.

A

Maybe you like this look, maybe you want to switch over to that face pile. uh You can do that right or maybe you want to take this date, reported and add some coloring on that very easy to do. But the point is these uh list templates?

A

Take you from not just creating a list. They really jump you into some of the the better scenarios with the formatting and everything else, and it's a great way to get going and you can take those p and p samples and go even further.

A

Now I've got another one here uh and I'm going to create it on a different site, so go over to just to sh the new list, or in this case I would just pick the second template employee onboarding, all right that looks lovely, I'm going to use that template and we're just going to call it. Employee onboarding sounds great all right. This is a cool list.

A

uh One of the things I wanted to point out, though, um is it won't be obvious when we look at ours in fact we'll go ahead, and if we look over here- and we come back over to our where the list templates so I'm going to go to employee onboarding right, we've got this nice employee, onboarding list, one of the things you'll notice um is, there is no uh view formatting applied here right. So this is the employee onboarding with content, but you can see it's got.

A

You know some nice column formats on here, like all three of these are custom column formats and that's cool.

A

One of the things I wanted to point out is: if you go to format the current view, you'll actually switch to advanced mode, you'll, see all this gobbledygook right, so it looks like microsoft's still working on some of this believe it or not. This is supposed to be alternating row classes. um It's just fully escaped and they've got a little bit of a problem. Don't worry, it doesn't break anything obviously, and I'm going to show you how we can restore that. So if we go back over here to our employee onboarding we're going.

B

A

Format, the current view go to advanced mode where I've already cleared that out on this one. Now, let's go back to our samples, repo, let's just go back to the root. Now we're going to view samples and again we'll look for the name of the of the template: employee, onboarding we've got the steps format, so click on that json and I'm just going to grab this as well.

A

It's exciting format! Oh, don't forget your last quickly, you'll be sad, all right, we'll copy that we'll come back here, we're going to paste that in and let's uh save that as we can see now, so you can see- we've restored the alternating rows. That's just this simple one liner right here, not simple, but just it's just a one-liner right and that from step back those alternating rows that were intended to be a part of this, but it also adds another tiles view. So if we close this, uh we could switch it over tiles view.

A

So the idea of the employee onboarding right is it steps for a specific employee to do when they first come on board right, so they just got hired and they're. Saying hey before you join right. You need to pledge your undying allegiance right. I think the sample is uh sign your employee contract right and on the first day, you're gonna do these items and week one you're gonna track kind of what you're doing so.

A

It's just a way to make things easier when a new employee comes on board right, so you might spin up this list for them um and fill it out and let them go with it, and this is okay right. This is very even with the cool formats, even with the alternate rows. It's still very excel like right. So if I'm an employee, it's maybe a little bit confusing. So we've got this new tiles view here which helps visualize this a little bit better in terms of steps right.

A

So let's make that a little easier to see right. So the idea with the steps is it's going to show you exactly the number of the step right. So you know exactly where you are in the process, all right, it's color coded based on when you're supposed to complete it and when you complete it all right. So if I click on this guy- and I let's click on a different one here, this will go to number five and I'm just gonna mark that as complete right.

A

So you can see it does this nice overlay makes that much more obvious that that step is complete. Let's turn that off um and again it just provides a completely different way to look at this right again, you still got the uh the people cards and everything else which is cool. So the whole idea here is take these list templates, which are awesome and extend them even further uh to meet whatever your needs. You're doing right. So, let's uh recap here: boom there. It is it's great! You got all these design mode formats.

A

You can really uh kick it off. uh Kick up your list notch right at these templates uh and then once you've customized these. You can actually use your own, uh not as templates, but you can copy from existing. If you want to get these formats copied over as well and then of course, look for more samples, so we've got the two right now which are linked here all right. So if you go to those view, samples you've got the two uh expect to see more of those for these templates.

A

um If you're, looking if you're using these templates and you've got some formats that you've found have made these even better, uh please contribute those. Those are really helpful to everybody and that's all I got.

B

Excellent. Thank you chris remember to reboot your machine. uh We can see that reminder on the on the lower area.

A

Really cool, that's really funny! I don't see it.

B

Anyway, thank you, chris, so really cool, uh really cool, stuff and and shows what you can do without code now it is debatable, is json code or not if you're a developer, it's not code. If you're not a developer, maybe it is code, but it's really cool to see what's possible, natively within within the list. So thank you for that.

B