Modifying event/calendar list rendering using list formatting

[Music] 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 I showed you here today setting the events list to a modern experience and so on alright that's all I got break whoo 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 good the date with the recurrence and everything else already knows that's a bit of a nightmare anyway yeah yeah 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 [Music]

Channel: Microsoft Community Learning

Views: 5,636

Keywords: SharePoint, Development, PnP, Dev, community, open-source, column, view, formatting, json, no-code

Id: CVg6LcXi-j8

Length: 12min 9sec (729 seconds)

Published: Wed Jul 22 2020