Microsoft 365 Community Community Demos, 24 Aug 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Exposing business data in Viva Connections or in SharePoint with custom diagram web parts

Description

In this 16-minute developer-focused demo, Hugo Bernier shares new capabilities delivered by SPFx v1.13 added to React diagraming web parts originally built with SPFx v1.7.1. Updates include accommodating Dynamic Data Connections, full bleed, handling section color changes, Viva Connections, and content in web part to be discovered in search. Web parts leverage libraries/code from Mermaid, flowchart.js, and js-sequence-diagrams along with the Monaco Editor and PnP markdown property pane to both generate diagrams and to overlay text on them. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 29, 2021.

Demo Presenter: Hugo Bernier (Microsoft) | @bernierh

Supporting materials:
• Hugo’s Repo - React Diagram Web Parts | http://github.com/hugoabernier/react-diagram-webparts
• Gallery - SharePoint Framework Client-Side Web Part Samples | https://aka.ms/spfx-webparts
• Tool - About Mermaid | https://mermaid-js.github.io/mermaid/#/
• Library - js-sequence-diagrams | https://bramp.github.io/js-sequence-diagrams/
• Tool – flowchart.js | https://flowchart.js.org/
• Editor – Monaco Editor | https://microsoft.github.io/monaco-editor/
• pnp/spfx-property-controls - PropertyPaneMarkdownContent control | https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyPaneMarkdownContent.html
• pnp/spfx-controls-react - Placeholder control | https://pnp.github.io/sp-dev-fx-controls-react/controls/Placeholder

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Hi everybody, um my name is hugo bernier, I'm sorry, I'm laughing, because I I share my screen and uh in front of my screen. There's a there's, a giant water bottle and I actually moved the water bottle out of the way. So it wouldn't block your view. So that's how smart I am today all right. So my name is hugo bernier, I'm a cloud solution architect at microsoft and today I'm going to be talking about exposing business data in viva connections or in sharepoint or in teams with custom diagram web parts.

A

So what I'm going to show you today is a series of web parts actually that I built more than three years ago with spfx171 and then recently you decide. You know what it would be fun to upgrade it to the latest version of spf x and add some cool concepts like how to handle dynamic data connections so that when you click on on a web part, it passes data to another or that it reacts to uh to a web part. That is another web part.

A

That's selected how to create full bleed web parts so that I could put these diagrams at the top of the page in the header, and you know, do giant diagrams and things like that, uh how to handle section, color changes and how would it work in viva connections as well?

A

As you know, one thing that we'll we'll talk about is people often forget that the content in their web part sometimes should be searchable right and so how to make the content inside the web part appear as as part of the search results on a page, so that people can actually find the stuff. Otherwise it's it's as if you had the you know, the all your content in a picture and nobody can find it.

A

I didn't get to process the pull request to submit this web part, because I decided at the very last minute that I was going to upgrade it to spfx113, but I will be doing that uh very shortly posted in the spf x, repo. Until then, you can find it uh or the last version of this web part these webparts. You can find them on my repo, which is listed here all right, so let's talk about what these web parts do.

A

First right, so sometimes you have some business data that you need to show in a compelling way and charts and and tables are just not going to do it right.

A

Maybe you want to show a business process or a decision tree, or maybe a sequence diagram and, for example, here this is a sequence diagram that shows uh four different participants that um four different uh participants that are doing stuff right and they interact with each other. But maybe I want to show a sequence diagram on a sharepoint site, our team and or using visa connections instead of putting in boring documents describing that process and since it's visual, you could take that that diagram and overlay some data make it more meaningful.

A

For example, maybe I want to show how many items are waiting at a particular step in a process, or maybe I want to select an item from a list and dynamically update. The diagram based on the item is selected, or maybe I want to select a point in the diagram and dynamically show related items or documents related to that step in the process, and that's exactly what this solution does. In fact, the diagram you're looking at here is generated directly from one of the web parts, so um I actually took some.

A

Those are actually old videos of the old web part, but I because I can't talk and chew, gum or walk at the same time. I figured I'd display this while I'm talking about it.

