Microsoft 365 Community Viva Connections & SharePoint Framework, 13 Feb 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint PnP - SPFx & JavaScript SIG community call – 13th of February 2020

Description

Recording of the SharePoint - SPFx and JavaScript (client-side) development Special Interest Group community call from February 13, 2020.

Call summary:

Updates on SharePoint Community resources and activity and from Microsoft SharePoint engineering. The “Ask Me Anything” (AMA) on the present and future of SPFx session delivered on the 11th of February was a hit. Two unified communications platform - SharePoint/Teams integration videos released this week were highlighted, links below. PnPjs v2.0.3 release is scheduled for Feb 14th, a new PnPjs v2 video (2nd in series) was released this week and a 3rd video on Extensions will be released next week. New preview version v2.7 PnP Office 365 CLI has been released. Beta v1.17 of React Content Controls and v1.16.0 of React Property Controls are now available. A new version v1.11.1 of the PnP SPFx Generator is released as well.

2 demos are delivered in this session. 1) React based Calendar solution for SharePoint and Microsoft Teams built with SharePoint Framework. In this demo Sébastien Levert reviews 2 ways to insert a Calendar into a Teams page – as a Teams Channel tab (events only from the team calendar) and as a Personal App (events from both the team and your personal calendars). 2) Getting started with Microsoft Graph JavaScript SDK in SharePoint development – Darrel Miller who presented in the January 30th client-side call, walks viewers through selected functionality found in the 2 Microsoft Graph libraries - Graph Types (the auto-generated library) and Graph Client (js library), he manages.

This call was hosted by Patrick Rodgers (Microsoft).

• Demo: React based Calendar solution for SharePoint and Microsoft Teams built with SharePoint Framework | Sébastien Levert (Valo Intranet) | @sebastienlevert
• Demo: Getting started with Microsoft Graph JavaScript SDK in SharePoint development | Darrel Miller (Microsoft) | @darrel_miller

Additional details on topics covered during this call may be found in the SharePoint Developer Blog post for this call at: http://aka.ms/spdev-blog

All previously recorded SharePoint SPFx & JS Dev SIG community calls: https://www.youtube.com/playlist?list=PLR9nK3mnD-OXdcwfcHGsGr78nHWLRsv1x

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

SharePoint PnP Developer Community channel on YouTube: https://aka.ms/spdev-videos

More information on SharePoint Framework library components is available at: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/library-component-overview.

You can download an invite for this bi-weekly community call at: http://aka.ms/spdev-sig-call.

For details around the open-source work being done by the SharePoint PnP Development Community, visit http://aka.ms/sppnp

A

Hello and welcome to SharePoint framework and JavaScript special interest group biweekly sync is February 13th 2020 I want to welcome everybody to the call today got a great agenda as normal, so we've got updates on SharePoint framework from engineering. We got updates on the patterns and practices offerings and we've got two great demos. The first from sebastian a react graph calculator and then Darryl Miller will be back on the call today getting started with the official graph SDK.

A

So this is the official Microsoft supported graph, JavaScript SDK, so hope you going over getting started with that and some some ways to use that on your project, so excited to see that as we get going here, we always have folks asking how can they get involved? How can they do more on these calls? How can they get more involved in patterns and practices? Well, let me tell you so one of the best ways to get involved is to demo on these costs, whether this call or the other calls.

A

We love your demos if you'd like to demo, please just reach out to myself or visa demos could be anything involving part of the patterns and practices offerings and, of course, anything involving modern sharepoint development. So that's application, customizers, webparts and SPF x, stuff around provisioning, stuff around column formatting. It's all great we'd love to see those demos.

A

So if you're doing great stuff or I know you're doing great stuff with your customers and for your companies and if the stuff you can share we'd love to have you share it on this call, so just reach out to myself or vaisseau will definitely get you signed up on a call we do. We are booked out for a couple calls into the future. So don't be discouraged. If you can't be on like the very next call, we will get you booked.

A

We will get you a slot to do your demo and very much encourage you to reach out to us and do those demos, because I will continue to say, I. Think it's one of the most valuable parts of the call you can also contribute on github. So contributing takes a number of forms. You can report issues, you might find what the library's we don't love to have issues, but we love to get them reported, so we can get them fixed. So if something's bugging you don't keep it to yourself.

A

Let us know we'll do our best to try and address that you can always submit pull requests, that's to any of the patterns and practices offerings. We welcome that across all our work, to have you help out and contribute that's a huge. It gets a lot of cool stuff into the library, perhaps a little bit faster. You know, then you know somebody else might get to it. So encourage you to do this, pull request, those pull requests, you could fix issues.

A

Add new functionality, add enhancements, love, it love it love it all that stuff and want to thank everybody, as always for the work they're doing to help contribute there and then finally, another thing that goes sometimes a little bit under the radar, but is a huge help. So the community is helping with issues and questions. So sometimes folks will post issues and questions and issues list and, if you happen to know the answer or have some ideas that might help them, please do post. Please do try and help them out. That's a huge help.

