Microsoft 365 Community Viva Connections & SharePoint Framework, 13 Sep 2018

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint PnP - SPFx and JavaScript community call - 13th of September 2018

Description

Recording of SPFx and JavaScript development in SharePoint Community Call from 13th of September. Topics include updates from SharePoint engineering on SPFx, latest on PnP JS Core, Office 365 CLI and Reusable SPFx controls.

Cool demos:
- Luis Manez - App Customizer using Text Analytics API from page comments
- Paolo Pialorsi - Calling Graph from the components using SPFx 1.6

You can download an invite to this bi-weekly call from https://aka.ms/spdev-spfx-call.

A

But welcome everybody. It is a shipment framework and JavaScript special interest group, and this is the PI weekly meeting and today is September 13th. It is not Friday 13th that is well not tomorrow, but tomorrow would be 14 anyway. Today is Thursday, and so in this course it's unbelievable. So it's in the same minute as we start talking. We lose this ok. So what I was about to say so? Patrick typically leads. These calls on bi-weekly the shape and framework and JavaScript development calls on the phone, but he's on a family leave.

A

Unfortunately, he was actually heading to the family, live exactly on the location which has been now evacuated in the east coast of us, so he's back home, but having a hopefully a relaxed week without actually doing anything that special, hopefully things don't go. Dinks go well on the East Coast, but it looks kind of terrifying, at least for now, but and those people. Hopefully you if you are located in the East Coast in this area, hopefully you've moved from the location, but nevertheless, let's concentrate on SharePoint.

A

Now on these course, what the shape and framework and JavaScript special interest group is all about. This is really around concentrating on the SharePoint framework. What's happening there, also on the client-side and development in general, so if you're developing, for example, using node.js or you're doing JavaScript injection or user custom actions, even in classic and on-premises scenarios that actually falls on this call technically SharePoint framework. Is it's really the demon on the model in future also for own purposes? But obviously we do welcome any other topics in this course.

A

Well, the two URLs there and there's take MSSP PNP community that redirects to the SharePoint tech community sites, where people can ask questions and then the other one is take. Mssp do docks, which is the official document location so, which is where you can actually find all of the related documents on SharePoint development now on the agenda of this week, so we will do a quick update on the engineering update. So obviously this is on the same week as the monthly community call, so in the monthly community call we had a 165 attendees.

A

So it's as expected this to be a slightly lower than 165 or 160, but typically that or that's absolutely understandable, to calls in one week for shipment. There is quite a lot and obviously all of the course are getting recorded. So this you can always jump to the specific demos. If you don't want to see me babbling on this call, so you can actually just check the recordings and jump to the demos.

A

If you don't want to see adopted on the engineering side now today we have two cool demos: after an updates on the open source projects as a Lewis monies from clear people, if I remember correctly.

A

Yes, it is clear people showing an app customizer using text, analytics API from page comments, so analyzing incoming tates comments and then showing the the the rating of the page based on that and that's actually pretty cool, because it shows how you can combine SharePoint framework app customizer, which isn't doesn't have to be visible in this case, if I remember correctly, it has a small hitter, a placeholder and then using Asha functions and other services to extend the capabilities within a SharePoint and that's really the power of the SharePoint framework and the application customizers as an example.

A

So you can in a reliable way in using the governance model with an application catalogs and all of that to utilize assure for example, in every single site of your SharePoint Online tenant. So it brings a humongous amount of opportunities. Paulo will join slightly late today, probably hasn't joined. Yet he has a customer engagement, but he'll be joining half-past latest and he'll be showing, and what does it mean to call a craft api's or web api as well? In this case, graph API is using the SharePoint framework version 1.6.

A

So talk about the process of what does it mean if you need to get access on the on the graph API on behalf of the users? How do you approve the permissions and all of that? Obviously, the situation hasn't dramatically changed in the preview of the crack calling a craft have built for the GA, but there are certain small adjustments but we'll walk through the process and we're gonna talk about what it means in practice it might be that polo is actually on the coal already.

A

Let me scroll down and I'll promote him as a presenter. If that is the case- and he is not here- okay, oh he's- maybe Bert actually already promoted him and say yes, he did. That was faster than I thought, then thinking, okay, cool, so, let's actually move on and before we go to the shape on framework engineering update quick kind of a slide on opportunities of participating on this call.

A

So if you are building something you have a sample, you have a even a product or a a poppy litter which you want to demonstrate in this call. That's actually more than welcome. So really, the main purpose of this course is to show what's possible using the SharePoint developer platform in these goals, especially concentrating on SharePoint framework solutions. The the most preferred way will be showing a sample which is then getting contributed in the open source sample category github repos.

A

But obviously, if there's an interesting story around some solution, which you can't share as an open source, that's that's an interesting option as well, and please reach out to me Burt Patrick or anybody in the PMP. According to Creed and on which, which week you would actually do the demonstration now. You can obviously also demo other JavaScript.