A

So the challenge with doing diagrams like this is that you can easily generate like svg and use like d3 libraries, for example, to create diagrams, but the problem is people need to be able to create these diagrams easily, and so there's there's a few libraries out there that are available that allows people to just type text in a markdown like syntax and it will generate a diagram.

A

So, as you can see here, this is this: is one of the web parts that I'm going to show you where I can actually control this, and what you see here at the bottom is uh a property control that we created for the pmp library, which is called the markdown property pane and allows you to do things like like this. I want to show help in my in my property pane. I can do that easily without having to kind of render a whole bunch of controls.

A

I can just create markdown, so I'll show you how to do that very shortly.

A

There's another web part- and I know it's a little bit blurry but again I'll, show you the real thing very shortly that allows you to write uh flow diagrams and again, there's what I'm doing with all these webparts is, I'm always showing the syntax help behind the scene on how to write these diagrams. So the great thing about that is, it allows a regular user yeah, so it's using mermaid it's using a sequence uh and another one that I'll show you shortly, and you know one of the last one here is the.

A

I think this one is the mermaid diagram yeah, so mermaid diagram allows me to actually create. Can any kind of diagram that I want really and do it in a very compelling way. But let's not just show you boring screenshots. Let's actually show you the web part in action.

A

All right, so, the one thing I want to I want to point out is that when you create a web part and people drop the web part on a page, it's always a great idea like to give people kind of a good experience right. So don't just drop a web part and start screaming at people. Saying hey, there's an error in your diagram.

A

uh If you didn't put any information in there right so there's a pnp, reusable control called the place or placeholder control which will actually give you this experience that you see here. So when the diagram doesn't have text, it should show you hey, create your diagram and to get started, enter your diagram text and click on configure and doing that will automatically launch the diagram.

A

Now let me go get some sample diagrams here. So, for example, I can just grab a graph and it'll actually display it dynamically. Now I can just update it here directly. You know and it'll it'll work too. uh What do I want here? I want. I don't want an iphone.

A

I want a surface duo which is awesome by the way, so you can actually update that dynamically and, as you can see it, just dynamically updates the text. Of course I added the ubiquitous web part title here so gratuitous title here, um but what I've also added is a few a few things. One of the things that you'll notice here in this diagram is that I'm actually using a custom syntax, and this is by the way this is the monaco editor. The monaco editor I'll, show you a bit later.

A

Is this thing that visual studio code uses and it's available as a web-based control that you can embed in your solutions, so I've actually created this and it actually knows the syntax. So if I, for example, I'm trying to remember now, if I try to put a sub graph here, it'll actually create right away. It'll know that these two things go together, sub graph and end and I've actually for each one of these libraries. I've actually created a control that that will allow me to embed the custom syntax here.

A

I can obviously do the full experience with kind of the autocomplete and all that stuff. So if I start typing sub graph again and if I actually type properly uh it'll actually make this in a collapsible section as well I'll skip that. uh The other thing that we've done here is that we're using uh themes, obviously, but the one. A new theme that I've added is the ability to actually grab the sharepoint theme. And by that I can also do things like change. The colors of the section and the diagram will automatically update.

A

It kind of looks better with the regular theme. Let's just do that. Fourth, there you go, let's go green all right, so there's a whole bunch of diagrams that we can do here. So let's just grab another one here, just to show you that I'm not cheating, um so I can just kind of you know. This is awesome, but let's talk about, um let's talk about.

A

Actually I was going to talk about the concept of data information and knowledge. So why don't? I just use this tool to do that now. This is completely unscripted, so participant participant- maybe I shouldn't have done that so you've got data, you got information and you got knowledge. What's the difference between these two, these three, I can't even count today.

A

So um data is when you you take zeros and ones right you. Let's say you record how often you put gasoline in your car, um and that means nothing in itself right.

A

So data has no meaning, but when you take data- and you add context to it, so, for example, if I took how often I put gas in your car- uh and uh I put it against the calendar- and I look at a look at a calendar- and I see that you're putting gasoline in your car every fridays and every mondays that starts meeting something right.

