Microsoft 365 Community Column and view formatting tips, 9 Jan 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using Office UI Fabric icons in column and view formatting definitions

Description

This PnP community demo is taken from the bi-weekly SharePoint Developer Community - General Development Special Interest Group (SIG) call recorded on January 9, 2020.

In this 13-minute video, Chris Kent expands upon his previously delivered formatting demos to show using UI Fabric icons for list column and view formatting. List formatting tips for adding a Fabric icon to a field. Use conditional formatting statements to determine which icon/color to display based on information in fields of the column being and/or based on data in adjacent fields.

Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• List formatting samples: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/generic-icon-overlay
• UI Fabric Icons: https://uifabricicons.azurewebsites.net/
• Full documentation: https://aka.ms/spdev-column-formatting

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

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

A

Hello belly I'm, Chris, Kent, I'm, Bob, Stallman, EVP, there's no Twitter, there's no blog. We will talk about UI fabric icons and how you use those in column, formatting and view formatting, so we're gonna kind of walk you through the icon name, some of the basics. On the some of the ways you get a little fancy with that all right.

A

So, let's take a look so we'll jump over to our classic warrior horses say all right, not a warrior horses site we like to apply all sorts of different types of formatting, so it can make things a little easier. So we're not stuck with the boring old list right. So we've seen lots of different examples of this, and if we go over the things list, we're gonna apply a couple things there. So you can see. We've already got several formats in here.

A

It's pretty cool, but for those that aren't aware, there's a whole series with thousand-plus icons available to you and you'd have to do anything else. If you want to get fancy and use like a font, awesome type of icon or SVG's, we've done some demos on that. There's some samples on that, but this is a much simpler approach and that's just how can you put an icon like this little rocket here? Alright?

A

So if we come over here and we'll just mess with our exciting sentiment, column, just to kind of show that I'm gonna go to column, settings are gonna format, this column right and we want to go directly to Advanced Mode, eventually be able to pick icons of the things and that's coming very soon. But for now we're gonna write this kind of this advanced mode over here all right, we're just gonna copy and paste some formats. Here we can get these directly from the sample site.

A

I'll have a link with that here in just a little bit. But let's say if I wanted to just type this right, so I want to just create a little format here and I want to say this is L type. Alright, we'll make this a div, very, exciting, comma and then we're gonna say all we wanted to show an icon right. So we're gonna, say attributes in this case. Let's say subsets of property, so a little more squigglies.

A

In this case, all we do is type an icon name and then right here is where we can paste any kind of icon name. We can now I happen to know a couple of icons right. So here is Fang body. Alright, which should be a dog very excited to get a dog makes a lot of sense right now. Where do you get these icons all right? So you can get those a couple of spots.

A

The first one is, if you go to UI fabric IO beyond all these links, I'm showing up and probably David's, been posting them right now either way you come here and you go to Styles and you're gonna pick icons here and you can see if you scroll down. Eventually you get this kind of icon selector and you can pick all those and this works. Fine I actually find it easier, especially if I'm having end users pick icons. Is this site right here, which is the UI fabric? Icons, not as your website's net?

A

All right, so you can see it doesn't, have all the extra documentation and code that has fabric and react and all that other junk mentioned that might confuse people. It just has the icons right and you can search here so if I wanted to like set up a dog I wanted a cat right, there's a cat right there. So if I hover over it, I can see only zoom that a little bit. So we can kind of see that hover over right. We can see the word cat.

A

Is there so I'm gonna paste that instead I don't like the this one's, not called dog? It's called Fang body you'll find that the names are fairly inconsistent with some of these things you just don't have to look through them. We switch to the cat. Now I've got a lovely cat icon here, wow, that's exciting right, so so yeah, let's try that there you go I guess I was seeing that that'll make that a little bitter easier to focus all right. So now we've got cat.

A