A

We will add JavaScript revision and development in this course, like anything from a PNP propose a PNP organization, and let's talk about that and that's evolving as well as slightly later today, you can contribute in a key table so providing issues and providing pull requests, for example, for documents, and all of that so having a comment in a document, jay bondrock, def document, which is saying, oh by the way, this entry in this document that should be as following is valuable.

A

But actually there is an edit button in every single sharepoint def document, an article you can click to edit button. If you have a kids off account, you can just add that modification what you want and submit a podcast it takes seriously one minute. So it is super super first way to do that. But again, if nothing else, please add a comment and say that we need to fix something.

A

So we get that one recorded in our backlog and really key is to provide the feedback as well, so so making sure that we in SharePoint engineering up to the level of Jeff deeper, who owns everything underneath office, is really interested on your feedback. If something doesn't work, we mess up something we need to fix. Something please keep on that paper.

A

Coming don't complain that Microsoft Microsoft doesn't listen behind or somewhere else, but make sure or actually you can do that as well as long as you remember, also tell us, and sooner or later will most likely resolve your issue or go to the issue list in the github memory and report an issue, and sooner or later we will actually act on that as fast as possible. So supers are very important. Please keep the feedback coming now. A quick update on SharePoint framework.

A

Few updates on this one I think I have an updated use it at least in here a few kind of a generic things, a kms SB Docs, developer documentation. All of the tutorials in here have been refreshed, 41.6, so the getting started tutorial. So, if you're looking into a videos and written formats on ok how how would I get started on SharePoint framework development, there is a free, easily accessible tutorials in here as well. Obviously, there are create third-party training materials on the SharePoint framework development as well.

A

But if you don't mind hearing Finglas in these videos which are available in toaster microsoft come you can actually get learned, getting started on SharePoint framework as well. Finglas, minus-- means and connection between it's the Finnish and English at the same time, and right now, you're hearing English. Now the next slide quickly running into issues, so we're trying to get you up on all of the issues which are coming in in the SPD of dogs issue list, and this is really for you to report anything related on development.

A

We are falling slightly behind on this, but we actually have now an external support team, not an internal support team, but it's not part of the engineering. It is our super team which will start helping us on here and, for example, later today we will have one and a half hours or two hours already booked on going to doing going through the github issues, so we're really targeting to catch up these by ignite and then after ignite.

A

We should be able to keep up to date on what's coming in and we will kind of acid during summer time we kind of we're unable to follow up on all of things which were coming in. So, oh, that's, a a that's a horrifying, a message on the ion window. Don't scare me what about SharePoint framework, so how's adoption for third-party solutions?

A

Now this is their and the chest to show you if you're kind of a considering that well Microsoft keeps on telling and that SharePoint framework is highly used and but I don't know, I want to keep on doing farm solutions. Well, you can form solutions are supported in on-premises, but the more preferred option if you want to align on the future of SharePoint development, is actually your SharePoint framework and the usage is skyrocketing. We we are bypassing every single other customization model and supported even a bi model in office 365.

A

So SharePoint framework is by far the most widely used customization model in office 365 as an example with crew adoption of sharepoint framework, 240 percent from January 2018. So we introduced and we went GA which opened framework on February 2017.

A

Even during this year we crew 240 percent from adoption perspective, and it actually keeps on skyrocketing even more so you can see there how the church are going faster and faster up on the on the hill, which is interesting, but it obviously it's a good thing and in the upcoming ignite, will demonstrate tradition after ignite will actually release that the the unified development model, together with Microsoft teams, so you're able to actually use SharePoint framework when you are out creating a Microsoft team stamps. So you have a unified way of building javascript-based stimulations.

A

It doesn't matter if it's in SharePoint, if it's in Microsoft teams and in the future for other products, you will use the same tooling. So it which is a great story, you'll learn one way of doing stuff. It actually works in everywhere in over 365, well, hopefully everywhere in office, 365 sooner or later right. Now it's SharePoint and the team's starting pretty soon now 1.6 went live last week.

A

So that has happened since the last two weeks ago, and 1.6 is really the native Microsoft graph access which we're gonna see today from Palo a securely access to party WebP api's. He hosted I'm, not sure, that's a really big thing, because you can now securely call, for example, on lob hosted in on-premises using usher, and that's really cool.

A

So you can have a web part with this surfacing data from your let's say ordering or CRM system securely hosted in the industry account online securely, meaning that is able to call the Web API, hosted a mature in a security and then surface. The data using SharePoint framework in the U is off the SharePoint Online and that's really really cool. The second big thing was the other big thing was the tenant want deployment of extensions? We didn't call them on this.

A

One in the monthly community call recording is out for that one, but that's a really really powerful functionality as well. It came as SPF. X is related occasion to get more details and getting started now. One thing what happens actually earlier today, like 30 minutes before this session. We finally got the blog post out, and this is now out so introducing open source BMPs pfx human generator, and this is a big thing for us as well.

