Microsoft 365 Community Development, 26 Nov 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft 365 PnP – General Microsoft 365 Developer SIG community call – 26th of November, 2020

Description

Microsoft 365 PnP Community - General SIG call on November 26. Two demos: 1) Speed up developer onboarding with GitHub Codespaces and VS Code Remote Development, and 2) Building Search based Messaging Extension for Microsoft Teams. Released Preview 3 of the PnP Core SDK and Preview of PnP Framework (Sites Core). yo teams 2.17.0-preview released. Microsoft Graph Toolkit 2.0 Preview.6. The host of this call was Vesa Juvonen (Microsoft) @vesajuvonen. Q&A takes place in chat throughout the call.

Demos:
• Speed up developer onboarding with GitHub Codespaces and VS Code Remote Development – Garry Trinder (CPS) | @garrytrinder
• Building Search based Messaging Extension for Microsoft Teams – Rabia Williams (Microsoft) | @williamsrabia

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

So welcome everybody. This is general microsoft, 365 development, special interest group. It is the bi-weekly sync and thursday november 26th.

A

It is the thanksgiving uh in u.s, which will mean that we'll have significantly less attendance, um but uh hopefully these things uh in as a recording as well um and obviously all of the demos and everything else will be split to an individual video, so uh people can find them later or more efficiently.

A

Now, today, we'll have again a relatively busy and a nice set of uh topics, but uh busy 15 minutes going through a quick recap on what's actually happening across the different projects um and then we'll move uh have a quick look on the team samples and what's happening in there and then a picture time in together mode. I'm trying to capture a key for animation this time or a video.

A

So we can actually see everybody waving and sharing that in the social media, then we'll have three demos coming up, so we are targeting to have the demos starting roughly 15 past so quarter past under our first gary then rabia, then jim everybody has all of those demos will be a roughly 15 minutes, so we'll hit the 16 minute marker today.

A

If you have any questions during the day, of course, we use the chat window and there's a lot of people in the call for helping with any of the questions. So just a quick recap: um there are multiple opportunities of joining this community. We do absolutely 100. Welcome anybody to actually do presentations in this course. So we would love to have more people, volunteering and showing their learnings and explaining their solutions.

A

It doesn't the solution doesn't have to be open source, it doesn't have to be a sample, it might be something which you build for somebody and then you're explaining the learnings like today. We're gonna hear from jim duncan related on something which they built for one of their customers and and then explaining the story explaining the process, because that's way we learn from each other. Obviously, all of the demos and samples which you might have contributed in github or in open source.

A

Those are good candidates as well, and please please, please, contribute in github and provide feedback in general, we have plenty of urls plenty of assets available across the microsoft trees, sd5 development, so two youtube channels, slightly different perspectives on the youtube channels, um so poorly developer, oriented and then non-developer oriented videos as well. We have a lot of open source assets and sample galleries, and so many urls, and but only luckily one url to remember, which is a ms m365 bmp.

A

So you can actually find all of the stuff from that url and let me actually mute again everybody, because I can hear some background noise. There we go now. Let's actually move into the the content of today. Just a quick recap: uh there will be a really cool developing apps microsoft teams set up um hosted by the cloud advocates and the microsoft 365 cloud advocates under december 16th um from 9 00 a.m until 11 a.m. Pacific time so two hours live stream by developers for developers and we're now starting to set up.

A

Actually this kind of watch parties across the world we'll have a watch party also hosted by pmp team, so we can actually join together and then we can do commenting on a chat window and all of that stuff where we're watching this upcoming uh streaming, which is coming then on the 16th of december, but go to the akms, learn together and check it out. So really cool setup is coming now uh other stuff. Just to recap, on main assets, uh we do have plenty of microsoft themes, samples available already.

A

So if you are looking into getting started on microsoft, teams extensibility either you join framework or using a sas application or building a port or building a messaging extension go to the akms team samples- and this is basically the location where you can easily filter down to different samples which are available, and then you can find a sample and a starting point for your solution.

A

That's really what we want to do with these samples and then, if you are looking into contributing and getting started on contribution, you can mute somebody because we're hearing somebody drinking coffee. So please, please, please remember mute yourself. There we go um so if you're looking into getting started on on the open source and the bmp community, let's hear from david and dave is going to explain how to get started. If you feel intimidated off of getting involved.

B

All right, thank you, vesa for those that are new. It's important to know that the pnp community is completely open source, and that is from a using and contributing perspective. But as vesa mentioned, sometimes that can be a little intimidating.

B

There's a lot of new tools that might be a hurdle for you, such as github and learning how to use it and use it to contribute sharing is caring is here to provide you hands-on guidance in sessions that are led by pnp team members uh live and together in smaller sessions that are very intimate and safe. Space um includes, with inclusiveness, so don't be afraid to come in. Ask questions a great opportunity to learn we'll walk you through uh through a hands-on approach.

B

