Microsoft 365 Community Column and view formatting tips, 25 Jun 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Modifying event/calendar list rendering using list formatting

Description

In this 12-minute developer focused demo, Chris Kent reminds us not all pages on a modern site are modern by default and modern pages are not easily customizable, yet we really want to change formatting slightly. See how to create a modern looking Events page using events-format-tiles-only.json (sample found in GitHub view samples gallery). Configure list and tile views - color text, add a hover card/face-pile and/or beautify events list rendering. This PnP Community demo is taken from the bi-weekly Microsoft 365 – General M365 development Special Interest Group (SIG) community call recorded on June 25, 2020

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Use column formatting to customize SharePoint | http://aka.ms/spdocs-column-formatting
• List Formatting Samples | http://aka.ms/list-formatting
• Events Format | https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/events-format
• Demo: SharePoint Lists custom formatting - Hover cards | https://www.youtube.com/watch?v=bO2L3eJoT2Y

Learn more:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos

A

I'm Chris: let's go I'm going to talk about some list, formatting stuff. Now, today we're going to look at our classic warrior horses site right now. Our horses they're, nothing, if not organized right, so they love to schedule their advance in advance and like to let everyone know, what's going on all right, so they're using a modern communication site here, so they've got a page here called horse events right where they've added a few events, just using kind of a standard interface here for modern pages using the events web part. Alright, that's pretty cool.

A

They can see the events and it's it's alright right and when you click on you get this nice little page here, it'll tell you some details, who's. You know who's a one of the attendees and the participants. Here you get a map, it's all nice right and that's cool, but now the horses they've decided they want to change just something small right. They want to change like the category here and they want to make it red or something like that. Now this is a custom web part, so you can't really do anything there.

A

So you can open up SP effects and try and reverse engineer this and do all sorts of crazy stuff. That's a lot of overkill just to get something red or you know, add a custom field say you've got a field like say, public or private. Maybe just want a little icon that says that up here in the top corner, alright something on those lines. Well, so what do we do right? We're like well, this is the list formatting demo, so I guess we're gonna do some list formatting. That makes sense. So we come over here.

A

We want to go back to our actual events, page right. So if we go over to site contents, alright, we go down to our events list we're like oh perfect. We have an events list somewhere on here. There's our events list now. I'll just apply a nice cool, oh yeah! This isn't modern at all. I'm gonna ribbon! What's going on! Oh that's, probably cuz! It's a calendar who cares about that right? Let's switch our view and we'll go over here to like all events, no look! It's still so old I've got no formatting options.

A

What can I do right? So this is where we're gonna take a look and we're gonna go over here to list in our ribbon here. This is classic I'm in it list settings. One of the things you can do is if you go down to advanced settings scroll all the way to the bottom. Here, you'll see this display. You know in the list experience you'll see it says, default experience for the site. This is a dirty.

A

Dirty lie all right, so we're gonna do is we're gonna force it to be the new experience, I'm gonna hit okay here and we'll go back to our events list and you'll see. It still looks like this, but if we go to our all items are all events. Let's see now it looks the modern right now. It looks pretty weird a little wonky here with some stuff here, but now we can work with this alright.

A

So now we can work with our events list, so I'm gonna format I want to change this whole view, because the first thing I want to do is kind of match. This I want to match this look and feel before I start customizing, so I'm gonna form out the current view and for this apparently I had a format ignore them all right, so I'm gonna save now, let's go ahead and grab a format. Now this is coming from a sample from our github repo.

A

You pull this up here we go and this time I'm just gonna grab this form I'm gonna paste in here we'll look at what's actually happening. This is very complicated format. We'll take a look so but I preview that you'll see nothing changes. That's because I've only applied it as tile props. For now so I can switch the tiles view and there we go now. We've got something that looks very much like these events right. So that's great! So that's what this format does and again this is a sample. That's available to you.

A

There's a couple of caveats with it. We'll take a look, but the nice thing is: we've got everything kind of integrated. So if we click on say you know Forster, let's save this. First, all right click on horse party will actually take us to that nice event, page right, so it's still fully integrated here. If we go back here, we could actually hit like add to my calendar right for hope exchange. Apparently, we wanna have that right.

A

We can actually get an ICS file download and if we open that up, we could see, we actually have. You know, give a hook get off right. We've got a roof exchange and we've got it all and I said I'm gonna sand all the event I believe. So there we go. So all that kind of works, and that's great. So, let's take a look. How is this working and what can we do about it? So if we format the current view just to get back on this look going, we can see tile props.

A

There's several samples about tile prompts and we've also done at least two videos on tile props in the past, so check out the YouTube channel for a little more details on that I'm going to skip over some of that and just look at what the format is. So the first thing to note is that if we want to link to that events page, we have to build our link want irritating things.

A

We have no access to the list ID, so we're actually gonna have to grab that and paste that in, if you're looking for that, you can grab that pretty easily off the list settings right. So if we go to our events and we go to our settings, you look up here- it's actually right there. You guys can see that whoo. That's why we can get your let's do it all right.

A

So that's pretty easy way to do that, and if you paste that in here and in the sample it'll just say list, you would just replace it with that that'll get you the nice event page as a link and then down here. We look way down here. We've got our add event icon button. We've got just a link here, so this is using an old school of ICS generator right.

A

