Microsoft 365 Community Community Demos, 13 Dec 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using dynamic SVG images with Viva ACEs for business charts

Description

In this 10-minute developer focused demo, Patrick Rodgers shares a technique for generating/adding dynamic SVGs (interactive images) to Adaptive Card Extensions in a way that fits into the Adaptive Card mind-set (small, dynamic, performant). Run through the code for adding a simple mathematically derived geometric graphic to a CardView and a more complex bar chart sample (image graphic bound to data) in a QuickView card. Follow this approach to create your own SVG generation functions. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on December 13, 2022.

Demo Presenter
• Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials
• Sample - ace-chart | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-chart
• Article - What Is an SVG File? SVG Image and Tags Explained | https://www.freecodecamp.org/news/svg-basics-what-are-scalable-vector-graphics-and-how-do-you-use-them
• Article - Everything You Need To Know About SVG | https://css-tricks.com/lodge/svg/

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

A

A

Cards, uh so this is adaptive card extensions for SharePoint framework, something we've talked about a few times in the past on these calls uh and one of the things that has come up to us. A lot is: how do we put interactive images in our cards, so we've got a card here uh on our dashboard and we've got this little neat step image. I'll just remind everybody. I am not a designer, uh but then we're going to look at the quick view. We've got a neat image here.

A

That is this little graph and there's lots of ways to achieve these kind of things. You can have static images, of course that's great, but uh we want to make them a little more Dynamic and we want to make them dynamic in a way that works in the Adaptive card, extension, uh sort of framework or ideas, and that means making them. You know fairly lightweight fairly small and not taking up a ton of coding resources, because uh you know there could be 20 of these adaptive cards uh on the page.

A

So we want to have a way to take data, bind it to an image and then show that to our users. So for that we've kind of seen this image. Let's go look at how it is done so I'm going to switch over real, quick to a different window. Specifically this one so I have here. uh This is just a scaffolded adaptive card extension project. You can see all the little files and everything there in the tree. So let's hide that and what I've got here is the actual extension code.

A

And if we look into this, this is pretty much boilerplate. What you get uh when you set up the new project. I've got my card view. I've got my quick view, we've seen all those, but how do we make those Dynamic images so I'm going to pop over first to the card View- and this was that first card view it had that little black uh sort of Step icon on it and you can have Dynamic images in your card views if you'd like to do that, we've got here. A function called get SVG.

A

This could be in state but uh stored in the state, so it could be refreshed. I didn't do happen to do that in this demo, but down here you can see the function uh get SVG and for those of you that aren't familiar with svgs svgs are really HTML, like markup, so they're a XML sort of extended markup language that you just describe the picture in and that's how they scale and do all the great things they do. So we've just taken this SVG again I'm a beautiful designer.

A

So this is a very simple Little Couple of transforms, which are just little rectangles and uh we use this little Library here called SVG to Tiny data URI. So you might be familiar that you can store SVG images as strings as data strings and that's how we use it here. So we have an image URL we get our SVG, which is going to end up giving us back a string and then this is where we could do any kind of processing we wanted in the card view, so we could have little dancing icons.

A

We could do all sorts of fancy uh stuff there. So that's the first thing we wanted to look at was card views, svgs understanding they just consist of markup and that we can convert that markup string into a data URI that we can bind into our card View and use, and so uh this is uh what are these called the base image card view?

A

It has that standard image, URL property to it and we're giving it as an image URL the actual data URI of this SVG, and it shows up as that image we saw before. So that's one way to do it here in the card view, but for quick views. We often want to show a little bit more information or bind this to actual data that maybe it updates more frequently. Maybe I can pick different options, sort and filter things and stuff like that, so we're going to use some some of the similar Concepts.

A

This is the quick view. Let me show you the template. Real quick template is super simple I've just got an image. Is my adaptive card? Template I've got the body and then I just have an image here that has a URL again we're doing the same thing: we're converting this into a image URI. So all the image data is contained in that URI size is large, and then uh you know this other stuff here is I. Think was just part of the template.

A

So the only thing I really added was this image drop that out of here and let's look at the quick view code. This is just base adaptive card quick view. Nothing fancy going on there. I've got a method here uh in it, so we've got the data method which is normal, but then I've got a function, get data which is just creating this mock data for us.

