Microsoft 365 Community SharePoint, 13 Apr 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using dynamic SVGs with List Formatting for SharePoint and Microsoft Lists

Description

In this 14-minute developer-focused demo Chris Kent shows viewers how to create a radar chart for visualizing list data. Create an SVG (use Inkscape) - modify paths and apply transforms (Transforms extension), and edit some XML. Convert XML to JSON (with “HTML To Formatter”). Paste SVG JSON into custom List formatting view. Tips on preparing SVG for List Formatting include using absolute paths and only paths, viewBox, and currentColor to utilize theme colors.

This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on April 13, 2023.

Demo Presenter
• Chris Kent (Takeda) | @theChrisKent

Community Call Conversation
• aka.ms/Apr13-Demo3

Supporting materials
• Documentation - Use column formatting to customize SharePoint | aka.ms/spdocs-column-formatting
• Samples - List Formatting Samples | aka.ms/List-Formatting
• Tool – Inkscape | https://inkscape.org/
• Extension - inkscape-applytransforms | https://github.com/Klowner/inkscape-applytransforms
• Tool – HTML To Formatter - https://pnp.github.io/List-Formatting/tools/html-formatter-generator/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

B

Buddy I'm Chris all right. Let's take a look at some exciting lists, formatting uh things and stuff, perfect. Okay, so we head over to our classic uh Warrior's site and we're definitely not beating a dead horse with this joke. Oh my gosh, that's hilarious! All right! Moving on all right. uh What do we got so the uh the horses as we dealt? They do uh Wars businesses and businesses over here and as a part of that, you know they manage uh what they do in the battlefield here in office 65 as we all do right.

B

So if we head over to our targets list, this is a list where they're trying to determine you know one of the most strategic targets to uh to attack uh in the upcoming quarter. All right, so we've got a list for that and what they've done is they've decided to kind of score these on uh six different kind of principles that make these things more or less attractive uh to be a Target, and so we've got all those numbers I made them giant just so we can see them and that's exciting.

B

uh Just so you're aware, under the hood I named all of these score ones,.

B

Just to make things easier when I'm writing the format here in a moment, but what would make this easier to read right now? We've only got uh what five items here, but if we had a whole bunch, this gets really hard to determine any kind of value out of this right, especially if the scores aren't all even like I've got them right here for our testing purposes. So what I wanted to show is how we slap a radar column on here. Oh just kidding, there is no radar column.

B

Oh no I'm, just kidding it's all the rules. We're gonna make one ourselves. So what I thought would be interesting? Is we take a look at what is the process to make a format? uh That's considered a little more advanced, so we would do a dynamic SVG right. So SVG is a scalable vector, graphics, it's something that is fully supported in this formatting and by fully supported I mean uh it's got the Bare Bones in there and it's good enough for what we're going to do today.

B

But what I want to do is kind of clear it up, because sometimes people look at the end result and think that's way too complicated for them to have ever done so. I just wanted to go through an example of how I might create one using some tools and we'll slap it all together. So let's do it so. The first thing I'm going to do is I like to start with my sweeties.

B

You can always download svgs from a variety of sites, but for this one I'm just going to draw it in a free tool called inkscape. So this is an open source tool here and then, if you're not aware, svgs are just XML documents right here like this, so I've gone ahead and just saved this blank SVG over here. So we can see what is being output. Okay. So let's take a look here.

B

So if we want to create a radar chart where I want to plot all six of those uh scores, I need to create a polygon so create a polygon. I've got my six corners already selected here and I'm just going to drag one of these out. That sounds ooh. This created this as horizontal as possible.

B

I'm just going to use the uh the bottom there to that is so beautiful, perfect, okay, so now I'm just going to take this giant thing, I just made uh right and we're going to go over here and we're going to uh oh I forgot to tell you I've already done it, but very important for this is we'll go into your preferences and we're going to make sure we go to our input output and we want our SVG output and we want to make our password format.

B

Absolute that'll make more sense here in a little bit, but just keep that in mind before I forget to tell you that there you go all right so now, we've got a exciting uh I, don't know what you call it: a stop, sign type shape, yeah hexagon, that's the one all right! So we've got one of those and we want to put this kind of in the middle. uh So what we could do is we could come to our align and distribute menu right there, we're just going to relative to the page and boom boom.

B

We'll put her in the middle, so let's make this a little bigger. So we don't need to see that this, the XML right now I'm going to copy this thing, because I want a few more of these all right, so I'm going to copy I'm going to paste it. It goes there I'm going to Center that one to all right and then I'm going to scale that one you notice, I, don't have any fill and I've just got the stroke. That's kind of the default in here.