A

It helps everybody kind of help, each other and again get some assistance, perhaps a little bit faster than would otherwise come to them, and then, finally, we always appreciate your feedback on what we're doing. So. How are these calls? How is there documentation? Where else can we help? One of the things will be valuable and, of course, positive feedback is okay too. If you really like something we're doing, we can certainly do a little bit more of it.

A

If you do need some help, getting started on github or contributing or unsure how that process works or how to get how to dive in we do have a sharing is caring, a series or initiative started by David Warner, so you can check that out. That's a great way. There's some scheduled calls, so you can get some demos and some live help to get. You started to get you through your first pull request check out the link there. Akms sharing is caring, that's a great way if you're unsure how to get started.

A

To kind of you know, get your feet wet and jump jump on in a little bit. So we've got four links there. The first one SP dev doc, says you're all up SharePoint developer documentation. So that's where, if you're getting started with SharePoint framework, you've you're an old hand at SharePoint framework, but need to remind yourself with some details or if you're you know doing manage code, development or add-in development.

A

All of the SharePoint developer documentation is at akms, slash, SP Doc's, the next like SP dev, videos is to our P and P YouTube channel there. You can find recordings from all our calls, as well as a lot of great content from outside the calls various tutorial videos, instructions getting started, videos and so forth definitely check that out. If you haven't it's a great way to stay caught up because I know not, everybody can make every weekly call, of course. So it's a great way to stay up to date and see what's been talked about.

A

S/Pdif issues is the issues list and github to report all your modern sharepoint development issues. It's not necessarily a feature request, location that would be more user voice, but if you're having issues having trouble having questions around modern sharepoint development, modern sharepoint in general, definitely that's the place to ask them and then finally, we've got two great github organizations. First, slash sharepoint that is kind of a mix of the official SharePoint repository.

A

So around SPF X you'll find the issues list there that SP dev issues list is located in there as well as some other stuff. A lot of great resources and some of the patterns and practices stuff is mixed in there as well and then github.com, slash, p and p is our patterns and practices organization where you'll find in PJs the yeoman generator the reasonable controls CLI and then some other resources as well, so certainly check all those things out lots of great resources to get.

A

You started to help you out with your development work and places to report any problems. You might be having and now I think it is a SharePoint framework update from Pisa yeah.

B

Yeah, so I don't have a massive amount of updates on Tuesday we had the AMS session with Pat Miller and Luca Panda, Nellie and John Hannigan and me, and where we actually covered a lot of the direction where we're heading so and which was, by the way, a huge success and we've got slightly an update on the roadmap today, but not going too deep on things.

B

A few slides which I wanted to kind of a recap here and this video went live earlier actually today, so building myself teams, personal apps, easily using SharePoint framework and really this is demonstrating the the advantages of using SharePoint framework as the development platform also for Microsoft teams, and so we are working closely with Microsoft teams. Engineering on making this experience even better.

B

Really, the key advantage of using again SharePoint framework for this model is that the hosting is automatic deployment operations are automatic, CDN optimization is automatic, there's an easy management of krafayis and all of that- and it is the unified code base and that's why I think it's 20 minutes video walking and that process and also how to upgrade existing projects. Did the latest version, so you can actually expose them as personal apps if you're looking into doing that as well I'm actually kind of pasted into the YouTube video here.

B

The next slide actually is a kind of a sister video from yesterday, and so this one is actually no code. But it's a it's kind of a well related on the same model, and this is this one is showing. How do you can actually do a or expose a SharePoint portals in Europe, Microsoft themes and point then, and pin them in an organizational wide as the top left corner, so that will basically address the classic request from the customers, which is I, wanna use themes.

B

But our corporate communications is saying that we need to somehow expose our corporate portal and corporate messaging and news for all of the employees using the themes and voila there. It is- and this is basically working through that process now for this one and we are looking into making the the process even more streamlined in the future right now. The process, what I'm actually showing in the video to be honest, only works in the web.

B

Browser so in a browser browser teams- and there was a chat related on and that one already in and Twitter earlier today and there are ways to actually make it work in the Microsoft themes and desktop as well. It's critic really great video I'm, showing the best of both worlds to SharePoint and Microsoft themes together as the unified communication platform, and that's where we're heading anyway, because Jeff deeper is now the lead for Microsoft teams as well, so not only SharePoint and onedrive Jeff being our senior vice president owning the experience.

B

Like said when we started the section and they will say a really nice ask us anything session on last Tuesday. We duper pologize, we've maxed out at 250 attendees again, so we're trying to figure out the right technology to not hit that max again, because we can hitting that max. Attendee number now in the monthly community calls in these course we're hitting like 150, 160 or 10 days. But it's getting closer and now I know that there's there is an ongoing discussions that apparently teams might actually increase that 250 limits sooner or later.

