Microsoft 365 Community SharePoint, 6 Aug 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using icons with list column and view formatting

Description

In this 12-minute Site Owner - focused demo, Chris Kent quickly reviews adding icons sourced from Office UI Fabric and Fluent UI to lists. He then introduces viewers to a new source of icons - Flicon.io (beta). The same 2000+ icons reorganized in categories and easily found in search thanks to a.k.a. terms. Easily change icon color and background to fit targeted site theme. Copy icon and paste into a script, export as SVG or drag it onto a PPT slide. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on August 6, 2020.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Use column formatting to customize SharePoint | aka.ms/spdocs-column-formatting
• Icon Sources | aka.ms/fluentui | http://uifabricicons.azurewebsites.net/
• Community icon search | https://www.flicon.io/

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, hi everybody, I'm chris we're going to talk about list formatting, but also some tools are going to help make that a little easier. So, let's take a look. So one of the things we talked about uh last week was the idea of using emojis in your formats and there's all sorts of options there.

A

You can do a lot of stuff with those so go check out that video on the youtube channel, if you're interested in that today, I want to talk more about the icon, so the icons are a great way to really enhance things because they're the same icons that are used by you know sharepoint everywhere. It's a great way to make your solutions fit in and kind of match, the same style so they're not distracting or glaringly obvious that they're, you know not a part of the ui, but really just can act as enhancements.

A

You can see it on the screen here. We've got some examples right, so this is just using buttons and using these icons directly from fluent ui, and you can see that they're actually maps the same ones that are in the interface right. So if I select one of these now you can see the edit icon all matches the share. You know delete all that. So that's really nice thing here so now we can take advantage of that, uh but putting those in as simple as just typing in the name.

A

So there's some other examples of using those icons right so over here kind of our classic severity. All right! So we've got this.

A

uh You know a nice color here, but then an icon that really kind of indicate what this status column really means. So adding a little icons here and there as needed both their buttons or just side by side. Things can really indicate what you're trying to accomplish right head into a link when you're trying to do a mail to add a little envelope there again great way to kind of indicate to your users. So there's no instruction document. You got to write with this. It's pretty easy to do. Moving over to our horse's site right.

A

We use these in the warrior horses site all the time. So if we take a look, we've used this a few different times right. So we've used uh things like icons here to indicate our drink preferences over to our things list.

A

We've got things like the check, mark icons or check box icons here to indicate whether it's a task or not, really makes that much more obvious that it is a task. We've even shown in the past calls advanced things like overlaying icons on top of each other right, so we've taken the health icon, laid it over. The heart fill icon right. We created a nice uh pretty picture here. We go even further over here and do the same thing with the emoji type icons and we've added a little status icon.

A

So again you can see there's a lot to do here. So let's talk about how you do that and what are some cool tools to make that even easier. So if I go to column settings, I'm going to format this column- and this is a sample that's available. So I'm just going to delete it and we'll take a look here.

A

So adding an icon is as simple as we'll preview that so we can just see that the icon's gone the in icons as simple as just typing in things like film type, all right, we'll do a div. You can do a span, you can do whatever you need to and then adding attributes another squiggly here and I'm going to say icon name and here's where we just type in an icon right. So if I've got like a vehicle, themed or transportation type icon, I can choose bus right, I'm going to make that a little bigger.

A

So we can see that style, because these work this way you can apply just standard styles like font size to these. So we could say 48. That sounds good. It's probably pretty plenty big, oh yeah, bloody, big okay, so we can see. Now we've got a nice bus and that's cool.

A

You know what, if I wanted to do some other ones, I could do like taxi right, ooh, a fancy taxi right and there's a bunch of different ones. You know like there's almost there's 2 000 plus icons out there now. One thing to keep in mind is that these are case sensitive. So if I type butts with a lowercase b, they'll, never mind, I'm a liar really, that's true! That works awesome!

A

Okay. But what if I wanted to do something like uh a boat right, so I'm just going to guess sure, there's a boat, there's, a bus, there's a taxi! There's a car! All these other things! So preview, no boat! That's terrifying! It's sad!

A

So what if I want to go find out if there's a boat somewhere, so some of the tools we've shown before are, if you go to like aka dot, ms fluid ui you'll be taken to this lovely site and if you go to styles and we click on iconography and if we scroll down past all this code details that we don't care about for this, we can see there's some icons here right. So I'll search for both you know just type in vote here. No results very sad.

A

Now, there's a couple of issues with this right. If I look down eventually, if I scroll and I'm very very careful, I might see that there is in fact a boat icon right. Oh there, it is very solid, of course. Of course it's called very solid. That makes sense right. So now, if I type in fairy there, it is right, so I can use that now, but I have to type in fairy I mean I have to hover over to see what the actual name is.

A

So there's some less than desirable things here, um including I don't know what the heck this sort order is right. So it's not alphabetical. I don't even know what it is. So that's one tool you can use there's another tool here. That's references, the fluent ui icons tool. If we head over there. This is one I actually like a little better.

A

This is the one I've sent end users to before when you create like a column, and we want to say what icon it is, and you say, go pick out icons and we'll show them there. I've sent them here. This is much better. It has the same problem.

A