In fact, today we've got a session on using a node version manager to take advantage of all of the spfx samples with within the patterns of prices repos. So, if you'd like to join that, you can go to the aka uh sharing his caring link and I've included a direct teams link for the session. Today, you don't have to register.

B

uh We know everybody's busy with family, but if you do have some time and want to join it's a one-hour session and it's uh it's all a walk through, so it's kind of fun just to learn how to use it after being curious. The rest of the december sessions are completely available for registration.

B

First time contributor, community, docs, spfx samples like the one today and we're also beginning a developer, workstation setup where we'll walk you through setting up and installing all the variety of essentials that we deem uh valuable to get started with spf x development more sessions coming soon, but please don't hesitate to join us hugo and I have a lot of fun in helping everyone. All the attendees have been great and it's a fantastic opportunity to get more involved hands-on. So aka.ms sharing is caring. We hope to see you in one of the sessions soon.

B

That's it back to you.

A

Excellent excellent, thank you david. Thank you david on that one. This is getting so much good feedback across the community, so um go and join and learn new stuff and getting started on the on the open source. Now, let's move on to the pnpand.net.net framework, library, side and bert, I think you're on the call to take care of this one.

C

Yes, absolutely vessel um before diving into the actual details of what has has changed. I wanted to take some time to recap on on what are we doing with nets because some people are not really up to date on what's happening, as it might be a little bit confusing so kind of? Let's tell the story uh a bit of history, uh so we actually started with besides score like six seven years ago, a long time ago, which is our main library, the one containing the provisioning engine, the pages api, for example.

C

Everything is in the pnp size, core library uh we just retweeted so top left on the screen. Now we announced that we will be stopping that library, there's some background noise. So let's view it folks.

C

Okay, thank you versa.

C

So we will be um actually deprecating the pdp site score library uh pretty soon and that actually will be a next month and we'll go forward with bb sales core under a new name, which is pnp framework, so bb framework actually is besides core, but then a cleaned version that only works for sharepoint online, which is compiled uh against standard and.5 and it uses csum further than standard. So the pp framework library is cross-platform and can be used in most places where you can use net but sharepoint online. Only so that one will move forward.

C

The pnp site score will be deprecated the end of this year and will actually just close down the repository we'll make it a read-only repo. You can still look at look at their things in the repo. The packages will stay out, meaning we're not taking away anything you can still use. Then you get packages and so on, but we move forward with bmp framework.

C

Now in parallel we started also developing pnp core, as the gay. Now you might ask like okay, why isn't that bit of the same thing and kind of the same thing but different?

C

The main reason to start people asking is to build like a modern.net library which is fully well tested, with proper test automation with proper code patterns ready for the future. Essentially, whereas pnp framework is well, we it has some issues from a quality perspective from a code perspective and with people across the game. We are step by step um kind of fixing that so what you will see us doing is add new things in people rca or rebuild things like the pages api, for example.

C

uh Today existing vp framework, but we we will so we rewrite. We rebuilt the pages api for pnp course gay as well, and actually we'll. The next step is that we will just kill the pages api npp framework uh and kind of under the covers plug-in peak procedure so step by step.

C

We will be moving over so hope that clarifies a little bit about the roadmap, the journey that that we kind of started for net, but next time that we talk about this, the diagram will be simpler because we'll kind of we can skip to the left side of the slide give us again. We move to the next one, just talk about actual updates now what does happen for for both bp framework uh and for p, because the game, I think one of the big things that we did is dotnet five support.

C

So dotnet five was officially released early november and we now also ship our packages as.net five, so both bmp framework and people as a gay ship as the net standard, 2.0 package and 1.5.0 package. So the the. When do you need to pick which one um prefer that dotnet 5.0, if possible? If you do the development, the net 2.0 is more like for microscopic ability. If you still need to compile with the framework or an older version.net, you can use that.

C

But uh ideally you just switch to the dot net 5, because it's simply simply faster and better and more future proof, then, on the feature set. um I think the big things in in the dmp framework is that we kind of made page transformation work in pp framework as well, so we ported that code base and got it to work, and it's also included in people powershell right now.

C

There's several community fixes and prs that got merged. Looking at the p p core, as the gay side 0.5 talked about that already, I think also blazer is example, really cool with 0.5. um It works much faster than 205, so check out that sample, which we bought it from uh towards.5 now so place a sample, and then the other thing is the pages api, so uh currently wrapping up documentation for the pages api in pv course decay, but once that there will ship it and you can start using it.

C

Okay, I'm taking too much time investor. Sorry for that. So let's move to the next one um powershell.

C

What has happened to powershell similar story around the application? So I'm not going to repeat that uh we'll go forward with the powershell only for sharepoint online um and that one will will run almost everywhere where powershell runs so classic powershell powersurvive, but also powershell, 7 and even azure cloud gel, so just try it out in cloud shell. It's a simple lesson: during installed: module pnp, powershell, minus lrp release and boom, it works so really great.