So this old OWS SPR DLL I'm sure this is excited that I'm showing a DLL link who doesn't like that all right, the same thing: if we place that gooood link, that's gonna generate an ICS file from our event. So fun fact you can use this outside of format and you can build all sorts of fun things with this link.

A

Okay, so that's how you do that, so that's exciting! Now we can actually change things right. So if we wanted to come up to say where our category is somewhere. So if we come down here, there's category right, maybe we want to change the color right. We talked about red right, so we say MS change instead of neutral, secondary, we'll just make that red, let's preview, that Wow so now we see we can start to format things right.

A

So if I've got extra fields or whatever else I want to do, I can add that end or I can get a little fancier all right. So if I come over here and let's say, I'm gonna grab this other format, I'm gonna grab this pasted in and I'll show you what it does. Oh, that's not very formatted by the way.

A

Doesn't matter, let's preview, that so now there we go now, we've got a nice hover card right. So that's now, we've even improved. Oh no hover cards here, but now we've got hover cards when we've actually done. If you take a look at this format, we've actually taken several cards you're a little weird when you're in the preview mode. There we go I we've actually taken the face, pile sample and we've inserted it inside a custom hovercard.

A

So we can see who's associate with these events, so we even have the the standard hover card events right. So now we can find out more about Dan Gump here all right. We can check them all out and see. What are you doing so now? We've improved things and that's awesome and again, we've got a whole sample on that and this is tough to read but custom card. Props we've got another set of videos on that one sitting is. You can now apply a format inside a custom card.

A

In this case we wanted to show on hover right and then all of this is just the side. Just took the face: pile sample. Pasted it in here and made it slightly larger, that's it so you can do the exact same thing and now, let's see so the other thing we want to take a look at is our ListView still looks like junk right, Oh sad, but we can solve that all with the exact same format, all right.

A

So if we take this format, which now has the hover right, it's got the so make sure I format this document or I grab it there. We go I'll grab that so it's got the hover card. It's got the tile props. We paste this and preview that now we've got a nice view here. All right. We can switch it over to our tiles yeah. We got a nice view. There. We've got our hover, we can do whatever we want right. So we can you start to see. We get a lot of power here.

A

We can truly customize these events, lists which you may have thought we're kind of untouchable because they're not by not by default, modern right. So now you get in there. You can format all sorts of stuff, and it's really super duper exciting. Okay, so let's do a real quick recap on that. We come over here couple things to note with the events list right so again we talked about it's not modern by default, so just follow those steps.

A

I told you here, just set it to the new experience if it still looks classic right after you do that, just refresh the page and should show up obviously on the calendar view, but on all the other views, your calendar view will still work by the way those be classic so I will say: some properties are a little wonky they're, not really wonky. There are reasons for it.

A

So, for instance, there is an actual location field, backing your location, which is nice and the new experience you actually get prompted to put a true location and write.

A

It shows a nice map when you think you could use that information, but because it is a geolocation field, not a location field type, it's not supported and column formatting to pull like the coordinates and other things out on that a couple other things: the workspace, which is where you save like a link, I've, got a meeting, link, say teams or zoom link, and you wanted to put that in there. You can pull that link out by referencing the workspace column, but because it's not Cindy this field type back.

A

You actually can't get the description at least at this time. So that's a bit of a bug will get that addressed hopefully and by we I mean Microsoft. Not me, alright. Again, if you want a true calendar where you really want to customize stuff, you're gonna have to jump over an SPF X, which I believe we've got a few samples over in our repo.

A

For those and one other thing is all-day events or you'll notice that we we did some stuff for all-day events right, we're matching the style for all-day events, we're showing the dates and so on. But there is a kind of a known issue that goes way way back back. Is that your event date and you're in date? Those are the internal fields for the start and end will come back in the local time zone unless that event has been marked as an all-day event, in which case it'll come back as UTC awesome, it's great.

A

It's been around for a long time. That's something you've had to work around before you'll have to work around it here in formatting as well. So don't let that throw you off too much here at Eastern time zone in the United States like I, am right. It's gonna usually be four hours behind, so the Midnight's gonna be come back and it's gonna be able to date before. Okay, alright, here's just a quick reference to those links. Take a look here again we're just using that current web.

A

This is a magic token that just takes wherever our site is and just paste it in there. Then we can reference things like the layouts folder for our events, page I'm, saying what the ICS download we're doing the exact same thing with that current web, and then we've got this all this stuff. You know everything, let's go it in there, and so they would drag it around. Apparently, a PowerPoint.

A

That's why you should present alright final thing so check out our documentation here, there's all sorts of stuff, both on column, formatting, view formatting and again the sample which will be put up there right after this call is the events format so check that out. It's got several kind of advanced things are using the for each to do the face file we're doing some card on hover, we're also doing the tile props and a standard view again. You can gotta go crazy all these formats, but it also has guidance on doing everything.

A

I showed you here today setting the events list to a modern experience and so on. Alright, that's all I got break whoo.

B

Excellent Chris. Thank you for that one. There was a cute question on the on the chat which I can't at least answer, which was that the recurrent meetings apparently would not be visible in the modern UX I. Don't know it might be the case, but we would probably need to double check, but that's a good notice from the chat so and obviously I will see if I can actually report that forward using the Microsoft channels. So I don't know really really.

A

Good the date with the recurrence and everything else already knows: that's a bit of a nightmare anyway, yeah yeah.

B

So one excellent, really really great stuff I wasn't aware of this, so this is awesome and you're educating at least me and clearly many of other people in the chat as well.