A

um I didn't want to have this actually calling anything to have a bunch of external dependencies for the demo or for the the sample code, but this could very easily be an async function that returns to you. Some data from an endpoint um here, I've got this is business e stuff, so I'm committed committed at risk. Uncommitted, upside uncommitted- and these are all big uh dollar amounts right. So obviously we're doing big, big business. We've got big big dollar amounts, and then uh we've got a function here that I just grabbed from stack Overflow.

A

You can see the ref there, but this just converts big big numbers into things that say like 5K, you know 1M per million to B for billion- something like that, um but this is just sort of make our graph a little prettier and the other thing I've got down here is a function called generate chart SVG, and this actually is going to take data uh and then, in our case here a title um because that's you know just the way we did this sample and it's going to give us back a string so again we're getting back this data, URI string and then I'm, using a really old trick of just creating an array and shoving strings into it, and so we're building up that SVG markup, just as we did before, but now it's a little more Dynamic.

A

We can see how this can be done with a little more kind of code behind it. So here uh this is, you can have style sheets in your svgs. So this is a style sheet in this SVG. That's giving us a heading left, heading bar values and legends formatting that stuff and then as well we're pushing in here's our title. uh You know it's got a class of heading. You can see our class there, so those classes are local within the SVG.

A

You can also have the classes outside of the SVG and style it that way, lots of ways to do that. We're dropping our title text in there and then we come down uh to ourdatarose.map and uh I'm not going to go through all of this, but you can see we're doing a bunch of math here, so we can create those bar charts and things like this, uh and so we're going to push all those things into our SVG we're going to create those little bubbles.

A

We saw and we'll jump back to that in a second and then we're setting up our Legends, and so all of this is calculated off of uh you know our max value and zero, and then we, uh you know, use those convert to International currency system uh function. That was the thing putting the m and the B and things after it like that, and then again we use our SVG to Tiny data URI, that's from a library, in fact mini SVG data URI.

A

So if you want to use that I've had good success with it in this sample, um and then that gives us our SVG and then we we uh return that in the chart SVG value which showed up there in our template, and so what that does is create this SVG dynamically and then it allows you to control it, and so you might say well Patrick. Why would you go to all this work?

A

Why would you not just- and let me jump back to the other window, so we've got uh our uh our card here and we're gonna, quick, quick view. You can see this image here, so we've gotten some nice client-side, rendering it's super lightweight um I did a lot of research. We had some internal projects that that started me down this path of looking at this and they had some very specific templates. This was kind of one of them.

A

It's changed a little bit from our internal thing, but basically this uh that they wanted to show and in looking at there's a bunch of generic SVG charting libraries out there in the world and uh I certainly encourage you to have a look at them, but our needs weren't generic, and so we wanted something again thinking about adaptive cards and Page weights and performance.

A

That was very simple, and so we just wanted to generate this chart not any chart and when you can restrict down your scope to something like that, you can much more easily then craft the code, and so we've looked at that uh image.

A

There and I want to jump back to the code for just one second, and so what we've been able to do is create a function that binds to our data and produces that specific chart, uh and you can, in your own time, look through all the logic here and how we calculated the different percentages and things like that. We've got it all documented there, but so this could also Imagine.

A

You could have several functions that do slightly different charts with the same data or different data, and when your needs are very specific, uh specific chart, specific images, specific Graphics I would highly recommend you take this kind of a specific approach to it: you're going to have better performance because you're not solving a generic case, you're going to end up with less dependencies in your code and you're, getting up with a much smaller excuse me so certainly encourage you to have a look at this sample. I think it's a great way to generate Dynamic svgs.

A

So with that I'll say, please do check out this sample, and uh uh you know if you have any questions, feel free to reach out, but I think it's a great sample shows a nice technique for uh generating these svgs in a way that fits into the Adaptive card. Extension mindset of small and dynamic, uh while keeping the performance and the page weight or performance up page weight down so just good stuff to keep in mind and I hope. Everybody found this useful thanks so much for the time. Yes, excellent, really really cool stuff.

A

Patrick um awesome, awesome.