A

So what we want to do is that, because you can't or the out of the box and because of the out of the box, the or maintainer and generator is not open source, at least yet. We wanted to provide a way for the communities to start expanding the out-of-the-box capabilities and which are provided from the yeoman yeoman templates, and this is what we're doing with this one. So this is now a PNP SPF, X yeoman generator, which extends the out-of-the-box yeoman generator.

A

So, basically, when you install this one, you will get this one plus to box 1, and what it means is that when you run the generator, it will ask hey what kind of trouble script do you want to use. When do you want to use handlebars, which is right now, the new one as an example? Or do you want to use any of the out-of-the-box ones which are available from the OtterBox templates, which is react.js knockout on and no framework, and it's really easy to get started? It's just.

A

It's packaged it's available from NPM or urine or NPM m to get installed. Well, you can install that it's available from NPM anyway, and right now the project doesn't have a massive amount of contributors, because we've been working together with Stephan power who's. The lead on this one and Christian has has contributed already on this one, but then we're looking into expanding that team significantly in the future.

A

For those who want to actually work on the yeoman templates as side of the story, so we're able to then add additional frameworks like view jeaious with Alex Alex who's been working on view, Jas yeoman templates, hopefully we'll get that one merged here and a few other frameworks like ember and potentially even angular elements. Even though that has a slightly more complex story bits we are still working together. It Andrew Connell as an example on on making that happen, but really cool. This is a start and we'll see how far we get with this one.

A

It gives us the capability of extending the yeoman templates and extending what's available when you scaffold a solution, and your feedback absolutely welcome on this one and by the way, thank you. David for pasting in the blog post, release blog post on that one now moving on are things this slider and the showed already on Tuesday. So this is just a quick update on the SharePoint framework and SharePoint work.

A

So ignite is within one and a half weeks, we'll announce additional staff on how would I put it an on SharePoint framework areas in ignite, so there will be like new stuff related on theming, new stuff related on slide design, side scripts, we'll talk about additional placeholders, we'll talk about additional things which is coming up in the in Shaba in the Ignite timeframe. Now, in SharePoint framework, we've been pretty open, what's happening and we're so we we are releasing.

A

The 1.6 went already live last week, which is kind of targeted for ignite time frame and then 1.7. We will demonstrate already in ignite, but it will go. Live in during October, so most likely it's at the late October and we're crossing fingers that well, the objective is really to push it out in late October, not in November, because especially when you yes well in u.s. when it goes to the November timeframe, it's already in quotes to holiday season, and that slows down everything what's happening. There do the holidays Asian model in the u.s..

A

So it's are slightly different. Now and obviously SharePoint framework is in the SharePoint 2019 and that's gonna. Be one point four point: how would I put it zeros last one point four point one: so it's gonna be one point four point: zero, except you can run NPM, eight, oh sorry, NP, +, 5 and node. Eight for the development and that's gonna, be then released the g8 later this year because as part of Europe and 2019 when that goes to RTM or ten meaning that it's available for you in production usage.

A

Now is there a a plans to improve to build tasks a bit back for discussions are ongoing, most likely that will be in the in the 1.7. We have a dependencies on office. You have fabric office, your fabric is already using backpack for insert an area, so we need to ensure upon framework. We need to get there as well know what will be the timing and everything else. I can't promise that to be in 1.7 most likely. It is there, but it's not confirmed.

A

So, let's put it this line, and obviously whatever you see now on the list of 1.7 that can still change there. This is there is our objective, but if the timeline, the timelines are right now more important for us than the actual features. So we want to ship this in October and then we'll drop the features which are not ready now. Moving on to the BMP is so Patrick currently updated. This line for the BMP chase Tufts of BMP jeaious.

A

Is there really for easily executed or use the native SharePoint REST API us with the flu and the wrap? So you don't have to remember the rest API you can do B MP dot web dr. lists catalyst, even though you're writing a Java, Script implementation and one point to point. One was released in September fifth, so that's a week ago or roughly a week ago, and there has been a lot of improvements on the code base, there's a new documentation, formatting, so there's a new documentation platform, so we basically consort.

A

Well, we aligned our documentation platform in the BMP, because the BMP TAS was using a slightly different model, so everything is now aligned with a with a similar process. There has been a lot of feedback and ideas and pull requests and activities in here. So thank you, everybody for, for your input around this one, PNP github that iOS last BMP Chase is URL where you can see the latest and the new documentation. So out of the story.

A

Trenton SP HTTP client batch is still in Paris of 1.6 I think it should be hmm that's interesting. We probably need to double check that one it most likely will be ETA in 1.7. Yes, I will need to come back on that one office 365 CLI, on quickly on the choice question we do have tutorials for using craft in SPF, X 1.6, so Paolo is going to do demos today, so there's a tutorials, obviously in the official documentation, so you can easily actually follow up on those and it for reals.

A

