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

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Iconography SVG Wizard for SharePoint List Formatting

Description

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on December 19, 2019.

In this 15-minute video, PnP Community members David Warner, April Dunnam and Hugo Bernier, share their work on the SVG (Scalable Vector Graphics) Iconography Factory (graphics library) for list formatting. The SVG Factory makes it very simple to get and insert an icon’s SVG design path into the JSON of the list formatting definition. This is a low overhead solution since only a single icon rather than an entire collection of icons is loaded into the page. Also, this is a shared – open source plug-in architecture created by/for the community. Feel free to adopt and add your own icons.

Presenters:
• David Warner (Catapult Systems) | @DavidWarnerII
• April Dunnam (Microsoft) | @aprildunnam
• Hugo Bernier (Point Alliance) @bernierh

Supporting materials:
• Sample code: Coming soon. Look for "SVG Factory." It will be live at https://github.com/SharePoint/sp-dev-solutions Repo...
• Demo: How to use Deep Path - Drawing SVGs conditionally with SharePoint List Formatting - https://www.youtube.com/watch?v=_-Q_itkE0Uk | Chris Kent | @theChrisKent
• Library component demos from David Warner - http://warner.digital/tag/sharepoint-library-components/ | David Warner | @DavidWarnerII

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

Thank you guys for your time today. So this is the three amigos of the demo today so feel free to reach out to any of us April, who is officially now at Microsoft, Congrats, again Hugo at Point, Alliance and myself, a catapult we work together on this, so I look forward to showing you what we got. What we're gonna talk about today is an SVG iconography factory for list formatting. Now that sounds fancy pants, but what we wanted to show is that you can use SVG's directly within your list formatting.

A

In fact, we may remember a few different demos that Kris had done flawlessly on how to utilize those SVG's through an application called Inkscape or another vector based solution. So what are SVG's and why do they matter? They're scalable, they're 100% vector, so we think about icon fonts. The way we may implement those via CSS, but it's way better because it is more scalable and more performant and we'll see why so the question is: is it a file? Is it markup right?

A

It can be both we can access directly the SVG technically an SVG file is a document, so we're able to access the properties of it. Specifically. What we need is the D path, which is what makes up an SVG, it's all mathematical, so I think geometry, all those are little shapes based on mathematical calculations and that's what you see in that D path in the SVG markup in the slide, why SVG is endless formatting, so they're, extremely performance friendly when we think about utilizing, icon, fonts you're stuck utilizing the collection of the fonts.

A

So if you have a font that has 100 or more icons in it, you only want to use one you're having to load that entire font, even if you only want one icon so with an SVG you're able to access the individual icon, making it more performant. Additionally, you have targeted scope so where we want might want to load icons using an icon font. Typically, that's going to come by an application.

A

Customizer we've seen that demoed in the past, but that's going to load globally we're going to have to display it everywhere, even if the page or the list is not you, so some of that code will get implemented into our page, whether we want it or not, with the SVG put into our list, formatting definition it's specifically and highly targeted just to where that list formatting instance is being displayed, whether it be in a list or a list web part, which is awesome because it's almost like a custom web part we're able to ensure the target of that individually.

A

So we see what that markup looks like and that makes sense to everybody right, totally readable, totally legible. We know what every little one integer means and how it's going to work now, it's very confusing and it can be confusing, and so we wanted to make it easy here.

A

We had an idea together on how to make it easier for the community to be able to access icons and that's where the SVG Factory comes in now, maple April is going to do the demo, so I'm going to hand it over to her and then we're gonna hand it off to Hugo to talk a little bit of the architecture.

A

We're not gonna get too deep into the actual code today, because we don't have enough time- and we want to share that in depth in another demo and we're also going to have it available as a sample soon in a special shout out to David Romano, whose sample we're going to be using today so April. Take it away. Yeah.

B

