Microsoft 365 Community Viva Connections & SharePoint Framework, 10 Sep 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft 365 PnP - SPFx & JavaScript SIG community call – 10th of September 2020

Description

SharePoint PnP Community - SPFx & JS SIG call on September 10. Three demos delivered: 1) Building a Microsoft Graph People Search web part, 2) SharePoint Starter Kit v2 Overview, and 3) Building a licensing solution for SharePoint Framework solutions. New product releases include: PnPjs v2.0.9 and PnPjs v2.0.10 on September 10 (bug fix), CLI for Microsoft 365 v3.0, React Controls v1.20.0, React Property Controls v1.20.0 and PnP Modern Search v3.15.1. Community members delivered 7 web part samples one of which is a Microsoft Teams Development Sample. The host of this call was Patrick Rodgers (Microsoft) @mediocrebowler. Q&A takes place in chat throughout the call.

Demos:
• Building a Microsoft Graph People Search web part - Yannick Reekmans (Qubix) | @YannickReekmans
• SharePoint Starter Kit v2 Overview - Kislay Sinha (CGI) | @sinhakislay
• Building a licensing solution for SharePoint Framework solutions – Abhishek Purohit (Microsoft) | @abpuro

Learn more:
• See the full blog post for this call at: http://aka.ms/m365pnp-blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• 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

Hello and welcome to the sharepoint framework in javascript special interest group bi-weekly: sync, it is september 10th, 2020., we've got another great meeting for you today, and so let's get right into it. So our agenda for today is as usual, sharepoint framework updates, followed by patterns and practices program updates, new community samples.

A

We'll do our picture time that we've been doing on our last few calls, which is a lot of fun, to get everybody a chance to get some some screen time uh for the call, and then we've got three great demos uh from yannick, kisly and abhishek. I'm excited to see those demos later and let's get right into it. Often we get asked for opportunities to participate in sharepoint patterns of practices program, whether it's this call specifically or more uh patterns and practices. All up so great ways to get involved.

A

Number one way is to do a demo. I know all of you out. There are working on great stuff for your customers and your companies and where possible, and where appropriate, would love to have you demo that work on the call? So, even if it can't be maybe published in the sample gallery, maybe you can do a demo of it make sure. Of course you get permission and all those good things, but anything at pnp anything spfx, anything client, side, development, love to get that uh demo on the call.

A

So if you're interested just reach out to myself or vasa- and we will absolutely get you scheduled on an upcoming call- it might not be the very next call, but we will get you scheduled. Sometimes we're booked out a month or so. But we will love. Love, love all these great community, demos, they're, fantastic and an awesome way to learn uh about what everybody's doing out there and learn some new techniques and capabilities and always excited to see the new demos every week.

A

You can also contribute on github that could take a number of forums, reporting issues. We don't love getting issues, but we love getting them reported. So we can get things fixed and improved for everybody. We always welcome across all of the pnp projects, uh pull requests so you're welcome.

A

If you find an issue to perhaps fix it yourself, or perhaps you uh have an idea for some added functionality, you'd love to see in one of our projects, absolutely welcome that as well, so love to get those pull requests from folks and then finally, you can always help with existing issues and questions. So if you've got folks that- or you see a question that you might know, the answer to would love to get your help answering that question.

A

If you have a few minutes and happen to know the answer, sometimes that'll get answers to people a little bit faster than waiting on the core team to get to that issue or question, and then, as always, we do welcome feedback on all the things we do. So how are all the various calls? This special interest group call, along with our monthly community calls and other special interest group calls. How are they going? How are the topics? How are the demos, uh what other documentation can we do to help? Where can?

A

Where else can we help? In addition uh to documentation and the calls, and, of course, positive feedback is okay too? Sometimes it's nice to hear that the things we're doing are uh enjoyed, and we can do perhaps a little bit more of those things that people are enjoying moving on to we've got a whole set of different links. We've got our developer. Video link there that will take you to all the developer, focused videos. Those are sort of topical training, videos around developer topics. We have our sharepoint community videos.

A

Those are, uh in addition to the developer, focus videos.

A

Those are a lot of the recordings of our community calls uh and other events, so are generally shared there in the community videos open source we've got a whole bunch of repositories uh that we definitely encourage you to join in, and all of these are welcoming to various forms of contribution, various forms of feedback, but encourage you to get involved in any or all of these that you might be interested so sharepoint, pnp office, dev and microsoft, graph, great stuff in all of those, so great places to get involved great places to contribute as well.

A

All of those have opportunities to contribute so encourage you. If you're interested in sharepoint interested in pmp contribute there interested in microsoft, graph they're doing a lot of great stuff over there and interested in having contributors so certainly uh welcome you over there as well definitely check that out. We've got a bunch of different sample galleries, spf x, web parts, extensions list, formatting and teams samples.

A

Many many, many of the demos you see on these calls can be found in those sample galleries, so encourage you to check those out. Those are great places to uh see uh you know not just the demos, but I use them often as references for you know, you can't remember everything in the world, so great places to check out how certain things are done.

A

I'm often checking out the list formatting uh one to remember how on earth to add icons to things, because I can't remember all these things like chris does and finally, if you're uh man that's a lot of links, there's only one link, you really need to remember aka.msm365pnp.