B

So we're in that fence of do we actually want to move away from teams rather than we for them to increase the limit, but it was a really creative discussion and questions related on the future of SharePoint framework or future of whatever it will be called because it's not getting extended for the Microsoft race. It's the five level with the work, what we do with Microsoft teams and office add-ins.

B

So there's new announcements related on that one and a concrete announcements and demos all those they're coming in built and in spca shape on conference 2020, and but we did touch many of those topics on that recording so probably want to check it out if you're interested next slide is just showing a web backing track, relationship and framework adoption worldwide after the holiday break. So looking cute and the growth is phenomenal, which is really really great.

B

So by far the most successful UX layer, extensibility model, what we have and the next line is basically the classic. What are we going to do after now, with the 1.10 release, so 1.10 was released in the early January, we're looking into doing 1.11 at the same time we're actively working on the AppStore support for SharePoint framework, which is coming actually relatively soon.

B

But again, you might expect us to make the announcements into big conferences, and so you can kind of a guess where what are we targeting from a delivery perspective, the unified tool chain for Microsoft traces, five workloads we're working on that one, and that basically means that you'll have exactly the same tooling for implementing UX for teams and officer ends and share points, and you can just as a developer.

B

You can choose way when I expose your functionality, which is pretty awesome, same code works in every single location or, what's pretty cool, maybe support fruit, our framework for all of those components which we can build faster in a loop and more extensions extensions extensions, and that came up on Tuesday as well. We need to add more extensions in the water SharePoint, so people want that and we absolutely hear what you're saying, but that's it. For my side, I think we are heading to the PMP chairside.

B

A

So previous updates 2:03 scheduled for Friday release. That's this Friday on Valentine's Day, so happy Valentine's, Day to everybody. That's got some great fixes some enhancements and some Docs updates they're, also fixed kind of a long-standing bug. That's been hanging around with batching. It was low impact so as low priority, but excited to get that fixed and that'll, be in 203 as well and also some great contributions from folks out in the field. So thank you. Thank you. Thank you. Thank you for that. We've got a great new video.

A

The second video in our getting started with PPG sv2 series is out it's not on selective imports. You can find that on the YouTube channel or as well I'm sure very shortly, a link will be appearing in the chat, so that will be coming as well. We've got a third video coming on extensions, that'll, be how hopefully, maybe early next week for folks. So we can get those videos we'll get those videos rolling out, as we can I did want to mention so I'm gonna be going out on family leave soon. So what that means?

A

Please keep submitting issues. The March release will likely be delayed, we'll see how much sleep I'm getting at that point and do expect delayed responses from me at least, but do please there's a lot of folks helping each other on the issues list just keep that up, keep helping each other as best you can I know, there's a lot of smart folks out there, but just wanted to kind of mention that on this call and I will be pinning an issue in the issues list, mentioning as well that I'll be out on family leave.

A

So just my involvement will be a little bit reduced for the foreseeable future. So it is a little boy. We're gonna have another little boy, so very excited about that and I keep pretending, we're ready, so we'll see documentation, PNP, github, Daioh, slash, P PJs for all your PJs documentation needs. Thank you all for the congratulations. My wife is doing all the hard work, but I will certainly take credit for me. Thank you and then hashtag PJs on Twitter, and then you can follow me on Twitter at mediocre, bowler office, CLI updates, new preview version.

A

2.7 with commands for completion or command completion in PowerShell reporting on office, 365 groups, usage, updating, graphs, schema extensions, removing SharePoint organizational asset, libraries and adding Yammer messages. So that is a new preview version, so you need to NPM install dash G at P and P officers. Five dash CLI at next to get that for the CLI, so definitely check that out.

A

If you haven't tried out the CLI, it's another great tool to have in your tool belt, you manage your office's five deployments and assets and other things so a great tool there as well the reusable components great way to jumpstart your development for web parts and application customizers set of react controls. One set is the content, controls and another set. Is the property controls content controls designed for the body of your web parts?

A

You know to help you jump-start, have a nice out-of-the-box, look and feel to your display or your layouts for your users and the property controls provide the same thing, but for that edit pain in the web. Part in your SP FX web part so definitely check that out. It's a another great tool, so use jumpstart your development, save you a ton of time and build on that existing functionality.

A

And, of course, if you have ideas, another great place well as PGS as well as the CLI, if you're interested in contributing and doing some react to work. If that's a thing that interests, you is certainly a place to jump in and get involved as well and then, last but not least, a new version of the SP FX community generator has just been released, I believe yesterday.

A

So that's 111 one. It includes PPG s20 to view js4 sharepoint online. Only scaffolding improvements and some minor bug fixes so great release there. Some nice updates to the community generator so certainly encourage you to check that out. Help Wanted. There is a desire to support angular, 9 and SharePoint Online projects.

