Microsoft 365 Community Column and view formatting tips, 12 Nov 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Tips and tricks for theme and hover card handling in view formatting

Description

Site color theme is not flowing through to list tiles? Here is the 14-minute Chris Kent developer focused solution to address this requirement. Time to update hardcoded tile coloring in properties. Extend site theming, using theme sensitive classes, to SVG tile elements like box shadows, borders and fill. The trickery – use absolute and relative positioning to control hovercard behavior for parents and children. The solution works in Microsoft Lists, Microsoft Teams, a SharePoint list, and in a Web part. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on November 12, 2020.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Repo - Horse Crests | https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/horse-crests

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: let's do it all right, so we're going to take a look at our classic warrior horses site now, the warrior horses have put together a list to commemorate the great horse families that about the time. So we go check that out right. It's pretty basic list. They've got the name of the family and they've got the history here right now we can make that look a lot better. So let's do that.

A

Let's come here. I've already applied a format that includes a tile props. So if I go to tiles here now, I've got these nice horse, crests beautiful stuff right, so that looks cool and here's a nice tip as well. You notice there's a little star now on all items. So if I were to actually save this view, so I'm just going to hit save on the same one now the tiles view or the gallery view is the default all right. So now and I visit this list. This is what I'm going to see.

A

Instead of that kind of list view and making someone switch to this nice format, I've got all right. Well, let's take a look at this format because there's a couple of issues here and we're going to address, so these are some uh pseudo-advanced scenarios uh that do come up quite a bit, especially with our samples or when you're trying to do certain things. So let's take a look at the first kind of set of problems and that's with theming right. You see here. I've got a nice brown that matches the sight brown.

A

But if I go to change that look I go to theme and I pick let's say you know the classic teal and it's still stuck with that brown right, because I've hard-coded that color in a couple of spots uh but you'll, see it even more. When I switch over to like one of the dark themes like dark, yellow, you'll see that the two shield icons, because I use the appropriate classes, those switch just fine right. The text here switch just fine, but my my box shadow. This is an svg element.

A

That's brown, this underline, for which the border is also brown, not great right. So, let's take a look. How can we address that? So we'll switch it to teal for this this portion here just so, we can see it in action.

A

So if we go in here and we format the current view we'll make this as big as I can. One of the things you'll notice here is: we've got this nice distinction here with layout, so they've actually taken my tile props and broken them out. Even though I pasted a real sample directly from the sample repo right, they broke it out now between list and the gallery view which is nice. I don't have to necessarily manage that in fact, there's a nice uh design mode, I'm gonna go and switch it here.

A

You see, there's a card designer there's some really really cool stuff check that out go play with that, but for this this particular piece here: let's go ahead and paste that sample back in all right, let's preview that so we can see it all right. What I wanted to take a look at here is these colors right. How can we make these work because traditionally we don't necessarily have classes that allow us to do that with the theme colors.

A

Let's start with that box shadow right, so a box shadow right, you normally specify all these properties here and then you've got your color at the end. Now I happen to take the color of brown that I use all over the horse site, which makes sense on the horse site, but when someone else decides they also want to commemorate the great horse families on a non-horse themed site. It doesn't look quite so good right. So how can we do that right? There's no special theme piece I could put in here now.

A

If I pull that off right. So if I just remove that and we preview that right you'll see that now it's kind of the default uh kind of gray, which is okay, but if I really wanted that uh to be that brown color right instead of doing that, I can actually add. So if you take away we'll just do this attributes.

A

And we'll do this yeah right here, so we're going to add a class.

A

B

A

To have the class of ms font color right, we're going to say, theme primary right, so if we preview that you'll notice that actually that, if you do not specify a color as part of box shadow it'll pick up on whatever the uh the text, color is here right. So in this case we do have a way to set that to a theme color. So by doing that now we have a box out of this theme.

A