A

That will take you to a landing page for the entire program, all up where you can uh find links to all of the other things I have mentioned on that homepage. We also have sharepoint framework documentation, aka, ms slash spfx, we'll take you to the sharepoint framework, specific developer documentation so definitely check that out and two twitter users or accounts down there to follow microsoft. 365, dev and m365 pnp are great places as well for all the latest news, and so I think david warner is going to take over for this slide.

B

Sure, thanks patrick so, if you're looking to get involved in the community and start contributing the sharing is caring. Initiative is the initiative for you. These are hands-on live sessions with safe space repositories where we ha uh walk you through uh step by step, how you can learn how to contribute to the community. We've got a number of sessions that are available, starting with first-time contributors that are coming up on the 14th and the 16th community. Docs are great for the non-devs that are looking to contribute that don't feel like.

B

Maybe there's been a place so far. Community docs is absolutely fantastic and we have some asia pacific friendly times available as well. On the flip side of that coin, we also know that some are new in the community and are looking to contribute but also looking to consume, and they may be a little confused on where to start. So we have a new session on how to start consuming and using the spf x samples using node version manager.

B

That first session is tomorrow still time to register if you'd like, but we've got two additional sessions available for you as well. We just had our first asia pacific first time, contributor session on uh wednesday and we broke the record for attendees for the entire month of august. So it's fantastic to see so much support for the community all across the globe. Please don't hesitate to sign up we'd love to see you there and help you learn how to get more involved in the community. Thanks patrick back to you.

A

Thanks david yeah, fantastic program, if you're looking to get involved, looking to contribute you're a little bit unsure on how to get started or want a little bit of help with that. First, pull request really encourage you to check this out. It's a great initiative and a great opportunity for some. Some open learning free sessions really great stuff, really great work from everybody. Putting on those sessions encourage you to check those out, I do want to mention as well the recordings for was it last week or two weeks ago.

A

Time is so blurry right now uh the microsoft 365 pnp virtual conference recordings are all available on youtube, so akms pnp virtual conference will now take you to the youtube listing or the listing of videos available on youtube. I should say- and you can check those out, encourage you to see all of those sessions.

A

I've heard I have not personally had a chance to watch them all, but I've heard great things about all the sessions and all of them were quite highly rated, uh so encourage uh all of you to check those out another great resource for the uh just general learning about everything. Pnp everything, uh microsoft, 365., and so that was a great session again congrats to paulo and everybody else that helped put that on all the presenters really great work, fantastic stuff from the community there and now pass it over to visa for sharepoint framework updates.

C

Yeah, so nothing too traumatic on my side, so I only have one slide just to recap on on where we are investing right now we're working on a 1.12 release and we talked about the floyd framework. We talked about the node.js 212 support and all of that is in the pipeline for sharepoint framework, but more specifically we're working on also on performance improvements, so both for runtime and build time so making things that stuff is uh working, much more efficiently, integrated development tools and that's being worked on specific guidelines and samples on a performance.

C

There's work being done on the permissions and off. So we are moving to the msao implementation, because when we implement that first time the craf acts token handling in the spfx and the azure ad access, token handling uh msa all was not actually g8. So we were unable to use it at the time. So it's still implemented using adol, it's technically completely seamless for the developers and that's that's the whole objective of the abstraction layers here and and then the really main focus area for us, no doubt is the team's improvements.

C

So as the sharepoint framework is intended to be the easiest way to do any extensibility in the in the microsoft teams, if you are a developer, obviously, if you're looking into doing low code no code solutions, then the power automate and power platform is definitely probably the easiest way to do that. But then, looking into the automatic hosting optimization on operations, then the sharepoint framework is the easiest way to do that.

C

Those developments that didn't make any sense by the way, but anyway so teams is a really really big focus area in the future and then obviously looking into doing faster release cycles and updated uh tooling, like the node node js-12 support for spfx, but that's a quick recap from my side from the engineering so troy back to you, patrick.

A

Awesome thanks fisa excited to see all those updates coming out, especially msa l support. That's going to be a big one for a lot of folks and I believe julie is on the call to cover this slide. I.

D

Am well that's, take it away slide there. We go all right thanks, um so we did uh get back on our monthly cadis. The cadence excuse me on september 4th we dropped 2.0.9 release and we definitely did some some work there. So uh patrick added get stream file, support for node.js and updated the taxonomy implementation. So there was some underlining api changes uh that needed to be addressed, so we had to rework what we had originally released with the taxonomy implementation and so the docs, and that that code base is updated for use.

D

uh We also added a couple extra pieces, so delete with permissions for folder file and item uh was added, as well as a check for file existence, so that you can do some better error handling.

D

We added add subfolder using path and some other bug fixes a big documentation, update just fixing spelling mistakes and for clarity uh that went out, uh and so thank you again to all our contributors uh that put in time and effort that was a. It was a pretty big release.

D

If you could, please follow us on twitter, m365 pmpjs. We are starting to use that as our primary communication account for all of the updates and things going on with pmpjs. So it would be really great if you could uh follow that twitter account and and socialize that we're using that twitter account, and so I think, that's about it. uh Patrick back to you.

A

