Microsoft 365 Community Column and view formatting tips, 16 May 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community Demo - Using SVGs in your column and view formatting definitions

Description

This community call demo is taken from the SharePoint Development monthly community call recording on 16th of May 2019. In this video, Chris Kent (DMI) demonstrates how to use SVGs in your column or view formatting json definitions.

Presenter - Chris Kent (DMI) - @thechriskent

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/

More details on the column formatting - https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

Open-source samples for column and view formatting - https://github.com/SharePoint/sp-dev-list-formatting

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

Hey everybody Chris can't talk about another with this format and they call format a view format all that fun stuff tips. Okay,.

B

So once again got your classic warrior horde as the site right and the warrior horses are nothing if not prepared at all times so they've been working on a new disaster plan, so they've been listing out their disasters and seeing what they can do about. So we've got a new disasters list here, so we come in here, let's zoom in a little bit all right, so they've got their their disaster. They got a plan. You can see. We've already applied some formatting here. We've got a nice icon using the or fabric icons.

B

It's a nice text. We've got this going here and that's okay, but the horses are a little upset about this icon here right, the balloons icon I mean that's, that's alright, but maybe they could do a little better, get something a little more disaster. That word sure. So if we take a look at the the format, that's currently applied right, it's pretty straightforward.

B

All it is is that a div with two children and it runs a span and you can see for you our fabric, icons, super easy, just put the icon name and there it is case-sensitive that works, and then you put in the text right- and you get all those icons over here on this nice site here, I like to use this site the UI fabric, icons that as your websites done that and just place that in there I find it just a little easier as a little more straightforward right.

B

So if you were looking for something looking for balloons right there, they are that's awesome. You can do that. But what, if you want something? A little bit different I mean there's like Geoffrey gamma-d, those 1500 icons, something like that. It's insane keeps growing, but there isn't really one that expresses the true rage and and angst these horses feel at the disasters they've listed here. So what if we want to use something else, say an icon from material design here or want to use something like font awesome right, he's one of their free icons here.

B

Can we do that? Right? Generally can't use them directly or unless you're deploying some actual code. How do we use these inside list formatting? Well, the good news is: is that list formatting supports SVG format, so you can insert SVG's directly inside your formats, which gives you a lot of options. Some bad news is that we don't know we I, don't it doesn't support the abstract view box, which is really important for SVG's and we'll talk about why? But first, let's find one that really expresses our rage here.

B

So if we type in 'probably was puh storm perfect right, so is there any better way to describe a disaster than approve storm right, so the nice thing about these sites is it provides this download SVG button here right. So we grab that mine. There are some different licenses and everything else here got it. Okay, so hit that button. I already got our Pooh storm down here now. In order to use this right, we actually need to grab out the SVG path outside of that.

B

But first because we can't do view box, we've got to make sure we scale that properly so I'm gonna use a free tool called Inkscape. It's an open source free tool. You can get it I, think scape dot-com or some of that alright. So let's go and get our qu storm. Perhaps all windows we're gonna open this up in Inkscape, which will bring it back down here. So you can see there is our two storm. It's beautiful now. If we go into our document properties, all right, we're just gonna scale, this thing down.

B

So so we want about twenty six pixels all right. Let me show that view boxes scale as well all that okay, so we just do that, did I do twenty six and twenty six there we go so now we're gonna grab our icon. I won't resize that too I'm gonna lock the dimensions here. Well, maybe I'm not! Oh.

A

Come on come on lost.

B

Control you'll see in this alright. Well, good news is I. Pre did this. So if we have to uh okay well, just pretend I scaled. That correctly, once that is scaled correctly, I was going to do, is resize it to this box. You can open this thing up and an editor say like vs code, so we'll just close that saving on that one. So if we open up our vs code and I happen to have a again I prep this to storm solid here, you.

C

Can see it's got all this.

B

Information about how to draw that poon storm can I, say pooh storm anymore on the call.

B