C

um What else did we do? There? uh Irwin did a ton of right on test automation, so we are focusing heavily on quality for both being, of course, again spmp powershell, just to get that quality in and and all the test cases in to keep quality high um and several pr's have been merged and taken over as well so yeah. I think that sums up where we are with uh ep powershell cool cool.

A

Thank you bert on that one and let's jump on victor's table, so yo teams what's happening here.

D

Oh we're doing good, uh we just released the 2.17 preview or we did it a week ago, which now includes a long awaited feature for using react hooks and, as you can see in the screenshot there, instead of having all these kind of components on or unload the load etc and trying starting up the micro teams, sdk initializing complete getting contact cetera.

D

Essentially it's one line in there and then you use react hooks use effect to just get the information when you're in microsoft teams, when you have the context when the theme changes, etc so and the scaffolding is also more to all functional components. So your tabs will be lost much lesser and react code, much more efficient to write, and hopefully, unless they're a problem. So that's what we released. We are looking into how we can uh improve that more and need to go through some testing before we release the full 2.17.

D

Unfortunately, we have a broken build pipeline right now, so I have to spend the weekend moving this to github actions, um but we're looking into as well after 2.17 2017. We focus on this react. Hooks. Only upcoming versions will add the meeting, extensibility features, etc.

D

So that's all for.

A

Me, thank you victor antasta again, once one more time recap: we have the microsoft teams toolkit, which is then producing you javascript based implementations of the of the tabs and and bots and all that stuff. And then your teams is the do your scaffolding tool when you want to write and do development in typescript. uh Would that be the right way of defining that vector.

D

Yes, and no so the tools they're there I would say this is great if you're an in-house developer- and you don't uh care that much about the manifest and want to do advanced, ci, cd, sure, that's really the big difference, I would say, but absolutely you're right as well. This is a typescript only, uh but it has more support for specifically, if you're an si or an isp, you want to build solutions for teams.

A

Yeah yeah, so these both tools will access in the future as well. They are complementing tools, they're not competing to us and- and we are more than well aligned together with the microsoft teams, toolkit people, so we've been having meetings together with victor with them and all of that in the future, which is great cool and then a quick recap on the microsoft craft site was slightly behind of the schedule. uh Beth and nicole are both uh luckily on holiday today, because I cannot see both of them and the call which was as design.

A

uh It is a thanksgiving in the u.s, so they were not planning to join here, but microsoft. Graph toolkit has the latest version, which is 2.0 previous six, and there will be there's actually quite a lot of changes or adjustments on that one um and so there's a list of things. So there's adjustments on the code for numerous controls pretty recently and sebastian liver as an example have done modifications there sebastian just pretty recently moved into the microsoft as well.

A

So he is now part of the microsoft craft partner team, which is really really great and there's also a new samples. Well not super new samples, but samples relatively new examples related on the me experience we'll have at that one demo pretty soon in the spf x, core uh spfx call in next week. Isn't it well, I can't remember it: it is next week. Actually, rubio is doing that and then a few other demos as well.

A

There's also a prices or there's a contribution contest, so you can actually get slack if you contribute on the microsoft craft toolkits, which is great. So please join on that one uh quick recap also on the microsoft teams samples we did not have new samples within this week, but please have a look on akms team samples and if you are building something for microsoft teams- and you want that to get that one exposed for other people, so they can benefit out of your samples as well.

A

Please do get it shared in the repo behind of akms team samples, we're building up a community samples for microsoft teams as well, because those are super super valuable for everybody to learn how to do development now. The next step uh is: do a quick, quick, quick, quick crew focus photo. So let's actually do this. I'm gonna flip myself uh to to get a mode, and I will actually put let's see which to get a mode option. We do today, um one second, whenever my bot is actually doing that, I'm going to do a slightly.

A

Let's do something which probably haven't seen to make this interesting, but let me actually do a quick recording of the video as we're waving three two one and let's wave hands everybody. So thank you for this one, excellent, it's good to see the faces, like I said so many times as everybody is working from home. It's actually super super valuable to be able to see the people behind of their community and the name. So thank you for that one.

A

So really that was a quick one, but let's move into gary, so we are catching up on some of the we're slightly behind but carrie. I think you're good to go thanks. Please, sir.

E

All right, okay, share, screen, share screen there we go.

E

Okay, so that should be sharing so assume. You can see that yep all.

A

Good good good.

E

A

Yeah everything is good to go excellent right. Okay,.

E

uh Okay, uh thanks uh vasa, so uh my name is gary trinder, um I'm a microsoft, mvp, pmp team member, I'm here today to talk about how to speed up uh developer onboarding, using um visual studio code and remote development, and also how that works with the github.

E

um Obviously, the dog's not happy, and what we'll first do is uh we'll, basically just go through what remote development actually means. Remote development actually means developing inside a container. In this um scenario, it's a docker container, and so what we're doing is we're creating an isolated environment where we can install all of our dependencies um for our code to run in without actually having to install anything on our on our main machine.

