Microsoft 365 Community Community Demos, 28 Feb 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community Call Demo - Introduction on using the library component in SharePoint Framework solutions

Description

This community call demo is taken from the SharePoint General Development Special Interest Group recording on 28th of February 2019. In this video, Vesa Juvonen (Microsoft) demonstrates how to use Library component type in SharePoint Framework solution.

Library component was released to preview as part of the SharePoint Framework 1.8 release.

Presenter - Vesa Juvonen (Microsoft)

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

A

But what I wanted to do with this? One is quickly show you the library components, because this is insanely, insanely insanely cool stuff. So let me actually get here. Let me share my screen. So I'm running a 1.8 release, candidate second version- so to say this is BR one. It's not just our internal code names, and so it's it's basically a release candidate at two, because PR 0 is the first one and then we always find something and then we follow up on things. But what I'm done here this is.

A

Actually this is the web part solution. So let me change the library solution or actually, let me show this one in here. So if I create and quickly a library component, a folder and I can go to the library, folder and I can do you Microsoft SharePoint and they find a plus beta.

A

We get the typical set of questions. Obviously, let me slightly pump up the font so get more easily see what I'm actually doing here and yoga there we go. So this is going to be called library, that's fine and SharePoint. Only this is current folder and the next question is well obviously the deployment mechanisms no API permissions, but wallah.

A

What is the type of client side component which you can create, and we have a new fellow available, so you're able to basically then execute or when you execute the yeoman generator in the past beta mode you'll get the library component type available in here, and then you can create a library component, type and I'll show you how the library component type actually looks like if I can find right there we go so this one is say: a library component type super super simple library component, it's a component type of library and let me again one part deform slightly, so you can actually see what I'm doing here so component type is library and if you manifest and manifest things for that for nothing major, but I can actually concentrate on implementing reusable components or reusable code.

A

In this case, this is just a library test library it has the name probably, which will then return. This information is coming from a custom library at certain time. So really simple. Things has to verify that things aren't actually working now after I, implement it a library or when I have the baseline done.

A

You need to do NPM link, and that means that you're able to then link this library and you're, able it locally and you're able to use the library in webparts so but in this case, I've actually already done that the only thing what I actually want to do quickly is, let me get in here.

A

So, let's see what do we actually have VP sorry library, dope test? No better. So let me do it called bundle. Just a shipped and I'll do a quickly package solution as well and we'll get this one deployed basically to the catalog. This the demo doesn't make take too long, but I want to actually go through the steps what's actually happening here. So the library solution everything is available. Let me do all so the packet solution, and yes, you know later we will actually have a one command which will do both of these.

A

But it's it's slightly awkward that you always need to do this both now, that's actually now getting executed. So that's going to be updated in a second and let's get that one deployed there, we go 1619. So now, if I go to my tenants, app catalog, let's go to the solution. There's my library test. It's baby, 80 files, that's just getting that one on the App Catalog I'm bailable for the web parts to actually reference and take advantage No. Okay.

A

We want that to be available across all of the sites, because the web parts might be anywhere in a ten and so again slightly debatable. Technically, you can do as cyclic an app catalog for library as well. Now what about the web part so we're consuming that's library in web sites, and this wasn't this one was the library part. So let me actually jump to a web part which is actually consuming that library. So in this life, yeah I think about gee. Can you meet yourself? Thank you.

A

Thank you now. So, what's going to happen next is that we link we need to do NPM link, and all of this is going to be documented in this solution in the solution folder and after that we are just able to reference the library in our code. So basically what we need to do. We don't need to update any conflicts.

A

We don't need to update anything more than say import as my awesome library and the NPM linking the name which we use for anything linking and, in this case I'm just creating an instance of that library. Again, how do you implement a library? What does the library do it? That's up to you. That's just a a simple usage scenario: it's my instance and I'm actually adding that name property inside of this rendering of the of the HTML.

A

Now, what's really cool about this one, the only thing what we need to do in this Web part is the NPM linking for development time, and then we need to make sure that we have a dependency included in here. So let me actually do that for the library itself. So in this case, our library is library test beta, no beta, 0, 0 1 and how did I know that's if I go here to the package.json.

A

I can actually say that my library name is death, better know better, so everyone so basically in our dependencies of the web, part I'm, saying hey. So we have a dependence on this basic set up and my custom set up, which is this one in here cool and then we are basically good to go. So let me get in the comment commander get in here web part library test: do you call pond or does the ship.

A

Da-Da-Da-Dah Russell: how does it know where to load the library from where it's the point it's magic, so basically it? What happens in runtime is that the web part is saying: hey, so I have a dependency on this library ship one. Can you help me and SharePoint says? Oh yeah I got that this is for you and voila. That's the only thing what you need to do. So it's super automatic. You don't need to do any associations or any, and let's do the package solution.

A

This is really really cool stuff and and at the time when we were waiting this to actually go and do this and think about all of the generic code which you can put on a library and then you're able to use the same library code, dynamically runtime in your webparts cross the whole tenant in an efficient way and you're able to version that centralized library completely ISD independently, so you're able to introduce stuff to change the stuff and that will completely doing modifications on our slides Oh.

A

What if I, were doing a library, packets versus a custom NPM packets? Well, basically, it's just manner of a reference to be fair. If you do a custom NPM package, they need to host that in somewhere. You need to reference that dynamically. You need to host that in somewhere else, then, actually the app catalog technically and you can actually make that happen as well. But the way we get the library now exposed is super super easy. So let me actually get in here.

A

Let me get to the VP library test and let me get the SharePoint and Solutions folder and there we go library test. This is available over there. So let me get my app catalog available here. We go voila getting everything installed there we go and it's a normal webparts solution. I will click check, check box and that month um and we are deployment- should be completed.

A

So now, if I go to communication sites refresh and let's create a new page at a page- and let's call this demo in here- we should have something related on library and we be library tests and there is our report, which is actually dynamically getting referenced, referencing that library implementation inside of the code. The only thing like that was the the runtime dependency and now, if I, do any changes on the library I'll, just our control test, apk file, Deb, catalog and poof updates are immediately available.

A

Recompile I don't need to do any changes on webpart side to be able to version the functionality, which is absolutely one of the key advantages of the library component, comparing indian packages because well theoretically, you can dynamically render that as well, but that's pretty impressive. So now I can do modifications on the underlying packages without impacting the web parties needed now. That was a really good, really fast. Demo super fast demo.

A

But let's get back on the slides, we do have two awesome community demos coming up as well when we wanted to actually show some new stuff which is going to be released to preview as part of the 1.8 release. So it's gonna be in preview, not for GA in 1.8, the GA for library component is planned to be in the 1.9 version and I'll have a look on if I missed any questions. While I was doing a demo.