A

So if you are a an expert in angular, 9 or or have some knowledge there or just want to learn, certainly a great opportunity to jump in and help out with the generator so another chance for folks to get involved, there can always install NPM install G at the MTU slashed generator. Just pfx documentation is a kms PNP generator and there's a git er channel as well get er done.

A

I am generator SP, FX / generator, because anything using yeoman has to use the word generator as many times as possible, and now with all that in record time, we are on to our demos. Can you use react control, no JavaScript solution, so.

B

Quickly, answering on that one so and the property pain, react, controls or the property hand controls. They are actually built using react and you use them even though your JavaScript or web part would be implemented using no JavaScript, but inside of the back part. Obviously you cannot use react controls if you're not using react. So sorry for that sorry, Sebastian, Sebastian, Sebastian. Yes,.

C

For pretty pain, property, property, pain, I, guess that's the word of the day, thanks thanks, perfect for a quick introduction wanted to share a little bit of an experiment that I did in the last couple of weeks.

C

Actually we at the European SharePoint conference this week, I wanted to showcase a really cool web part that was using SPF, X and teams and I thought it would have been a great demo opportunity or a great sample on the github, so wanted to kind of do a little bit of a walk through of this sample in this web part here who's that guy, with the weird French accent, my name is Sebastian.

C

I am the product lead at intranet, but an MVP for the last five years now, mainly focusing on the client-side aspect of office, 365, so SharePoint framework, and before that anything JavaScript and I wanted to literally go through really really quickly a couple of slides and then afterwards jump directly straight into the code. I, don't want to bore you with with slides today, you all want to see code. So why did you just a quick introduction of why this is really cool?

C

First of all, team's development or SharePoint framework web parts, development within teams has been available since SPF X 1.8, and this has for me literally changed the way. I see a SharePoint framework solution. It's not just a piece that you put on a page in SharePoint anymore. You can put that piece literally anywhere in your productivity suite from SharePoint to office add-ins now to even marks off team. So it's really really powerful and the cool thing is that is the same tooling.

C

You don't have to relearn anything and since SPF X 1.10 we've been able to even use it as a personal tabs, and this is where the game is totally changing for me and I'm gonna show you all those examples later today. First, how do you make that happen? You take your existing code. First, you migrate it to one point ten, so you use the office 365 CLI, you migrate your code to SPF X, one point ten and in your JSON in your web part manifest.

C

You just add that you want to also have it as a team's tab or as a team's personal tab, and this is where all the magic happens. Actually everything will automatically be inferred from these supported hosts. So let's go and see what does it mean from a code perspective? So if I'm going to my graph calendar here, so this sample I'm currently showing and I'm gonna zoom in a little bit, so you can see something this sample is here is available as part of the s/pdif framework webparts sample. So it's called a react.

C

Craft calendar and all the instructions are right in here so to come back to this later, but first here we are saying that it is going to be supported as a SharePoint web part as a team stab and as a team's personal app. This will make available this Web part in those different areas that you might want to use it so what it means. It means that I can add this apart to a SharePoint page to a team stab within a team into a personal tab or a personal app within your team's client.

C

So if we go and see what's the result of this, let me go here to and I'm gonna do this I'm gonna do project Last Vegas, which is my thing here and I'm gonna go to pages and in the pages I'm gonna go to events, so in here, as you can see, I have a webpart automatically loaded as part of ESP effects. I actually have it here. It's already loading from a local build of this weapon. So it's all here, I'm, just gonna. Remove that- and here you can see, I can go edit.

C

This page I can add another version of that webparts. But if I do graph, calendar I see the graph calendar from here, so it's really available as part of the surface right from here. What is great here is. This would also be it's not there yeah, but that could be modified to loop in to or hook into the calendar that lives on a communication site.

C

So if you want to push it a little bit further and want to start with this starting point, one of the biggest missing feature of communication sites today are definitely the fact that there is no calendar view of the events list and with this approach you could really build something really cool. But here we have the february 2020. If I go back from one month to the other, I'm gonna see other values. I can click here and now I see here now.

C

I see the actual information about the event this one we see at 8 a.m. and then we see the time and everything. So that is a great scenario, but as we know, people are using marks of teams more and more and more so. Why don't we bring this actual calendar directly inside Microsoft teams? That's exactly what we can see here so now. I am in my Microsoft team's team. I am the general channel where I added the graph calendar, which is available as part of this year, so I can actually hit craft calendar automatically.

C

I don't want to post the channel, I'm gonna hit, say: I'm gonna have a second graph calendar with that small parentheses here and here I say: I want to be able to load three-hole, 303 items at a time and now autumn I. Actually it's there the best thing about it. It's exactly in the same code that runs on both the SharePoint Online and the team's things I'm going to come back to the actual details around code.

C