Thanks David all right so to really showcase the power of the SVG Factory. Here we wanted to start out with this example of a meet the team kind of list here, so you know we've. We wanted to make this a little bit more fun. So obviously we want to have the employee name, their job, title, email and picture and all that, but we want to know some fun details about this person like where are they from what's their home country, their favorite sports?

B

If they're, Marvel or DC fan favorite season all of that type of information so well, we could just throw that information into a SharePoint list like we see here and just you know have it have a be like this: it's not the most eye-catching right, so we wanted to apply some list formatting to this, so we actually don't like David, said: I use, Denver, Marla's, Alice formatting sample on the small contact card here, and so our first attempt here is this non SVG view.

B

So we use his example, as is just added some text lines to surface up additional information. So you know I'm from the u.s. I'm a Marvel fan I like football, and my favorite season is fall, so you know that this is fine. You can. We can see the information it's usable, but again is this the most eye-catching sample that you've ever seen? Probably not what can we do to make this better? So, let's dive into our other view here our SVG view of this, and hopefully you can see right on the box.

B

This is just way more appealing to the eye than the previous version we saw here. So we have these nice visual SPG's that show that information that same information, but in a very more user-friendly visual way. So this is all done using SPG's. Now, if we go into the format here, you can kind of scroll down, you'll see all of those deep paths.

B

If we scroll down a little bit here for each of these that we're using so for the link to an icon, if we keep going down a little bit so here's the home country flag and where you're putting in those deep paths now again, if you're an end-user, not technically a developer, it can be pretty difficult to figure out.

B

What's this right, deep path is for your SPG's, so we wanted to make a way where you know in users or people that maybe just don't even have the time to mess with that can just find out. Okay I want to put in you know, four will notice that Marvel and DC is missing here, so I want to fill that information in.

B

So if we scroll down here in the formatting definition, a little bit you'll see I have this if it's marble or DC block so in here, and this, if statement is where I want to be able to put in that SVG D path. So without having a you know, format, anything I can just click here on my SVG Factory and notice when I click on the SVG Factory. It's not messing with my format open there, that's still open, it's still useable, and here in the SVG Factory we have it grouping enabled.

B

So we have some teamwork and demo icons and it's all searchable. So we can search for basketball here, but for my case, I want to use this Batman icon and a Captain America. So if the person likes DC I'm going to use Batman if they're a Marvel fan, I want to use Captain America here. So if I want to use this in my list, formatting definition all I have to do is click the icon. That I want you'll, see that it's copied to my clipboard.

B

So now, I can just go back over here to my formatting definition and right. There is where I want to put. If this is DC, so I can just paste that in so there's all of that big d path, information and then, if they're, marble I want to grab that Captain America one. So I can just go back to my SVG Factory and copying us Captain, America here and again I.

B

This window is persisting for my formatting, so don't have to worry about losing that when I go back and forth to my SVG Factory, so we'll paste that in there and now, if I save this definition, there you go now we have the nicely formatted, there's the Captain America shield for the Marvel fans and the Batman for all of these DC fans they're.

B

Just with a few simple clicks, I was able to utilize these spgs and my list formatting and have a nice great visually appealing new formatting here applied all right and with that I'm going to go back here or Hugo. If he's gonna talk about the code behind in the solution, architecture awesome.

C

Thank you so because we had three demos today and we had three presenters for our demo. We chose not to share too much of the code to talk more about the architectures. So the way we did this is we built it so that we would have a command set extension that would display that little icon and the commands extension will call a library solution, which is our SVG Factory and that's where all the icons, the dialogue to display to display the icons and things like that comes from inside.

C

That component there's two elements: one is the SVG Factory that I just talked about, but also another thing is an interface that we define, which is I, SVG, icon library, it's really hard to say multiple times in the demo, but that's the name of the interface and what that interface does. Is it says you know, there's one method that you must implement. It is give me the list of all your icons, and then we have a of other libraries. Again there there s, VFX libraries that we've created for this demo.

C