Awesome, thank you for that update julie. I do want to add. uh We did introduce a bug in the the common js version of the libraries. I've been working on that I'm probably going to get a 2 0 10 release out later today to address that.

A

So apologies for the people affected by that, uh but got that I think pretty much resolved and we'll have a release out a little bit later today and all that's going to do is then the october release will be 2, 0 11., so everything will just push out and the rest of the dates uh will stay the same.

A

So cli updates anybody on the call for cli updates.

E

Yep, it's gary hi, um okay yeah, so uh we've actually got a big update this week. So the last call we talked about um the beta release of of uh v3 and the big rename from office 365 cli to cli for microsoft, 365 happening uh well. At the weekend we actually released v3. So this is the latest version. Now uh we have deprecated version two. So if you're currently using um office, 365 cli v2, uh it will still work.

E

It's still in npm, um it's been deprecated, so it won't be updated with any new features or any bug fixes. So it encouraged you to move to um cli for microsoft 365.

E

So you can get that with the new package name of pmp forward, slash cli, hyphen, microsoft, 365 so note that there is the new executable there, and that is the only executable now, because we've dropped the o365 um executable that we that we had in the previous version. We do have some documentation to help. You make the transition uh from version two to version three, so we have introduced some breaking changes, uh not tons, but some you know changes that you need to be uh be made. Aware of so.

E

If you check out the uh the documentation um it's on there for you to uh to make those changes and but we've also introduced um some new commands as well. At the same time, we've introduced some new microsoft to do commands um as well um as part of the the v3 release. So if you're looking to work with your to-do lists from the command line, then you can do the uh the cli um again.

E

Thank you to all the contributors that have got us to version three um and uh helping us, you know add new commands. We've still got plenty of issues available, uh ready to be picked up. So if you're looking to contribute we'd, absolutely love you to spend your time. uh Helping us add more features back to you, patrick.

A

Awesome, thank you for that. Update really excited about all the stuff happening with the cli uh really great developments, so uh just great work by everybody involved in that project. So, thanks to everybody there and great work, uh reusable spf controls. Anybody on the call for those no one wants.

A

uh Reusable controls are a set of react, controls, there's a set of react controls and a set of property controls. The react controls designed, of course, to be used in the body of your web parts, property controls for the edit pane of your web parts. Next up, switching to v2 with fluent support, v6, that is in progress. uh I don't have a current status on that, but that is in the works for more information. Sharepoint github.iosp, dev, fx property controls. Spdev fx controls react we'll get you more information.

A

Twitter, follow, m365, pnp controls, encourage you to check those out great way to jumpstart your projects, jumpstart your development experience and get you some great out of the box functionality and, finally, uh not. Finally, the pnp spfx generator is a community supported generator helps you add a lot of additional features to your projects at uh setup time without affecting the eventual project.

A

So the mutual project will of course, rely on the same underlying references and dependencies as a quote: unquote: uh out-of-the-box sharepoint framework project, but has the ability to inject a bunch of additional functionality such as cli update the typescript compiler pnp js pmp controls uh different frameworks that uh handlebars view, for example, that aren't uh included in the at the standard yeoman generator, so encourage everybody to check that out. As I feel like I've said, the word encourage on this call a lot uh but check out the documentation.

A

Aka ms pnp generator chat on getter there, getter.im generator dash spf x, slash generator because anything dealing with yeoman. You need the word generator twice, so another great resource excited to see that continue to grow and evolve and get enhancements. It's a really great stuff there and then pnp modern search. This is another great pnp capability, building out uh a modern search experience from a collection of web parts, and uh I don't know what spider-man voice means.

A

I don't know if that's a compliment or an insult but building modern search experience with flexible web parts, so this allows you to take a set of pre-made web parts, drop them in and construct search portal experiences in a modern and flexible way. V4 is slowly getting started working through that uh so v3.

A

Only looking for bug fixes there absolutely uh prs for bug fixes, but not looking to add new features to v3 if you're interested in contributing on the modern search, v4 is uh ready and or ready for your contributions. I should say, and uh would like folks if you're interested, certainly check that out, and you know another great place to contribute to pnp if you're, uh very much interested in search and so now uh pnp samples, that's going to be hugo.

F

Thank you, so the uh the spfx samples repositories are repositories that are there to help get you started by providing you really cool samples that are built by an inclusive community and we welcome everyone and we encourage a positive attitude in helping each other. If you're, looking for samples or you'd like to share some cool samples, you know from simple concepts to very complex solutions. Please visit ak dot, ms slash spfx webparts or slash spfx extensions, or we have a new one, slash team sample browser which gives you some team samples using spfx.

F

So I'd like to thank all those who contributed over the last two weeks. Those are all the new samples uh all the updated samples we. We do have two new samples that I'd like to point out. One is the restaurant menu sample by joao mendez, which is great if you ever want to show the cafeteria menu or you know, any menu information on a site, and it's really designed to fit with the lookbook, which looks awesome. Another one is by daniel wetford, which shows you site, user and group information.

F

There are a few samples already that show how to do this, but daniel uses a different approach to do this. On the team side, we have a new document review search messaging extension by marcus muller, which is great, and I encourage you to go. Take a look at this I'd like to point out that we have a new way if you're ever looking for samples for how to use the cool pnp controls that we just saw earlier.