What's new in SharePoint framework, one point: ten is the ability to take this exact same component but to bring it to the personal level. So here we're at the team level. It needs to be part of this here, and this is cool, but sometimes you might want to have an app that is more persistent that is always available as part of your team's environment and that's exactly what personal tabs are about.

C

So if I go here and I go to the graph calendar here, this is an app that was deployed directly from our app catalog in SharePoint framework, so the SharePoint Online app catalog, we synced the app to teams and now it's available because we said that it was possible to use it as a personal app. Now it is also available as a personal app right here, depending on where we're at I can pin it now. So that's a new feature of Microsoft team. So from now on, this graph calendar will always stick around.

C

So if I go back to my teams, as you can see, that grass calendar is always there, I can just click on that and boom we're back to the exact same UI. What is interesting, I know if you notice, but it's not the same data while I'm in a team I actually hook up to the calendar that is attached to the current team, so I go I use the graph talk with the current team's calendar and automatically I fetch the items here.

C

I fetch the items of the user code makes no sense to no hard-coded team or whatsoever. So here you have the ability to have all those elements right in there. Great maybe enhancement. Opportunity here is to also go and fetch all your joined teams calendars and make them part of this calendar. So you see not only your events but your team events as part of a single dashboard that could be extremely powerful to really have a good picture of what's happening around everything. So what is the code doing?

C

So, let's go back to your visual studio here and let's go to first couple of things that I wanted to mention. So first we're gonna go to our web part class, which is kind of the entry point of this.

C

First of all, we're just gonna simply provision the graph calendar, which is my main component where everything is being displayed and rendered. So we're gonna go back this a little bit later, but there's a couple of things that we have to do initially to make sure that we have a well working solution. First, we want to make sure that we are in teams if we're in teams or actually, if foreign teams make sure we have the marks of teams SDK available. So if we are running within marks of teams, this object will have a value.

C

So if this object has a value now we can actually get the context out of it. It used to be an async function. Now it's a direct object, so we just get the context from it, and this is what will provide information like channel name team name team ID, so we can do some of the queries to the graph later on with the current context of mark soft teams.

C

Also, something you want to do is to initialize the icons running on a surface that is hosted in SharePoint, but doesn't have all the bits and pieces in SharePoint actually so, for example, the office to our fabric icons are not loaded by default in a SharePoint framework web part that runs within teams. So here you need to initialize the icons, and this is a function, is actually being provisioned as part of the office.

C

You are fabric react package, so you just need to call that function here and to see that the icons or it's not gonna, look good. You won't have a great experience if you're using the office UI fabric styles in your and your component, so this is kind of the only thing that happens on the web parts side of things. But now, if you want to go to a little bit more stuff, what you're gonna realize is that we are using this year.

C

So the way I I'm a very lazy developer as I'm, not coding as much as I used to I, don't have time to build amazing calendar components. The office UI fabric does not provide a calendar component either so I had to go and find a nice calendar component. That is open source in that we can use to build those. So what I did I used a full calendar? The full calendar is a really really really nice library I. Have it right here.

C

So it's a fully JavaScript native calendar library that has versions for view for angular for react, so it makes it really easy to leverage and to assemble a page with this. So basically, in that case, what is cool that I don't have to build any of the calendaring components? The only thing I have to do is to provide data, and how do we provide data? Well, we have the marks of graph to do that. Our sub graph is your perfect best friend to loop in some data from this team. So how do we do this?

C

First, we will going to come back to this here. We will load the events when we load when we render this component we're gonna load the events based on the calendar start date and to calendar end date. Why do we do that? Well, you know when it can during is really hard, especially in software engineering.

C

It looks like a simple thing, but it's actually probably one of the worst thing to play with dates and calendars are like my worst enemies here and, as you can see, I have a 26th of January and at the end, I have the 7th of March. So I want to be able to do my crater graph to include those all of those dates. So my full view makes a sense, not just for the current month, but for the entire view that I have here.

C

So that's what I'm doing here then I'm loading the events I am using the I guess previous marks of graph fly. It sorry Darryl hope you are coming with good news today, but here I'm using the previous clients here so I'm getting the client from the graph Factory and I'm simply building my URLs. In that case, slash group, slash group ID that group IV was provision through the context of mark soft teams.

C

So Microsoft teams has the information about which group ID we're currently working on and then afterwards, I'm, just here running the query but I'm doing a little bit of a filtering based on the start date and the end date. What are the different properties I'm looking for, which is the version that I want to call from the graph which in that case, is there v 1.0 Here I am doing a little bit of a trick here if I'm running as far as their personal tab, I want to run. Slash me slash event.

C

So, instead of going to the group, calendar I want to go to my personal calendar. The good thing here is that that was the only change that I had when I changed the code to go from SharePoint framework 1.9 to 1.10. That's the only piece of code that I had to change just to add, can I check if I'm in a personal tab and if yes, just override this setting here and what is the way to check. Well here we're gonna check.

