Microsoft 365 Community Microsoft Teams, 19 Apr 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Extending Microsoft Teams apps to Outlook and Office.com

Description

In this 8-minute developer focused demo – Saurabh Bhatia delivers the first in a series of application extensibility demos. Microsoft is delivering on an Ignite commitment to enable developers to build a personal app once and expose it across hosts – Teams, Outlook, Office.com. In this session, modify a simple Teams app to run across hosts. Two changes - update manifestVersion to “m365DevPreview” and reference “v2.0.0.beta.2” teams-js in package json. Host specific code will be addressed in an upcoming demo. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on April 19, 2022.

Demo Presenter
• Saurabh Bhatia (Microsoft) | @iamSBTron

Supporting materials
• Sample - Getting Started with Todo List Sample
• Documentation - Teams Toolkit Overview
• Documentation - Extend Teams apps across Microsoft 365

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

Hey everyone, I'm saurabh hart here, I'm a product manager on the microsoft 365 team. I think this is the first time I'm presenting with this audience. So thanks thanks for having me over uh today, I'm gonna talk a little bit about how we are trying to extend teams and and bring this concept of personal tabs across outlooking office.com.

A

This was uh previously announced at ignite. So if you were tracking those announcements at that point, this will be a little bit of a refresher. But if you aren't familiar with this, then I hope you take away some of the key points and start considering how you can start building your apps across all these hosts.

A

So, uh let's start off with uh what are personal tabs and teams right, they're, basically just web apps that are scoped to a single user. uh They can be pinned on the left pane so that you can easily access them. Users don't have to leave teams in order to access the app's capabilities, you're right within teams and- and you can just continue doing your work in in teams itself now in a hybrid workplace, people are often working in multiple applications.

A

In addition to using teams, they could be using outlook to send emails or office.com to collaborate on documents, and that's one of the key reasons why bringing tabs to outlook our office.com will help bring your application to where people are already working.

A

uh It lets you provide a better connected workspace for a more focused and uh you know, increased productivity scenarios, and we wanted to make it really easy for developers to extend their apps so that they can show up across teams. Outlooking office.com. You can write your app once and then choose to deploy to any of these hosts.

A

So what I'll do now is I'll just switch over and just show you how you know how easy it is to to do this. uh Hopefully, you can still see my screen, yep, so I'll be taking this uh sample app to do app. It's on teams, fx samples- and this was initially started off as a teams only app, but I'll talk a little bit about how you can extend it so that it also runs across outlook and office.com.

A

So all this app is doing is, it shows up as a personal tab and then it's you know giving you an example of how you can add to items and track that in teams I'll switch over to vs code using the teams toolkit, hopefully people might be familiar with it.

A

If not it's a great way of you know amazing, tooling, to get started with building your apps for teams and now for outlook and and office.com too uh just taking the sample app, and I believe michelle will be linking these uh uh examples in the chat itself so and we'll we'll be sharing those out too. So uh with the sample lab. There are two key things: uh I've done here. One is uh there's a manifest which defines what the app does uh and by default you know it only runs in teams.

A

The key thing I'm updating here is just the manifest version. This is still in preview, so I'm updating it to m365 dev preview, and that indicates that this app is now going to run across outlook and office.com.

A

The second part of it is: let me just pull that up.

A

The second part of it is I'm going to start referencing teams, js 2.0 beta. This is the newer version of tmjs that is now compatible across uh uh all these host apps, it's not just running on teams, but it can also run in outlook and office.com.

A

So, just with these two updates, I can actually now run the app, and I have that already running so that you don't have to wait for the f5, uh and here is the app it's sort of pinned to the left rail in teams. I can add tasks to it.

A

Another to-do item added from teams and then that same app will show up in office.com itself, uh added to the left rail over there uh I'll just refresh it, because it's not anything fancy it's just a web app and the thing that I just added over there will now show up on on office.com too. So as an end user, uh you don't have to you know, keep switching between apps, it's the same app that's available across outlook across teams. I missed showing outlook over here, but it's the exact same app. I can check you know.

A

This item is done in outlook and that thing automatically will get synced with teams or with office.com, so one app runs everywhere automatically shows up. uh I didn't have to change any code from that existing teams app to make this run across all these hubs, primarily because this specific app isn't really using any hub-specific capabilities.

A

This was you know, just a simple to-do application uh in the next couple of, I think we're planning to come back and show some more demos we'll be showcasing, how you can take existing teams app and utilize host capabilities that are specific to say, teams or outlook or office.com, and deliver differentiated experiences across these.

A

So that's a very quick demo. Hopefully that interests you in in uh trying to build these apps. I will flash some useful links here and we'll also put that in in the chat and happy to answer any questions.

B

Taking a look at the chat, I do see a question from russell: can the app get access to the mailbox? Sorry, if you want to speak to that.

A

uh Yeah, there's a there's, a couple of capabilities around composing mail that we can talk about. It's not really accessing emails. If that's what you're interested in at the moment, so the app could kick off a mail and let you compose a mail.

A

It's not really letting you search emails at the moment, but that could be something we go look at in the future.

B

And just for things like that, um you could think of myself graph apis as a way to go and access specific user data. If you're talking about teams chats or files or emails groups, anything else like that would be something that I'm just again using existing teams functionality the sdk stuff to go.

A

And access that yeah exactly uh that's a good point! Yeah you could you could just leverage graph and pull that data in and then this ends up being a nice way of just showing that information right within uh the host application.

B

I see another question from soon um does this have full sync with m365? I'm not sure. I understand the question specifically if you want to type some more into the chat window, to um give us more details on that uh and then nick has a comment about uh need a ui framework which detects if it's in teams or the rest of office and shows either northstar or standard fluent ui. Any comments on that sarub.

A

uh Yeah there's a couple of things: I'll quickly switch back, so we do give give you information about which host you're running in so I'm running in teams I'm running in office and based on that you can kind of switch over and show the right ui. There's a few improvements. We're looking at um right now, you'll get kind of the context of the host app and the team that it's running in uh you know would love to chat offline.

A

Maybe on we're trying to look at how we extend that capability so that you, you almost get all the information about what kind of teaming the host app is using and you can adapt to that.

B

So thanks so much for sharing that and it looks like muslim said, uh michelle shared some answers on his questions. I think we're good there.

B

So I really appreciate this great to see kind of the first peek at this and yes, we do have a couple of future sessions that will be lining up to dive a little bit deeper into this uh appreciate the links being shared and looking forward to folks being able to uh to share more about this thanks. So much, sarah really appreciate you being able to share this in here thanks folks,.