Microsoft 365 Community Development, 18 Feb 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft 365 PnP – General Microsoft 365 Developer SIG community call – 18th of February, 2021

Description

Microsoft 365 PnP Community - General SIG call on February 18th. Demos: 1) Build your Microsoft Graph powered electron apps with Microsoft Graph Toolkit, 2) Taking advantage of PnP SPFx controls for your Microsoft Teams solutions, and 3) Run CLI for Microsoft 365 in Docker container. Register now for March trainings on Sharing-is-caring. Latest project updates called out. Released PnP .NET Libraries - PnP Framework v1.2.0, PnP PowerShell v1.3.0, and yo Teams v3.0.1. Microsoft Graph Toolkit v2.1.0 is coming very soon. The host of this call was Vesa Juvonen (Microsoft) @vesajuvonen. Q&A takes place in chat throughout the call.

Learn more:
• See the full blog post for this call at: http://aka.ms/m365pnp-blog
• Download invite for bi-weekly General M365 Dev SIG call: http://aka.ms/spdev-sig-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

Welcome everybody: this is general microsoft, 365 development, special interest group. This is the bi-weekly sync. It is february 18th unless I'm completely mistaken, um and today we're going to do a quick recap on the latest, on the open source projects and assets and and then a quick recap on latest microsoft, team samples and then we'll have a picture time uh quick to get remote picture uh with all of the attendees and the call.

A

And then we have three demos so again we'll try to do the intros and recap on what's happening in an open source within 15 minutes together with a picture, and then I will move into the demos quarter past on the hour and then all of the demos have max 15 minutes. Just a reminder for speakers as well. We will have to actually cut you down, cut you off after 15 minutes. So please, please, please try to keep uh on the timings, but we'll start with amaterath and then gary and then morrison in the end.

A

Now, uh let's actually do a quick recap on things. So quick uh recap on opportunities to participate within the community and we are a open source community and we want our community to be active. So one of the easiest way to actually be active and and being part of the community is a volunteer to do a demo of a solution or a technical pattern. So these are great opportunities of getting visibility for you or your your solution or your open source solution and so on. It doesn't necessarily have to be an open source solution.

A

It might be a pattern which you'll learn to use, and then you want to share that with others as well. um So please, uh if you're interested in doing demos, reach out to me, patrick bert, or whoever actually to be in the bnb team, and they can actually get you scheduled an upcoming calls- and this is where one of these ways to contribute also is to contribute in github in any of the github locations.

A

We have quite a few of github openheart source repos, which welcome our contributions, and the most important piece is always to provide feedback if something isn't broken or something is broken and you can provide feedback, but also positive feedback is welcome when you are providing feedback and to say, as we were discussing before, we started recording uh it is good to be polite and because that that's when how your feedback is being constructed and then it actually can have an impact. um So let's be nice, let's be polite.

A

Let's understand that, especially in the open source area, people are actually using their own time for the benefit of the others in the community. So being polite being positive and constructive is really the key now uh now on the urls and and uh locations. So quick recap on those as well, so we do have two different youtube channels, one with the microsoft, 365 developer, videos and then one with a community videos more, and that includes also non-development videos.

A

We also have a lot of open source assets and also open source locations available in akitan and which are available for you to take advantage. Don't start from scratch either use any of the open source, github locations or our sample galleries, to find a good starting point for your solution, whatever you need to actually build, and because all of these solutions are mit licensed, you can actually pull them down.

A

You can re-use them within your solutions as well, and then, if you consider that there's too many urls available or mentioned in their slides, akms m365 bmp is the one address and one url address to easily actually access all of the assets within our community.

A

Now a quick recap on something which happened already a few weeks back, but I still kept it on the slides as well so uh viva microsoft, viva was announced a few weeks back. It actually have four different uh sections. So there's the viva learning, there's the viva topics, there's the viva analytics and then there's the viva connections and viva connections is, is something which we will have more and more details available from extensibility perspective quite soon.

A

But this is basically a way of doing extensibility for microsoft teams using sharepoint framework and then surface important capabilities inside of microsoft teams. We will actually have a invitation only dev kitchen, pretty soon with our partners and and some of the mvps and then we'll probe open up more information related on this extensibility platform uh later on on the spring.

A

But uh if you're interested on where we're heading against aviva connections is the url to get more information right now, we'll provide absolutely more information immediately when possible and- and we can share more now, few other assets uh and reminders or recaps of the urls. So akms teams samples, if you're, building something for microsoft teams, there's already a lot of lot of open source samples available, contributed by microsoft, employees or by the community.

A

