Microsoft 365 Community SharePoint, 30 Apr 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint Lists custom formatting – Hover cards

Description

In this 18-minute demo delivered by Chris Kent, viewers learn how to take advantage of out-of-the-box hover cards and create custom hover cards in your column or view formatting definitions. This demo is extracted from the bi-weekly Microsoft 365 PnP community – General M365 Developer Special Interest Group (SIG) call recorded April 30, 2020.

⭐ Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:

✅ Formatting Documentation | aka.ms/spdocs-column-formatting
✅ Custom Hover Card | https://github.com/pnp/List-Formatting/tree/master/column-samples/custom-hover-card
✅ Person Hover cards| https://github.com/pnp/List-Formatting/tree/master/column-samples/person-hover-card

📺 All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

❓ Learn more about the Microsoft 365 Platform community at: http://aka.ms/m365/community

A

Let's talk my stuff: okay, all right, so one more classic warrior horses sight and, as we know, the warrior horses love use, formatting to make things a lot better and with that they're very excited about a couple new features we saw a couple of weeks ago saw some of the new hovercard things and I wanted to flesh that out a little bit and show a few the options and show you some of the things you can do with it the ways you might combine those and highlight several of our samples for you.

A

So first, what am I talking about. So if we take a look at something like say our agents list- and we come over here to the agents list and let's zoom- that a bit right, whoa, it's a good zoomin. Okay, so we've got you know our standard list. We've got lots of formats on here over here. We just have our handler list. It's just a single person field, all right! So we're on here right now, because there's no formatting applied right. We get this nice hovercard effect. It's awesome.

A

It's kind of out of the box just works. Now that's great and one of the reason we never applied formatting right is because, when we format this column come over here, so we can see it with advanced mode. If we do anything really right, so we just this case, we're gonna, say it's a div right and I'm gonna say our text. Content is going to be our. You know it's going to equal our at current field.

A

Right then we're gonna, add a I, don't know an exclamation point that sounds exciting right and then we got to close that out. Okay, if I preview, that right no not current field, current field, dot title got a person field. Here there we go all right. So we've just done this, it's very basic format. It's not great! You notice. We suddenly lose all that extra functionality. We just wanted to add that summation point. It's no good!

A

Maybe we went over here to our formatting, repo or I went dark column samples and we come down here to like a person field. Alright, so we've got our person. Let's see round image format all right, so we're just gonna grab that directly I to get home.

A

I'm gonna grab that I'm just gonna copy that, but come back here and I just apply that one all right, even cooler, right, I'm, doing something pretty neat here and I've got a little title that shows it, but I've lost all of that hovercard functionality, which is really really lame. You know- and so some point you may decide- maybe this isn't worth it right, although it looks cool it's better than just the text that we had before.

A

If I don't have all the details to contact them and you know documents they've been working on I, don't really want it. Well, as we saw last week, we can quickly edit that so, if we come over here, we can just add a little something here. I'm just gonna copy see what I got so I grab this just so I can have an updated version of that, so we don't show them when they're not supposed to all right. So if we grab that all you have to do is add this nice, new property or I.

A

Could say default hover field and in this case I might just specify what I feel I want, because I want a person field, I can say at current field all right. That's all I have to do when I preview that now I've got all that functionality back, which is awesome right. So now I can apply these. You know really complicated formats. I can do all sorts of stuff. I can conditionally show this right if I want to do something different besides just showing the picture, but I don't sacrifice all of the awesome out-of-the-box.

A

You know people hovercard formats, so that's really really cool. So we definitely like that all right. So let's take a look here. What else can we do with that right? Can we go a little further sure all right? We don't have to specify the current field. We can do things like you know conditionally show we wanted there right. If we wanted to show the author right, we can reference the author field instead right. So that's the created by let's preview that we'll see how thorough I didn't preview.

A

Those prove that again well, maybe they're the same person in this case, but this is how you reference other fields right, so if you want to get a hover field from somewhere else, so you want to conditionally do that this supports conditional expressions here. So if you wanted to check to say, like you know, if the person's status right, if it contains that we're dead right, then show the Creator whatever else you want to do so, the whole idea is you get a little creative as long as you're specifying the field?

A

That's the key with this one. This is the name of the field you want to do this default hover field with okay, so we can go a little further, even with that. So let's say we're over on our let's go over here to our things list, all right, so that's cool, but what about where we've got this kind of face? Pile we've shown this before this is one of our more complicated formats, because it's using an iterator with the for each right. Can we get that same functionality here?

A

I hope we come in here and we're going to call them settings. We format this column get a little scoot that over a bit all right, you can see and again we've got a whole video series just on this one. Now just a video dedicated to this, which explains the for each and everything else, so I'm going to skip some of that, but the whole idea with the for each is you create these iterators right and these iterators allow us to draw individual pieces here.

A