You know sensitive, in fact, if we let's take a look at that, just a minute at a time right, so that's really cool. So that's a neat trick. We're going to do some similar stuff here right. So that's how we handle box shadow colors. uh What about this border underneath here right?

A

So if we go down here all the way down where we've got our title here, so we just got so that's the formatter all right! We just got this div here the text contents just that title right now. We've got this border bottom, where again we're doing that same brown color here all right- and this is okay. But what if we, you know want to specify that color as well? Well, you can't do that as part of this kind of border property here so we can do. Is we can specify that out separately right?

A

So one of the things we can do is we can add, and if we added a just like before we're going to have the same kind of thing right now that attributes- oh, I can't space it over, we'll just do it manually. There we go make it look pretty all right what we wrote before, which is adding this instead of font color, though right we have this nice border color. So that seems like that should work right, we'll preview, that it didn't work right. It's still that brown.

A

So, let's take the color out just like we did with the box shadow if we preview that still no good, in fact now it's kind of that default black, it's a little hard with the brown and the black. So what we need to do is we actually need to break this out into separate properties. So if we go bottom style, we'll set that to solid and then we'll set.

A

That bigger, so we can see it there, we go border bottom width right so accept these properties individually looks like two pixels all right, and then we don't put a comma on there and we preview that there we go. Look at that, so by not specifying not using that kind of a roll up, css property of border or border bottom. In this case right we were able to specify the color by doing it through the class. Now what if I mean? I don't really like that right. What?

A

If I want that to only show up on hover? Well, we can actually do this nice thing where we go dash, dash hover all right, let's preview that and let's take away, and then we say the uh ms border, color is normally right, we're going to say uh white all right, so there we go now we hover over it. Oh, I got a fancy hover right so which works nice with my hover card there right. So that's pretty cool so again, another way to kind of take advantage of those uh theme colors.

A

Now what about this spg all right! So if we go down here right or up here actually should say we got our svg element, you know all that exciting stuff for the horse right traditionally, you do that with a fill and again I've put that in here. Right so can we do something. You know fancy, yes, is the answer. So let's take a look right. So if we take this, you know you could set fill to red right and that would work as well right.

A

But if I want that to be theme sensitive, let's try and paste one of those classes in here as well. All right, let's bring it over, and this is just for my own. You don't need to format it properly, but I like to okay, we've got our class, so we see a font color theme primary right, so that seems like that would work right that nice deal. So, let's preview that oh we've got to fill in here with reds, let's take phil out entirely sorry phil all right preview that it doesn't work right.

A

It did not pick up on that, so this one has a slightly different trick right. So if we paste fill back in, we actually have to put a little piece in here. We go so fill and we say current color and we say current color and preview that bam. Now it's going to pick up on whatever the font. Color is right. So now we have our nice horse crest and they're all theme sensitive.

A

So I'm going to save that and let's take a look here so if we switch back between the themes, all right, we'll change, the look go to theme. If we go to our horse, we've got our nice. Browns are all working right and we guess all the teal right we've got the green.

A

Even if we go to dark, yellow or you'll notice. Everything now is now theme sensitive awesome, that's really cool. So that's several techniques for that, and then I've got one more little trick here all right. So let's uh not do this dark, yellow whatever this is we'll go back to teal just for fun. Let's say we're.

B

A

Get out of here now, what about you know? This is okay: we've got our custom uh card props right sitting there on that title, which is cool right. It shows this nice thing and that's awesome that we can do that. But what, if we wanted to show it for the whole thing all right, so, let's adjust where we put that.

A

So if we go in here we're going to format the current view, let's scroll down to where those custom card props are so we accomplish custom card props by specifying this element here right we open on hover. We want that little beak, which is that little triangle all right and then we've got our own little formatter, where we can put whatever we want in there. In this case, we've just put a box and we put the history in it right, but we want that to show up on everything.

A