And if you go to the akms team samples, it is a nice gallery where you can actually find what's relevant for you, and that includes bot framework samples, messaging connections, outgoing lip hooks or tabs and and all of that and meeting applications. Even so really really great assets of finding relevant information for you and the other thing which is really really cool, is that the community helps community to learn so david. Can you do a quick recap on on what is sharing? Is caring.

B

Yes, absolutely thank you vessa well, for those that are new and are veterans to the community. It's always good to remember. We are an inclusive, as vesa had mentioned, inclusive community and open source, which means we welcome any and all contributions and using of the tools and resources. But we understand that there can be some hurdles along the way. Things like understanding how to use github, navigate that landscape, how to use things like node. If you want to start getting into development, there can be a lot and can be overwhelming.

B

Sharing is caring is an initiative by the pnp team to provide hands-on guidance, so these are smaller setting sessions where we get together. Provide you hands-on lessons walk you through together, we don't record them, so it's a complete, safe space opportunity for you to ask questions of any sort and type we've just scheduled all the march sessions and we've left some room to add some if some of them get a little bit more popular than others or full.

B

So we've got obviously our first time contributing community docs, who are most popular spf x, samples with nvm and the developer. Workstation setup and two new ones more than code with vs code, so if you're looking to utilize it in a way that is uh beyond just coding or you also want to get involved as a demo and do present presentations uh the first time presenter we're going to share some of those uh tales from the stage or stories from the stage.

B

If you will- and we also have our asking anything set up for march as well with spf examples, so hugo will be our guest of honor to answer all those questions you may have around the spf x samples, uh the team is growing, welcome, emily mancini and eight to april dunham and hugo and myself um and of course one of the newer features just want to mention is office hours.

B

So, if you're looking for some one-on-one guidance or tips and some some questions you have just you want to get pointedly answered, those are one-on-one opportunities that you can schedule with. So please take advantage. We'd love to have you love to help. You get more involved, we're all in this together, so aka dot. Ms forward, slash sharing, is caring. Hope to see you soon. Bessa back to you.

A

Excellent, thank you david on that one now, let's jump and then on bird. So let's do a quick recap on what's happening within the bmp.net libraries and bert.

C

Yep first thing: we actually released pp framework 1.2, it's like an incremental release. I just want to remind folks that the pdp framework is replacing the old pnp size, core library, that one is retired, we're not doing any patches there anymore. So please move to this version and if you have issues with that, there's an issue with this, we can ask questions.

D

C

Kind of a lightweight migration guide as well, so please move over to bnp framework.

C

Now in the pdp.net space, what happened uh for bb framework uh we shipped 1.2, as mentioned we're now prepping 1.3. There will be some improvements around authentication manager for other clouds. Essentially, if you are using like a government cloud, we had some issues with graph calls using wrong end points, so we're now kind of standardizing that work. So we should be able to get things working boy, pmp framework and pnp powershell. uh On other cloud environments.

C

There was some a bug around the web plugin in bit.net framework. So if you use like a powershell session with useful again in the framework, so the old powershell powershell five, then you got some some issues. We fixed that and some other minor fixes uh the focus of bp framework, just based mainly on on the quality handling issues on answering questions, helping folks upgrade on the pmp core sdk side.

C

So being crosstalk is the new library that uh eventually will replace pb framework, but that will take like a long time, but uh but when we are prepping beta3 doing like a fairly big refactoring uh to make the model better and the curly engine better. So uh if you're using today, because the k you will see better three introducing some braking changes, but I think that's really good, because the end will be like a better solution and yeah. We already crossed 80 000 tenants just saying so.

C

It's massively being used eighty thousand talents in a month right.

A

C

A

E

Yep, so we released one three zero, um which says uh quite some: some updates. If you keep track of what we're doing you'll notice that every time there is a nightly build, we change something. We don't release a nightly build if nothing has changed, but we've been having consistent, almost daily nightly builds. So a lot of things have changed behind the scenes. um The models mentioned already. We have better support for environments. Actually we made today um a another release, or at least tonight we do another nightly build.

E

We do that, obviously, during the night, so the release of tomorrow will contain a lot of fixes um with regards to uh graphical handling. We already have 66 000 downloads going nicely up uh every two weeks. We have add another 20 25 000 nowadays, and I assume that will go a bit faster in the current nightly. We introduced a set of four new commandments there that now help you to set up these new app permissions called sites selected which works with the graph.

E

So there's four commanders there that help you and talk you through how to do that without actually having to make a raw call to the graph. Of course, small bug fixes that's ongoing um and that's it for now. So, if you want to play around with that new site selected, you want to easily set it up, get the latest nightly.

A

Excellent, thank you everyone on that one and then let's move on quickly on the projects. I say victor villain on the co-op I'm here: okay,.