E

That means, if we've got multiple projects uh using containers, we can swap between different containers, use different versions of frameworks without having the headache of trying to manage um all of those uh different versions on on one system.

E

The one thing that sets uh the visual studio uh code um approach um aside from just developing with doc containers, is that the extensions within a visual studio code allow you to basically define your development environment alongside your code. So when you, um you know clone a repository, uh you've got files within that um project that will define the dependencies for you to be able to build run test.

E

Do anything that you might need to do with with that that project and and and that's a really powerful thing, especially with working in open source um as well, because you go to a different project, everything's different, there's, different versions, and it can become quite painful to get your machine ready to uh to actually develop against some of these projects.

E

So it's very easy to to get started, and so there's a there is a very good tutorial. Essentially the prerequisites are you need visual studio code? You also need docker installed on your uh on your machine, and you also need to install a visual studio code extension called the remote containers, which makes all of this all of this work, and what I'm going to do?

E

I'm just going to jump straight into a scenario really, and I'm going to show you the scenario of of how we're, using a visual studio, sorry, visual studio code, remote development to really help with onboarding um to the cli for microsoft. 365 project, so you know we're an open source project like every other project. We have some build instructions you can clone. You need specific versions of node. That is the bare minimum. You can just build.

E

You be able to contribute, but if you start to look at some of our guides, you actually need a bit more, so we actually use python for generating our documentation, so that's another dependency and that that you need to install we're, also a project that is cross-platform. We work on different shells, so it may be that you want to install powershell as well. Another thing you need to install so what we've been doing is looking to use this technology to really simplify this this process.

E

So I'm I'm on my machine at the moment, I'm actually using wsl too, um but for the moment just think of this as your your desktop machine, if you're in on windows you're in on mac, this is your. Your machine. You've got docker running so I'll I'll just show you that docker is running on here, so there doc services running, I don't have node, which is needed for um for development. I also don't have some of the package managers for for python either.

E

um So what I'm going to do is I'm just going to open up our project, um so I've got the cli already already cloned down onto my machine. So there are the um the source files I'm going to open visual studio.

E

E

So here is my project and I'm just going to call out there's a few extensions that I've got installed. We've also seen down at the bottom that um visual studio code knows that there's a development environment within this project that it's actually prompting me. Oh, do you want to open it in that development environment, and this is defined by these files within the dev container folder. So we have a devcontainer.json file. This describes our basically our development environment. We can define its name.

E

The docker contain all the build instructions, the extensions that we also want to use. So this is going even further and saying well, actually we're not even going to standardize the dependencies of our projects, we're actually going to standardize the extensions that people can use as well and we can pre-install those. So again we we're trying to help you get uh get up to speed as quickly as possible.

E

um We've also defining what shell to use and also when this is uh this image is built, we're actually going to run all of the install commands for you as well. So when all this is finished, you will literally just be able to run the code and be able to develop and be able to test and be able to run the documentation as as well.

E

So um if I go to the doc file, so one of the things that we we have done here so we're using a public image, we're actually using a powershell image because we want powershell to be bundled uh for you to be able to to use- and this is using uh the latest version of ubuntu uh we're installing all of our dependencies.

E

So we've got dependencies on python, some other tools as well, we're installing our source code, so packages for building our documentation, creating a specific user to develop with, and also we're actually going to customize the the shell we're going to add extra features into the command line so that when you're using it, you've got autocomplete for git commands and you've got a very good history. You've got syntax highlighting, so you know when you're going to execute a a command on the command line. It's it's going to work.

E

So what I will do is I'll just go through and we can use this option for remote containers. Sorry, I have missed one thing out. If I look at the extensions, um one of the things I said was a dependency was docker to be installed. You also need the um this package here, so the remote containers, when you install this, um this extension you'll find that there'll be a little icon like this down in the bottom left. That means that you're kind of ready for for using a remote development, so that needs to be installed.

E

E

So by installing that it also gives us options in the in the command panel that we can open, and I can then say I want to reopen this project in the container. So now it's opened a new instance of uh visual studio code and we can see that it's starting the dev container.

E

So in here you can see there are tons of instructions that are happening. So what it's doing is just checking that docker is actually installed on the machine and then it's going to start and instruct the build for the uh for the.

E

E

There we go so that has built my image and I'm now running in a remote container. So I'm going to open my terminal, I'm using the z shell prompt. You can see that my prompt now has completely changed from what I had before uh on my machine, which was this um oops. Let's just move back go back to my terminal.

E

I can now see that I have my version of node.

E

I can run commands so I can run the watch. Oh he says that was not a very good example.

E

Oh, this is where the demo gods are getting me and every time I did this before it was working.

A

It doesn't matter how many times you try, it's always the live production. When it actually fails. That's happens. It is.

E