F

We have a new sample browser in the web parts and the extensions that allows you to find samples by controls. So I encourage you to do that. I'm also saying encourage a lot today. That's it for me, patrick back to you. There was a couple other team samples. I don't I apologize. I've been swamped with other conferences and stuff, but I just do I want to make sure that the other contributors of team samples know that we love them too, and we're going to get them their samples featured in the next call.

F

That's a very good point. Thank you.

A

Great thanks bob uh thanks hugo for those updates appreciate it uh really excited to see these samples continue to grow and some of the amazing work going into this sample gallery and it's certainly a place if you're looking to show off your work uh and maybe get ready to try and demo your work on. One of these calls dropping a sample in one of these galleries is a great way to get some exposure for your work and your ideas as well as uh improve the overall, what's available to the community as a resource.

A

So now we are into optional picture time, so, if you're into it and it's totally optional, but if you're into it turn on your camera and we're gonna, do a little together mode photo.

C

Sure should I share the screen for people to sing what we're capturing yeah.

A

You should uh certainly.

C

Do that let me do that. uh So let me share my screen saying.

G

C

No, no, no, not that and where, where where did it go here we go okay, so here and I'm flipping to get a mode still one two three one, two three and now transformation happens magically and then we're in the classroom.

C

How many people are we getting this song?

C

That's more than that? Well, obviously, this we don't want to spend too much time on these things, but I think this is this really cool way of actually seeing their faces behind of the and and ac remember the hands.

C

It's all good excellent. I will take one screenshot out of that and bob is waving on the top row as well uh marks behave you're in the second last row and yeah that that troll in the middle, that's always doing that and one more, I think, that's it for now. Thank you, everybody! So, let's go to the demos so excellent.

A

All right, so our first demo is.

A

I forget who was first on the slide uh yannick. You are up first.

H

Okay, great thank you. So let me share my screen so.

H

My demo is about my web part that I created about building a microsoft graph, people search web part. So we'll start first with the. Why of this web part? Basically, uh how every web part starts or everything that you build? It's because you have a need and there's nothing else in the community that solves it.

H

So you start building it yourself and, first of all, um what I normally use to show user profiles or who is who, on an intranet on the sharepoint internet, were the bmp modern search web parts that showed all of the profiles in a nice way. Looking similar to the people web part, that's out of the box available in sharepoint.

H

The problem is that with the pmp, modern search is based on sharepoint user profiles and with this, in this specific case, the user profiles had incorrect and incomplete data.

H

Basically, when you have a user account in azure active directory and that user logs into sharepoint, it gets a user profile created, but then afterwards, if you disable that account or you tweak something and you do not remove the account from azure active directory, the user profile still exists and that's a problem in environments where they like to keep their disabled accounts around for a certain amount of time.

H

So, as a result, their user profiles in sharepoint still contain those profiles and they get shown on the huzu and that's probably not what you want to do.

H

You could try and filter it with custom properties, but then again, not all properties from azure active directory or synchronized into azure active directory.

H

So I went looking out for a way to show the users from microsoft graph graph provides the ability to filter and limit the search query just to those user profiles that you want to show now. My requirements for this web part were that it has to show the person card or the people card from office. Ui fabric react now fluent ui library.

H

It has to render the whole list of users on pay page load. It has to be configurable in the search query, so I can say give me only the enabled accounts or only those from a specific department.

H

I wanted to allow additional free text search, so you could provide a set of 100 user profiles and let people search again in there to limit the result set, preferably it showed the live person card on hover. So I introduced that as well, and it should be based on microsoft. Graph like I said, because that one allows me to achieve everything that I want now looking at the web part itself. This is how it ended up.

H

So on the page. It shows you a certain amount of user profiles that are fetched through a query, and it also shows you the results or the number of results, and I recently added pagination support as well, so on first load. It shows you the first set of user profiles from the query that you configured and then it's possible to page through all of the pages that are returned from microsoft graph.

H

So if you go to the next page, you will see a small loader like this, but if you then return back to a previous screen, it goes very fast because it keeps the previous result sets in memory. Only when you move to an additional page, it will refetch or do a query again to microsoft. Graph now, for those people that are paying attention, you'll see that there is a small bug in here that I uh saw when preparing this demo. It's as soon as you move to a second page or a third page.

H

This undefined results shows up something that I reported to the graph team and we're discussing whether it's my mistake or their mistake, so we'll see um how that ends up and then about the live person card or persona card. It's basically the feature where you hover over a user account and it pops out the out of the box, um experience or profile card. You can also click on it and then it will open up the bigger, um like the bigger persona card. Just a reminder here that this is a a component.

H

That's made available or well that's in sharepoint online and we're not supposed to use it in our custom development. So just so you know, I included it because it was a client request, but if you're not comfortable with using this in your own solutions or or when you use this webpart, I've also got a toggle to um to turn it off. Now, if you look at the features when we go edit, this web part, you see that I put everything into four categories.

H

First of all, there is this query: settings that allow you to provide the select parameter, the filter, parameter and the order by parameter values like you would do on any graph query.

H

So if you see that we limit, for example, the select parameter value, you will see that this gets updated and some of the well, if my internet wants so some of the uh properties, I did not fetch at the moment so that uh it doesn't get rendered uh now.

