Microsoft 365 Community Column and view formatting tips, 18 Jul 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community demo - Drawing SVGs Conditionally with List Formatting

Description

This community demo is taken from the SharePoint Summer camp community call on on 18th of July 2019. In this video, Chris Kent (DMI) is showing how to conditionally draw SVGs with list formatting based on item values..

Presenter - Chris Kent (DMI) @theChrisKent

You can find more details around SharePoint column and view formatting from the following article - https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

You can find tens of open-source community samples around column and view formatting from following location - https://sharepoint.github.io/sp-dev-list-formatting/

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

A

A

Us up in Europe come on back. Let's talk about sports and stuff all right, so you know you got a classic warrior horses sight that we all have and one of the things the warrior horses have been looking at is get their things list here and they got this progress and that's it's! Alright, it's a little boring right. It just tells the percentage here, so they want some options. Now, Microsoft done the cool thing here, where if you go to column, settings and format this column, you should get this nice little thing.

A

A little wizard turn that on and it's going to turn on data bars automatically for you, edit that template you can see. It's already got the 0 to 1 for the percentage, so it's kind of cool. You can pick my main color right if we want to turn it red. That's alright! If you take a look at right, it's generating that Jason Willis formatting for us. You know it's using that old ast, syntax, it's lovely, but here's one of the problems is not theme sensitive right. So that makes the horses sad.

A

So luckily they know about our SP dev list. Formatting repo we've got a cool sample over here under column samples. We go down to number, we got data bar, then we go to data bar percent or some is that present data bar right right, gonna copy and paste this guy right here copy that I'm gonna paste it over here. Not that paste it there.

A

You notice we get the same kind of thing, but now we get a nicer display with our percentage here and we get the nice theme color and everything and that's cool at all and all we're really doing is: we've got a div with variable width on there and that's alright, but we get even fancier right. So we go back over here. Let me go back one level we go to our number pie chart or we've got something. That's doing something really interesting.

A

A number pie chart which, what's the pie, chart Jason that sounds great and we grab this pie, chart copy that and we paste that in now, let's start to see something really interesting right, so we're drawing pie, charts dynamically and if you take a look through this what's happening, is some fancy stuff right here, so we've got an SVG element amigos. You know a single path on there and you can see we're actually applying a formula inside that path to determine where all that goes. So you can read that later.

A

That's really exciting reading fun stuff. Now, if you wanted to go a little fancier on these pie, charts right, you can always turn to the old column. Formatter we've got a wizard for you, but not a number and we'll Sagat donut hit okay, we'll say is zero to one right, we'll put our dota2 40 pixels. That sounds great right.

A

Oranges. All right, we'll pick a purple light sounds perfect. Okay, I want to say none! Everyone will grab that code here. So this is a way to generate those same kind of calculations that are happen to the SVG dynamically I'm. Rushing through this I can show you something a little bit different. So let's go that go over here. I'm gonna paste that in now we start to see now. We've got something with a little little fancy right.

A

So we could take some of those complex calculations within the SVG path and we can hand it off to call them for matter now. What if we want to do our own say your B and you are.

A

Nice little gauge here with pretty rainbow colors I, want to take that and I want to use that. So I can open this up. If you guys haven't messed with SVG's before you can either download them or draw them yourself like I did here in something free like Inkscape, and you can open up in vs code, because these are just XML files right.

A

So that's all in SVG is where I see the SVG up here and if you come down here, we got our paths and blah blah blah, and all you really care about is the style which is our color and then the actual deemed here which is telling it what to draw, and you can drag all these down and you could fill those out inside a format just by placing your style inside of style element. Here.

A

It's are the children of the SVG right, we've got our fill, and then we have our attributes deep now, again, point isn't to go through how to translate SVG's. You don't even need to know what all these DS and fancy from xscape. So I've done that and I've added this little one down here, where I'm doing some other calculations right, so you can see I've got some cosine got my sign and I've got these all these.

A

If statements, but the point is not to value with my looked up formulas on Stack Overflow for circle calculations right, but is to take a look. The idea that you can then dynamically draw these SVG's by editing these path, elements directly and combining them with other paths. You do fancy things like: let's copy that and head back into our worried horses site paste that in preview, so now you get ourselves a nice gauge here right. So let's see that now we can see with that needles being dynamically drawn.

A

So we're always drawing the background SVG elements directly from our Inkscape file, but then we're also dynamic the drawing based on the percentage complete where this is a nice gauge. So you'll start to see that by using the SVG, which again is a pretty advanced functionality of list formatting, you can do some really really cool stuff by changing around how those paths are drawn. Unfortunately, there aren't things like transforms: you rotate there aren't circles and lines and everything else so I agree Marcel. That is a great place where you can contribute.

A

So if you want to make it as we do to Jayson converter that'd, be awesome all right and, let's see I got one more slide there to show you just so.

A

You got some samples here so check out our full documentation of the SP Doc's call a formatting right there and, of course you can check out the data bar, which is I think slightly better than the the out-of-the-box one and then, of course, there's a pie chart where you can go in there and see how that's done and then we'll get that gauge up there as well. Alright, that's all I got.