Microsoft 365 Community Microsoft Teams, 9 May 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Latest on using SharePoint Framework for Microsoft Teams extensibility

Description

Solutions created for Teams are also available automatically in Outlook and Microsoft 365 app. In this 18-minute Developer focused demo, Vesa Juvonen relates how SPFx uses Teams SDK v2.9.1 by default and a custom or auto generated manifest to deliver this extensibility. See simple steps to onboard a SharePoint web part into Microsoft Teams. The Teams SDK is natively available in context and Teams Toolkit supports SharePoint Framework. Also, improved debugging for SPFx provided by Teams Toolkit v5.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on May 9, 2023.

Demo Presenter
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• Documentation - Overview of the SharePoint Framework | https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview
• Documentation – Teams Toolkit Overview | https://learn.microsoft.com/microsoftteams/platform/toolkit/teams-toolkit-fundamentals
• Marketplace – Microsoft Teams Toolkit for Visual Studio Code | https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

A

Recap on the latest on using SharePoint framework in Microsoft team, Sexton's stability, spfx, meaning SharePoint framework and and just recap what the spfx is and how we use study, Microsoft teams and what is the latest. We showed some really cool demos. Last week in Microsoft, 365 conference I'm, going to show a similar demo today and we're going to Deep dive more detailed on that solution. A bit later in the community course as well.

A

Now, let's actually get moving SharePoint framework is by far the easiest way to build your Enterprise Solutions in Microsoft, 365 and, and the reason with this one is that it's actually designed for a really easy implementation. So, even though the name applies that it's SharePoint framework and it has the SharePoint it's not only for SharePoint, it is actually for Microsoft teams as well, and it's all called Microsoft V1. You can actually use it in Outlook.

A

You can use it in office or Microsoft 365 nowadays as well, which is pretty pretty cool, but it is a pro development tooling. So you basically need to write some code to be able to make things happen. It has the automatic signal sign-on and the most important thing why it's actually, the easiest way to build the Enterprise Solutions is that it has the automatics hosting. So you do not need to go to the ID and say: hey I need to have an Azure website or additional things to host my code.

A

No, no all of your code is automatically hosted unless you want to integrate with Azure, which is absolutely an option as well so, but it makes it super easy as a developer to build a widgets and experiences and extensibility in Microsoft teams or in Microsoft Viva or in SharePoint, with the with the framework, without the complexity of figuring out who's going to host my code. Where is the code being hosted because development time is one thing also to run time and production?

A

Time is the second thing it has the consistent Dev experience, because it's based on in the system standard, tooling, you're, writing typescript, and all of that which is really really cool, and this is a typical slide, which we always include related on SharePoint framework development. You can build personal apps team steps, meeting, apps messaging extension cards, web Parts, extensions and app pages using the exactly the same tooling, and this is incredibly flexible. So you can share the same piece of code across all of the different application without actually any code changes.

A

So you can even use the same web part as a Microsoft teams, personal app without changing the code and that's actually pretty mind-blowing. So you can maximize the Investments within your development to be available across multiple products and multiple capabilities in Microsoft, 365.

A

and again single sign-on automatic code hosting, and all of that now today we're going to focus a bit more on the Microsoft teams. So what we can be doing in the Microsoft teams, together with SharePoint framework and relatively recently, we did announce that we actually support. Microsoft teams applications to be extended also in Outlook and Microsoft 365 app.

A

So as long as you are creating any or using any technology to create a Microsoft teams app, which is a personal application, it will be actually by default being available, also in Outlook or a Microsoft 365 app, and this applies SharePoint framework. It applies with your teams. It applies also, if you're looking in the hosting application, for example in Azure, and surfacing that within the Microsoft teams, that application can be easily exposed and also in Outlook and a micro Trace is the five app without any code changes which is really really cool.

A