I can't remember if they are videos or not and whoever forgot to meet. Please mate. Please me please manage there, we go this one and there's another one. Just removing the background is still somebody's here, causing some noise. Here we go cool on office 365's the other side of the story, one second.

A

Just adding some notes to myself there we go so on the CLL slide. Nothing human is happening within the last two weeks, so the things are progressing. There's a new beta versions, available. Bollock basically said for me: well, there hasn't been a humongous amount of activities right now. Well, development is moving, but then they were in better side of the story.

A

So there's new support, for example, for easier and better upgrading of your solution, and we had a earlier meeting today meet me mahal that can nicholasvincent and we were chatting there with Michael and Michael also said that. Well, the only reason he's using a CLI because Michael as a PowerShell guy is that he's using the CLI actually to help my creating his solutions from previous versions to share one framework, one one six.

A

So that's one of the really killer, applications and killer features in office, 365 CLI, which you can easily install, and then we were able to go to the comment line documentation and you can actually see how do you? How do you run the analysis of upgrading tooling and that will then give you the insights on how to upgrade from SPF X projects it we notice that should have been updated. It is actually supporting already 21.6 version now.

A

Moving on our thing, SPH, reusable components alia couldn't make this call either unless I'm completely mistaken, but there's a new versions of both the two property controls for projects which will help you to build a Cool, Whip part properties and really have a look on this. This will reduce the costs and the development time. What is needed by by you and there's react content controls like the title webpart title and the placeholder controls, which you can take advantage.

A

Most users control by far, is the placeholder control with which is used to super super widely by the community and customers. Some reason highlights and improved accessibility, reusable columns and elusive, controlled axonometric improvements and control polishing in general, based on incoming feedback. Now after ignite, we are gonna, do another round of let's say: hunting down reusable controls from the out-of-the-box side of the the world. So we use this project also.

A

The introduced controls which are originally out of the box controls in first party web parts or web parts were implemented by Microsoft, but because of those web parts are not open source, we basically kick the controls out of the first water wet bars and push them out using this particular project. So probably want to have a look on this. This will help your time a lot and will reduce the time and development costs for your solutions now.

A

Finally, time for the demos me talking quite a lot, but we still have more than 30 minutes that should be enough, and then we should have em in time for Q&A Luis will test your audio already I think we are ready to go with a really cool application. Customizer hi.

B

B

I'm gonna show my screen, so you can. Let me know when you can save this.

B

A

Three dots.

B

A

I carried that face yeah.

B

Already explain what I'm gonna so again, this demo is how we can use the text analytics API in the cognitive services from the from an application customizer in in SPF X, so that we can analyze sentiments from comments in a in a page. So let's actually first take a look on a live demo, so he others model page with a couple of comments and I'm running inserting locally the solution.

B

So if I refresh the page, no debug and as you can see here in the top right hand, side there's some kind of raping with two and a half stars here, and this is coming from analyzing this couple of comments in the page using the test analytics API. So in this case, as you can see, we have a very positive comment and also a very very bad one. So when we are happy with the page, let's see that we remove the bad one because actually no more racing in Seattle, so remove it.

B

And if we refresh the page again, we should be quite happy with the page yeah and we go fiestar. And obviously you have no comments in the page. Then the custom feather is not gonna be is not gonna be in place.

B

You can see okay cool so now, let's see how we can use the test analytics API with first a very quick introduction to the community service which I really loved them. This is the artificial intelligence services from Microsoft and are already pre trained and quality c2 to consume. So we have different categories. We can do things with image processing, there's another sample from from me about you, seen the vision API as well, and you can analyze speech search, and in this case the test analytics API is in the language category test analytics.

B

You can test it from here, so you can enter this and you can see all the things that you can do with the best analytics the sentiment. That is, the one that I'm using in the sample, but also stack key phrases which is really good for tagging systems and so on language analyze, this kind of of cool things, and also we have an API section on fear.

B

So if we go to the sentiment option, we can test the API directly from here. If we select the proper location and we need, then the API key, so we are gonna, get this key from the Agilent portal. So let me jump in into the portal and on here, I will create a new resource history for festival, ethics that one create an Fe I use. A nickname subscription and pricing.

B

Tier and also the location, is quite important because if you register the service in a specific location on the endpoint, URL is going to be for that specific location. So if you try to call it if you register in West us- and you call it later using the north Europe API, even with your with your key- that's that's gonna fail. I'm gonna cancel this because I already have a service already register.

B

So if we jump into it test on Alex, IP, I love and as you can see here in the overview, we have the endpoint with the specific location that I the time register the service, and it will jump into the case. We can grab the key and then we can use in ticketing from from the portal.

B

Let's take a look to how the request body should be. This is the URL, so we are pointing to the sentiment endpoint and in the request.

B

We need to send an array of different documents and each document contains language, the text that you want to analyze and I an ID that should be unique in this collection of documents, and if we sum we can get the response and see how the response- and it looks like- and we have the same array of documents, the ID matches, with the idea that you send because now is in in order, but it should be come an order.