So if we want to display, you know display a hover card. We can do that. So if we come over here to our multi person face pile, we can add our in our image here. I'll just add it to this element here, so it doesn't have to be the root element. It could be a sub element, and so we'll just add it here. We're gonna do the same thing default hover field, but in this case, instead of specifying an actual field, we're gonna specify it using that iterative logic.

A

So we're gonna, say person iterator, getting this a little more advanced scenario, but I just want to show that it works here, little preview that now we start to see. Even though we've got two different people fields right now, we can see the hover cards for each of them, which is awesome so you're not limited, just a single hover card here you can have multiple other cards in a single format or can imagine in view formatting, you might have multiple different people fields. You want to take advantage of these hover fields right.

A

So that's really really cool. In fact, it's so cool, we'll save that. So now, let's take a look. What else can we do so? I got these default hover field, which is great and again huge leg up from what we used to have. But what about? If we want to do some kind of custom thing right? So, let's head over here where we can up there, let's go over here.

A

We're just got a nice cut, clean area, ish right and we're just gonna grab this random field because it doesn't matter what's in it to us right and we're just gonna see if we could apply some custom formats here, so we're gonna say we're gonna just grab ourselves all right and l-type, we're gonna say that's a div and then we're gonna say you know, attributes, let's make this thing an icon right. So this is an a they don't have horse icons.

A

So I go my next best, one which is the cat which I certainly like right, and in this case that's all we're gonna do right. We just want a cat, I'm gonna preview that and we have a little cat- that's great! Let's, you know change it around just a little bit by an MS I'll, just copy this class over here, I'm gonna, add a color and a size. So that's just with our class attribute here.

A

I want to type that front comma preview that all right so now we've got a nice little cat and that's cool. But if we want to do something a little extra right, we don't just want to apply a hover card which you could we could apply that default hover card. Instead, we have this other option, which is custom card, props and so custom card props has a bunch of sub properties and there are two that are required.

A

The first one is the open on event, so you have to supply this and it has to either be click or hover all lowercase. So in this case we'll do click. Alright, so we'll say, click and then the other required property is formatter alright. So this is just more formats, so formatter can be anything you wanted here now. So it's now we're gonna do the same thing. We're gonna, say an elm type right of the div and we could have all sorts of nested children and all sorts of other things.

A

So in this case we're gonna. You know another add more attributes here: I'm just gonna copy some of these things, so we don't have to type all that from you. Okay, in this case I'm gonna, add my attributes as another cat. We're gonna make it yellow right, we're gonna, make an extra big, very exciting, and then we're going to fix my format.

A

We missing yeah I'll close out before matter and tell you what we're gonna do we're going to grab this little thing because I typed it wrong there. You go three view that so now we have this clique idea right: ooh I, can't the larger cats showing up there. So a couple things we notice is it's way over here to the right right. How can we fix that? What are some our options for us? So we do have several options.

A

The first thing we could do is by default because as a div right, it's taken up the whole space of that column. So we could, you know, be a little more specific. We could add, you know a style of say 24 pixels them like that. Let's just add that here all right, we'll just add that in so now it's gonna be width of 24 pixels and because we're doing a click event, I like to put the cursor to a pointer I, think that's kind of important all right.

A

So, let's preview that I've got a pointer right now, it's right next to it, that's cool! What, if I wanted to make it look a little different like I? Don't want it to the right, you know: I want it down below. So that's kind of the default position. It goes to. We've got a couple other options, so in our custom card crops we can also add this directional hint Ryden by default. The value is right center, but there's a lot of other values right, so we could say bottom center, for instance right.

A

So let's try that comma preview that now, when we click on it, it shows up below all right so centered on our object right. So it's against good that we specify the width here, so the center actually looks correct and it comes down there. Now there is another piece here and there's about 14 different directional hints and we'll go over those in a minute. What all those are, but we can add this beak, so I like that, it's called a beat, is beak, visible, alright and well. This is just a true or false.

A

So, in this case, if by default, that's obviously not there, we preview it whoo, that's exciting, so the beak really just means pointy triangle makes it obvious what the thing is attached to and a couple things with the beak. You can't specify that gap size.

A

So if you're used to this UI fabric call-out element, there is a gap size, it's 8 pixels and it's not customizable right now, and you also, if you said, like an MS, bgcolor will say: magenta sounds exciting, so I'm setting a background, color right, you'll notice, the beak stays white, so the beat color is off customizable. So just keep some of those things in mind all right as you're working through some of this, but that's pretty cool still right, so I can set all these directional hints I can do a little sorts of cool stuff.

A

I can combine these as I needed to right, so if I wanted to even in here for whatever reason, if I wanted to say default, hover field right in this case, I'm gonna say, is the author field I. Just as this is not a person field, let's preview that now, if I click it- oh it's actually showing down there, but it's a little higher one here on the screen, so babe there we go. I can actually combine the two different types of hover cards.