C

If it's running in teams and that we don't have a team's ID, then we are in a personal tab. How do we check you for running in teams or just checking if we have a team's context that was passed as part of the initializer of our element? Something also that is really really really interesting. That you can play with is to be fully aware of the current setup of your Microsoft teams.

C

So let me show you something that is really really cool in this scenario: I can go here, I can go in my settings and I can change it to be dark, and now, if I'm reloading the page I'm just gonna reload this one here, you're gonna see that I now support dark mode natively within this, this webpart, so that way, I'm a dark mode guy so I had to so how do we do that? Well, there are some interesting api's that exist here on the team's context.

C

You actually have access to the theme so based on what we're doing when you are running in teams were importing, basically we're injecting on demand CSS to the current web part that now runs in team. So you want to have a good example. Is in this case I, don't know: let's go back to SharePoint, well I'm in SharePoint, you see. The colors here are the colors of the theme in teams. I want to have the blurple that is from Team, so you really have to have those nice colors.

C

So we are having an s CSS or a module here, which is the following here, which will bring some of the colors in there really really really simple CSS we're not that much, but at least we were able to do that same thing with dart. If we are running in a dark mode, then add this piece in that case here it's really simple we're just using the F, so we're using the foreground.

C

Color becomes white instead of gray, and this one the today becomes this year, so at least when you're running inside teams, with a very, very small amount of code. You can really detect, if you're in a dark mode or not in the dark mode and then apply it to your entire element in there. So that was what I wanted to showcase today. Well, actually, the last thing I wanted to show is how easy it is to work with full calendar. As you can see here, full calendar is actually just that. It just manages everything.

C

It manages the events that were loaded initially through the Microsoft graph. It manages the height manages that what happens on dates when we resize we can even make responsive. So when I do that here, like it responsive, ish, let's go with responsive ish like it's actually pretty good and finally, a couple of in elements here and then I'm, also using some of the office to our fabric components.

C

In that case, the panel that, when I'm here and I, want to see the information here, it just pops up as a paddle from the right, where I see that data here here, I could have an edit button that could have more details to really make it more functional calendar items. So that makes it really really powerful in a very, very, very low number of lines of code, where I have like not even like 200 lines of code for my entire component.

C

That does fully work on the Microsoft graph, so just before I headed out to dial. In that case, I wanted to come up with a couple of tips and tricks for you guys, which is the following here. Just as a reminder. First, you can always understand the team's context. That's the way that you know if you're running in teams.

C

The second thing importing things based on, if you're in teams or, if you're, in a dark mode of teams, really useful when you're building trust platform solutions, there's a an interesting framework that is available, which is called the fluent UI framework, which used to be called Stardust, which could be an interesting UI framework approach. The Stardust is what is being used within Microsoft team. So if you want to look into it, Microsoft star dust github, there you go. It's now called fluent. Ui react. Actually, yes,.

B

So sorry, supposed and I'll jump on that one. So what we're doing is that we are basically gradually combining the classes plastic office. Do I freak react and then the Stardust and they're basically now merged, rather than having an competing set of my furries we have one set of viper is cross damage, retraced and.

C

That's great because it means that basically, based on your scale on your use case, you'll be able to go right or left, and then you have like really really cool stuff. That you're gonna feel that our familiar to how you're, actually building Microsoft or you see marks of teams. The cool thing is the chat messages but yeah. So you can literally use the fluent UI for this huge request, for you guys, don't just use the web version of Microsoft Dean's everything will work and then you're gonna go to the client and it won't.

C

So please always test with the real thing it makes everything way way way better and if you want to make it just just just themes enabled you can always hide from the toolbox. So if you just want to use SPF X to build a nice team's app, you can hide your web part from the toolbox. So in the end it's gonna make it a full team's app with your own tool chain or tool kit, and it's gonna make it way easier. So that's what I wanted to share today.

C

I cannot see the chat so I'll be able to enter the questions, but I'm gonna try to figure out a way to get back to the chat in a couple of minutes. So just see that Thanks.

A

Great Thank, You Sebastian, awesome demo great to see that and I think Darrell. You are all on the call if you're ready to take over and present, you are up how.

D

Ready I am remains to be seen: okay, I'm going to share my screen, so no slides few pages and some demo code and I'm gonna start up with a few caveats here. So this is one of those few calls where I'm on the call and I'm happy that I can say: I am a program manager on the Microsoft graph developer experience team I am not wearing my developer hat today because, as you will quickly learn, my experience in JavaScript is spectacularly thin.

D

I'm also going to say my experience and understanding of both SharePoint FX and SharePoint are also spectacularly weak. So you might ask the question: well why on earth are you here talking to us and really this? This search here in NPM is kind of the answer to that question. So the Microsoft graph types and the Microsoft graph client library are two libraries that I am the PM for and our graph SDK team is the team that builds these libraries you'll also notice.