So we'll just let that run and then hopefully there we go so the install just didn't quite run on that one, um but that one's running um I can then also open a new window. I can run my docs mk docs serve, so you see that little feature there is the syntax highlighting. So I know that mk docs is in there. I can hit certain if I actually go to the right.

E

That'd be fine, that's now running and when this is running and it's building all our documentation, one of the things is we're running in a container, and obviously this is going to build documentation. It's going to be a a website.

E

What a nice thing about this is is it will automatically detect that the container wants to open a port, and it will actually give you the option to say. Are you happy with this, and it will create a tunnel from your local machine through to the the service that is running within the container.

E

In a second when it gets to that, we've got a lot of docks. I will add so it's probably churning through quite a bit.

A

So as it's doing that, just to kind of over simplify things for those who don't quite understand what is a docker and everything else, so this is kind of a virtual machine which is then being set up for development without anybody installing anything to the host machine is that right way? Yes,.

E

It's really pretty much yeah, it's it's! Basically a you you're running everything on one host rather than having multiple virtual machines and then deploying code to them. uh Docker is providing you with that space that isolated area for you to put your source files and dependencies. um So there we go. uh It's basically exposed that the port is now open, so I can actually now see our documentation and that's running from here.

E

If I make any changes, I can then just refresh the page and it's there and it's running, um but I've not had to then go through the pain of trying to configure what python version I need what dependencies I I need for for this to run as well. um I'm sure if anyone's tried to install pi different versions of python on one machine, it's an absolute nightmare. um So this makes it a hell of a lot easier.

A

This is a family show gary family sure. Oh sorry,.

A

But yeah so there's a one question, which is this virtual machine set up in nashville? No, it's actually virtual machine or a isolated virtual machine locally in the developer's box, but yeah.

A

The beauty of this one is that now, if you have multiple different projects and multiple different customers and some of them require npm, whatever version, some of them require different setup of installations, and you can isolate the setup and environments in docker and having this resource studio code and and the kit uh github integrations and which will basically, it makes it easier for people to get started than in the github projects. So the project can define that these are the basic setup and configuration environment of value, variables and installations to get started and poof vola.

A

Your environment is ready to go.

E

It's exactly that your option is to have multiple versions of node installed on your host machine and by using nvm, um which david is going to be uh david, hugh, showing here how to do that in their career sharing. This is just a different approach and, interestingly, to take your point about. Is this running in in azure? No, that was running on my local machine to take this a step forward using the same technology and github code.

E

Spaces which is currently in preview, is essentially going to use this development environment definition that's in the project and allow us to have a one-click setup for development environments. So as a contributor, you can just come along to the project and hit a button, and it will build everything for you. So here I have a branch that has my dev container files in here and where I'd usually come to actually clone the repository.

E

I've got an option of opening code spaces because I signed up to the um the the preview and I've already got one pre uh created here. So I can click this and this is creating the container, but in a machine I think it'll be in in azure, but completely remotely. So I could be using an ipad um for this with just a web browser and I'm able to effectively create my development environment within a browser and have the same experience as if I am running locally.

E

So I've got visual studio open, um albeit in the browser it's checking out all of the code from the repository. It's also built all of the dependencies as well. um I include those in the uh in the code space and, if I remember rightly, to open my terminal prompts I have exactly the same terminal prompt. I can run the mpm watch.

E

Oh now, npm run watch.

E

I can start our docs.

E

So that's going to build the docs and in the same way that it it opened a port on my local machine. So I could access it locally because I'm running in github code spaces, it's actually going to create me a website. It's going to create me a url which then I can access the same documentation but completely remotely.

A

And what's the cost related on that.

E

So the cost at the moment on preview is it's free and once it's out of preview, it's going to be a cost per usage, and so it'll be based on how many code spaces you want to create and use and different um different prices for different um specifications of code spaces as well.

E

I don't think there's many details around that, but the the one thing I like about this is that by using remote development locally, even if you've not got code spaces at the moment, you can still benefit from uh from. uh You know the isolation um of working in this kind of way, and it just makes things a lot easier to handle your your dependencies.

A

Absolutely absolutely cool are we? Are we good gary? We are good, yes, excellent, so really cool and the basic idea of this one is behind well the larger way of thinking this is that index click of a click of a button in the internet browser you can set up a vm or an isolated, it's kind of a vm, but it's not vm, but it's a virtualization in the cloud which has everything but needed for development.

A

So nobody has to install anything locally and that's just mind-blowing, because you can just move between the projects regardless of the project dependencies with the click of a button and you'll say something else, that's really great. um It's! It's really innovative way of doing things, and obviously, let's see when this will catch uh in the community as well, but now, let's actually move forward and let's move to rupiah and we're gonna, have a a building, a search based messaging extension for microsoft teams.

F

Hey um thanks uh for joining the call everyone this. I cannot believe this is my first call thanks visa, um I'm also a pnp member, I'm a cloud developer advocate my name is rabia and I'm gonna be really quick, because I know the time is running out so today we're going to discuss, building, search based messaging extension for microsoft teams. This is really based around this app that I've built a couple of weeks back. I guess um which is there in the pnp um repository, so you can go to aka dot.