F

A

F

Yes, we did have a big release. Last week we released 3.0.0 actually 3.0.1 since paolo found, a small bug that we needed to fix, but anyways uh finally, version three is here and a lot of changes specifically around the structure.

F

It's a lot of cleanup as well, and also this big release allowed us to clean up some old code, etc. So the it should be much more stable, much more better releases building faster. So it's a lot of benefits of doing this. We also introduced the new quick scaffolding. So you with just a few questions. You can set up a new teams project. uh Previously it was like 20 30 questions with all advanced options. We added support for the latest schema and javascript sdk, etc, etc, and we also have compared to version two.

F

I had like 200 unit testers now it's over 4000 unit tests, so it's much more test coverage, so we shouldn't sleep through that many small bugs, but yes, we're not stopping. Here we are continuing adding more stuff looking into currently our meeting tab supports and the support for multiple manifests coming, hopefully in 3.1.

F

I'm also experimenting with importing manifests from app studio, so you can use app studio or teams.js, sdk or teamstoolskit, for instance, to create and use that visual interface to create your teamstab solution, but then import it into the the old team's generator and scaffold out all the necessary code for your declared application.

F

So as usu as always, there's a couple of things in there. Both the requests for features and and shouldn't be that many bugs anymore but feel free to help out or you can absolutely help out with the documentation.

F

There's some some stuff that we need to update and some things we need to add to it so go ahead and also use the issues list and continue discussion in the github discussions. If there's anything you you're thinking about or wanting to have thanks.

A

Excellent thanks victor. It was really great to see the excitement related on version 3 release so and the victor is going to do live demos on that one within the upcoming course as well. So just a teaser on that now it's beth we're gonna. Do the update on the microsoft craft toolkit.

D

Yes, hi so latest update. We are having a version coming up probably next week, so keep on the lookout for that um the newest one and the most exciting one, in my opinion, is the electron authentication provider and we're also going to have a demo today. For that the marisa is on the call. Our team is very excited about this, and the demo is going to be amazing. So please stay and watch that it's going to be amazing. Trust me it would be the best demo ever no.

A

D

But we also, you know, edited some features and supports from the community. We still have a lot of people helping us building the toolkit. So thank you all for that. There's going to be the mgt sharepoint package coming up allowing multiple web parts to use to register mgt in general. So that's going to be exciting. There's a new thing that I put from the community at the last line of this update. We have mgt react playground recently built by tommy tavella.

D

Hopefully I'm pronouncing his name correctly, but it's called the sp editor in edge extension market, so check that out and see. If that can help, you build your react plus mgt apps. That's all from me! Thank you and.

A

Tommy is by the way, jumping in to demo that tool within two weeks, so uh we'll we'll demo, that's live in the community call as well. So it's good to have.

D

This community.

A

So, but thank you beth on that one uh also quick updates. Just to recap on the team samples we did not have new samples in the akms team samples right now, but we do welcome community samples there as well, so we're building kind of a a general sample gallery for microsoft teams, helping people to start building for microsoft teams as well, if you're interested in contributing. Please please please get involved all good now. Let's do a quick, uh quick, quick picture time and I will actually share together mode.

A

Let's see if we can actually get a working picture because it shows me 50 42 people in the call, but somebody said that this actually 100 and whatever 70 again. But let's do this, we are recording that and we can actually see the people there as well, and I guess I taught clint somebody was missing you in the in the early starts, but let's actually wave this thanks everybody. It's awesome to see the faces again, it's too bad that there's a limit of 50. So I do apologize if you missed the spot. But thank you.

A

Everybody good to see the face is absolutely brilliant, we'll we'll kind of meet everybody sooner or later, hopefully in a conference uh real conference physically meeting people, which sounds so strange on these days. But we are a few minutes behind of the schedule, which is hopefully fine and let's actually jump into the microsoft craft and electron provider. So I'm ruta, I think, you're ready to go.

G

Yeah, thank you so much hi, everyone, I'm amrita, and I'm a software engineer on the microsoft graph toolkit team and I'm super super excited to be here to talk to you about our latest addition into the toolkit, which is our electron provider. So before I start talking about what the provider is, let me give you a brief overview on the toolkit itself, so the microsoft wrap toolkit is a collection of ui components and authentication providers that make using the microsoft graph super super easy.

G

So, where the ui components are concerned, these are fully functional right out of the box and you just have to add about one to two lines of code: to get beautiful data rich experiences that use data for the graph. So, for example, the best place to get started with our components is mgt.dev.

G

uh You can play with all the components here. You can customize them and you can use them in your application.

G