We prepared two one is the demo icons one and teamwork one, but we absolutely built it with the idea that other people in the community can start adding their own libraries so want to have a holidays library or you want to have a business library or whatever you can implement it any way you want as long as it implements the is VG icon library interface, when the SVG Factory calls each library each library has respond to responsible for getting all the SVG's it brings that to the SVG.

C

Factory never repeats that for each library that we've got in in this set. So why did we use the library? Why did we not just you know hard code, a big giant command extension? It's because the command set gets loaded every time the list gets displayed, but we don't want to load all those icons and call all those libraries every single time.

C

We only want to do that when users are indicating that they would like to format the list and that's why we've decided to use the VFX library, but when we architected this, we absolutely architected it with the vision that this is going to be more like a plug-in framework where eventually, we can load multiple libraries behind the scene and eventually kind of extend that and we'll talk about next steps in a minute. But before we do that, let's talk about what happens when, when you actually click on an icon.

C

So when you click on an icon from the dialog, so we move forward. We do the good to dis animation here and it loads the SVG from the icon and that's the library, the is BG icon, library, interface, that's providing this. It returns the SVG and then using uh the you know the demo that Chris Kent demoed a while ago we're actually using the same approach. We go get the path, the D path from the icon, and then we.

C

What we do is we create on the screen temporarily create a hidden, HTML input, so that should appear on the screen momentarily there you go and then what we do is we cut actually copy the art just insert the text of the D path into the input. Now, because it's a HTML input, it can behave like a regular control inside of a web page. So that means we can actually call the clip the the browser's clipboard function to copy this string into the clipboard.

C

As soon as we do that we destroy the the temporary control, and now we have the D path in our in our clipboard and that's really all there is it's nothing fancy and in fact, what we've done when we build this, if you think about it, is we've, we use David Warner sample on how to create libraries.

C

We use Chris Goetze example on how to use the the SVG D path and we use one of the extension samples that I had built, which is to leverage the concept of popping up dialogues using and using the clipboard, as well as leveraging kind of April skills and list formatting, and things like that. So what we're going to do next, so this sample is something that we're going to be putting court on the SP dev solution repo.

C

We absolutely built it from the start with the idea that we would want other people to contribute to this and make it what they want. We definitely want to add more functionality in the future. You know some things. For example, the ability and I saw someone commented on that.

C

So it's great to see the we're on the same wavelength, the ability to add a URL instead of you know an SVG, the ability to kind of insert your own, your SVG, not just from a list of SVG's and things like the ability to provide animated interactions and stuff for that. We absolutely want to grow this, to be something that people want to use. Not only just for SVG, but the idea of this this plug-in framework I can definitely see some other solutions.

C

You know I'm looking forward to build that will allow me to leverage this whole plug-in framework and and do something that can continually add more functionality, but just adding more libraries to it. So the probably the most Fortin aspect of this whole demo, for me, is not just the solution. I mean the solution, the school.

C

It was fun working on it, but the cool thing here is we took you know it was basically David April and I, so I'm working with two MVPs well, I, guess one former MVP and one MVP and we're all working from a different background. Right I wanted to learn about using libraries, and this is something that David is really good at. You know and I wanted to learn from April in terms of list formatting and things like that. We all wanted to learn something from each other.

C

We saw an opportunity to get together and we're all busy we're all. You know speaking at conferences and again some of us are getting to getting new jobs and stuff, but you know we made the time to get together and to put this together, so we could learn from each other and we built it with the idea to other people who contribute so please, you know. If you have ideas and you you, you have MVPs or people in the communities that you respect and you want to learn from them. You know a lot of them.

C

I can't speak for all of them, but a lot of us are always excited to help other people and excited to to come up with new ideas and work with other people, so don't be afraid to ask other people to contribute I'm, hoping that we can see a lot more solutions like that where people are getting together to build new ideas. That's it for me, any David did you or April. If you have anything to add perfectly.

A

Put thanks, you go. Thank you.