Microsoft 365 Community Microsoft Teams, 3 May 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Extend your Microsoft Teams app to Outlook and Office

Description

In this 12-minute developer focused demo – Erin Bailie shows viewers how to use the same development tooling to expose a Teams app in 3 host environments. Start by downloading the latest TeamsJS v2 SDK. Then open VS Code and run 2 commands to upgrade the Teams app package so the app will run in other hosts and to upgrade the SDK to point to TeamsJS v2.0. Done! Learn more about M365 cross stack tooling journey here and at Microsoft Build. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on May 3, 2022.

Demo Presenter
• Erin Bailie (Microsoft)

Supporting materials
• Tools - Teams Toolkit (Preview) | aka.ms/VSTeamsToolkit
• Documentation - Microsoft Teams JavaScript client SDK v2 Preview | aka.ms/TeamsJSSDK
• Demo - Extending Teams apps to Outlook and Office.com – Saurabh Bhatia (Microsoft) | @iamSBTron | https://youtu.be/JckgmonMbCM?t=1776
• Topic related sessions at Microsoft Build | May 24-26, 2022 | Register now http://register.build.microsoft.com

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/m365pnp

A

I'm aaron bailey, most folks call me by my initials eb, so you may hear that referenced and I'm a pm here at microsoft. I work on the microsoft 365 platform team and on the whole I love creating platforms for developers to make useful apps and integrations and bring them to our mutual customers, and that's been the entirety of my career here at microsoft.

A

Today I want to walk you through the opportunity and the motivation behind this vision of extending teams apps into outlook and office.com and I'll talk about our approach towards evolving the team's javascript sdk, which led to this capability. So let's jump right into it.

A

So I'm pretty sure that I'm preaching to the choir here when I talk about the current microsoft 365 app ecosystem. I think we all know that it's a bit scattered as it is today, if you think about how apps are managed and deployed within microsoft, 365 today, uh it's it's not as continuous as it could be. Let's think about the app collections.

A

They vary widely in content and experience from product to product and they sit in different catalogs. So it's sometimes users struggle with discoverability and apps themselves are not always called apps, sometimes they're, add-ins or integrations, and the terminology and the capabilities can differ between desktop and web and mobile.

A

If we jump over to the admin side, as we know, admins are really important for getting apps out to users and customers. Admin controls are really product.

A

Specific they're, separate admin centers for just about every major productivity product plus you've got your azure authentication admin center, your mem admin center and more microsoft, 365 apps and services have their own discrete extensibility models, most of them have their own dev, tooling and client-side sdks as well, and the manifests or the packages that deploy these apps and integrations are product specific and they require different version for each developer, build.

A

So that's the ecosystem as it is today and as we thought about the next wave of innovation, we challenged ourselves to think beyond just products or services or platforms, new capabilities we thought about. How can we bring convergence and simplification to this app ecosystem and that's our north star?

A

So our vision state and I will be the first to say this- is not the state today, but this is the vision state that we're aspiring for is a unified, app ecosystem within microsoft 365..

A

We want unified, app collections in a common catalog so that there's consistent ux discovery for users and as we get into monetization and commerce, there's a single point of payment and a single point of entry.

A

We want apps to have a single logical container for web or sas apps as well as device applications, mobile applications and all the data integrations that happen as well. We also want to bring a consolidated and streamlined admin control so that admins can create policies and enforce them through a single pane of glass.

A

One entry point for all of the management that they need to do and then, when we think about developers, which is, I know who most of you are, we want developers to be able to write an app once and run it across all of microsoft 365. So that means teams, outlook office, maybe one day even edge or windows, and then lastly, we wanted to bring unified, manifests. Sdks and kits to developers so that, instead of having product specific packages, everything is unified and everything can sit in one format.

A

So that's the vision, state and that's our north star that we're striving for and we're starting by bringing teams apps into outlook and office, so providing a unified, app ecosystem for those three hosts which is built off of and leverages the existing teams manifest format.

A

So that's what I'm here today to talk to you about is how you can take an existing teams, app and port it into those other hosts, so that you can start to leverage this unified, m365 app ecosystem.

A

So two links that'll be really helpful. As I'm going through my demo. The first is aka dot. Ms slash vs teams, toolkit that'll, give you the uh developer toolkit, which will help you go ahead and develop a teams app and then extends that teams app. The other is aka dot. Ms slash teams, js sdk, so this is a link to our sdk and some of the associated documentation.

A

I don't suggest you try to follow along in real time, but this call will be recorded as vasa mentioned, and you can come back to it later.

A

So, let's think about a fictitious example here, uh let's think about an app called contoso action plans or cap. Now we're all familiar with this company contoso. You know it's a model company that we use in a lot of our demos. So, let's imagine we're the contoso sales team and they use the cap app. Oh, that's a that's a mouthful.

A

They use the cap app to coordinate their actions with customers and since they spend a lot of time in teams communicating with their peers and with other colleagues within contoso and sometimes with their customers as well, it makes sense for cap to sit in teams and it makes sense for it to be a personal tab in teams, so a dashboard that a sales representative can go and access to get critical information and they don't have to leave teams.