So, for example, this people picker here fetches data people, information from the graph, so uh it's actually a multi-select drop down and all you have to do is include this tag in your html script and you're good to go. Similarly, you have the you, have agenda information, and so just with one tag you get all this beautifully rendered agenda data from the graph. So that's uh you can play with all the other ui components here, but the other side of the toolkit is authentication providers.

G

So if you can imagine all these components that you're using in your app they're all calling the graph right and even otherwise, if you're, using the graph in any way in your app, you need to be authenticated. So that's where our providers come in, and so we have different authentication providers that again make it super easy to get authenticated in your app uh with microsoft identity and we have different providers for each platform that you may be building on. So, for example, if you're building a web app, then you'll be using our msl provider.

G

If you're building a sharepoint web part you'll be using sharepoint provider and if you're building a teams tab, then you'll be using a teams, provider and there's a quick example here. So if you wanted to authenticate on using microsoft identity with the graph on your web app, then this is pretty much all the code you need.

G

You just have to say: provider start global provider, equals new msa provider and provide the client id of your app registration and, what's great about this provider, like I had mentioned before, is that it's not only to get authenticated for your mgt components to work, but you can. This provides an endpoint through which you can call any graph api as well.

G

So without further ado, let me jump into a simple electron, like boilerplate code, that I downloaded it's pretty much blank and I haven't added any code in it, but I've just npm installed these packages that we would need and what we're trying to achieve through this app is to make a very simple to do application that pulls data from your microsoft. To do so. Yeah npm installed these and for those of you who don't who are new to electron electron, is an open source framework.

G

That's used to build native applications that are cross-platform because it relies on very fundamental web technology like html and javascript, and it's based on a node.js runtime for the back end and a chromium front end, and it has two kinds of processes main and renderer, and every electron app can only have one main process because it's responsible for the life cycle of the whole application.

G

So you can think of main as the back end and renderer is the front end and you'll have as many renderers as the number of pages. So here we're only looking at one renderer process, one page, so I only have one renderer, and this is the I cloned this from a git repository by electron. So I haven't added any code here. This is pretty much the boilerplate code that you get so to start authenticating, that's the first step. We're going to do to get authenticated to be able to use the graph you have.

G

You need to add two things you have to initialize: one is the electron authenticator and the other is the electron provider. So the electron authenticator is going to sit in main.ts and electron provider is going to sit in the renderer where all your components are going to be. So, let's get started with that, I'm just going to import the authenticator and I'll talk about what they do in just a second import. The authenticator- and here I'm going to add.

G

Config object, so what the authenticator does electron authenticator basically does all the work it's going to set up all your config variables like your client id, and it's also responsible for getting access tokens for you to be authenticated.

G

So that's what I'm doing. I'm setting up all the config variables.

G

G

Initializing the electron authenticator by passing in this config object. Now on the renderer side, the renderer side is actually even easier. This is where we're going to be initializing the electron provider.

G

I'm just going to write these import statements really quickly, so I'm importing the electron provider, I'm also importing the components that we're going to be using in our index.html and then all I have to do is add this one line of code and we are authenticated and now let's go to our index.html and I'm going to add these components here.

G

Run an npm and start so what I've added is the mgt login component? That's going to help you log in and then display your photo and your name. The ngt person is going to show you some person. Details of the person logged in and the to do is going to show you the to-do tasks of the person.

G

So we have to sign in sign in as megan.

G

And that's it: that's all you needed to get this beautifully rendered to-do list, and then you can go ahead and customize this you can add, remove tasks, etc. So that was how to get started with the electron provider. I also I I built the same app again before this.

G

uh It basically does the same thing that we saw earlier, except it has one hidden feature that I am really excited to show you so right now, megan is available on teams right, she's, just doing her work at her normal pace. She has this beautiful wallpaper of mount rainier, and then I don't know about you, but during the pandemic I have really hard time focusing and I usually like go into this- do not disturb mode.

G

When I'm, I don't want people pinging me and I'm really trying to get something done and once I turn to do not disturb. Firstly, my app turns to dark mode- and I did this solely for the purpose of showing off the fact that all our mgd components have dark theme enabled just by adding like a class to each of them called mgd dark. You can get the dark theme, but also when I'm trying to focus I like to be reminded that I need to be working, so my wallpaper changed to this giraffe.

G

That tells me I'm watching you get back to work and similarly, when.

G

After work like I try to appear away so that again people know I'm done with work, but I have this bad habit of like continuing to try like when I'm supposed to be off work. I still try to like send the last email or I'm just not even doing something productive when I'm still on my laptop. So then my wallpaper changes again to this little cat telling me to work out.

G

So what I'm doing here uh in the back in the app is that I'm pulling for presence data from the graph to actually change my wallpaper, based on what my presence is on teams. So let me just quickly show you how to do that.