B

So you have to use the idea too much the specific test that you analyze and you have on its core. This is just a number between zero and one, and one is very positive. You know very, very bad comment.

B

So this is the response and also keep in mind that there are some limits in order to consume the API I.

B

These are completely documented on on this table, so on the one megabyte and the entire request hundred cars calls per minute as maximum and also in this text we can't have more than five thousand characters and also you can send more than a thousand documents in the in the same request. So there are things that we have to keep in mind: okay, so now, let's actually dig into the code Sophia what we have this application. Customizer is VFX project.

B

So as here we have the domain, the main class, the entry point, so we are extending the base application customizer and then, when all in it we are rendering the placeholders. So we are creating or or ensure. If it's already created, we have the placeholder top. So this is obviously them together and then we are just injecting a specific we have component when the placeholder is already is already available. The component is a react component, page sentiment error and we are passing the context and the text analytics API T.

B

This is coming from the from the properties of the of the extension. So when you register them, when you deploy the solution, you can set the properties and if you are running locally, you can give the service on file and configure it on here.

B

So if we jump into the page sentiment feather component, as you can see, first, we have the base main URL for the end point in this case with the west us location, where I registered the service when the component is about to two month, I'm just setting some variables just have a shortcut to some of the context variables and in the component the moment we are checking if the pages content page yes about the component to work in management pages or all items pages and so on.

B

Here we are yes, I guess checking if we have respectively, let's list ID and list item ID, and if so, then we need to get the comments of the panes. So to do that, we have a function, and here I get top three page comments and just get in top three comments or for this sample.

B

So we can use the cellphone REST API. Getting this specific page and the comments end point using the SP HTTP client to do the request and then and just map in the result to a specific class I page command will just I they health or command and create debate. Actually we asleep the div and the comment so I'm a pin on here after that I'm calling in this get sentiment from page comments.

B

Pansy on sending the different comments from the previous query, and here we are calling the sentiment endpoint, we are using the HTTP client and in this case we need first to prepare the body of the request and the feathers as we've seen in the in the website. So we have here function to prepare the different feathers, convent, ideation and the specific API key from the properties of the extension. And then we are preparing the body object on here with the different documents with the IV and the text that we want to show.

B

So we are returning the httpclient options that we are using on here to post the request to the sentiment: endpoint get the response. If we just have one score from one comment, this is the one that we are using.

B

Otherwise, in this with the reviews: fancy on I Mia's doing us some up of the of the different score from the from the different comments and in this question here, just getting the average of all these comments to have just a number between one and five in order to do to render the rating with the five star icon component.

B

So if we take a look to the render method, a couple of checks to ensure that we have content- and if so, we get the score number between one and five again I'm, just using this rating company from the office public device which is really easy to produce, so we use the large size within the rating value from the sentiment API. You know this an average and so on, and just with only because, obviously we are getting the values from the API and the user is not able to to change any value.

B

And finally, this is so mean in the pages we've seen in the live demo. I think there's nothing else. From from my side that I want to show you in case, you have any question.

A

Back on the page still and one more time show the functional and it's just another for enter the code, and it says that that we get it properly covered.

B

What you want to do miss asteroid so.

A

Just to demonstrate it one more time so don't have to be covered just a refresh how it looked after looking into the code.

B

Refers to page.

B

We are getting sentiment analysis from this specific comment and yes, rendering this five star icon in icon. Now.

A

This is super cool solution, I'm just pinpointing the the small flow on this thinking, which is. Why would a comment reduce the rating of an article?

A

No just kidding just everyone or the anyway I'm, being sarcastic or stupid joke, but really cool demo and really create usage of us were as well, and this actually shows just how simple it is actually used to those assure services and in Microsoft or in in the native side of the off the SharePoint engineering and one tribe, I think there was already some announcements that were planning to use method, a automatic metadata tacking and all of that based on image, analysis and not sure, and all of that is coming actually in the in the onedrive and in SharePoint site.

A

So we're looking into also taking advantage of these similar services, but really create demo and showing how simple it is to use cool.

B

A

You David also for pasting in the sample URL that was in the in the sample. Url they're super important question from Luca Giuliano Luca. Will you be in shape on Saturday Barcelona was.

A

More of these things, but it's it's just horrible: the balance between a work and a life and a Redmond and everything else, and family and family number one priority: cool, Paulo, I think it's time to flip to your screen. Okay,.

C

Let me switch to my screen, welcome everybody in the meantime and please, as usual. Let me know when you will see my screen while.

A

We're bathing, isn't that one? Will you pee in a ship on Saturday parcel owner.

C

I will not I will be in Sherpa supreme Milan, and you will.

A

A

In it that was in October right, the 6th of October yeah yeah, we can hope we can policy great.

C