D

Some other items on here, like the we updated this six months ago, now I'm sure you're much more familiar with the peon PJs things which was updated twenty-one days ago, there's a whole lot more love in the community for the p.m. PJs library, and yet just because of the way things happened.

D

And historically we have this graphed client that our Microsoft team own and, if you were on the call from a few weeks ago, I talked about the work that we were looking into doing with regards to trying to develop a fluent API and auto-generated in the same way that we do for other libraries and how we were looking in to try and find a way of doing that generation. So it can also work with the peon PJs.

D

So one of the reasons that I'm here and kind of showing you the what we're doing the Microsoft graph client is largely to learn from your community and to understand how we can improve and how we can stop duplicating effort, because I hate the fact that we have a situation where we're doing the same things. It's the same as what vaison was just talking about the Stardust and they the fluent thing.

D

It makes no sense to do two different things and then have developers have to make decisions as to which one time do I have to use. So I want to get more involved in this community to understand what your needs are to try and understand more about the problems that you're trying to solve, so that we can make sure that you can learn from p.m.

D

PJs and we can do things that are closer there and maybe hopefully vice versa a week and some of the things that we build will be valuable to the the SharePoint community. Also so I mentioned these two libraries that we have and I don't have access to the chat. So if people are going to be asking questions, I'm not going to be able to see them so feel free anybody to come off mic and yell at me with questions as we go along.

D

So there's two libraries and I'll explain the difference between the two of them. The Microsoft graph client is a JavaScript library and I'll, as Sebastian mentioned, which he hurtfully called the old library, but I understand it is, has been around for a little while this is the library that has that syntax have been able to say, client, API and then has all the OData type functions and you can install it for maybe NPM. You can also install it from Jas, deliver and there's instructions here.

D

Basically, how you set this up and to be able to make calls I'm going to scroll down here, hopefully somewhere down here it talks and shows you how to go and retrieve email messages or how to send email messages, and that kind of thing. A couple of things to point out here is: we have recently introduced these things called authentication providers which are wrappers around the Microsoft off library and in the demo.

D

I'll show you how that plugs into the overall setup, so this is kind of a set, purely JavaScript way of making calls to the graph and constructing your eyes and being able to get at the JSON response body. But really it is just a JSON blob or a JavaScript object. At that point. The next library is the one that we auto-generate, which is the Microsoft graph type script type.

D

So we use the metadata of Microsoft graph in order to generate a set of models so that if you are working in typescript, you get this strongly typed experience to be able to see what the properties are on all the different classes and as Microsoft graph grows and grows, and we add more capabilities in there.

D

This just provides that nice discovery mechanism, and this is available both on NPM and available on definitely typed, and there is source code available that allows you to get the beta libraries we're not currently publishing the beta libraries, but that's something that we need to get onto and get those published to. So people can experiment with the the beta capabilities that are available, so the demo that I'm going to show you is basically it's a react.

D

Application and I went to the graph developer portal and I went to the getting started and I went to find the react app and you can actually download it all as a complete app or you can just walk through it and say, create your project and it walks you through step by step as to how to do it. How to register the pour the app in the portal and how to get some information and I'm. Just gonna show you running you here. So this is.

D

This is how you access the graph if you're not running in SharePoint world at the moment, and it's it's a very simplistic react tutorial and I can click here and do sign-in and I'm going to foolishly go and connect to my own personal account here and it's gonna recognize it's gonna go off and find out who I am, and it's gonna provide a couple of additional tabs.

D

The built-in one that the tutorial shows you how to get the list of calendar events but on your calendar and I, went in just to prove that I could actually add a tab and I'm not completely hopeless. In JavaScript, I went and rent read all of my messages in my email inbox right. Let's just take a quick look at what that code looks like, so it was created from from basically just using create react, app and then copying and pasting stuff in from the the getting started.

D

But the getting started actually does a bit of a kind of what I'm, considering the an anti-pattern. With regards to how you use the graph client, what it would end up doing is every time you'd go to make a call to the graph. It would go and create a new instance of that client.

D

So I did some refactoring on this library and if we look at the class app and look at the constructor of it, one of the first things that you have to do if you're working with AM Sal is set up a user agent application to allow you to do an implicit flow login and we pull the app ID from the client ID from the config file and pull the client ID from the config file and the redirect URL. And then we go and say well.

D

Have you previously logged in because the one nice thing about emcell is it has a token cache and if you've previously logged in will remember that and it will pull out the user if you've already logged it. And then we go and get a client application. And this is the same client application that if you use from the SPF X that you do dot API we're just creating it manually ourselves.

D

This way and I'll show you how I do that in the get client method which, if I scroll down just a little bit over here, there is a static factory method and we can say in it with middleware, and this is one of the pieces of value that the library brings. Is it has this middleware pipeline that comes out of the box with handling retries and dealing with making sure that you don't redirect tokens across across domains.