F

Ms slash teams, hyphen samples. Did I get that right visa, so you can find that there. uh So I created this sample, uh which is a messaging extension for uh finding gifs, um basically uh the what you have in your giphy uh extension in your inbuilt into your microsoft teams. So you might ask me um why I have built something: that's already there. It's, because I wanted to learn the concept and I wanted to learn what search based uh extension was because these are all terms for us. They are new. um There is.

F

There are two types of messaging extensions and I was like what what is all this, like big words for me, um so to uh to kind of like understand the main concept I um started off with the microsoft teams toolkit, which is like a very base uh structure for creating um samples uh or solutions.

F

um So let's uh jump in and see why we're using listening extension. uh This is probably the first question you should ask um when you are building something for teams, um so there are three points that I came down to and uh uh you know sort of like um uh finalized, like these are three decision points that uh will make you create a messaging extension for your clients or for applications, definitely not clippy, but I just included because he's fun.

F

The first one is finding the right information without switching the context. So this is pretty um interesting because um yeah clippy right so uh finding information is a key thing, so you might be in a conversation within your team and you might be talking about things uh you have. You probably have to move away from your conversation to another system. uh Maybe uh there is a hr system or, uh let's just uh think about a hypothetical, not hypothetical.

F

Maybe a medical institution uh having a conversational chat between their peers, and you want to find some information about your patients. You know they'll have to go into another system. Log in get information, come back to the chat and then continue with their chat by the time you come back. You probably your teammates have left for a coffee, or you know it's it's not as engaging as it is.

F

So if you can right away bring out information in teams staying in the same conversation that will be really cool and that can be achieved with nesting extensions. Another point is getting attention to your messages by using um rich cards. So another thing that I might personally, I myself struggle is to look into teams chats or messages and to really grab that attention from uh any of the messages. I'm pr.

F

If it's like a one-liner or something I'm I'm probably there are chances that I might miss these messages and with microsoft, job that I just joined like um in september. uh There's like heaps of messages once I wake up, it's like. I cannot go through everything, um so a very good way to grab attention to your message is using messaging extensions like in a big card uh or a rich card. So that's another uh value, add for using messaging extension um and the last one uh is getting your teammates to take action.

F

So probably there have been many other demos you've seen where missing extension have cards uh with buttons, where you can go ahead and do actions, but in this sample.

F

Yes, you would not see that because it's just gonna give you a give, but this is one another reason why I would build a messaging extension for a client or you know I would ask my client, for you know suggesting them hey: why don't you bring your system uh into teams, integrate into teams and then use messaging extension to bring out this information, get engagement from your team, etc.

F

So these are the three main points that I personally think uh is why you should go for missing extensions, um so yeah, let's get started, and this is basically how my application looks like it's nothing new. I don't! I don't know why chris pratt is so excited about this, but it's probably the simplicity of it or maybe the code is uh you know you would see it and then you would probably understand how simple it is uh to get started with a messaging extension.

F

So without further ado, what I'm gonna go ahead and demo uh when I say demo, I probably would be talking more or walking you through the code, so you get to understand uh how it all uh ties up together. So um I'm just gonna go ahead and open up my visual studio code.

F

um So this is uh uh this is the solution that you have in that repository the sample that I've shared this was created using the microsoft teams toolkit, uh maybe I'll, just walk through on a new window to show you how you can create a new uh um solution like what I have there using the teams toolkit. So you have this extension, which basically you can go ahead and install for your visual studio code editor um or your visual studio.

F

um Once you have installed it, you will have this um this icon here, so you can go ahead and create new teams app. um What then? It does is it asks me if to log into my tenant, so I would just allow that um basically, it will go to my tenant, whichever I was browsing or this tenant is basically my dev tenant. So it's all good.

F

I can sign in so the app basically registers itself there and uh the manifest file or is already in the cloud for you um and also the project comes I mean the project is now ready uh to be folded, so I can close this now and get back to my visual studio uh code, and you will see this uh form this form where you can go ahead and start your wizard um here. You have three options: tabs bots and messaging extensions.

F

Today we are focusing on messaging extension, so you can go ahead and click that um it's really cool or and easy. If you are a new developer, uh you are new to m365 and you're. You know absolutely new to teams, so you can go ahead and click on next. Then you can give your application name. You can choose whether it's an action based or a search-based one.

F

There are two different uh types of messaging extension. One is triggered by a query like a search and the other one uh triggers action based on an action of a user. So there are these tiny changes in terms of what function it calls or in terms of how the manifest file looks like based on whether it's action or search our point of interest is search today. So you can click on search, um and another thing here they ask for is whether to create a bot, so every messaging extension is actually uh it has activities.

F