Thank you so now talk about how we can consume the micrograph from within the SharePoint framework using the sharp of 31.6, and so it would be a kind of a recap of what you can do targeting the Microsoft graph using the latest nga bit that we have already covered this topic in the pasta. But we were using the preview version of the SharePoint framework and of the graph client.

C

Now we have the final relation, so we need to see what has been changed and what we can do to be fully able to consume the micro graph. So this is a really simple pencil part which can be used to search list of user imagery, Active Directory using the micro graph. So I can search for me. Sad because I feel lost, and here is my user or I can search for visa and linear user. That I could have in my testing tenant and under the cover.

C

This Web API is using the micro graph to search for them in Asia or peti and I'm using the list. Users, API endpoint, that we have in micro graph which, for the sake of clarity, require requests the delegated permission to read basic user, all or user at all and or any of these permissions. If we want to use a delegated token and we'll simply require us to make a request, a get request targeting the users and point of the micrography 1.0, eventually providing any filtering or any selection requests.

C

In the rest, you are from a sharp point frame or perspective using SharePoint framework 1.6 here I have the source code of my client-side web part, which is based on a rehab component. So the client-side web part by its alpha is really really simple and easy and I simply create a new instance of a react component, providing as one of the input parameters for that component. The context of the clients that were partying, which I am so.

C

This is the context the base client-side web part context that I provide to the target component on the other side.

C

This is the V app component that I have first of all, I need to import a reference to the MS Graf client type, which is now available in the at Microsoft, /p, HTTP, library and I have to use this name instead of the old one we were used to using during the preview edition of the MS graph client and for the sake of having a kind of a decent UI, I decided to use a detailed list with a detail with a list of items inside of it, and that's why I need to define the outline of my columns but doesn't really matter from a graph consumption perspective.

C

Here we are in the search users react component. There I have a search users method where I simply create a new instance of the MS Graf clients type, and in order to do that with the 1.6 released version of SharePoint streamwork, we simply need to ask to the context of the clients that were part or of any clients and extensions that we are developing to build to create a new instance of the client through a factory object.

C

In fact, we have an MS graph blind factory property of the context through which we can invoke the gate, client method, which is, as you can see, in a synchronous method and here I'm, using the a single wait pattern, because I come from the C, sharp side of the world and I love a single wait and I get a synchronously, a client and instance, which would be an MS Graff client instance and I will simply need to use the fluent API of the graph SDK in the typescript code of my client-side web part.

C

In order to invoke the users API to select a specific set of properties for my target query eventually to filter the item based on the input provided by the user in the search box or maybe not, if I don't have any text to search for and then I simply make a get request for that specific micro graph.

C

In point again, the get method is in a synchronous, one, so I still use the async await pattern and I will get back a JSON response, which will be an object made of a value property which will be the real array of items that I'm interested in and that's. Why? Once I have this object?

C

I get the value, property and I simply use it as an array of items that I bind to the UI using reactor in order to do the data mining in the UI and then, of course, I will be rendering of my clients at what part of the list of resulting items if any, but in order to make it possible for this client-side web part to work and to consume the micrograph I need to be compliant with the requirements of the, for example, of the list.

C

Users, action and one of the requirements is to have any of these permissions delegated permissions in order to consume the API and that's why, whenever we use the SharePoint framework to consume the micro graph or any other API registered in is ready, we need to declare in the package.json pick a solution, JSON file of our solution. We need to declare what are the Web API permission requests for our solution, so at the solution level, not at the web, part or extension level, but at the whole solution level.

C

We declare an array of permission, requests that we need to see satisfied granted to our solution in order to being able to run and in my scenario, to consume the maxigrove and that's why he declared that from a web api permission request, the resource micrograph has to have the user dot, read all permissions Copa granted, but this information will be used by SharePoint and by the infrastructure of SharePoint framework. In order to allow an administrator of my SharePoint tenant to granted this permission to SharePoint framework.

C

Let me show you how the browser I also have the app catalog site, which is under the cover of my current tenant and here in the apps for SharePoint I already have my solution. Let me just update the solution. Let me drag it again onto the folder. Once you add a solution to the app catalog.

C

If it is the first time you will have to deploy the solution, if it is just an update, like I did right now, it will just override the item, but once you do that, if you go to the new admin center of a SharePoint Online and you select the API management page there, you will see any of the permission.

C

Web API permission, requests pending in the list of pending approval items and, as you can see here, I am depending approval item for the user, that we got all permission requests targeting the micro graph resource, which is exactly the one hired in my package solution. Json file, of course, as an admin you can approve or reject such permission requests and if you approve those permission, requests every single sharepoint framework components.

C

So not only the client-side web part or the extensions that you included in your solution, but the whole set of client-side the components built using sharepoint framework will be granted that permission. In fact, under the cover in the azure ad tenant of your target of hysteresis five tenant, if you go under a sure, calm and ease, if you select a directory in the enterprise application section, you can search for a specific service application, which is called with a very long name. Sharepoint Online, client, extensibility web application. I think if the longest name ever.