B

If yours is not the default, you'll just want to pick that. So what I want to do is I want to transform so I go to my object and I go to transform, so I can get this and I can scale it, and for this we're just gonna and again this part is less important, but I think it's good to see. Let's scale that proportionally all right and apply that so now we've got a smaller one and, let's paste another one on there, all right. Let's go ahead and scale this one to 50 percent.

B

All right so we'll apply that and let's uh align that one as well, and then we come back over here and let's do one more just for fun and we'll put this one at 25 right. You could vary this. This is just for uh what we're trying to do.

B

Let's go back over here and let's enter that one as well, so wow wow, wow, okay, so we've got this that's great, and if we were to save this, let's go ahead and save that, and let's get that back to that side view where we can really uh see what's happening here uh now we can see. We've got these complicated paths that got added one for each of those shapes they've got these transforms in them all this extra junk.

B

We don't care about and they're all grouped here and I mentioned earlier, that while we've got SVG support, it's a bit Bare Bones and so one of the things we want to make sure is we're always using paths. So if you end up using an object, like we add labels to our chart, which we're not going to do for time here, you'd want to convert those into a path and so on.

B

But then the other thing is we: don't we don't have any support for transforms, so we want to get rid of those and get rid of these groupings. So let's do it. So the easiest way to do that is I'm, going to select everything and I have an extension which I'll link to at the end here, which you can install in here, modify path, apply, transform and all that's going to to do is going to go through those paths and ignore that and that's an exciting error and it's going to remove those transforms.

B

So when I save this right now you just see we just simplified that dramatically. These are now drawn absolutely so these are the points we want to draw our shape in don't worry if that doesn't make any sense, we're just going to cut and paste those things so yay all right. So now we've got that there now. The last thing I'm going to do is remove this grouping. So we can do that by editing the XML structure.

B

So we expand that group oop I'm just going to make this window a little bigger there. We go all right, we're just going to move each of those out and get out of there. What are you doing? That's just silly right there we go, get rid of that and we'll kill that guy and if we save that now we see boom now we've got rid of that group. That's great, and the last thing we want to do is make sure that this thing is centered correctly.

B

So we're going to go document, properties and I'm going to say resize the content, all right, that's going to make that whole document. That way, that's going to make our view box, but the way we want and we're going to save that now. If we wanted to go a little simpler here right, we go up here.

B

We need to save as and we're going to choose, instead of an inkscape we're going to choose a not optimized, because that's going to get rid of our absolute paths, we're going to plane, I'm going to hit, save and yeah, replace that sucker boom all right. So now we've got an even simpler SVG right that describes this okay, so now we get rid of inkscape bye. We don't need you right now. uh What we're going to do is we're going to use this now.

B

This is not a Json format, so how am I supposed to make it work magically all right? Well, good news! We have an exciting tool over here. If we head over to AKA dot, Ms, slash list, hyphen formatting, uh we end up at this beautiful site and at the very bottom here we've got those tools linked if you click that we have this kind of hidden tool HTML to formatter.

B

This allows you to paste HTML or css in both and output that as Json now you you can't always just take it directly right, but it gives you a lot of the way there, which is awesome. So if I grab this guy all right, let's copy that sucker boom and paste it over here in the HTML and then we're going to hit run all right and that's going to generate it's basically going to map all of these things into the special syntax.

B

We need we're going to hit copy on that and let's head back over here so now, let's just go ahead and apply it to this column for funsies all right, advanced mode, and let's make that a little bigger all right. Let's paste that in and preview that oh, we got an SVG, that's starting to show up all right.

B

So now we're getting somewhere now, there's some extra stuff here we don't want we're just going to get rid of like, for instance, we don't want debug mode that always gets added with the uh the tool and I don't want any of these Styles I got to add it to the individual path, so I'm going to get rid of all those bye-bye see ya.

B

This is why we didn't really care about the stroke, color or the stroke width, because we were just gonna, take them away and if we preview that now, what have I done right, don't worry. uh What we've basically done is we've taken a default fill, and so, let's get rid of that, so let's add a style to our SVG right. So, instead of style, oh, let's be careful. We hit our tabs enter all right and we're going to hit uh fill in this case.

B

We just want to transparent all right, and then we want a stroke, color right and unsurprised. We call that stroke all right now we're going to call this. If we just said red right, we can see there. We have a red stroke, that's exciting, but we could go even better or if we say this magic phrase of current color with a capital, a lowercase c, a Capital C, then we could pick up whatever we have as the font color right. So that means that we can use cool things like attributes.

