Microsoft 365 Community Community Demos, 2 Jan 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using Project Online REST APIs with SharePoint Framework

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 January 2, 2020.

In this 12-minute video, PnP Community member Joel Rodrigues shows viewers how accessing Project Online APIs via IntelliSense in SPFx is very easy as opposed to traditional methods. Joel has built upon foundational PnPjs Project API work from Pawel Hawrylak @pawelhawrylak.

Developers can try the Project module for PnPjs either by getting the published npm package or by downloading the code from GitHub. Two key advantages of using SPFx for Project is extensibility options and development time savings.

Presenter:
• Joel Rodrigues (Storm Technology Ltd) | @JoelFMRodrigues

Supporting materials:
• Sample: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-pnpjs-project-online
• Blog Post: https://joelfmrodrigues.wordpress.com/2019/01/08/spfx-solution-using-pnpjs-to-consume-project-online-rest-api/
• Original Repo - Project Package: https://github.com/phawrylak/pnpjs/tree/feature/project-api Pawel Hawrylak @pawelhawrylak

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

My name is your Rodricks I'm, a SharePoint developer at storm, a company based in Dublin.

A

You can get links to my Twitter accounts and lalala, so the presentation is a project module for en PJs, and this happened when I was working on my previous job on the company, which was quite strong in project and as a sharepoint developer happened that I had to work with some bits of project and the massive I had a massive resistance at the beginning.

A

When trying to deal with the torture in the ad and do the common approaches for custom ISA customizing the side switch for us, we are SharePoint developers will look at the site and is just a SharePoint site with extra bits. So I thought well that can't be that hard to use the SharePoint tools on the same scenario.

A

Why do I have to use tools from that were common in the SharePoint spice like two or three years ago, or maybe more than that so I start looking around and while I was working on it I found some barriers, which I noticed that had a massive impact slowing me down in progress, which was the learning curve for the product I didn't knew the project REST API. So everything was me trying to on the browser trying to find endpoints and things like that or similar experience.

A

The standards are a bit mixed and, as I mentioned, there was no really modern development story like we had in SPF X, so I start playing around and eventually God tried hasbi effects. It just worked straight away there. There was no surprise there. Web parts work on classic pages and project classic pages. Everything was fine, so we get immediately all the benefits from SPF X. As we all know, there is a good development story documentation.

A

You can pick any framework you want, and you get of course support using webparts for classic pages, and on top of that, you get the extensibility options for calling graph and the third-party api's and all the bits and bobs that you get from sharepoint framework. You get a lot of advantages compared to the common scenario, so the project module for PNP jes was everything was good when I started being able to hook, has B effects in project, but the rest api was still a big barrier.

A

So I looked around and found the first development version of this package by pavel. I have a link to the initial repo here, which I then end up cloning and, at some point, I end up recreating from basically clone from P and PJs. So I could easily update to the latest versions without depending on pavel, because my full request, the first of all request, I submitted to these original reports still open, so I, don't think pavel is maintaining the repository anymore.

A

But anyway, all the credit for the code is is really his I just basically used it big fix a few bugs and end up publishing, so it's easier to consuming. So the package works pretty much the same as the SP package for peon PJs and covers the endoscopy I project server end point in project online, so this is a development version kind of even though I've used it in production. Already in some scenarios you get all the helpers and all the structure from peon PJs, which you can't go wrong with.

A

So this just to make clear to everyone not to Patrick. This is not in the mine, PN PJs repository. It's a package. You can install completely separate from the NP at the moment. At least it's not 100% production ready, some end points, I just had no time to test and I know there was. There are still some issues in some operations that don't work yet, but if you have the need test it, my current judgment see if it works on scenarios that you need. The coverage is already massive, I will say.

A

Maybe eighty ninety percent of the end points, so it's a lot of work there, especially from Pavel. So let me show this so the original repository as I mentioned you can get a link from the sides as well. As you can see, my poor request is still here and he actually went here tomorrow. So I don't think this is being maintained.

A

This dissolution here is in the repository that David was just showing it's called react p.m. PJs project online. You can get the code. This is just a sample code, just some sample code to cause some end points that I created the UI is terrible, and these years just so I can I can easily invoke the functions, but you can get things like cat projects and, as you can see, you get everything you can use all the benefits of Kent Vijay. Yes, things like select or orders.

A

This is currently working with the latest version of npj s1. Not so keep that in mind. If you give that a try, because you will need to install dependencies for the NP come and PNP logging and P and P or data, but you can install those from NPM just target the latest one point: X version and everything should work. I have a blog post, I'll show in a moment. So as an example, we get all these. So let me pick a project here.

A

And I'm just logging everything on the console, but you can see that operations in here I'm just eating a lot of endpoints for the project resource.

A

My mouse batteries are dying, I think so, as you can see, there's a lot of data being returned, and this is everything you can get at the moment if I'm not wrong from the package in the project in point. But there is a lots of endpoints, you can get there like tasks or you can have even a dream cycle a project and that takes a little bit I'm from drunk yeah.

A

Our appetite project, which does old, supports all the operations you need like checkout and then your podiatry polishin and shaking again the project every all of this is already supported, which is very useful. You get things like tasks.

A

So, just to show a few endpoints, you get all the information. If we look at code, if you are familiar with PNP J, yes, then you know that it would be something like this and that's it. All you need is an a sync method or promises if you prefer and then you just a white and you can go.

A

You get a lease and start, and then you get everything from here. You can go projects, but if you want, for example, to other project- and you come here and you get intelligence on everything, it's fabulous project api's are very hard in my opinion, so this makes development extremely easier.

A

It works everywhere the same. If someone here is watching and is from the project space and not sharepoint, and you are really missing out, give this a try because they will make your life so so so much easier.

A

If you want to work locally.

A

So this is the project you can install from NPM. If you are just want to give it a try, and then you install these two packages as well and this one. If you want to run in development, so you can maybe fix anybody find, or rather new, yaks a feature you can still do it so follow the steps that David showed before to clone the project or download.

A

This version here on my github account has the latest peon PJs, maybe not the latest. Now.

A

So you can put that side-by-side with your project and then build packages. You can follow the documentation. I have two commands here that you will need on pane, PJs repository and then in your SP effects web part.

A

Now before you do that you'll need to install the pure dependencies on the package. So you basically follow these steps. You need to go to the project package directory on the dist folder and then install the dependencies, and after that you can simply install.

A

Locally into your SPF X solution of you will just work, so you can make changes repackage and then everything will reflect in your SPF X project and that's it. Thank you very much very cool.

B

This is something I'm very excited to see get out to the community. Just because I know various folks have been working on this or talking about this for a while I hope folks check it out. If you got some project work you're doing it's, it's really a cool resource, great work, Joel on getting that out.