A

Change the application whenever I went to the GTA, which is by the way the reason if you have a preview craft webparts, you will need to rerun two permissions, because the application name has been changed while you're doing that. Sorry for jumping on this, that there was an awesome question with spill already answers from arraignment I think was related on related on the is dis scopes for the whole tenant. Or is it only for a solution, and you actually Paulo answered that already?

A

It is for the whole ten on, so every single SharePoint framework solution will get the same permissions. Now somebody might be saying: well that's wrong. Why can't you scope for an individual ABS, SharePoint framework solution level and answer is actually that we in SharePoint engineering we need to piggyback on capabilities which are available in Azure ad and unfortunately, our ad does not give us a smaller scopes to grant permission. So you cannot actually grant the permission for an individual, smaller application.

A

We can't also create new applications in the azure ad of the customer dynamically because that wouldn't scale, so that would have massive issues as well. So that's why we actually have this one application, which we'd then actually manage the permissions. So that's that just a quickly explain how we ended up on this design.

C

Exactly and just to be sure that you don't use the wrong one, there is also there should be also sharepoint online clan extensibility, which is the old one used under the preview time frame. Please ignore that one right now. You need to search for the sharepoint online clan accessibility web application. Actually you don't need to go there on a daily basis.

C

It's just to show you how it works, but once we will see now how it works, I think you can simply ignore the existing the existence of this service application, but inside the service of the under the permissions, we can see that this application has precisely the permissions that I request this off from a micrograph perspective, the permission to read all user profiles, plus the permission to sign in users which is needed to make it possible to authenticate, be currently connected user and get back an access token for that user.

C

I'm saying that, because, under the cover, whenever I search for something in my really simple client-side web part, what happens under the cover is that the SharePoint framework infrastructure using ABI ljs, so Active, Directory, authentication library for JavaScript retrieved in open authorization, token from is ready and that token, which can be stored, which will be stored them in the session.

C

Storage of the current user, will simply store the information, the access, token and information to make it possible for my client-side solution to consume the target API in the micrograph, and here, for example, you can see.

C

Of course it is not very clear to be seen, but you can unpack it and decode it and see that it will be an open authorization access token, which was exactly the fine that we have, or we can even do that if you wanna be really if you want to go deeper on stuff, but we can go to Georgio and we can see that inside that short or JWT token. We precisely have the access token for the web application principle we saw before with exactly the permission we saw in is ready.

C

For my current user in order to consume the Microsoft graph, which is my target resource and because of this access token, which is stored in the session storage, my claim server part is able to consume the graph if I want to consume any other API provided by the Mac so graph. Let's say that I want to use not only the API for consuming the users, but the groups or whatever else well I will simply need or the daily calendar, because I have it here.

C

If I wanna list the events in the calendar well, I will need to see what are the permissions requested for this operation? I will have to declare in package solution, JSON file the permission request, I will have to ground, or at least an admin. We like to grant that permission to the app principal of the sharpen framework, and that's it. We can simply use the graph API, creating the instance of the graph client using the effect free and consumed in the graph using the fluent API. So pretty straightforward.

C

Now that you know what is the full round-trip but really really powerful in order to create a real business solutions, at least in my opinion, and that's it for me as well visa so and.

A

A few things can we get back to not that mean a UI you pinpointed with one buck in here, which was really nicely done. Thank You, Paula.

C

A

We already friend that the user read or permission it does not make any sense to request the same permission again, so that would mean that we should not have see the user read all in this admin. Ui now we're working on on in the engineering and our engineers are looking into polishing this UI. So please keep on reporting issues. This is kind of an inconvenient. Obviously, but the problem here is that if you now reject that request, well, actually it doesn't get rid of the approved status.

A

It doesn't remove the upper permission, because the death pending approval is the request, and if you deny the request, it doesn't touch the upper permissions, some other things, just a pimp on here, the we had a quite often you saw a pop up back in the preview timeframe. The pop up in theory. There might be some really rare edge cases where you might run into the pop up requirement still by default. That is gone and the reason why the pop up is the worst there for those who've been testing.

A

That is that we are using a dulces under the covers and a dulces is actually based on the pop-up model. They need to not using MSA elf, because I'ma say L is not GA, so we can't use it because this is in production functionality. So, even though, actually guys are saying, MSI L can't be used in production, but it's still in preview, it's in beta and they can basically change the API still and that would then prague sharepoint online, and we can't make that dependency.

A

There was a question related on hey so creating dynamic, say the application inertia ad. What do you mean it doesn't scale? Can we go back on the permissions and content? So we we had a long design discussions with azure ad people. I wasn't actually the person running that that was a look-up on dinelli who has a session also in in ignite. But the conclusion was that the way we actually add solutions and components in sharepoint, which can happen rapidly, pertinent and a1 sharepoint farm can actually have tens of thousands of tenants.

A