B

Oh gosh cancel there and we're going to enter and we're going to type in class and we're going to do something: fancy like Ms font, color, neutral primary right. So that way we're using a theme color- and we do that because we use the current color it gets picked up. Boom boom boom. That's exciting! You know we can change the size of this thing right. So we can say uh width on this is where it's going to get huge. So we can see it 400 pixels and we're going to say our height.

B

It is also 400. Pixels, oh got extra colons everywhere colon City all right now, and that made the uh the whole box bigger, but it didn't actually change the scaling right and that's where we're going to use something called The View box.

B

So we added to our attributes here view box and for this value this is what's going to do some magic scaling for so we just head back over here all right. We just grab it right out of there. We just need that view box exactly as inkscape made it for us boom and we'll put it in there view box and we'll preview that now it scales appropriately and let's just scroll that over and I made that huge. Then that's cool all right.

B

So now we've got this wow, we drew an SVG and if that's all, you wanted to do mission accomplished right, but if we want to make this thing Dynamic, which we definitely do, that's what we're going to look at now, all right. So the idea is these values should map right on here and to make that a little easier. Now, this one's only got these few lines, so this is fairly okay to see.

B

One thing I like to do, though, especially when working in any kind of form, I think it's complicated or lots of children um is I like to add comments. Now, your first, you might look at that. Go the comment. Oh my goodness. How is that possible? Well, the the way it's possible is any property that doesn't actually use is just ignored, so you can add anything you can call it whatever you want. I called it comment uh just make it obvious what I'm doing, but you don't have to call a comment.

B

You can call it uh Toby's special notes, I mean even if your name's not Toby, that's totally a possibility for you all right so to say. Ring three ring two ring one and we'll say the inner ring ring is zero right. So that's where we want our values. These are values from zero to three, and so that's how we want to plot those. So that makes that a lot easier to kind of figure out where we are on things again, just to prove doesn't change. Anything doesn't break a thing now.

B

Let's add our Dynamic one all right here we go. Oh man I'm almost out of time. So what I'm going to do is I'm going to do this very very quickly and then we're going to move on from there. So the idea is, if I were to paste this right and I call this uh scores.

B

We'll move on I can make this into an expression I just with an equals when I start building this as a string so really I'm, just going to be building this by string, concatenation and I can do a series of if statements and copy each one of these individual coordinates down now again I'm out of time, so I am just going to jump ahead and grab one that I already did instead of making.

B

You watch me cut and paste everything paste and let's preview, that okay, so what we did was that thing is we wrote a series of if statements and what you didn't really get to see is if you use the the control F here, you could help yourself by highlighting things right so everywhere you need to see something right is greater than or equal to three. uh You can use that and that can be really really helpful in sorting through what gets to be a lot of text on the screen.

B

Okay, so there we go now we have this and it previews that. So now we have this exciting thing here. Let's save now, one of the things I didn't mention is that these formats actually randomize when you click on them. That's uh so I can randomize the values here. So you can just so you can see the uh that it is drawing it dynamically right. So that's pretty cool. So the idea is, we took it from inkscape.

B

We ran it through our HTML to formatter to make that easier as a format, and then we customized it by just doing Simple string, manipulation and uh one other thing I'll mention here. We don't have time for it, but I will show you that this could be done at the exact same type of thing in powerapps, so I have a component here and you can see I've just got the SVG and I'm doing with switch statements here, but we're doing the exact same thing and that allows us to have a component. That's Dynamic right.

B

It has its own properties here. So we can say this is a one instead and it'll redraw here in powerapps as well. So you see same principles all over the place. It's very exciting. All right, let's wrap it up with some slides all right, prepare an SVG use that absolute path make sure you use view box only pass, so all the other fancy stuff like text or circles.

B

All that needs to be converted to paths before you import it into the list formatting again using a tool like inkscape, that's pretty straightforward and use that fancy current color and there's is the tool I use. Those are the tools very exciting, feel free to add those comments. Any extra properties are ignored, so it doesn't have to be common.

B

So if you're just trying to track like hey this is that even if it's just while you're doing the uh the development of the format I find that extremely helpful, because if I look at it a week later, I won't remember what that is either all right. So finally, here is the links. So this is the link to inkscape. If you want to download it again, it's free it's open source. Here's an extension, you literally just download two files, I'll put them in your uh your app data folder and there you go.

B

That's it for me. Whoa.

A

Awesome, thank you. Chris always entertaining a jam-packed shortened session, but we appreciate it uh giving us everything from yep.

A