D

Although I'm wondering whether in JavaScript, that is actually an issue, it certainly is in some of the other languages, and what we've tried to do is across the languages, provide this consistent pattern of using these, these middleware pipelines. So, in order to get authorization and to be able to get the tokens we plug in this, what we call an implicit emcell authentication provider with the particular scopes that we we'll be using in order to make the graph API calls and we pass this off provider into the graph client.

D

And we return that graph, client and then I, basically just set it as a property on the app object and that property is going to get passed down into various react components that we use throughout the application. So one of the first things that we do as soon as you have sign gain is go and do get user profile, and if I just go to the definition here, we call a method called get user details which lives in a service library and the only reason, I kind, of two reasons that I created the service library.

D

One is because that's kind of how the the starter app showed it. But the other reason is because I actually converted into a typescript library just to kind of give a feel for how the typescript interacts. So if I flip over to get user details, this is in this grass service library.

D

You can see, get user details just takes that client and calls the API and returns the user, and the value here is: oh, no. The point I was going to make is this is set up currently as a set functions that you pass. The client in it would probably be a better design to actually just create this as a service where you pass the client into the constructor of that service. So it's actually a class and you don't have to pass the client in on every single action.

D

So anyway, this returns, the user, which shows the name and you can get the profile photo and for things like that, you can see here how we are getting the events for the calendar, and you can also key here how we were getting the messages and we are also building some other higher-level capabilities around these libraries and one of those pieces of functionality we built. Is that the problem with them? You do get messages.

D

Is you only get like the first page and if you want to get more, you have to follow that next links, then you've got to go and get the next link and call it and call it again and again and again so in the second implementation. The method I have get all messages where we get the first page, but then we pass it into what we call a page iterator.

D

So you just pass the collection in and we have a callback that adds all of the messages into a collection and then returns all of them and and we can do a count and limit it so that we don't end up returning too many. But this page iterator class is just a way of making it easier to deal with these page collections.

D

There are a few other classes that we've started to build in order to deal with these higher-level scenarios, where you actually, instead of just making one call, you want to make a multiple calls into achieve a higher level goal and I don't have that in this source code, but I'm just gonna flip over to some preview documentation. This should be up fairly soon.

D

This is the graph requests patching, and we touched on this very briefly in the fluent discussion last week, because I know PM pjs has a very similar way of doing this, and it would be great to align what we're doing here, especially because I know, there's on the that there are plans of adding some extra capabilities into batching on the graph and again I. Don't want us to both have to implement the same mechanism twice, but the idea here is you create a request, object.

D

This is going and getting the profile photo request, and then here in this case, is a little bit of a strange example. We create we go get it and then we we, we request the photo and then I think we upload the photo right afterwards, and but we create these multiple of requests, convert them into batch, request, steps and then package them all up into a single batch request. Content which is over here so here, are the different steps that have been put into the batch request, content, object and then just using client at API.

D

We pass it to the dollar batch endpoint and pass that entire content, so this is just a wrapper around making it easier to do batch calls, and the one last example I'll show is a large file upload mechanism, and this is a task- has been built and we made this available for both onedrive and SharePoint, and also now you can upload large mail attachments. So you create a task object and you pass it in just this.

D

The standard graph client this the file that you're interested in and some options that basically say how big you want those slices to be that you're sending over the wire and it will take care of taking that file, slicing it up into smaller chunks and then sending the file one by one, and if you get a failure at some point in the way, you can then resume that upload part way along.

D

So this is another piece of functionality that layers some capabilities on stop, so that was really all I wanted to show is just a case of if you want to understand how that graph client works outside of the SharePoint world and outside of SPF X. This is how you can go around and go and play around with it, and we certainly are looking for feedback. We want to know what about it won't work well for the the in the SharePoint world.

D

What what stuff we can incorporate and help moving forward with regards to consolidating our efforts between P and PJs and the graph client. So, hopefully, that gives you a little bit of perspective of what you're doing and hopefully, everybody's on board. It was about the fact that we don't want to write all of this code multiple times and with that I will hand it back to you. Patrick.

A

Fantastic thanks, Darrell for showing that and Thank You Sebastian, give me one second to get my screen shared back there great demos on two exciting topics there, so the calendar demo and then seeing what's happening with the graph JavaScript SDK is very exciting as well to see the development that's happening there and the plans excited to see how that develops so move it out. We don't quite have time for Q&A, but our next meeting will be two weeks so February 27th 2020. That will likely be my last meeting for a little bit.

A

So hopefully our next general dev cig meeting will be next day february 20th. In the meantime, I hope to see everybody on twitter and in github helping us out and thanks to everybody, have a great rest of your week, learn, reuse and share, and we will talk soon. Thanks all bye.