H

So if you update the select query to all of the necessary properties, you will see that they get filled in again now you can also filter on rather simple filters like this one and it just filters on job title this time, it's id and now it's on teacher and then it returns 10 values. You can also do more complex queries as long as they're, supported by microsoft graph.

H

So you could do department equals hr or department equals finance for any account. That's enabled it doesn't return any results now, but you get the point here and then there's also the order by parameter value. Now this one uses the user endpoint of microsoft graph and it only supports uh sorting or order by on display name or user profile name just so you know, even though you can fill in whatever you want.

H

If you put in another property it just returns, ordering is not allowed on this property and you can limit the number of items per page as well.

H

Now, looking at the search parameter option, this one is recently introduced at microsoft, graph at the beta endpoint and it allows you to do a full text search on the display name.

H

There are four options: there's none and that's the ability to do a static filtering where you say: let's get all alex's um in here, then it's just filtered like that. You could question why you would do that. You probably will want to put that in the filter parameter in inside the query part, but you can also have a built-in search box. So if you have the search box, you can do the filtering in here as well, um not sure, let's see if there's a shelly, no so so. This is the uh the result in here.

H

So you can get a search box like a dell and then you filter here as well. You can clear the search query and it returns again and then the last one that's available is dynamic data, so you can connect any other source. This time I only have the page environment on my page to provide dynamic inputs into this web part.

H

In terms of styling there's the ability to turn on or off the pagination, so let's say you only want to show the first. Nine results uh turn off pagination and you cannot go to the next page. um The ability to show or hide results counts. As long as this bug is here, you probably want to turn it off, um enable the show live, persona card, yes or no, and then there's the ability to debug the results that you get from microsoft graph. So if you switch to the debug mode, you can see everything.

H

That's returned and work with this now. The last one is the templating options. It's it allows you to tweak the size of the persona card and also manage the persona fields. So this persona card has a field for user principle, name and four lines of text that you can fill in and you just enter the property name that returns from microsoft graph and it will be rendered in these four lines on the page in terms of improvements, the one thing that it doesn't do yet because I haven't that time is fetching the user profile pictures.

H

So it's on my to-do list for somewhere in the future.

H

Now, switching over to how I did this um or how I built this, I'm not going to show the code in visual studio code, I have a tendency to click around too much and make it uh very difficult to follow along. So I just highlighted some of the code. Snippets that are very interesting- or I believe interesting is the first one is that I put everything from search in a search service.

H

So all my services are separate and one of the actions in my search service is to execute the actual search, and this is where um I returned a page collection of all microsoft graph users. So, first of all, I get a client from the microsoft graph, client factory. This is built in into the context of your web part and there you can get the client factory and get the client, and then you can build your own query.

H

So the first action is to tell the graph client which endpoint you want to use. So in this I want to use slash users, because all of my users are located in there and which version of the graph you want to use and I'm doing beta endpoint, because this paging and search parameter is only available in the beta endpoint.

H

At the moment, then I say that the tester returned the count and how much items it has to return at the first request, and then this is one thing that I struggled with, because the documentation isn't so clear for this.

H

But basically, if you want to use search or do some advanced order by mechanisms or to account, you have to provide an additional header of consistency level, eventual it's somewhere in the back end um a way that they fetch or prefetch their data, and it might be that if you use this and search that it doesn't always include or return all of the results that are available in your user profile or your user's endpoint normally.

H

And then I just apply additional queries. If there is a select parameter, I provide it if there is a filter option provided in the webpart properties. I add it to the result. Query and the same goes for the order: pi parameter.

H

The special one is the search parameter because of the fact that, what's built in in types and in functionality in the sharepoint framework, isn't the beta code of uh microsoft graph. So you have to provide the query itself and say which parameter that you want to uh provide a value for, and in this case I provide my search parameter for display name, and then I execute the request.

H

The second one is for the fetch paging, because I want to fetch the next page, and the next page is returned in your first result as a complete url. So it's a complete url, the same one that I used before with the count and the top 10 and a skip token to skip the first set of results and get the next one and there. The thing is that you can inject this whole url in the api method.

H

So you do graphclient.api you put in the whole url and you still have to provide the dot header consistency. Eventual because of the fact that you still want to return the account and the search and everything that you provided in here as well- and this is where we have a discussion with the graph team, because if you do this on the paging it doesn't, even though it contains account, is true and it works. On the first request. It doesn't work on the page request.

H

It doesn't return the count value at the moment, and then there is the the container itself that renders the page the difficulty there was to keep all of the results in memory. So, first of all, I'm keeping a state of all my results, which is a an array of all the pages collection with the user values in there.

H

Whether or not we're loading uh stuff error messages. If it has an error in the current page, that's being loaded. The page collection is a generic interface, so you can provide any graph object and it provides a value with an array of users. In this case, the next link, the previous link account and some dynamic properties. If you'd like that's important to understand because of this code, which is quite complex, if we fetch the people results, we do it for a specific page and we check if it's a full reset or not.

H

We need to do a reset when we change the webpart properties.

H

So, first of all, first section quite simple: if pages one and it's a reset reload, the information also do execute this part when there are no results in the state when the state first results are empty or when there's nothing in the value, just fetch it again, we put it on loading and then we fetch the first request.