G

So this is the same renderer code that we saw just now where I'm initializing the electron provider and all I'm doing is also calling the graph using the endpoint that we saw that I talked about earlier. The fact that it, the providers or global provider exposes an endpoint through which you can call any of these graph apis and um I'm also using so I want. I want to be able to pull for presence data every five seconds.

G

So what I do is I listen to this event, so on state changed is called every time, there's a login or a logout event. So I call that event and then I check if someone signed in- and I call this check presence function that basically every five seconds, because I've set an interval here for five seconds every five seconds. I call the presence api and get presence information and I'm also updating. So, as you can see here in the person component, you can update the presence so manually, so I actually pull that from the dom.

G

I pull that element from the dom and I pass this presence object so that even this is updated every time I pull for presence data, so yeah, that's the end of my demo. Hopefully you enjoyed that and hopefully uh it excited you to use the electron provider. It's going to be released, like that said, I think, sometime next week, so please stay tuned and let me know if you have any questions uh and I'm happy to help. Thank you.

A

Excellent really really really cool stuff, I'm humble so great demo, great clarification on how things are working really cool stuff, but let's move into the next demo and by the way, thank you for catching up on the time as well. So we are now again on the schedule, which is absolutely brilliant, so really really good.

A

Next uh demo person would be marcin. We were seeing you on the on the call already you first and then gary next. If that's.

H

Hello, absolutely hello people great to be here. Let me share my screen very very quickly. In such a case, I think that's it a quick presentation, because this is the first time I'm here I will be talking about usage of pnps best perfix controls in development for microsoft teams. You will see basically how to easily start your structural development, how to debug your web part in teams context.

H

Here I listed few hopefully useful links to the repository to the sample. I will show you two spfx controls the project that I will be using to help uh help myself out with this problem and finally fluent ui knobstar, which is basically provided by distribution, targeting teams very nice, very, very useful and finally, browser utilities. This is my internal or my private piece of javascript javascript that I usually add to my snippets in browser to help me out a little bit with the debug and with development.

H

I hope you will find it as useful. As I finally get two words about me. I work at uh val. I also consult a little bit for a pentagon. Here are my twitter github. If you would like to check my other repositories and link to my blog and without any further ado, let's jump into the demo, I hope you can see my screen and you should see visual studio code is that right.

A

Yep: okay, okay,.

H

And other things success so, first of all, let's start with how we can actually quickly start the development for our team's web part, because official documentation says that you have to upload it. You have to install it, you have to sync it to your teams and then it will be available. However, you can actually run group serve you're going to browser and once we will build it, that is relatively easy script.

H

We don't need workbench to open your web part, and here I have some pre-existing web part loaded, but not of not all of you may have this already in so the easiest way to go is open anything open, any tab that points to sharepoint and use this magical script I mentioned. As you can see, this is just few methods around it and what I'm doing is I'm executing debug webpart and I'm providing webpart id from up manifest thanks to that what it will do, it will find the team's embedded python.

H

It will replace the url with url to your debug and, as you can see, magically we get our webpart, which looks quite nice now. What you see here is basically the dashboard that I implemented for spfx controllers react. It allows you to configure this beautiful dashboard search, filter option to edit and stop editing those widgets. Those widgets are initially defined and as well as the toolbox itself is usually defined in sorry, originally defined in fluent divine nerve star.

H

Here there is just a little bit of implementation around that to help you get started with that and what what we did here is, for example, proper, properly decoupled, the headers from the actual components. Thanks to that, if you load your page, oh sorry, once again me.

H

Debug the web part either the state is changing of the parent component. You can see that once loaded, the content will always load. We will render for edit purposes only the header. So this is the first part. Second part I would like to show you is actual code how to configure it.

H

The original component is relatively simple in random method, as you can see, very quick toolbar config into the toolbar configure define what actions or what actions in which actual groups you want to render. So here you can see that okay, we have something for edit. We have some filters and we have some search, I hope and select the exact file. True, I don't find to find query something is happening in this sample.

H

Basically, every action is locked to the browser so to the console. So if I open that here, meditating console, let's clean that, if we select some filter, you will see in the console what was selected the same with edit. Here you have some identifying options.

H

They do nothing but log with the actual object and what was called so. Hopefully, this will bring you relatively fast up to speed how to use that for all your purposes.

H

uh One more interesting thing that was already implemented here is life change of theme. So, if you change to dark mode, you can see that underlying page is also changed. High contrast, everything everything is already implemented and you should be very fast. You should be able to start looking at a very, very fast widgets. What defines widgets.

H