Now you can modify the implementation for sure, but you don't have to, but application is now exposed in additional locations in Microsoft 365.. Now we talked about bit amount already. Why Microsoft by SharePoint framework for Microsoft teams, we covered main points, but basic idea here is that you do not have to reinvent the wheel and we have tens of almost at the number. We have density of millions of monthly active users uh for SharePoint framework extensibility within Microsoft 365., so rather than you being forced to rewrite something.

A

You can actually extend the existing implementation directly being available in Microsoft teams or being available within Outlook or Microsoft 365, or without the need of learning how to do new implementation, Styles or a new development models. You can use the same model, the same, exactly the same code, Works directly within Microsoft teams or in Outlook or in Microsoft, or a Microsoft 365 amp, as it works in the SharePoint as well. So you can reuse the same solution same code across the experiences automatic single sign-on is really really cool feature.

A

You don't need to worry about that one nowadays. That is available also, if you are implementing so-called native Microsoft teams apps, as in the hosted somewhere else than in the Microsoft 365. But it's really about the simplified operations with automatic optimized hosting, because again, SharePoint framework gives you a zip file, a package which I can just send to David and say: David install this to your tenant and it's production ready.

A

It's automatically hosted in the Microsoft race, sd5, there's no additional complexity with the deployments, click of a button and we're good to go, and that's pretty mind-blowing.

A

um Now the latest status with spfx with Microsoft teams. So with SharePoint framework 1.17 point x, we are now in 1.17.2 that went live two hours ago. uh So that's the latest version. It is using the teams SDK 2.9.1, and what does that mean? Well, it means that it's using all of the latest themes, SDK API capabilities or almost all of the latest.

A

There is actually a few more newer versions available, but 2.9.1 actually enables capabilities like live share, SDK, so live share, SDK and all of those capabilities which are available that SDK gives additional options of getting access, for example, the context where I'm being hosted. What is the Outlook? What is the user? What is the team where I'm building hosted and you can access that API or use the API surface, to get that within your code, which is really really cool?

A

As you start planning spfx within the Microsoft teams, or within the within Outlook or Microsoft 365., you can either use a custom manifest, and that means that you are creating your own Microsoft teams manifest you can Define the definitions there or you can Auto generate manifest file based on uh deployment options, and that makes it incredibly simple as well. So if you have an existing web part available within a SharePoint only with the one attribute chains in a manifest you're good to go, no code changes, no nothing!

A

You just add in a Json attribute, updated Json attribute within your solution. Recompile the code deploy that to the app catalog and you're good to go. That's it there's no additional changes needed within the code and that's pretty pretty mind blown now. As mentioned all of the SharePoint framework, Solutions of Microsoft teams are also available within Outlook and Microsoft 365 app.

A

So that is actually incredibly incredibly cool thing now, I mentioned that it's incredibly simple to do this, if you have an existing web part, something which you're using within a SharePoint online which absolutely keep on using that SharePoint online as well. But if you would like that to be also exposed in the Microsoft teams, the only thing what you need to do is update in the Json file, which is the web part manifest and the supported host values. So you add a themes, personal app or teamstep in the supported host, and that's it.

A

You just basically do package my code again deploy to the app catalog and done you do not need to do anything else and all of a sudden magically that solution. Poof is available in production mode in Microsoft dates, and that makes it incredibly incredibly powerful and comparing the the complexity which you might have, if you're hosting the website by yourself or implementing hosting in Azure or AWS, and then you have complexity of authentication all of that stuff. None of that is a challenge anymore, if you're, using a SharePoint framework now, what's also really really cool.

A

Is that, as mentioned there's the native access on the Microsoft teams, SDK So within the context of your web part, which is no longer really a SharePoint web part, because now it's a Microsoft teams, uh personal application. But in the context of that application or a solution, you can directly access the sdks and you can access the team's SDK and you can access information around what the team's SDK is providing. So you can simply do this dot context, dot, something you could access on information which is available within your code and that's incredibly incredibly easy.

A