H

Every result that that's returned is an um a page collection of microsoft graph and we put it in the results property of the state and we put the page at one now. If we move to the second page, we check here. If we have fetched already that page or not, so we check results. Length is one. The page we're requesting is two minus one, so it's one equals one. So we check.

H

Does there? Is there a next page? If there is a next page, we load again and we provide the net, we fetch the next link from the last result from the state. We execute the search results for the fetch page. We get data and we merge the existing data with the new one. That's returned now. If we already had page two requested, it would mean that our length would be two.

H

Our page will be two minus one: it's not equal, so we skip this one, we're not fetching it again and we just update the page to being two.

H

That's interesting, because when we do the render that's one in here, we can just use the page in the state to fetch the correct page collection from the state, put it in an items property and use that one to render all of the results.

H

This allows me to keep everything in memory, go forward and backwards between all of the results, because the microsoft graph does not return this previous link. It only has next links as soon as you're in page 2. You cannot go back by requesting it from graph again. You have to keep it in memory, and that brings me to the end. I just want to show the resources.

H

So I blogged about this. On my blog, um the code is on the github. My github is the most recently um up to date, because I've been tweaking it this week, there's an older, slightly older version in the samples github repository.

H

I'm sure that hugo will keep it up to date somewhere in the future and then there's this microsoft graph documentation in the beta endpoint that describes all of this uh consistency level: uh eventual stuff, okay, patrick over back to you.

A

All right, thank you very much great ionic, fantastic demo excited to see that really good stuff, so I think uh abhishek, if you're ready to go, why don't you go ahead and take over.

G

Okay, so this is about monetizing, your add-ins, with uh the app source or the azure marketplace, and uh so before I start about the demo and everything I just wanted, everyone to know what's changing so uh basically, in earlier around january, the seller dashboard has was integrated with partner center.

G

So if you wanted to upload your sharepoint framework solutions or teams add-ins, so you need to go to the partner center and from the partner center, you would be able to upload it so because of which uh the earlier licensing model, uh by which we used to do the licensing for the provider hosted add-in and for the office add-in was retired so because of which what happened result was that all the paid add-ins were actually converted into the free add-ins.

G

So now you will be only able to upload the free add-ins, but then you would also have an option that it includes the payment options in the add-in itself. So now one of the biggest question with my uh partners is that how do I implement the licensing in my add-in? So customer can actually purchase it correct.

G

So here the answer is either you can use your own licensing tool or third-party application, but I would recommend you to use appsource where you would be able to create a sas offering and then link it with your uh sharepoint framework solutions or other solutions. Also, so, let's quickly look at the architecture around how the architecture would actually be. So anything you that you see in blue is owned by microsoft, correct so now earlier uh we just had office 365 and office add-in or, I would say, sharepoint solutions.

G

That would be that you can download from the app source correct and then it finally works, and there was an api which is also owned by microsoft. But now what would happen is because we have removed that capability of having the licensing framework.

G

You would need to also create a something called a sas offering okay, uh this might be confusing for people who might not have used microsoft, commercial marketplace, but sas offering is kind of a web application that gets hosted in the app source or azure marketplace.

G

So once you have the sas offering you might, you would also need something called uh the sas application or you could also call it something like admin portal.

G

I just do uh that demo uh quickly um after talking about this and um and now because we have this sharepoint solution, so this was only required for the sas offering. But why do I have included the api?

G

If someone would ask because sharepoint solutions or spfx sharepoint framework solutions are client based solutions, so it would be much more easier if you have an api that can talk to microsoft, sas fulfillment, api, okay and then get you the information whether the current user is licensed or not, and then this api can also talk with the isp database, saying that, okay, if it was a site-based license or a seed-based license, if it is a seed-based license, you need to also add the users.

G

So all of this code has been developed by microsoft and the community already. uh This is something that I have not built, but uh this is something that I uh talk uh to my uh partners uh on the real time basis, and I thought it would be interesting to talk about this okay. So let's go to a quick demo over here, so I have this particular solution. I have this simple sas framework or solution over here which will just load in a minute.

G

Okay, so it so, it would just display your name and then say that whether you have the license or not, okay, so now, because there is no test markup or app source, I am using the mock-up api of the fulfillment fulfillment and the mock app source. Also, so, let's suppose I went into appsource. I already have my sharepoint solution loaded, but it says you don't have a license, so you cannot perform any operations because you need the in house purchase. So I click on. I have the add-in.

G

I click on purchase the sas offering that I have. I click on purchase.

G

Okay, so it would say that okay, this condos application that you have as a seed based or a site base. Let go with the site base site base means it can have unlimited uses. uh Anyone can access it, so I'll just click on purchase once I click on purchase.

G

It would actually get me to my this web application. Okay, so I'll just show you that so it would from the software when I purchased it. It will actually take me to the uh sas application itself. Now, one of the interesting thing to know about over here is that this is called the landing page. Okay and you can just click on.

G

Buy okay, so this is actually called a landing page. uh You would see that the app source or marketplace will actually throw you a kind of a token over here. That has to be used and that's why it's called a landing page. Once you go into the landing page and say uh get your information just like I, we have just included location, you can say once it's provisioned.

G