That features we have our title description, size and body. Some nothing to to fancy. Like I mentioned. The important thing is that the content is actually jsx which allows you us to handle this stay global state change a little bit better. Next, I would like to move forward to why even bother with fluency line orb star.

H

This is beautiful control, provided by fluency note of star you can see, it's very nice seems ready, looks very, I would say tim's native, and there is a lot of controls enormous in that gives other people actually having this nice team static, vibe. If you are developing something for for teams, I would highly encourage you to use this instead of standard fluent ui, and I believe one last thing. Oh, I will discuss as well the testability of those components, because I.

H

Knows that I'm a little bit freaked on the stability to market? It's very easy! It's just one and three in a modern market which so actually two works great with identity proxy.

H

If you are interested in the sample, you will find a unique test, um actually quite interesting one, how to get private methods of components in your unit test, not very common scenario to test and yet quite common scenario to implement. So I hope you'll find it useful as well, and I believe that would be all for me. I think I spoke very very fast.

A

It's it's all good now now one thing what I actually want to get back because something what you did on the start, but it went so fast on it. Can you explain what the debugging thingy was? So how did you do that? um Because.

D

A

That's awesome input also for us in engineering sites that maybe we should actually make these things and debugging an implementation more easier. Now, uh just quickly recap on on: what's what morrison was so showing so in our tutorials, we just show how you built a teams tab using spfx, and why would you do that?

A

Well, spfx has the benefits of automatic, hosting and optimized hosting, so you don't have to worry about setting up any azure applications or anything, and especially, if you're hitting apis in microsoft 365, you don't need to worry about the backend or hosting or costs related on that, so it's quite convenient way of doing things, but the debugging has always been the question and I think what morrison showed was something magical related on to being able to do debucking directly into microsoft teams. But can we recap on what's happening here?

A

H

So this youtube script that I'm using in my browser. This is something you can get from my github. Let me check, because I quite should have had it open somewhere, maybe or maybe not for sure it will be available in the resources, and here are a few useful methods. I believe the magda debug page, and this one and the most recent one debug part it accepts webpack id. As you could see here this and, as I mentioned this webpart id is oh.

A

Sorry martha, can you zoom in jim is asking, can we can we slightly zoom in if possible, excellent? Now, it's good! Now, it's good.

H

You can even find this one. Okay and now we are looking in teams context, team, subcontext, embedded, page container container. I frame- and this is my private- think it's by any means not fully supported by microsoft, because this might change, but as long as it won't change, it will work. So basically, this will find the iframe of end of this tab.

H

The important thing is that this tab should be a sharepoint page, any sharepoint page, as you can see, for this purpose, I'm using my home page from this team, but I have some other web part here that, as you can see just boilerplate- and it will work here as well, because there is an iframe and the iphone element with that name here then I'm replacing the tab url source with first of all team, seven page, then we've hosted up a page because of the system pages that teams of this.

H

This is the system page that teams is using to ensure authentication. Then teams4 setup actually loads, the sharepoint framework to the page and enables you to open and load this component. You can even go a little bit further on that concept and I actually blocked about this page quite a lot. You can not only provide concrete id, but if you can also debug, basically any webcam, you have at any from any page in your entire internet and it will work quite nicely. This is also a nice way.

H

You can introduce the pre-configured web parts other personal apps, but this is also a whole other topic that maybe someday we will talk a little bit about. But yes, basically, it's switching you around to predefined, url and relatively simple. If you ever use spfx, I'm sure you you are familiar with this part, so the whole magic is figuring out this part of the url, and thanks to that, as I mentioned, you can debug your weapon without direct deployment. You need to deploy beforehand and I believe additional.

H

The biggest advantage is that if you are using this in teamstab context, your automatic, you can automatically start development with the team's context in mind and in your code so quite useful, especially here. It was useful for the theme, because the other way I would have to take them- I don't know somewhere and check what are the values by the way we had this also nice unit test how to uh test your code against switching the themes.

H

A

Cool, thank you marcin on that one and and just a a kind of a recap on. What's what we're doing there, uh we're executing the javascript in the console of the browser so and then we're swapping the frame to point to the dynamic underscore layouts floating page, which is then loading the web part directly within the microsoft theme, so really really cool setup and and streamlining the development for sure it's absolutely prisoner stuff. This absolutely helps people to do development more efficiently.

A

So, of course marcin you don't necessarily even understand the value of all of this because you're doing this on a day-to-day basis, but for I think, a lot of the people in this call. This is like okay, so this is exactly what we've been looking for to enable development and debugging directly in teams so really cool and thank you.

A

