Microsoft 365 Community PnP Shorts - Guidance Videos, 24 Jan 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Introduction to PnPjs v2

Description

In this video David Warner demonstrates how to get started on using PnPjs v2. PnPjs provides you an easy and intuitive way of accessing information in Microsoft 365 when you are implementing your solutions using JavaScript/TypeScript.

Video demonstrates following different core scenarios:
- How to get started on using PnPjs v2
- How to update existing SharePoint Framework solution to use PnPjs v2

Presenter: David Warner (Catapult Systems) @davidwarnerii

You can find additional documentation and other details around the PnPjs from following resource:
- https://aka.ms/pnpjs
- PnPjs GitHub repository - https://github.com/pnp/pnpjs/

If you ran into any issues on using this library, please do let us know at the the GitHub issue list - https://github.com/pnp/pnpjs/issues

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

A

Welcome to the p-n PJs version, 2.0, introduction, video for new and upgraded solutions in this video we're going to begin by looking at some updated documentation for p.m. PJs version. Two we're also going to see some samples that are available that will help identify how we can use the new features available to us and v2 will then look at the installation procedures needed for new and upgraded solutions where we might already be using p.m. PJs. We'll also take a look at some new features, such as selective imports, presets and in vocables.

A

Let's begin by taking a look at the updated documentation and samples for version 2. As we can see, the primary documentation is based on version 2. Now. First of all, we can definitely still access version 1 if we need to they will here at the top, but much like we were used to in version 1. We can always access the getting started, and this will tell us exactly how to get started with version 2, how the installation has changed and what we need to do to install it. We can also explore the library concepts tab.

A

This will show us some of the new features that are available within PN PJs version 2, such as in volts, selective imports in custom, bundling. Now why we're going to be creating additional videos that cover many of these topics? It's highly recommended. They review the documentation if you're looking to take advantage of the new v2 features. Additionally, the documentation will continue to receive updates as required, so it's always best to check the documentation first for any new changes or features.

A

There are also samples that are available to us for some of these new features such as custom, bundling, you can access that through github. So if you're in the documentation, you can just right click and open that up in a new tab which we'll do here takes us to the virtual branch, as we can see here, and now we can access the variety of features that are available to us. Well, we're going to briefly take a look at is our samples. If we click on samples, we can see they're available here.

A

We see there are samples for presets custom, bundling webpack and custom bundle roll-up. Now it's important to note that these are samples on how to use some of these new features in p.m. PJs. This is not where you would want to put any samples you've created that utilize pane PJs. Those will still go into these pfx repositories for webparts and extensions. Now, let's take a look at a demo of installing PNP j/s version 2 into a new solution and utilizing some of the features such as selective imports.

A

We also wanted to mention that in these demos, we're just going to provide an overview of these features, because this is an introductory video, but we will have additional videos that will dive deeper into these features. Let's begin by setting the context for this demo, I've created an out-of-the-box SharePoint web part where we're going to install PN pjs version 2 and use it to connect to our website and request a list of our lists. First thing we want to do is install PN, pjs version 2.

A

We can do this by simply making a request to the SP and the Graf packages. There's the only two requests we need to make, which is different from version 1. Of course we want to include the request to save it with save now that we've installed our PN pjs version 2, we can begin making the import statements to our solution. If we had used PN pjs prior to version 2, we know the only import statement we needed to make to connect to SharePoint lists or libraries was directly to the SP package.

A

So let's go ahead and insert that import statement that we're used to seeing everything looks to be working right so far. So let's test that out and see if it works, we typically would type SP web, but immediately we see something's wrong. It's throwing an error because, in version 2, we now are able to utilize selective imports. Essentially, selective imports allow us to select the parts of PN pjs. We would like to import as opposed to the entire package as how it worked in version 1.

A

This is greatly going to benefit us from a performance perspective, because now we only need to bundle in our solution. The pieces were actually using from the pn p JS library, as opposed to the entire library. Now, because we know in this demo, we would like to connect to our SharePoint site and retrieve a list of all of our SharePoint lists. We're going to need to include a few more import statements, so I'll go ahead and paste those in now and we can see.

A

Our error has now gone away on our web object, and we can see that our lists is now available as well. The next step is to include some functionality that allows us to use PN pjs, to connect to our SharePoint site and retrieve a collection of the SharePoint lists. I've got that small functionality ready to paste into our solution. Now, let's briefly review what this new function does it's a very simple sample that connects to our SharePoint site and captures a collection of lists.

A

In the same way, we were used to doing it with PN pjs version, 1 we're simply cycling through our array of lists and then we're updating an element with this list- collection name. It's just simply listed right up there now for purposes of illustration. Regarding the selective imports feature, let's remove one of those selective imports and see what happens if I scroll up and keep our connection in view and remove our lists, selective import. We see that our lists now is airing.