You would get back to this is the dashboard page, which is called in the microsoft commercial marketplace stuff. But now, if I go back.

G

What you would see is you do have a paid license. Okay, and if I we have also added some console values, so you would see that okay, it would give you the information that tenant has purchased the site license. uh Auto license assignment is disabled.

G

These are all the licensing thing that is, we can actually implement okay, so this is one of the site-based license, but if I go back, if I click on cancel- and I go to my app source to change my plan- and I say I want a seed-based plan- and I say number of so- it would just update it, and if I go back over here, it would say yet that you don't have a license, because I have not added the user, but over here you would see that the tenant has purchased the license user current user does has does not have a license, but you have a five license available, so that is a small demo on how you can actually build uh on the sharepoint framework code of site.

G

If I go uh yes, it's simple, a very simple thing: we have created up a d uh client, uh so sorry yeah. So there is a sas web api client that we have created. That will just what, if you can see over here, um give me a second.

G

It would just go to this sas client and do a post of the values that it has sent like properties.

G

If you see over here is the value of the sas web api url and it would check with the client whether it has the information or not whether current user, by sending up the configuration value, it would say that whether the current of a current user has license or not or whether the tenant has purchased the license or not on the web api end, because this is a huge quote, you would see the first thing that I showed you was the landing page: okay, so the landing pages from where the app source actually uh sends you to a particular application that, with a particular token, so you take up the token and then you send it to the fulfillment api and the fulfillment api will do the job for you and then a simple home controller or the dashboard controller.

G

Where you manage up your license, so I would actually recommend you to go to uh this particular sample, uh which is office. Dev uh office add-in, sas monetization, and we have all the deployment steps all the monetization code sample, which is already available. uh Try it. We have it all for sharepoint, hosted provider, hosted uh spfx solutions. Also for outlook word and excel, uh there are a few more coming up, so you can um try out the code and see how it all works.

G

So um that is a small thing and then let's go by the click uh links. So you need to understand about the marketplace. uh So you need to understand about the sas offerings that are there and how do you create one, and then how do you use a part center to submit an application to app source? So these? I would believe these are few of the readings that you might uh that you might want to learn about.

G

So that was it from my end,.

A

All right very cool- and it's it's a great topic, especially with uh apps in the store now uh licensing, is something I think more and more developers are going to be considering uh in the solutions they develop. So kisly. If you are ready to go, um I think uh great. Take it away.

A

I

Hello, everyone uh so the today my damn is regarding the sharepoint starter kit version, 2. uh first a bit about me. My name is chris lesina and work in cgi in honor of sweden, and you can connect with me on twitter linkedin and on my blog posts as well.

I

First of all, what is sharepoint starter kit version 2 and you might have already seen it and when I saw it, I was quite impressed with this. It's a comprehensive solution, showcasing you know, packaging solution, deployment, provisioning and you know different types of spf expert parts uses of graph api and it's a lot to learn actually in this, and that's why I really liked it and why I mean this has been created by best people.

I

I think I believe in and I've seen the list of the contributors they're the best people in the field, and you can learn a lot how to package the solution, the provisioning mechanism. You know you can build your own modern portals based on this and in this version some of the web parts actually work in uh sharepoint 2019 as well, so yeah and so how to do it. um Well, you need some prerequisites, you need to be a tenant admin um and you need to set your tenant as a targeted release.

I

uh App catalog should exist and you should have pnp powershell installed. uh You must download the source code or get it from the github through sync and and then just three commands. You connect to pnp online, go to the provisioning folder of the source code and run apply pnp template, and this will do everything. If you face any issues, you can log issues or read the issues in here there.

I

I actually faced the issue in which I was not able to install it properly, and then I had to switch to a particular version of powershell and the latest one was not working, and I had to also pitch in a couple of more commands to make it work and that information you can find it on my blog actually um and then there are three you get. What you get is basically three site collections, a hub site and couple of team sites.

I

There are a bunch of custom web parts and extensions which you can also look and learn. um So I will now show you: if you run the applied pnp template command, what happens? It's the video but yeah?

I

I can just show you quickly, so we don't so this is how you start it, and then it will try to you know upload the all the packages in this case it is showing skipping, because I had already had the packages when I recorded this video, but after that it will actually start the sequence that you apply, the templates. You know uh list instances, it will create files, it will upload all the files which are needed, like images and everything and also it will start creating all the client side pages.

I

You know, and it will also apply and keep on applying the client search pages, and then it will create the list, instances which are needed to to run for footer and everything and at the end you get a message like that that three sites are created.

I

So let's go to the sites to have a look in detail, and so this is the hub site which is created, and you can look at that. It has all the teaming. Everything done. Also, all the navigations are created here. uh I can start from the top.

I

You can see that there is a message saying don't miss the demo on this is alert mechanism which has been created also in this and basically you have to add something in the alert list and there's an extension which you know pushes this on the top actually, and then you can see the different web parts where you can see your latest emails, your upcoming meetings, uh weather time at our offices- and these are configurable like in the my tasks you can have the source from the planner or from the to-do you can set how long the meeting should have like how many days in future the meeting should be displayed here.

I