So that's pretty straightforward right now, if I want to apply color or I want to apply size, you'll actually do that a couple different ways. So because this is a font icon all right, so it's say choosing text for that. We can have just style properties here come on over here and we just do something simple as color all right and we could say: lime, that's funny, Wow, a lime cat very exciting, all right. If we want to make it larger, I mean coming here and we could say font size all right.

A

In this case we'll say you know: 36 pixels sounds exciting and it is exciting. Look at that big lime! Cap Wow! You know we can do even other things. So maybe we want to make this more theme sensitive right. So this is pretty easy way to handle that. But we could also do things like and our attributes. We could add a class and in this case we're gonna, say Ms font, color, I'm, gonna, say I.

A

Think it's bean primary, let's see, aim primary right, so we want to add that yeah mine's, a nice brown color for this horse, I try but that'll that'll work. We could also say you know some of the standard colors right. So if I want to make this red, which is that standard, Microsoft, red or magenta, all those things that again, those those colors and these classes are all listed here on the UI fabric, dot IO site, all right- you can find all of that in this colors section. But that's the idea.

A

That's the general idea for icons and we've got a ton of different samples on how you can work with these icons and how you can apply them conditionally and so on. But I wanted to show you also a couple of different techniques right. So what? If, instead of you know a cat I wanted to do this heart, icon? Alright?

A

And that's nice right! There's! That's one option! If we look over here, if we go back to this guy and we search heart that there's this heart, that's just an outline and then there's heart, that's a solid right. So the heart see fill I think is the other one. Yes, so sometimes it's solid! Sometimes it's fill sometimes is the word mask you just kind of have to look through that to figure that out from there. But what, if I, want to kind of combine that, like that's cool, that it's heart fill, but what?

A

If I wanted to go a little more elaborate with that right, so so I grabbed something I've got a good paste one. So I type all this in front of you. Okay, so don't go through what it's doing right so instead now I've got both an outline and I've got a solid that I can color whatever I want and the way we've done. That is, we create kind of a parent div. We set that position.

A

This is a CSS property to relative, so we can position the elements inside that div to where we want exactly- and we also have this thing here that just says, don't show an icon if the sentiment value doesn't exist, all right. So if we come down here, I've just got my children elements. So the first one, pretty straightforward is just that heart fills that background. I've set it to that nice, red right and I said that the size. So therefore that's easy right.

A

It's just gonna draw that nice red icon in the back and then I'm gonna draw the heart, which is that that black out on your scene so I'm give them setting it to black and I'm positioning this using absolute positioning and I'm just putting it right at the top. You know zero zero right there, so it's hovered right over the other one, and it creates this nice kind of outline here right and that's pretty cool like when you want to do like I.

A

Think it's heart broken, there's a couple other different heart ones like blue fancy right, so you can start to see that now things look a little better right now, it's not not just working, and you know why your frame, type, colors or not just working in a single color I can I can go a little crazy with this right now. If I wanted to take that a little further, because of course we do all right, I'm going to copy/paste this one as well and we'll take a look at it.

A

So all we're doing now is we're adding some conditions here, all right, so we're still doing that hard to fill in the background, but now we're going to set that color depending on if the sentiment is positive, negative or neutral all right, so we're set that we're also gonna set that icon the same way. So we got the icon name here and we're just using these. If statements again, these samples will be available to you.

A

So if it's positive we've the heart, if it's negative would be that heart broken and otherwise we use health, which is another heart. I comma doesn't have the word heart in it. So if we preview that, why are we so you can start to see we get some pretty cool ways to kind of draw with the out of the box icons. So we can go a little further even with this. So, let's just save this, and let's move over here and since there's a time here, will just do this one real quick!

A

So now we've got the idea. We want to combine this color I want to show sentiment. We also want to show this status right. We've got done and progress kind of the classic status here, the column settings we're going to format this column again because of this choice. Column we're offered this kind of formatting wizard, but we're gonna hit advanced mode I'm scroll over. So you could see these columns and in this case again I'm gonna cut and paste.

A