A

Alright and I can go a little crazy with it and in fact you can combine your your own custom cards quite a bit as well, so here I'm, just gonna grab one. So we don't have to watch me type all of this alright. So if I were to bring that over a little bit, let's preview that now I've got my cat right click. It I got another cat, get another cat.

A

I got another cat right leg, go crazy with this, so you go all sorts of places with these different kind of custom bug card crops here and again note that the directional hint is just a hint. That is a key word there right. You see, I've set it here to be on top Center. But if I'm on say this one all right, let's see if we run out of room because we ran out of room, it's gonna automatically position itself and move it over to the right.

A

So they are hints and they're a good way to go, but just keep in mind it's not a guarantee, all right, so cool. So now, let's see maybe a practical use case for some of this all right. Let's set over to our warrior horses site and in the past we've shown off on our document library right. We created this preview field here and all we've done is we've taken a simple column will see there is applied, and this is, if we format this column, we'll see. This is actually our sample.

A

That's available your honor sampler repo. Let's just call our file thumbnail sample, but we can go a little bit. Yeah! That's nice! That's cool! We can see a little preview of the document right, all sorts there's a 270 whatever it is document types, that'll preview and that's cool, but what if we used our custom call-outs to do a little more with right? Let me pull this up here, all right. So let's grab this and let's say custom card props on this guy. All right, so we're just got our custom card props.

A

Let's say open on event in this case, we're gonna, say hover and we're gonna say a directional hint bottom center. We want to show it underneath all right and then, in this case we're just gonna. Add our formatter I.

A

Can add an image here directly, but you'll notice, if I add the image directly, sometimes the previous take a little longer lo, they don't load immediately.

A

They load after the pages, so I'm gonna you a nested div and for that I'm just gonna copy this, because again watching me type, he is fun, but I'll explain what I've done here all right, so you'll notice up here we're using our keyword, app thumbnail medium and we could certainly do an app thumbnail large one of the things that also allows you to do is you could specify maximum sizes and maximum widths and Heights.

A

So I'm saying give me a 500 by 500 image right or up to it's not going to distort it and put that inside a div. That's already 500 pixels cuz again that we have positions correctly. So if we preview that.

A

B

A

We go so, let's come back down here so now we can start to see you have a nice lightbox effect. Maybe it doesn't look all right, so we're gonna sample PowerPoint all right text. We've got a word document and we can go all sorts of different directions with this right. So you can imagine. Maybe we show we show the details of the preview, but we show some of the other properties of the file as well right. We kind of list those out and it becomes a lot better right.

A

It's a lot better than just a got some problems, my thumbnail loading, let's just save and reload that, but it becomes a lot more useful and a lot more functional than just a simple, tiny little icon right by adding these hover cards. We finally have some more interactive type pieces right. So lightbox was one of the original request. A lot of people want to be able do light boxes, and now you can supposedly don't alright. So real quick, I think I'm running out of my time here.

A

Let's wrap it up here so default, however filled so when you do this, this you're specifying the field right, so you grab a column reference. So if you grab it a person field, you don't need to specify any sub properties like you might, because you're just specifying the field, you can add all sorts of conditions in there to make these things as dynamic as you want and again we showed that example of an iterator for multi choice fields, so you can do that and do some pretty awesome stuff.

A

Now, if you specify on the same element, both the default hover field and the custom card props, the custom card props will win. So just keep it in mind. If you want to do something where you know you're kind of combining those out you can we'll skip. That example just use a div that has some children and that applied the different hover cards for your custom card props to the to the children elements, not the parent element itself, all right! That's this and now custom card props, so again open on vent is required.

A

Your formatter is required. You can you click or hover. These are all the directional hints, so they're pretty much the same right, so there's they're gonna line up so bottom center left edge or right edge right.

A

So it's gonna line up on the line or on the other line with the bottoms and the tops you go, these auto edges as well, where you're saying I, don't care which edge you pick it based on the size, that's available, so there's a lot of options here, experiment with those but remember it is a hint and so things will position themselves correctly and you notice, even as things we're changing like size, wise as the image is loaded in you saw the depict a different hint as needed. So it's pretty robust in that way.

A

Alright and, of course, is be visible, adds that nice little triangle which I think is especially helpful. You know when it's not quite obvious, which item you're looking at you've got a fairly complex custom card. Alright. Finally, a couple of resources for you: all of these samples will be updated here that they're already updated. It's going to push it to have examples of all that the last two are a little more detailed. We've got a custom hovercars with default over cards.

A

This is some of what was presented a couple of weeks ago, so check those out. It's awesome what you can do now. You can take your format so much further. With these very exact stuff. That's all I got whoo.

B

Excellent excellent excellent thank you. Chris really really cause some stuff and exciting stuff. It's great to see this level of a no code capabilities within the list and so really really cool stuff.