As well so super easy to use now, what's also really really cool, so just to be clear on this one teams, Microsoft teams toolkit actually supports SharePoint framework and I'm going to show this one today in practice, as well I'm going to be pretty quick and fast demos. We're gonna read a lot of these demos more detailed in the future, but showing you how it can be done, so it's not either or teams toolkit or a SharePoint framework. No, no Microsoft teams toolkit.

A

Actually, you can use together with SharePoint framework and that simplifies to actually teams development spfx with a native F5 debugging super easily within the team's workbench, which is a specific debugging option which is available with your teams. Toolkit I'll show that one in practice, but maybe an Outlook scenario, that's actually pretty cool as well, and you can of course use the themes toolkit to create multi-tap spfx theme Solutions as well I'm, going to show that one in practice in the demo as well. Now, I mentioned this already, but this is incredibly incredibly cool.

A

So as part of the Microsoft teams, toolkit V5 there's an improved debugging for SharePoint framework. So if you're looking into doing a Microsoft teams extensibility with spfx uh with the team's toolkit V5, you can just select debugging get start in the Microsoft 3d65 app or in the Outlook and voila poof. You have an F5 experience and debugging enabled directly within the themes toolkit, which is really really really really cool.

A

Let's have a look on all of this in practice. um So let's have a look on a few of the samples and scenarios what I showed here. So this is something which I showed last week in the Microsoft 365 conference. We will go a bit more detail to this sample uh in the future and we will have actually Paolo plursi uh joining on this column to take off in tune to Deep dive on how this is implemented and all of that and how we can take advantage of things.

A

But as you can see, it's a relatively nice looking awake part, we are in SharePoint as we can see from the top menu and we can see information like the the products which has been selled or reasons to return. What is the most reasons to be returned is apparently wrong. Item.

A

Well, that's something we need to fixing shipping for sure, but there's a nice revenue for the company and we can get the details around, for example the company sales and all of that, of course, this data is imaginary, but it's a relatively typical scenario that the business leadership wants to have a dashboard where they're up to date on what's happening with their custom experiences and all yeah. Now getting this web part, which is implemented using SharePoint framework to be available in Microsoft teams requires only one single chance and it's basically this in the Manifest.

A

So this is the implementation and again we will open source this and not yet, but pretty soon uh in June, and only thing what I need to do is just make sure that the wet part is actually available, also as a team's personal app or as a team's meeting app or as a team's tab. In our case, we are exposing this as a team's personal app, because it's a full screen not as a tab within a channel, rather as a full screen from a left launcher menu.

A

Basically, I can add that one in I will save I will recompile the solution. I recompanying. The solution uh in in spfx basically means that I'm just doing called bundle. That's the ship or I could use the the teams, toolkit, tooling or I could use the Viva connection tooling and viewer connection toolkit as well. There's multiple options based on your preference on the tooling, but as I'm doing that rebuilding of the solution. I will eventually get a spbkt file, and that is the zip file which contains the actual implementation.

A

It contains the code, it's production, ready and that's the beauty of actually spfx as well. I can send that now to David. I can send that to anybody else, or my customer and say install this to your app catalog. You are production, ready, good to go and that's it. Everything is in within that zip file and everything just magically Works within their tenant.

A

Hopefully again if they, if you haven't done any box within your code and all of that stuff, you know, you know how it is and as I added the team's personal application in the Manifest, what it means is that my application gets automatically available in multiple other locations. So as an example, if I'm in Microsoft teams, I'm in the Microsoft teams and I can easily access that application in the left menu in my case, I already painted in so I can access that information directly in Microsoft teams, and this is an spfx implementation.

A

So it's a Microsoft teams, application built with spfx and it has multiple tabs and we can. We can collect additional information and and surface information to be available, and whatever is your scenario, of course, it's the technology of how what technology is the spfx or is in the native TMS app, doesn't really matter. It's a team supplication which is now available in here, and it's a pretty cool, looking application actually waiting forward on getting this available for everybody within a community for demos.