Yeah thanks, marcin and, and maybe a side note on that one. This is absolutely something what we as a microsoft should look into doing more natively within a product as well, but really good feedback, awesome, stuff cool! Thank you marcin now, the next one gary you should be now ready to go unless I'm completely mistaken.

I

I am good, I have audio, I have microphone which, assuming you can hear me, I don't know we can't hear you. So it's all good.

A

Not just kidding just kidding take it away.

I

Thank you very much, so I guess this session is um what I'm going to show. You is how you can run the cli for microsoft, 365 in um in docker. So a little bit about me. So my name is gary trinder, I'm a solutions architect in the uk. I work for a partner called cps, I'm also part of the pmp team and one of the maintainers of the cli for microsoft.

I

365 just find my github profile and you'll be able to find where I am on the internet, so cli for microsoft 365., so you may have heard of it. Don't really maybe know what it is, but essentially it's a cross-platform tool that allows you to manage all different services in microsoft. 365 you can run on. uh Basically, any shell is is what we're achieving here completely across the board. If you want to use bash, if you want to use powershell, you can use the cli so just to kind of start of well.

I

How is this all come about? Why are we even talking about this thing called docker and cli for microsoft, 365.? Well, as part of the the, I guess, the project we like to get feedback from people and we did get some feedback, which was great, so we have github discussions and we had some feedback to say. Wouldn't it be great, if actually, you could bundle the cli using docker and so that, basically, it makes it easy for people to to be able to download use it, and it was an interesting, interesting concept.

I

We'd not considered it. So we had a really good discussion in the github discussions and we kind of agreed okay yeah we'll do it. It sounds pretty good, so we decided we're going to build this out in the open, completely shipped it. So you know there. We are from the time that we actually agreed um from the suggestion by alexander who put that forward.

I

We raised the issue and then we actually released it in a few months, and I thought that was pretty good for us to turn that around, because it was something that was pretty new. So what what is docker? Why have we even done this so docker allows us to effectively build and package the cli with all of its dependencies?

I

Everything that it needs to run, give a mechanism to ship that out to people and then allow you to run that on your machines, on your servers on your your local machine or even in kind of like devops agents in azure, devops and so docker helps you build ship, your application out and then just run it so that you as an end uh user consumer of the application you'd have to worry about installing ever anything because we ship everything that you need so that first part the the build part is, is a docker image.

I

So this is a docker file. This represents our image, which is our bundle um which basically allows us to define an operating system. It allows us to find um some some environment variables, create users in there and actually run some kind of like post installation scripts as well. So one of the things with the cli, because we can run everywhere, we can run bash and we can renew powershell.

I

We have to handle the uh the peculiarities, if you like the setup of working in those uh different shells, so this allows us to do that for you, whereas previously you'd have to kind of install and then go through and and configure things yourself. So what is in our image? Well, we've got linux in there, so we're using alpine linux, which is, if you kind of come across ubuntu, think of ubuntu, but very, very, very small. It basically just gives us everything that we need from the linux side to run the cli.

I

We bundle node.js in there with uh the um the cli, so you don't need node installed on your machine. You don't need to worry about. Am I running the right version of node because we've provided it for you and along side node you get npm with that. We've also bundled powershell in the image, so you can use powershell and powershell 7.. So, if you're on a machine, that's running powershell 5 and you don't want to install powershell 7, we can provide that that, for you, we've got bash in there as well.

I

That comes with with linux um and what we also do is we actually configure the auto completion for you as well, so with cli. If you have used the azure cli doing the uh kind of the setting of autocomplete is kind of like a post step that you've got to do. It can be a bit tricky, depending on which shell you're using so again, we've provided that in in the image.

I

So how we're going to ship this to you? Well, we take our images and we push them up to uh docker hub. So, if you're using npm, it's like a package manager but for docker images, we publish a new version every time we release so every time. There's a new beta version of the cli every time, there's a new monthly release, a new version of our image is available for you to use and the other side of it the docker engine.

I

This is something that you'd install on your machine, and this would allow you to then actually pull down those images and execute them on on your machine, so you're pulling down all the dependencies. It creates an isolated environment on your machine. So again, if you've got other versions of node installed already, you don't have to worry about them conflicting and changing different versions to be able to to use it. You'll use the version that we supply you with, which is great for us, because that means that we can target a specific version.

I

uh Using this um we don't and then you don't have to worry about. Have I got the right version? Do I need to update all those kind of things so to get started? There's there is a dependency still, you need to install docker. So if you go to the the docker website, there's loads of instructions in there, it's really easy to get set up on windows.

I

That's all you need to do just install the docker desktop and that installs the the engine for you so once you've done that you're, basically ready to uh to pull down this image and start using the cli, so I'm going to jump into the demo, so I've got docker running on my machine, so this is kind of like the docker desktop and so a container is basically a running instance of an image. um I've not got anything running at the moment. I don't have any images download it's completely empty.