A

It starts meaning that maybe um you commute somewhere during the week and maybe on the weekends you go somewhere far away or you do donuts in the parking lot, but you're doing something on the weekend that consumes as much gas as during the week so and I'm trying to type and multitask at the same time.

A

But so that means that when you add context to data, it becomes information, and that means that information has meaning right. And that's. The important thing here is that you can't just drop stuff in the middle of a page and hope that people will make sense of this.

A

It's always a good idea to take that data and put it in context where it makes sense where it's most useful to people and that will start giving that data, meaning now, what's the difference between information and knowledge, because people have a tendency to use these, these things interchangeably.

A

Well, knowledge is experience, is rules of thumbs, its beliefs and that resides in people's brains. So that means that, in order to take information and to make it knowledge, you need to add people right.

A

I could take everything I know I could write everything down and about, let's say sharepoint and unfortunately it will just become information again, because you then have to take that information and apply it for it to become your own knowledge, and why is that important?

A

Well, we're not quite able to scan people's brains yet, but you know understanding that the connection between taking data, putting it in context and then putting it, making it easy for you to find the people that have more knowledge about that information is how you're going to kind of get the most value out of your out of your data and your information, and this is where concepts like viva connection comes in, because you're able to actually take stuff that wouldn't matter for people and bring it at a point where it makes sense for people by giving it context and then as much as possible, make it possible make it possible for people to click on that piece of information and go find the the experts, the people that know about this.

A

So now I got five more minutes. Let me show you some components here before we show to the code, so the first thing that I do and I'll I'll skip the other web parts, but the one thing that I'm doing is I'm using something called the mermaid library uh to do this. um There's there's actually quite a few libraries. Mermaid is kind of a really cool library that allows you to do kind of all the diagrams that I was showing you before.

A

um You can do all these things and then more uh by just using simple text, and you can you can embed those in web parts or again in teams or viva connections, uh really really cool. My other web part actually uses the sequence diagram, which is actually the one that I use to generate. The title of my my slide uses the sequence diagram and this one actually supports hand drawn diagrams versus simple diagrams.

A

It's a great way to communicate with your team, you put it on your team site and you can actually share a process or something like that.

A

uh Yes, actually mermaid is implemented in the uh the azure devops wikis as well, and then there's another one called flowcharts which allows you to actually do advanced flowcharts and that's what my three web parts do. Is they really because I may have mentioned this before I am the world's laziest developer?

A

Why would I go and rewrite code that someone else has written and someone way smarter and way better? Looking that has built something that does something really cool like that and it's already been tested. Why don't I just take the time to to take that library embed it inside of my solution and make it work with like themes and accessibility, and things like that, so the other thing that I've done again. I've talked about monaco editor, I'm actually using the monaco editor uh library.

A

Now those of you who have tried to use monaco editor inside of an spfx solution. I know chris kent did one solution that has it it's not the easiest thing to do so. One of the things that I would love to know in the in the the chat is this control that I created, which allows you to embed a monaco editor in a web part and allows you to create your. You can use the standard syntax, but you can actually create your own syntax as well and your own syntax, highlighter and autocompletion.

A

If you think that this is a control that would be useful to the community, please let me know, and I will submit it to the pmp, reusable controls I'll be watching for the the chats in the in the window, I'm running out of time all right. So let me just try to wrap this up and we'll skip the code for today. The other thing that we have that we're using here is the property pane markdown control.

A

uh This is something that I built. Actually I built this control when I built the last version of this web part, but this is something that you can use. If you ever need to put instructions inside of your web parts, uh it's just really cool to do that kind of stuff and again the more guidance you can give your users in in using some complicated things like that, the better it is. I wish I had some time to cover the code, but again I need to wrap it up.

A

I'm hearing the the oscars uh music playing playing me off stage. uh Thank you. Everyone I'll stick around. If you have any questions. Thank you, david for posting. The links and patrick I'll give it back to you to wrap it up all right. Thank you, hugo, for that.