You might actually end up having tens of thousands of applications potentially created in a really short time frame and not sure ad doesn't necessarily scale for that amount of operations which would be pending. So the decision was actually to make this based on a single application in here, which is provision to all of the tenants automatically so, but this is basically the the reasoning behind why we don't dynamically, create the application sure somebody might say.

A

Well, that's not my problem, that's Microsoft problem and you should make it work, which is yeah potentially, that might where we are heading in the future. But it was better to release this functionality now with the current capability until the Asha ad can scale for the SharePoint requirements potentially in the future. So it's just again timing and resources and everything else, which has surprisingly became backed even in Microsoft, sir, did I miss any of the is a ad HTTP client.

A

Still in preview note that is actually out as well, so calling a third-party web api assist GA as well, so as part of the 1.6 craf, api's and Azure ad. A ad client is also out, so you can actually get that one and it's that is available as well and.

C

There is another factory for that: one ad HTTP client factory, rather than DMS rough.

A

Technically, it's exactly the same approach. You can actually use at her ad HTTP client factory to call craf api's the underline the technologies exactly the same if he used Microsoft craft client, a Microsoft graph, HTTP client model, then you're using the fluent API to get access on the graph graph, scopes and functionalities. If you just want to hit the REST API, you could use irradiates the DB client to get access on that there.

A

But that's super powerful because you can then have your custom web api or asha functions secured by your enterprise identities and only secured for your enterprise, and you can call that security. So super super super super cool.

C

A

C

That we have in the starter kit, that's.

A

A demo way to having a.

C

A

That's actually a good point so on the line.

C

A

Just update this one: can you actually polish to open this one URL in your window and then we can close some close up the call as well. So this is the start, gate location we are well actually waldek was the lucky one who got a signed upgrade to 1.6 on this one. We we will actually release in quotes a starter kit version 2.0 in the Ignite, which says to be fair.

A

It's not as significant upgrade as the original starter kit it that the 2.0 is more on upgrading on SharePoint framework, 1.6 support to functionalities in all of the tenants, and then we do a facelift on the images and about the content based on our design, organizations, requests and that's then the Refresh. You will see refreshes coming up on this one, but really the power of this one is.

A

If you scroll down power, there is a list of all of the webparts and I think, there's roughly around nine different webparts, for example, my email, my calendar, my tasks, my meetings, webparts, my all of those webparts bits are available here as well so and you can easily start using them and the implementation is actually pretty cool.

A

Pretty well done in all of this sure, there's always room for improvements, but the whole point of this one is that if you implement something for your customer, if like customer is like I want to have I want to have my my latest five emails on the front page of my portal, so I need to have that functionality, which is a typical request. Personally I. Don't understand why?

A

But if customer, once you can come to this shipment starter kit, you can pull down the code, you can use the code and repackage that to yourself and deliver that to the customer. That's really the intention of starter kit as well. Give you the capabilities, give you the power, give you the flexibility on on reusing the code and open source code, and obviously you can contribute back as well.

A

Where can I find docs on using BMP craft to access user info? Daresay there was a pretty recent blog post from Serge's or gif related on the craft use its with B&B craft. To be fair, I would first recommend using the native craft and the fluent craft api so that the BMP craft is an option. Absolutely that provides a fluent api on top of the craft calls parlor. If you don't mind you still going back on the code, if you have it open, so the native craft sdk, yes, we're gonna, take a few more minutes.

A

That's this good question. Do the native craft sdk looks like this? You have an api is as users and select ID display. Ba-Ba-Ba-Ba-Ba the BMP craft is more fluent it's more strongly, typed implementation. So yes, it's matter of preference. How to make this happen good and Thank You Gautam, for that is actually. Yes, that is the right post. Excellent cool I! Think that's it for this. One were one minute on top of the hour, but I think it's fine answering more questions.

A

We're trying to make sure that every single time in this community cause we will have 5 to 10 minutes time for the Q&A in the end, because there's a lot of questions, what people want to ask and we'll more than happy to help with the questions, but we need to just have a time for the questions as well, because it's it's it's not like. You need to go to the Ignite to have a question for engineering. That's not how it should be, but for this one next shipment framework, JavaScript a meeting is on September 27th.

A

That is the ignite ignite ignite week. So I know that, for example, Patrick, unfortunately isn't in ignite. So butter is gonna host the call still those people who are anything like that will be probably in ignite. Those who are not can join. The call on that sign and the next general shape on the f ck is on next Thursday.

A

Recording will be recording will be available again in 24 hours that we don't want be feeding stuff life on ignite, but I will definitely do some interviews and other stuff in ignite with my my teammates, and we should have good stuff and good coverage from ignite as well. But thank you everybody for joining. Thank you for your input. Thank you for your feedback. Thank you, Luis for the great demo, Thank You Paula for the great demo.

A

We have still one more community called before the ignite next week and, let's see what good is we can actually show in there, but thank you everybody and keep the feedback coming. Thank you. Bye, bye,.