A

Now, as mentioned, if it's a teams app, it's actually available, also in Microsoft 365 app. So now, if I'm, actually Microsoft 365 I can then go and click apps and then I can actually access the contoso retail dashboard available there as well and I can access the information directly in Microsoft 365. There are people who work mostly on Microsoft, 365, apps, so accessible files and heroes, and they can easily accept that the information directly from the left menu.

A

That's pretty cool as well and, of course the same applies then for Outlook, so I can be into Outlook and then I need to go and say: hey I need to get the information related on whatever our sales were, I could do messaging extension, there's other options as well, but I can also access the information directly from the left menu and there we go. There's my SharePoint framework application being exposed directly in Outlook, that's incredibly powerful.

A

What I wanted to Deep dive a bit or show the demo is about the team's toolkit, so the teams toolkit is, uh has been evolving a lot, so the team's toolkit V5 is currently in preview. Let me start here a new window and the team's toolkit is incredibly incredibly powerful and flexible tool in the creating extensibility for Microsoft teams. It has a lot of options.

A

You can choose to build messaging extension spots and all of that stuff and if you are building personal applications, you can also use SharePoint framework in here and whenever it actually starts up come on there we go. I can start from an existing sample. uh Of course, I can I can basically download an existing sample start extending from there or I can start from a new app and when I start from a new app, then I have a few different options.

A

uh This is V5, so I have also the option of creating Auto adding here, but in our case we're going to use start with the themes, notification or application, and in here we can see the spfx tab as an option and if I select that one, it will actually start executing the spfx human generator behind of the scenes. It will actually ask me something really interesting, um which is a nice flexibility for developers as well.

A

So it will basically tell me that do I want to install the latest version of spfx locally within the developer solution, or do I want to use globally available spfx solution, which gives some level of flexibility on what we're using. That will then scaffold our sales solution, which we can super easily do debugging in multiple locations.

A

So here what I've done here is that I, pre-provisioned or scaffolded my project, because the the node modules takes a while to complete, but basically I have a relatively simple web part, which has been now exposed to be a teamstab teams, virtual app, and it has additional settings or configurations. The cool thing here is that I can simply, let's see if I can get actually get this work. Let me go to this browser window.

A

I can simply now go to my debugging. Let's actually do a perfect Point.

A

Let's go in here, where's my code and, let's add a break point over there and now, if I go to F5, I can say that start this SPF ex solution in the context of the Outlook workbench and in our case we're using Edge so I could just click that one press F5 and if everything goes well, if we have done the proper preparations for the demo, Trump drum rolls it will take a while to compile it will do things set up the things for automation behind of the scenes.

A

Install gets helping a lot on making things happen, but then we're getting there. There we go successfully executed that one now we're starting to restart starting things.

A

One more seconds, two more seconds, three, more seconds: five more seconds.

A

You can do this, you can do this still doing things now. We can actually say that running server is doing there. On the background. That's basically the last markers localhost is running. We are starting to be good to go. It is copying the assets doing Automation, and this is because I haven't actually done that for a while.

A

Now, I don't do webpack this moment here we go and now I can actually then start testing that, within the context of my identity, within the context of my Outlook, it fires to Outlook, and if everything goes well after a while there's my code, there's my spfx solution getting loaded, it will explicitly call out that hey you're doing debugging and you are running code, which is not part of the Microsoft 365, making sure that people are aware of things and see what happened on the background.

A

We did hit a breakpoint and on that, as we hit the breakpoint, we can access the information like all of the details. What's in the context, what's happening, what what what's actually happening within a page what's happening in the code and all of that stuff and that's pretty magical, that's incredibly easy! Just F5 after I've scaffolded, the project I did not do any changes after that and I can easily test out my solution in the context of Outlook and now I can actually start to implementing my custom implementation. That's pretty cool it's magic!

A

Thank you, David cool! That's it for! For that demo.