If I search vote, I'm still not going to find anything, and this order is a little weird, but it has nice features like if I right click, I can say copy friendly name, so I don't have to remember you know whatever this was admin a logo inverse 32 very catchy right. I can just copy that friendly name and I'm good to go. So I copy that I head over back to here and then my icon name space, just paste that and I preview and there it is right.

A

So that's pretty cool, just close the loop with type and fairy ooh pretty so, and that's great and now one of the really powerful things about this site, though, is that it can be used to generate your own font files. So if you're doing some hardcore coding outside of list formatting- and you really want to have just a subset right- you can generate your own font files. It's very, very cool.

A

The other thing about this, though, is icons, are added here before they're, actually added to ui fabric, so they'll show up our fluent ui should say they're added here before them. So there's some icons that are going to show up here that are actually not available to you yet and that can be really frustrating.

A

So I want to talk about a brand new tool uh that we can use now, so it's called flykin, so it's flycan.io go there we'll check that out this site is live it's in beta, so interested in all your feedback on it. But this is an idea of it's a fluent icon, search right.

A

So now, for instance, we solve some of the problems like if I search boat, hey it shows up right or my classic is uh dog right, so I used to always search a dog right, but how would I have known that that was actually fang body right, but now I can search by dog and there it is some of the other things you can do here are that we've got full-on categories here.

A

So if I just wanted to see what vehicles are there right, I don't want to scroll through that giant list there they are there's all the vehicles, so I can easily do some pretty cool stuff here right. So if I come down here, I've got all my different categories. I can search between them. uh Do whatever I need to I've got some of that same kind of copy functionality right.

A

So, if I hover over add bookmark, I can actually hit this button and it's copied to my clipboard and I can come in here and I can face that as well. Right, so very helpful and that's one thing you could do here now if we take a look um on top of that. So if I pick something like games and sports sorry, we can see this um if you want to check out your theme. Styles right, there's full theme support here.

A

So if I want to switch this to orange or red or let's just go straight up, dark blue right, so you can start to see how these icons might look directly inside your site right now, if you don't like some of these kind of default ones or there's some other options down here, all right, so for one we'll make these large. If you want to show the name all the time you don't like that box, whatever you want to do, but there's some advanced color options here.

A

So by default it's the neutral primary color, that's shown, but if you wanted to say always show them in red right and you want the box background because you're not a good designer. Like me, uh yellow light- oh that's beautiful right! So I can even come in here and I can say: let's do a custom color right, so kind of change that up, but the whole idea here is that I can really see how these icons might look.

A

So we'll come back here, we'll go back here all right and we'll take a look. So one of the things we can do also is. When we're looking at these, we can see variations right here. We can see the different colors those might appear. We can also export it as an svg, so we can export that we just get a nice trophy too solid. We click on that there it is beautiful, so this is a great way to kind of get more familiar with the icons.

A

Much more consumable format, so the idea here is to make things a little easier uh for end users and for people that don't want to mess with all the extra code and everything else you just want to be able to grab icons to be able to find them right, because it can be very frustrating having 2, 000 plus icons, some with very, very strange names that apply specifically to what microsoft intended, but maybe has nothing to do with what you intended right.

A

You know: an airplane is a good example of that. So if we type an airplane, you'll see this one airplane airplane, but this one's called arrivals right, and so that can be a little frustrating but pulling all these out. You can really find exactly looking for very quickly. So, let's take a look and review come back over here.

A

So using your icons in the formats right just apply it within attributes. You can use icon name. Apparently this is no longer true. So that's great news. We can get rid of that though. Okay, so not, every icon is supported.

A

um That's not too bad right now with the flyknit I own, but there is some features coming that should make that a little more obvious. What is isn't supported everywhere, but again you can apply sizes and colors, and you can do theme support, so icons are really awesome for all of that. Now, in fact, what if I want to use an icon here now, powerpoint has a ton of icons, but what if I want to use some now? This is a presentation about the fluent ui icons. So here's a thing we can do right.

A

So if we were to type in that say dog again right, we take our dog we're going to export that we're going to save it as svg. We can actually just grab that head over to powerpoint. Just drop it right on right. So now we've got a nice little icon directly on our powerpoint. We can use those wherever we need to. We can open those up and do all sorts of cool stuff right. So we'll just change the color of that. Oh, that's, pretty right! So there you go. So that's pretty cool, so check out.

A

Flyknit audio, it is free and will remain free. It's got full categories and tags. The theme support some more stuff with themes is coming soon and some additional export options as well, but I'm interested in your feedback there's links in there to provide feedback for, say. Maybe you don't think the category was correct or you don't think the tags were correct, uh very possible. It takes a lot of time to categorize, 2, 000, plus icons so and do that manually. So I'd be happy to have your feedback on that.

A

So here's some of the links for those items here. These are the two other browsers. I showed you, and this is the flyknit, I'm sure the david or whoever else has been pasting. Those links down there. It was just launched this morning. So if there's any issues with dns or anything just let me know. Okay, that's all. I got thanks.

B

Very cool. Thank you. um I don't understand why you didn't understand that was called fang body. It's pretty obvious, but uh you know we do what we can so with that. Thank you, chris. Another fantastic demo very excited to see that new service. uh Definitely everybody check that out. Feedback uh is always appreciated and uh excited to have another tool for everybody's tool belt as they're doing their development.