You guys can see what I'm doing here- and in this case you know we're doing a very similar thing right, but now we're combining both the sentiment and the status columns the status, because we're is represented by current field and then sentiment is how we're referencing that other column so we're using the square brackets with a nice dollar sign and then the internal name of that column. Alright, and so all we're doing. There is, let's actually preview and see what we're doing WowWee so now we're combining.

A

So now our sentiment is shown by one of these emoji icons, so we're doing that same nice thing. We've got the full circle, mask we're setting that to yellow, to give us that nice yellow background for the smile all right and then we're actually setting. You know based on the sentiment or there's negative. We use sad right or emoji neutral, be aware that the emojis are also a little weird right when you look at through the emojis right. So that's what I mean by the names are a little bit strange right.

A

So this is actually emoji, and this is emoji with this crazy mouth I'd be also known as sad as its own one. So it's a little bit strange, really just kind of go through and you kind of learn as you go all right all right. So if we go back here so all we're doing there is we're applying that.

A

So that's the same thing we saw with this heart right, but now we're doing another thing where we've thrown another child on which is another div and in this case we're checking the current field, whether that status is to show this tiny little icon and determine the color of that tiny icon. So now we're combining those fields- and you can see the only difference- is we're also doing absolute positioning, but instead of top and left we're positioning it based on the right and the bottom.

A

In order to make that work, we had a big, you know width and a height for this div. But by doing that, you can sort of position these icons, which is really great because sometimes like you'll, see things like. If you look at contact, for instance, that's one that shows up they've got this nice thing where they've got like a contact icon and even have these little like block, contact right or contact is being edited or we love this contact. It's our favorite and that's really cool one of the problems.

A

Is you can't independently color those statuses and it's fairly inconsistent right? What if I, wanted a delete contact button right, I suppose I could use this block. What I might want to use that for something else right or if I wanted to promote contact, so I want a little arrow. Instead, the idea is using this absolute and relative positioning. We can position our own little status, icons here and use the whole.

A

You know UI fabric icons and make all sorts of neat combinations here, and we can do that, whether that's using a single field, multiple fields by just referencing them across column, formatting or even view- formatting, alright cool. So that's demo wise. So that's what we got there. So if we just quick review but take a look here, the eye, the main idea is to use this icon name property under attributes. Once you do that you notice I didn't have to do anything else.

A

I just use that and then I can treat it as if it were text, so I can set the size, the font, sighs property under style. Color I want to take advantage of those nice UI fabric kind of theming styles I. Can.

A

The main thing to note is that icon names are case sensitive right, so it's don't be sad if heartbroken doesn't work right because you're lower case B double check that the other thing is not every icon is supported, so sometimes there's icons listed there and you'll try them and they don't seem to work and that's just related to kind of the version of the the version of the font, that's being used on the UI fabric site versus the version of the font, that's being used in the ListView itself, generally, those get updated, but sometimes they get out of sync, so brand new icons, don't always show up it's a bit of a frustration.

A

The best thing you do is just try them in a simplified format. That's just an icon. If it works, then you're good, also keep in mind. If you like, do this kind of background colors. If we take one more look over here, you can easily find those by either typing the word solid. Here all right. You start to see all these nice solid ones you can use as a background. You know you're, usually a wireframe version. That goes on top of that.

A

Sometimes it's sending masks as only one of them, but it's also bill is the other way all right. So they got a nice star one. You could do that with or you wanted to put a star inside a circle. You can easily do that. Alright great kind of a badge or something else so be sure to check all that out all right and finally check out the full documentation. Here, we've got a these samples.

A

I just showed you are available in the generic icon overlay samples over on our list for branding repo, where we've got tons and tons of samples, and lots of them have to do with icons. If you go to our kind of sample browser, there's a whole section just on icons. If you go there, you can find out how other people are using these icons to correspond with status or even choice, fields or progress or all sorts of other different things.

A

You could do with that and then there's the to UI favorite kind of icon sites again I prefer the bottom one. However, I think the bottom one tends to have more of the unsupportive icons, because it's a little more up to date. All right, that's all I got thanks. Everybody.