A

Now. The contoso team also uses outlook to email, their clients and schedule meetings and they use office to manage customer decks, their budget, spreadsheets documentation, etc.

A

So how can we let cap show up in outlook and office so that the sales team at contoso can bring this helpful application to all of the entry points where they're using m365?

A

Well I'll play you a little video? This is my vs code environment, and this is what I did to take a sample cap app that was running in teams and extend it into outlook and office and there's two commands that you need to run. The first is to upgrade the app package so that it will run in outlook and office, so the team's toolkit has this as a command. You can run from the command palette, you'll select the app package and it will upgrade the app package for you.

A

The second command you need to do is to upgrade the sdk so that it is pointing to teams js 2.0, so that's also a command that you can run from. The toolkit.

A

You'll select the appropriate app package and the selection within there and there you go once you've run those two steps, so the upgrade to support outlook and office and the upgrading the uh the sdk. Then your team's application should be ready to go to run an outlook and office and if you're, using vs code, you then hit f5 to go ahead and run this locally.

A

And what does this look like for the contoso employees? Well in their outlook, they can go and check their emails and then, from that left-hand menu they can find the cap application and load it, and the same goes for office. So this is a new product office.com, which is now available for all customers and they can go into the menu in office.com access that cap app and go and use it. So that brings a lot of utility to the contoso sales representatives and to the contoso organization as a whole.

A

Let's talk a little bit about how we go about enabling these contextual experiences, one of the key updates available in this team's js v2 sdk, is the organization of apis into capabilities. So capabilities are nothing but javascript. Namespaces that contain all the functions that are available as part of the capability and a host like teams or outlook, has to support all the functions within a capability to say that it supports the capability.

A

So let's use outlook and email, because I feel like that's a really easy example. For most people to understand outlook supports the mail capability, so every function within the mail capability will also be available within outlook, and that's what we mean when we say organized into capabilities.

A

So you as the developer, can leverage this capability model to check what is supported in every host reminder. Our hosts are teams, outlook and office at this time and create contextual experiences.

A

Every capability in the sdk has a function called is supported, so it lets you check which capabilities are available within a particular host. So going back to this mail example, outlook mail is supported, equals yes, teams, mail is supported, equals no.

A

uh It lets you do things like recommend, email reminders uh when you show the app in outlook because outlook can support this mail capability, but then hide them in teams, because teams does not support the mail capability.

A

Now, let's look at the core set of capabilities that will be available across all the hosts to get started. The app needs to initialize and get the right context from the hopes from the host, and these are standard, app loading, behaviors and success failure callbacks available in teams that are now available across the hubs.

A

In addition, the host will now pass additional contacts like the hostname when the app initializes. Lastly, all the oauth flows that you expect to work in teams are going to be available in the other hosts as well.

A

So you can have more than one tab in your in your application, and every host supports the ability to navigate across tabs within the application, and you can also navigate to host specific capabilities like clicking a link to start a chat or schedule a meeting, and you can use the capability model and is supported to navigate these host capabilities.

A

Lastly, there's a ux element called task modules. They allow a pop-up experience which allows a user to focus in and complete a little task. You know, I think of it as a little pop-over window and we are bringing an html-based approach of creating these little pop-up experiences in all the hubs and the overall capability is referred to as dialogues within the sdk.

A

So, finally, if you have a themes app, you can easily update it so that it also runs in office and an outlook you'll need to update the manifest to the latest version to indicate that you want your app to extend across teams, outlook and office and then you'll also need to update the sdk references from uh teams. Jsv2 from the current team's js, v1 and v2 is fully backwards, compatible with teams js v1.

A

So if your app is a simple personal tab, it only uses core capabilities that are available across all hubs. Then you can update the manifest and update your sdk reference and start running the app across multiple hosts.

A

So what's available now and what you can expect with this, the sdk is currently in preview, and so you can using the links that we shared earlier. You can go check out the sdk and the manifest and start trying that trying that now at build. So at the end of this month we are going to move the teams, js sdk to ga and all the personal apps will the personal app capabilities will remain as previews.

A

So what this means is that you can run full-scale pilots with end users in office and outlook as preview channels and it's a great way to get engagement and feedback on your apps and prepare for the ga distribution of outlook and office, which should be later this calendar year.

A

All that is a bit of a mouthful you know at the end, at the end of the day, my biggest recommendation other than checking out the sdk and the toolkit that I linked is to go register for build because we're going to have a lot of sessions at build where we're going to tell you more about this, we're going to have continuous examples and share more resources. So, if you haven't yet registered for build, it's super simple register.build.microsoft.com, it's free! It's a great event. We really look forward to seeing you there.

B

Excellent, so really really cool and it's it's absolutely brilliant, pretty brilliant that we're aligning gradually now to this model, where the the same application, we have the same application, admin things we have the same packaging. We have the same control, the same development tooling across the whole stack, which is awesome.

B

This journey will take a while, but we are getting there and and please join on the build as as aaron eb was saying, uh really really cool stuff on on on the demos in there, and there will be a lot of on demand sessions and under my videos, on from the build as well.