I

uh If I go into powershell, I can start to run commands use the docker cli to uh to basically, you know, instruct docker to uh to basically install things. So what I'm going to do is I am going to use this command so docker run and these switches I'll go through what they mean in a second, but I can give the name of the image and also the version that I want to run so all of the different versions there they're appended at the end as tags after the colon.

I

So you know if I wanted the the beta version, I could just type next in there. But what we're going to do is we're going to run the the latest 365. there we go.

I

So what this is doing now this is going to docker hub, it's picking out the image and it's downloading it and it downloads it in layers. So a docker image is layered as an operating system, a user account, um basically all the steps that that were in that docker file before so. It allows us to separate things out and it allows us to. You know if there's a new image that you want to download say that the next version it will just swap out the image, that's changed, so you don't have to download everything again.

I

So what this has done. This has executed the image. So this is now a running container and you can see I am actually in this um in in this container. I am in linux effectively and I'm in a bash command.

I

If I run mcn365, you can see that we have the cli that is actually running in there, so we know that we have node installed and we have npm installed as well. Now what we can do is we can also switch to powershell really quite easily so now, we've just jumped across and we've kind of been in a shell inside a shell.

I

So if now I want to write some powershell commands, I can as well, which is really nice easy way of being able to just interact with um with with the cli I'm just going to exit out of this. So when I exit out of this container, um there is um I'll come back to this in a second I'll, explain it. uh um If I exit out of this, it's gonna exit out of powershell, I'm gonna exit out bash. It stops the container completely from from running, and that is the rm switch at the beginning.

I

It basically says when you've stopped the the session, just close it down. So that means that basically anything that was done inside that uh that container is just gone, uh that that instance has now disappeared. It's freed up the resources on your machine now. If I didn't want to go into bash and just go into powershell, I can add the the shell at the end of what I want to launch into. So I've already got this image installed.

I

I'm going to go straight to powershell, it's going to go straight in, doesn't have to download it again. It's already there. It's giving me my new container and I can start to use the the cli, so I've got m365 here. There's the commands and one of the things which I mentioned is you've now got autocomplete, so I can then tab and I can see all the different options, which is something which, from a cli point of view, we we do miss.

I

I'm conscious that I am quickly running out of time. So that's a very quick way of how to get started.

I

If you want more information, this is all documented on the cli docs we're going to lots more detail about how you can pass in environment variables and how can how you can run scripts that are on your host machine and because the docker container is completely isolated. It can't talk to your host machine.

I

So if you want to run scripts in there, there are ways of doing that, and that is is documented um if you're really interested in using this in devops and so maybe you're in azure devops.

I

What I would suggest is there's a great article by janet reitman's, who was very kind to help us out with delivering these docker images, and he was able to test these images in azure devops. There were a few things that we needed to configure to get it to work in. There definitely check that out if you're interested in using that um in in your devops pipelines um and, like I said right at the very beginning, this all came about because of feedback.

I

So we would absolutely love your feedback, whether it's on this, whether it's an idea you've got please come to the discussions on the repo create a new discussion. Let's have a chat and let's see where we, where we can go with it, and thank you very much.

A

Excellent excellent stuff and excellently on the time as well. So thank you gary on that one uh we're trying to be strict on the on the timings, because people need to move to another meeting as well and all of that, but really really cool stuff. I love the shell in the shell reference as well. So anyway have a look on that we'll add all of the the links and notes on the blog post summary which is coming out tomorrow.

A

We do not have a time on q, a that's always happening in the chat just a bit of a warning for the future as well. We can't, unfortunately, do audio questions during this course because there's 180 up to 300 people in the call, so we cannot go to individual audio questions. That's why the chat and accessing the chat is super important. Now the recording will be available in the maestro 365 community youtube channel within 24 hours, it's typically in 18 hours or so, but promises it 24 hours with an sla.

A

The next m365 general dev call is on march 4th and then the next sharepoint framework uh community call. It is from week from now so we kind of have always a call on thursdays at 7 a.m.

A

Pacific time, if you're interested on any of the other community course, which we have there's quite a few of them so select, which of them you're interested and which is them, you want to actually join so quick kind of a maybe a teaser, we're looking into consolidating some of this course and consolidating some of the messaging and making sure that it's more microsoft, 365 platform level more on that whenever we get every order of plans sorted out, but that's all we kind of cover today. Thank you for the demo presenters. Thank you for the attendees.

A

Thank you for the lively discussion in a chat and thank you for your feedback on open source and to product stuff. So, but let's stay in touch. Thank you.

B