So what if we took? You know our custom card props here we're just going to cut them all right, because you can specify those on any element up here and we say: well we put that on the root element right. So here we've got our root element, which is probably that one, let's see yeah this is this one right, so we put a comma. We paste it in here, so I'm not going to bother fixing that right.

A

But if we preview that it should work on the whole thing right, it doesn't so here's a strange quirk with custom card props. If you have any children inside your element, custom card props will be ignored entirely right, which can be really frustrating, so you might be tempted to put you know, just copy paste. This custom card props on you know the shield on this or if you've got lots of elements.

A

Right so say, you've got an icon and text you're trying to use that as a button for a hover right that quickly gets very, very frustrating. So here's a little trick we're going to show you and that's the idea that instead of doing that, let's undo that all right, let's uh there we go, we got rid of that. We'll get an extra comma there right. So now we don't have our custom card props. But if we have this root element here,.

B

A

And we set the position of it to relative. We can go down into its children, so it's children all right. We go down here and we can add another child so right here I had one this one, we're just going to add. Basically a dummy element right. So let's do this and let's say all right, elm type and we're going to say it's a div because we don't really care and the only thing we really care about here is we're going to put those custom card props in there right.

A

But in order to make that work, we need some styles because we don't want just an extra box at the bottom right so style. Let's add that here and in this case we're going to set its position.

A

To absolute, which means we just want it to be over top of everything right, but in order to do that, we're going to set its top to zero we're going to set its left to zero and when I said it's right, zero- and I bet you can guess where we're gonna set the bottom two, that's right, zero bam right. So we do that and if we preview that.

A

Now we put this element that we've put as zero: zero zero zero all around it. So it's hovered over. It's there's nothing inside of it right, but it's hovered over the whole thing. So now we can put that hover card over all of the card which is really cool. So again, if you've got an icon, you got text. You know, you've got something a little more complex than a single element.

A

This is the kind of technique you use, wrap them up in a relative container and then stick them next to each other right here, like that again check out the sample to see how that all worked all right. So there we go very exciting. Let's take a look at a review and I'll hand this over to someone else, all right, so theming tricks that box shadow, remove that color from the property and then you can use those theme colors for font color as needed right.

A

So there's theme primary theme secondary ordinary tertiary there's, a whole bunch of them. You can check those out on the ui fluent site or fluent ui site. All right for svg fills like we talked about. You got to use this current color for the fill and then it'll automatically pick up on the font.

A

Color all right and same with border color split those out from the simple border property into border width and border style, and then you could then use those watercolors with the theme colors and then last, like we talked about custom card props ignored when children are present so again use our little technique there to position a dummy element over everything. You want that hover card to work on all right and finally be sure to check out the full documentation.

A

This sample is available called horsepress check that out. It has both the sample before and the sample. After uh with details on the little uh advanced tricks, I did there. Okay, that's all. I got thanks. Everybody.

B

Excellent thanks chris, it's just amazing to see you edit those pages and the layouts and one question actually was a church one uh who asked just to clarify that as well. Will these work in a list formatting web part or list web part if you apply them to the uh the list.

A

It does, um and in fact, if you specify that.

B

A

If you so the tiles again, if you save that as the default, that's also going to work for your web part, the hover cards and all of those and the theming styles will all work as well. In fact, if we come in this with uh microsoft lists right, instead of I came directly to the sharepoint site, which you can see, I'm picking up the sharepoint theme. uh These theme colors will then take up those microsoft list theme. It's gonna have that purple and some other look to it too. So.

B

It allows your.

A

Format to be super flexible as you copy it among sites or use it inside list or inside sharepoint, or even bring it over to teams.

B

Exactly inside team as well, because there was a question related on that one, so, basically inside of the teams, it's the same implementation which works in the microsoft lists, inside of the microsoft teams or in a sharepoint list or in a web part, so all of that works flexibly without any issues anyway. Thank you, chris, on that one really cool stuff, and it's like that. It's awesome to see how you know exactly what you're doing on the on the attributes and everything else. It's just amazing.

A

B

B