A

Alternatively, if I return, our import statement for lists and remove the web will see that it errors in our connection at the web level. So, let's return our import statement and take notice that, while we're connecting to lists both selective import statements are required for it to work now, let's also take a moment to look at another new feature for version 2 in vocables prior to version 2, when we wanted to make a request to SharePoint for something like a list data or list items, we would always finish our connection using the get method.

A

Now, with version 2, we can invoke the object directly to execute the default action for that class in this case, making a connection to request the lists. So, let's make that change, we can now update our code to execute this function and we're ready to build. Let's begin by clearing our command prompt, we'll, go ahead and execute our gulp serve, and now it's packaged we'll jump over to the browser and take a look.

A

So here we are in a SharePoint site: I've created an out-of-the-box site called PMP jsv and we're in the workbench we'll go ahead and look to add our web part, which I've called PNP JSP it's loaded and we see it successfully loading the lists within our site collection. Now, let's take a look at another demo where we will take an existing solution that is using version 1 of PN pjs and upgrade it to utilize version 2. Now, in this demo, we're also going to take a look at a new feature called presets.

A

You can find presets in the documentation under the transition guide and the presets section we're going to dive deeper into presets in another video. But in short, it allows us to group an entire set of selective imports into a single import statement because of the selective import feature that we saw in the first demo. Presets play a very important part in successfully upgrading your version, 1 PN pjs solutions to version 2. Let's jump to the demo. Take a look now in this demo. We've got a SharePoint web part.

A

That's been set up exactly like we saw in our previous demo, it's using PN pjs to connect to our SharePoint site and retrieve a collection of list names. The difference is that it is currently using P and PJs version 1. Naturally, the first step would be to get our pn PJs packages updated to 2.0 and because, when we install pn PJs version 1, we explicitly install o data logging in common, but we do not have to explicitly install them with version 2.0.

A

The recommendation is to uninstall P and PJs and then reinstall 2.0 specifically now, while this should be successful for most cases, if you have any trouble, don't hesitate to open an issue log and get help. Now, let's go ahead and uninstall version 1 of PN PJs, we'll use the typical NPM uninstall and will explicitly identify logging, common, OData, SP and graph.

A

Now that version 1 has been uninstalled, we can do an NPM install for SP and graph, which will automatically install version 2 all right. We can now see that version, 2 of SP and graph or PNP JS has been successfully installed. Now why the installation was completely successful. If we look over at our code, we can see we're now getting an error on the web object. This is, of course, because, as we learned in our first demo, simply importing only SP from PN pjs does not include everything.

A

We need to make a connection to the lists. Now at this point, because we know exactly what selective imports we need, having already done it in our first demo, we could just simply include those import statements, although you may be working in a larger project where you don't know exactly which selected them horse you need. This is where presets come in handy presets. Allow you to predefined a collection of imports that you would like to include and what's fantastic is PN. Pjs 2.0 comes pre-loaded with the preset called.

A

All this preset will replicate what the experience was like in version 1.0, making it very easy for us to transition from version one to version two, and while it is highly recommended to use selective imports to take advantage of tree-shaking and performance gains using the presets all will allow us to quickly accelerate using version 2.0 and then add the Selective imports at a later time.

A

We can take advantage of this preset by simply replacing the import statement instead of just referencing at P and P SP will reference at P, n, p, SP, slash, presets, slash all so, let's go ahead and make that replacement save, and now we see that the error has been removed from our web object and while it is highly recommended to use selective imports to take advantage of tree-shaking and performance gains using the presets all will allow us to quickly accelerate to using version 2.0 and then add the selective imports at a later time in our first demo.

A

You might also remember that we introduced in vocable objects, so the get method is no longer required, but it has not been removed. The get method has been left in place so that solutions would not be broken upon transitioning from version one to version two of PN pjs. This will allow larger projects to slowly adopt the newer features of PN pjs 2.0 as time allows because we're using it in a simple usage scenario for this demo. We can go ahead and make the change. Now. We simply just need to remove the dot. Get.

A

We've now successfully updated this simple demo project to use P and P J's version. Two we've showed how to uninstall version one reinstall version two: how to utilize presets and update our code to take advantage of in vocable objects. Now all that's left is to gulp serve and confirm everything is working. So let's go ahead and execute our gulp serve. Now that we've successfully ran our gulp serve. Let's take a look at our workbench, we're in our hosted workbench, so we'll go ahead and look to add our webpart.

A

It's gonna be called PNP J's version one because it was originally built on version one. We now see it successfully loading using version 2 thanks for watching and be sure to check out our other PNP jsv 2 videos.

A