Microsoft 365 Community Community Demos, 25 Oct 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using your SPFx solutions also in Microsoft Teams, Outlook and in the Microsoft 365 app

Description

In this 9-minute developer focused demo, Microsoft presenters Alex Terentiev and Vesa Juvonen show how you can host Teams personal apps (developed with SPFx v1.16) in Outlook and in Microsoft 365 app (previously known as office.com). The same code in SharePoint, Teams, Viva, Viva Connections, Outlook and Microsoft 365 app. You will need to create a custom manifest.json file shown in demo. In the next SPFx v1.16 beta release, the typings are changing to teams-js-v2. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on October 25, 2022.

Demo Presenters
• Alex Terentiev (Microsoft) | @alexaterentiev
• Vesa Juvonen (Microsoft) | @vesajuvonen

Supporting materials
• Article - Announcing SharePoint Framework 1.16 release candidate | https://devblogs.microsoft.com/microsoft365dev/updated-preview-of-the-sharepoint-framework-1-16/

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

A

B

Build we've been able to have teams application exposed in the Microsoft Outlook and also in Microsoft 365 app well. Well, that's the new name of microsoft.com so and starting from 1.16 of SharePoint framework. You will be able to use SharePoint framework to do this, so we're going to do a quick, intro and recap on why what what what again was the? What was the SharePoint framework all about? Why does it matter?

B

Why would I be interested on it, and then the new opportunity is what we have here and then Alex is going to do a live demo on this one as well. First of all, SharePoint framework is the easiest way to build your Enterprise solution for Microsoft 365.. The name is really confusing. We have this problem uh internally, a bit more, even after the level of marketing, because they keep on telling that it's a SharePoint SharePoint solution, but it's actually could be something else um and we're going to go through the different scenarios in a second.

B

It provides you an automatic single sign-on, so you don't have to worry about authentication it's full built in in the framework it provides. You automatic hosting, which is a really big benefit as as we're having discussions with Enterprise customers who want to have their code not necessarily running outside of their tenant or even out they they might be against on you, hosting your their code within their own Azure subscription, so automatic hosting without any additional cost.

B

Any additional operational overhead uh with SharePoint framework development experience is consistent across all of the different development or platform and we're using industry standard tooling. So no proprietary, proprietary and development, tooling or or things we are using Microsoft graph webstock during react or whatever JavaScript framework you want to actually use now, starting with the new announcements uh within ignite, we actually had some new capabilities available for Microsoft 365 and again. These are coming in 1.16. So already before, ignite we've been able to build for SharePoint we've been available to both for Microsoft Viva connection.

B

If you're wondering what are those two's logos, the first logo is Microsoft Viva welcome and the second one is Microsoft. Viva Connection in the top you've been, of course, being able to build experiences for Microsoft teams and now, with the support of extending those personal applications. Also to also you can office app or office.com you're able to build in there as well. The really cool thing here is that it's exactly the same piece of code, which is automatically hosted without any operational costs, with automatic single sign-on with industry standard tooling.

B

The same piece of code can work as a application page as a web part as a personal application as a team stamp or exposed directly in Outlook and office.com or Office 365 app, so you're, basically maximizing the return of investment for the experiences and just to quickly call out. So, of course, we can build experiences with SharePoint framework and SharePoint that's kind of given in the name, but then it starts already getting confusing. You can use the SharePoint framework to build experiences in Microsoft teams and those are the ux experiences there.

B

You can build experiences in Microsoft Diva and the left side picture is: is the new Villa home, which was announced a few weeks back? You cannot see that yet, but it's actually coming quite soon and we'll share more opportunities on that as well and starting then, with the 1.16 analysis is going to show this.

B

We can actually take to SharePoint framework solution and expose that directly in Outlook and also in the Microsoft 365 or in office.com and you'll get access on the API surface level as well, using the team's JavaScript SDK V2, but rather than me explaining this from a picture perspective. Let's actually jump in the demo in Alex's screen and see this one in practice.

A

Okay, so uh basically, as best I mentioned in this garage out as well, now we can host personal teams applications in office.com and in Outlook. Basically, it means that if you have personal app developed using SharePoint framework, you can do that as well. So currently I'm in Microsoft teams, I have this rule the model application and, as you can see, we know in aspfx that currently we are running in teams.

A

I have the same application in office.com again same rule, the mobile application, but now the app is running in office.com and the same for Outlook when I'm in Outlook. Of course, we are running in the Outlook, so let me show uh the code and what it means from the code perspective. So, first of all, right now, when you like sync to teams from SharePoint app catalog, we will not provision all the information to Outlook and office.com, because Sim to teams is now still working with the old version of the Manifest.

A

So to make it happen, you need to create your custom manifest.json file and we have documentation how to do that. But the really important thing is: you need to use manifest version 113 or 114. In that case, your static tabs, which is personal app, will be revisioned to Outlook and office.com. Everything else is basically the same, so it's a standard manifest for teams. You use the same content URL as usual, with teams logon and teams hostetap.spx with the component ID used as a D for your application, etc, etc, etc.

A

So everything else is completely the same as for any other spfx solution, and as soon as you do these custom manifest, you create a zip file uh archive, then you create a PKG as usual and you still can use sync to teams functionality from App catalog.

A

Now let me show you in the code how it will look like in spfx 116 and in the next better that will be released, probably in the uh next week or so so we are changing the typings for Microsoft teams, teams GS. It will be actually teams gsv2 now and you have all the goodness from Team GS from there I'm just getting the context and as you can see, the apis are changed previously. We had like teamsgs.getcontext, then we should should pass a callback function.

A

Instead of that, we are game to we're doing teamsgs.hab Dot get context, and now it's finally a promise when we got the context in the context we have the host and we have the name which is actually an anim and based on this name, we can get if we are in office in Outlook or in team. So pretty easy if you have other things like AI client type. In that case you can uh you can kind of understand if you are on mobile if you are on in web browser, etc, etc.

A

So uh Reacher context is available in teams, JS, V2 and as mentioned, these typings will be part of spfx 116. But to be honest, even if you want to play around with it right now, you can do something like teams.js like that as any in your current solution, because in the service side of the thing things we already loading teams gsv2. So basically it is available. uh The only piece that is still needed to be kind of processed is typings for third-party Solutions delivered as part of SharePoint framework generator, and that's all I have excellent.

B

So, and and before you stop sharing two questions, uh this is the new default template. Then, uh from a code perspective.

A

Yes, the code perspective will show these get environment method message with this sdks team JS and how to work with the context. So, basically, before that we had like if we are in teams or if we are in SharePoint now, we will have if we are an office if we are an Outlook or if we are in teams, yeah.

B

Excellent and then the other point, uh which was good um to call out as well that, even though the hubs meaning the the Outlook uh well, the experiences in GA in certain some of these features are only available when you put the the products in preview right. Do you remember what what are the the exact status related on? What are the preview requirements for making things happen? Yeah.

A

So uh for now, and it should change relatively quickly, I believe the uh Team site domain resolution is not working on all the tenants. So if you want to play with it, you will need to provide your actual domain actual talent domain for now, but it is something that should be roll out uh pretty quickly. Next.

B

Time now, and and of course, as part of the release of 1.16 I, will provide additional documentation and guidance on all of the different steps and guidance videos, and all of that, so people can do this super easily in the future. But thank you Alex on this one really really cool stuff.

A