um So all those are actually in build, and it's a very good thing to showcase to your customer. Also learn from this. You know if you're building uh custom web parts, how to build them. How to what should you thought think about how what settings you you should have in your web parts? That is something you should and of course there are footer here.

I

Also, you can see uh which is also coming from the footer links actually here which can be editable, and then there is a personal page which you can also visit, and this is the organization page, and if you go to the personal page, you will see some similar web parts and you will see the contact list. Your recent contacts followed sites, recent documents and people directory also. So, if you click on on on the alphabet, you will get it and these inside.

I

So all these wonderful custom web parts are here and which you can actually learn from a lot also, and as I said, it also create two team sites which are pretty basic in nature. Human, human sources and marketing also similar to that. But it's a it's you. What you need to understand is that it's a sample site which can connect. You know the hub sites into different team sites. Also. I also created a demo page to showcase couple of other, uh like the recent contact.

I

This is also web part and also site information which displays the site name, the department and the email address of the contact of this site. You know so that is the teams team sites which are there in this one. So now we'll go back to the slides again.

I

And yeah, so demo was done and provisioning um if you like, if you'd like to make this your own, like you want to make a customization provisioning, you can do it and there was a very good demo done by eric overfield in the pnp virtual conference, and you should have a look at that. If you want to learn that it's very detailed, but what I'm going to show is a bit short version of that today. um You can see that there are two commands which you need to really know.

I

Is that read pnp template which will read xml file uh which will generate the pnp? You know through safe pnp template and that can be pushed uh to to the tenant. You know. So let's have a look on the source code.

I

So this is the starter kit xml, and this is under the source, uh and you can here, you can see all the source code of all the web parts is also available for you to to have a look which you can go through and the starter kit xml file is the one which you know holds all the information which we need to have for provisioning um and it will create a pnp file. As I mentioned, it will include all the files, all the image and everything.

I

So I have you know, drilled down this a bit, so you can see that we have some preferences done here. First then web api permissions and then you they push all the catalog all the web parts in the catalog. You know so that is done uh and then, of course it needs some web api permissions also, um and then it will also post the site. Scripts uh site designs, you know, and also the sequence and with the site has to be created. So this is also mentioned here with all the template details you can see.

I

So what I want to show here is that you can learn a lot from this, how to provision all kind of different things. You know, and you can also see that we have here term stores uh terms how to push terms to term story. If you want to use that in your proving so you can actually learn from here and then we have the templates. You know which we can also uh see how it does the navigation uh you can.

I

You saw that we have global navigation, structural navigation and how those are pushed side field, content types and the most client-side pages, and you know we often have to create a lot of client-side pages and put web parts to it. And if you want to learn how to provision them, you can look. You have have a look here. It has create quite complex pages also you know, and with all the details of how to put a canvas control and how to put the news. What's the json control data you need to use.

I

So all this is here, and so that is how you can actually learn from this and make your own. uh Basically, you can edit this and remove all the other things which you don't need and just create one site and some client-side pages to learn out of it. So that is how you can do also. So that's one other benefit of having a look into this, and I really recommend, if you have not looked into this, you should actually um sharepoint 19.

I

As I mentioned, some things, work in 2019 also and the apply pnp template command is not available as of now, but you can actually deploy individual apps in 2019 farm, and these are the apps which will work, not all the apps work, only some of them and to deploy. You can just copy the package file from the solution folder, which I have given here, and that is how you do so. I also have a short small single farm 2019.

I

Actually, you can see this is the farm put in as your virtual machine actually which is running. So these are the app couple of apps I have installed, and you can see that I have a site also here, in which I have actually added this links. Web part that is coming from the starter kit, which also you know, can be used, as I said, so. This is a 2019 actually site and not sharepoint online. So that is what I wanted to show you that it can work in 2019 also and there's a lot to learn.

I

If you want to build spf x, that parts for 2019, you know which you generally don't find on on internet pretty easily um so yeah uh references, that's the github link. As I said you can look, you should look into the eric's pnp virtual conference, video, where he has explained how to make your pnp customizations for provisioning, which is a really great thing to learn actually out of this, and I have written a blog about this also, which you can actually have a look uh also.

I

So I really want to thank all the contributors who did this actually because it's a great learning for anybody to have it and thanks for joining me into this presentation- and I was a bit nervous and excited also because this was the first time, but I really thankful to the host to give me opportunity to do this. Thank you.

A

Awesome, thank you great job. uh You didn't sound nervous at all. That was really wonderful. I appreciate you taking the time to present so we're going to jump back over to the slides and close things out. So thank you, yannick. Thank you kisly and thank you abhishek for three great demos. Again, uh no time today for q, a so we'll move on to just say thank you to everybody for joining the call today very much appreciate it. Thank you again to our presenters. Thank you again to everybody active in the community.

A

Recording will be available in about 24 hours, give or take follow us on twitter. Next spfx calls in two weeks on september, 24th 7 a.m, pacific time and the next general dev special interest group call is next thursday same time september 17th uh join us there as well, and our october monthly community call will be october 13th.

A

So, thank you all very much uh encourage you to check, see us left another encourage in there encourage you all to check everything out. Lots of other great community calls going on out there from a lot of other groups. Programs, communities encourage you to check out, of course, as many of those as you can. Thank you. Everybody have a great rest of your week and we will talk soon.

A