So it is. uh It requires you to create a bot uh channel registration to uh to help you with the activities sending back and forth the messages. So that's what helps teams to understand and to communicate back further. So for that you need a bot um and uh you can either create a bot or you can go ahead and use an existing bot if you have one registered.

F

So that is another option, and the third and final option is whether you want to include link unfurling to your messaging extension. This, basically, is um think about it like if you want a particular domain link when you put that in in the chat. You know how sometimes um again, coming back to the same uh point that you want user engagement uh in your conversation, so anything that grabs attention is good.

F

So if you want to send uh just a link in the chat- and you don't want that link to be just a very vanilla, plain link that people normally forget to look at and if you want to bring out some extra information or some action on top of it, you can use link and furling, which basically is it will check the domain and it will then kick off an event or a function that will bring back a nice looking card based on that domain.

F

So it's it's up to you whether you want to use it uh or not. So these are the the options you get when you create um a solution from scratch using the teams toolkit which, which is what I did for this uh gifi app that I did so once you're here. um So once you're done with that finish uh finishing your wizard, which is the last screen you saw, uh you will be getting something like this, so it's just a very, very bare bones kind of a project.

F

You can see here you have just the main in the main entry file and and you have the bot activity handler, which is where all the juice happens. um So you also can notice that in the new versions of teams toolkit, you don't have the manifest file, but I can show you where you can go ahead and download it and have a look, because that's exactly what I've done here. So I can take you folks, through a few of the things when I'm discussing.

F

So this is the project. Like I said, entry point is index.js like visa mentioned before this is a javascript uh project in teams toolkit, uh you have javascript instead of typescript. So if you want a more um uh you know, advanced uh scenarios advanced scenarios for teams, application definitely go for the yeoman generator. um It has typescript. It has many other scaffolding options, uh so it's pretty cool stuff, so yeah, it's up to your uh comfort level when you want to start off.

F

This probably is best if you want advanced scenarios and look into your yeoman. um So this one uh here, it will give you um the adapter for connecting to the bot and then also listening to the messages uh coming from this uh kicking off from this url and then running your bot activity. Handler that's what's happening here um and in the activity handler is what I I'm really interested to show um probably um zoom a bit.

F

um So you have these two functions, uh which basically is something I can show you using the existing uh gif extension that microsoft have so once you click on. So this is an extension. So this is one of those moments where I was like. Oh my god, so I have been using a messaging extension all my life and I did not know not all my life but all my life. I used teams, uh but I did not know that was a messaging extension, an inbuilt one.

F

uh So that's that was when I started thinking like okay. These things are simplified when you understand that it is in your daily life, like adaptive cards um are in your daily life when you are uh looking at windows timeline or um if you are approving something from your outlook, it is actually an adaptive card and you do not know it was an adaptive card. So that's exactly the message I wanted to send out with this kifi app. So this is not my app. This is the built-in microsoft app.

F

So it's it works exactly the same way. So when what you see here is a search based messaging extension- and this is where you query- and this is uh where the action happens when you type something um so this function. So whatever kicks off this when you type something is what we see um in this. uh This extension query function. So this once you type, this is what happens this kicks off uh and it will go ahead and fetch the data from the api. In our case, um it is the gifi search api.

F

um I've got the gifi api key as well, and then it will bring back the response so think about in your scenario. Maybe a client has like. I said in that medical institution: the client has another system which has all the patient records, so this api could potentially be an api that gets all the patients information.

F

um So this is how I co-relate things I simplify it and then I would correlate with this user scenario. uh Sorry a client scenario, and uh so this is basically what happens here. I run. I write the query and I fetch the data and what I do is. I would uh bind them into um a um a an array which is what you see here as attachments and then I would pass it to the compost extension, which is that area you see um here, so I would bind it into this as a grid.

F

So if you want a list, you can have it as a list, but for images it makes sense um to uh have a layout uh for a grid. So that's exactly what I've done here. So if it's a document that you're bringing out or if you're it's a card of a patient or an information of a candidate in a hr system, you would rather go for a list instead of a grid.

F

uh So this is what happens there, so you can probably understand now uh that's how it ties up and what happens if for this function, so this function is basically when you select uh this guy, I mean the the item. So whatever you searched and you selected, that's that's the that kicks off this function, so this uh handle teams. Messaging extension, select item kicks off it's self-explanatory, but then I'm just uh reiterating um it kicks off this and it picks up that uh value that you pass from here.

F

So this is uh uh where you're passing the the tap when you tap on that thing or on the item passing that value and that's being sent to this area- and here again you compose, uh but you now you're composing, um just that one uh thing that you picked.

F

So this is basically the idea or the flow of how uh the code works um and uh and and probably, if the democrats are with me, I can show you um how it's working, so I can just do an npm start and another sneaky thing I did was. um I already run my ngrok here, um so I I do uh have a uh an online url.

F