The important thing here is this path alone will come back to this. This crazy coordinates and all this other stuff Inkscape has made that so that all works within twenty six by twenty six pixels. So let's take a look here, alright, so if we go back or format here, we want to change out a couple things right, so we don't want this span with the icon anymore, so we'll just I should just kill some of this, so we'll just element type of set of span.

B

Let's make that an SVG all right, so we're gonna come up here, alright, that an SVG we're gonna get rid of these attributes here. So we don't need to do icons anymore, right, we're gonna, say our style. Let's have a couple of styles here, we're gonna, add width and height, just to make sure that we got that exactly. We want, let's just paste, those in right and then I'm gonna set a fill color directly to match this theme color, because right now there isn't a Microsoft UI fabric theme.

B

Color class for the fill property, which is what we need in order to set our icon color, so we'll set that there and then the one thing we need to do then is add our own children to the SVG. So children here.

B

Who's typing on this girl. It's a mistake, alright, so we're gonna do here is we're add just one little child.

B

Okay, that's creepy can't avoid it. Alright, so we're gonna add that and what we're gonna do is red LM type of path. So this is really the only time you ever use path again. This is a little more advanced. You don't generally do this, but here we go all right, hold type path, and the key thing here is: we want to add an attribute into our attributes. Object here, and this attribute is the D attribute, so only put that in there and what what goes in there is what we saw an envious code here right.

B

So this is D right here. We're just gonna grab that D, so I'm gonna grab everything inside there. Oh it's.

A

B

Okay, let me go grab that copy that I'm gonna head back to my format there. It is I'm, just gonna paste that in there boom you see it's beautiful, but these are the coordinates that make up the beautiful to storm. So when preview, that oh yeah font, awesome icon right here got ourselves a nice pooh storm going on the horses happened because again you know this expresses their general sadness better than almost anything else could so save that? Okay.

B

So let's take a quick look at what we just did and what else we could do, because you could take this a lot further. In fact, if you take a look at some of the samples we have available on our SP, that list formatting what you get, let's grab that and paste that sucker in boom.

B

Alright, so we've got a couple of samples for you here, so there's long, there's the generic SVG icon format, which takes you through, and what it's going to do it's going to use conditional here to set some of these font off some icons to specify gender? So you can take a look at that. So if you take a look at the actual format, you see we're doing, the same kind of thing gets a little crazy, we're just using expressions inside that D attribute to change which ones we do right.

B

There's a plus the minus that, but it does work pretty well. You know we also could do a little further things with SVG right.

C

B

Can be used to draw some pretty cool things like our pie chart, so you can create a pie chart using an SVG right and based on values elsewhere in your formats. You can determine how those paths get drawn. So again, this is a little more complicated, but if you take a look at that, yeah.

A

B

Gonna go through all this. You can start to see we're doing some cool stuff for using our sin operator or sine operator. I should say.

C

All right, there's.

B

Awesome stuff in here you can do with SVG is again advanced topic, but if you want to just start by grabbing some fun awesome icons or something else there, you can do that. So, let's review alright scalable vector graphics, that's what SVG stands for. You just use the LM type SVG with a child of Helen type path. Let's specify that D attribute remember.

B

There is no view box attribute, which really complicates some things, because generally just be able to grab that SVG and paste it in there without the view box right now, you're in up to scale. Those coordinates yourself using something like Inkscape.

B

Do be aware that if you start to do these in lots of expressions, you remember that that was some crazy stuff with those coordinates it can get a little crazy. There are not technically any way to do comments in here, but you can create your own attributes called comment. If you want again, it will be ignored by the the engine that might help you keep track of what icons these are and then again cool.

B

So if you're interested in some more of this stuff, I'm going to go ahead and promote myself a little bit so next Tuesday, if you're at SPC come by I'm going to talk about this is the first session and if you are in Germany and a week after that, that Tuesday come join my session for that I'd love to meet all of you, but again we'll cover all this kind of all up from the start. And then here are some samples. So here's the same. Let's pay attention to here is the blog.

B

So if you're interested in a full write-up of how this is done right, you want actually see those steps that I had to skip for the Inkscape. You can see all those in there all right. Thank.

C

You Chris absolutely or something really good, to say that clarified and record it in here as well.