I I think that probably you already know why we're in grokking, because I'm working from my uh dev machine is not uh deployed into a cloud, uh so I need to have uh a url that's available online to be used inside um in it to test my application in teams. So I did have done that so and now I have started my basically like I'm running my local machine and then I could go ahead and test uh my application from here. So uh this basically should work now.

F

So if I can at mention my um my application, um I should be able to test this. Hopefully it will work um and you can see here. I have typed uh some values in and I've got some results coming back. You can know the difference, I'm not bluffing. This is not a gif. uh The reason why I'm saying is is just kidding. I know you for folks are great.

F

um Is that I'm sending my limit as five items to be brought back from uh the api, um and I also can control the rating which was previously pg-13, and I was like freaking out when I saw that because I don't know what's going to come up, uh so I just quickly change it to g. So you know you can't you sort of have flexibility on what you can call in your api as well, once you do this um so yeah. This is basically how it works.

F

You can invoke it by at mentioning your search um based messaging extension or you can invoke it from within your compost area. So this is called the compost area. This is something I learned very recently. I don't know I was, I always say the chat thingy, um but it's a compost area, so you can invoke it from the compost area as well.

F

You search uh you can basically search uh in your um whatever item you're trying to bring back, in our case a gif uh from here as well, and then you can do um you know. Everything else is just the same stuff that you usually do um nothing nothing's uh shocking here uh and yeah and that's exactly how it works.

F

I hope uh I have shed some light, but I cannot uh finish this comparison or this demo without talking about the manifest file, um so I can open up the manifest file just a second, so I'm so short. I basically have to look through stuff um because my table is really high. um I should fix that but anyway.

F

um So this is how my manifest file looks like and you can basically go ahead and if you're using the teams toolkit, then there is a catch that the manifest file is in the cloud. um But if you're, using your main generator to build your application, then it's it's readily available for you um in your project. um So if so, I have used teams toolkit uh in the scenario, so you can go ahead to your application studio and find out uh the application where it is where it is where your application is.

F

um If my wi-fi gots are with me, I would be okay, yeah cool, so uh my application is here and I could go ahead and see my manifest file by downloading um the zip file which basically is somewhere here. Where is it okay test and distribute? So it should be here so you can download from here as well. You can see the manifest file, which basically is a json uh file, um oh yeah, so this is how I did it.

F

I downloaded it and opened it just to show you a few things, uh basically around the compost extension. This is the main bit that says uh or talks to the team's application, saying that it's an extension- and you can see here, the bot id is the id of the bot it's tied to um and configuration updated something um it's like you can have configurations uh and your command. This is the main bit so type query. Is your search based uh messaging extension? If it's it's called actions.

F

If it's type action, then it's an action based uh messaging extension, um an initial run. I've set it to false, basically what it does is. um It would just invoke that in that call the initial call and without the person the user typing, so you can think of a scenario where you would like to bring out recent documents without searching for the document. Then you could make it true, because then you probably need all the options for the user, and this is the two bits that I talked about.

F

So you can invoke this messaging extension either in a compose area or through the command box, so you can add, mention it and stuff. um So that's, basically it uh that's uh all. You need to probably know to get. You started with uh creating a search based uh messaging extension and I hope I'm on time. Thank you.

A

Excellent, thank you raphael. We we, as you, were, doing the presentation we agreed with jim. That will we'll reschedule jim it's just easier that way, because we are running out of time today as well. We kind of took too much time on the intro again, but it's okay, so that was a really great demo graphic. Thank you for that one and certainly didn't want to stop you in the middle of demos.

A

So, okay, okay, so, like I said uh we'll reschedule jim jim's uh demo uh for december or january, we'll see when we have the next uh step and an export available. But thank you rabia. Thank you gary for two really awesome demos really exciting to see those. It's really awesome to see those code, spaces and and and the remote development story. uh It's it's actually really interesting to see where we are in five years related on all of this virtualization and isolation, all that stuff.

A

It's it's super super cool and arabia, really great story related on how to get started on implementing things and and and pointing out uh the scenarios and, like I said it's not like, we don't have a kp capability natively, but it's all about understanding how you would be able to implement those things so really cool thing as well good.

A

We do not have a time for q a today, um but as the next time the recording will be available in 24 hours in the master 365 community youtube channel. uh We will have the next community call for empty resistive, general dev in the december 10th, and then the next sharepoint framework call is week from now, um and so we have those coming just a little uh kind of a reminder and the christmas uh eve and the the what is it uh new year's eve both are actually would be uh hitting the thursday timeline.

A

So we're canceling two calls in the december we'll talk about those in the upcoming sessions as well, if you're looking into other any any other community course and community topics or interest on specific technologies. These are the other community goals which we are executing on the microsoft 365 developer community side, but that's it for today. So thank you, rabia gary one more time and thank you, everybody for joining um if you're watching this as a recording, hopefully had a a great thanksgiving um and had some time with the family as well. But thank you everybody.

A

Thank you and we'll be definitely in touch. Bye, bye, stay.

B