Microsoft 365 Community Community Demos, 22 Dec 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Extend Microsoft Teams apps across Microsoft 365 (Outlook and Office)

Description

In this 15-minute developer-focused demo, Markus Möller steps through how you use the same Mail Storage app – a static Teams personal app, in Teams, Outlook and Office.com to store emails with attachments in (Teams, Outlook, OneDrive) based on host environment (detected) in which the personal app is running. Microsoft Graph open extensions detects and links to mails already saved. Requires TeamsJS SDK 2.0 (SSO), yoTeams v4.0 (instance) and Teams manifest 1.13 or greater. Sample available now.

This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on December 22, 2022.

Demo Presenter
• Markus Möller (Avanade) | @Moeller2_0

Supporting materials
• Article - Extend Teams apps to M365 with SSO the right way | https://mmsharepoint.wordpress.com/2022/08/31/extend-teams-apps-to-m365-with-sso-the-right-way/
• Sample - Tab Office Mail Storage - Microsoft Teams App | https://github.com/pnp/teams-dev-samples/tree/main/samples/tab-office-sso-mail-save
• Documentation - Extend Teams apps across Microsoft 365 | https://learn.microsoft.com/microsoftteams/platform/m365-apps/overview
• Article - M365 Across App scenarios - Teams apps and SPFx | https://pnp.github.io/blog/post/microsoft-365-app-scenarios/

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

Just want to give a quick intro on how to extend teams apps to Microsoft 365 across apps, so to use to reuse them and Outlook and office I'm reusing a sample which the die-hard audience of this kind of cards might remember from a different technical scenario, but uh come to that in a minute. First I would like to quickly introduce myself for those who still don't know me.

B

My name is Marcus Miller I'm working as a Microsoft 365 developer expert for Evernote in Germany I'm, a Microsoft MVP since nearly Advanced, it's a bit more than 12 months. If you want to get in contact with me, try to reach out I'm still on Twitter or you can use my blog and contact me there over my articles and comment if you like, as you might know, from my different presentations, I already like to start directly with the demo.

B

So what I would like to show today is how to save Full mails, so not only the attachment, also, but the full mails to Pilot teams or OneDrive and even mark them as safe, so that you do not do it twice or different times. This scenario is taken from an older idea: I think it was two and a half years to three years back when it was an option to use Outlook add-ins in SharePoint framework, which was a bit of that birth.

B

I think um but I try to reuse this now in this sample and why I try to use this I will come to later, because I see something at the Horizon there as well. Okay, let's start with first demo.

B

What we need is a team's personal app. We have several ones here and what we are talking about is the main storage app.

B

The main storage app will show us the most recent uh very simple, the most recent match. We have an Outlook and uh we can pick one and we can press save and then what we open up is our current available Microsoft teams. We can go to One browser that go into the general folder go into any subfolder. You will be prepared here and save the mail yeah.

B

This is still demo here, um so this was I, think I have to get rid of it, but uh nevertheless, I can show you directly that I'm getting the ID of the give mail. Let's check the result.

B

If you remember, we were in the I think it was the retail team and General tap in the file solder in the PMP demo coil, and there we have a mail from a few seconds ago.

B

We can open that up.

B

And there is our mail and it's stored or archive depth as well yeah. So this is a simple Microsoft teams application, but it is not really related to teams yeah, because mail is involved. You must not start in teams. You can also store the OneDrive or SharePoint or whatever you can think about. So, let's see how we can act with the exact same app from a different perspective, let's jump to Outlook. Therefore in Outlook we also have an app button. We have the mail storage app here.

B

It's already installed it's already there, and what we can do now is what you can see here at the right side: yeah, um it's a little uh storage icon, so I already recognize hey. This mail is already start somewhere when I try it again. I get a more deeper information about that.

B

I already started somewhere in my system. Now, I will cancel it here, because I only want to do it twice and therefore we can directly jump to the third option. We have to use to reuse the same app. Once again, we can go to office.com, which will become Microsoft 365 apps in the beginning, and here we have also some apps, and here we have some standard apps, but also our main storage app same rendering.

B

Once again now we can start with a big mail, for instance, and save that one and what's different here now- is now I'm, detecting that I'm, not in teams anymore now I'm in office in uh in in Outlook. It was the same. This is my scenario that I'm using not teams as storage location anymore, if I'm outside teams so yeah, now I'm using OneDrive.

B

You can detect this from my yeah, very fantastic folder names go to the PNP call Demo prepare to your Pros, save the mail once again shouldn't take much time, let's check it and go to our OneDrive.

B

And there we are- and here this takes a bit time of loading, but this is on purpose. You might have seen the fire size in the OneDrive folder there. We have a very big mail. This is also for demo purposes, because it's an essential when you store files, um you have to distinct between small files, smaller than four megabyte and big files, bigger than four megabytes- and here this was my I think- was my biggest shot last year out in the wildlife.

B

Nevertheless, that was my demo. Let's talk a bit about the backgrounds. What do we need to get this up and running? It's quite simple: we need a TM static, personal tab application. You have seen that it's essential that you use the teams manifest to wrap around the app with version 1.13 or above.

B

We also need the teams JS, SDK, 2.0 or above for instances. We can also use the detect. Where are we yeah? But we'll see this uh in a couple of minutes and to have that or up and running, for instance, when I'm working as always, it's uh the Yeoman generator for teams. Here you need the version. Four.

B

uh At least because this uh supports all the uh things above so the Manifest 1.13 I think was even a version earlier, but the team's JS SDK 2.0 is only available since version 4.. The scenario was quite simple, but there's much more and you also know not really uh yeah bound to the Yeoman generator for teams or teams, native apps or I call it in general. So here is only a very small scenario that I'm showing I'm, showing a personal app realized with teams app or in Yeoman generator or could also have used.

B

The team's toolkit also yeah, and this is what I'm reusing inside teams, Outlook or office.

B

This shame would be achievable with SharePoint framework, for instance, yeah there's only one downside, I, don't like too much SharePoint framework here in this case, because I might deal with really big file sizes and then I would have a client server ping pong uh with a SharePoint framework, while I'm in a teams. Application I have my backend, which does all the things for me foreign.

B

But what is also available are so-called search based messaging extensions. They can be realized in teams since I, don't know a couple of years and since recently, also in Outlook, so we can pick cards from your search results and put them directly into an Outlook compose things, I'm, currently writing or working on a sample using that you can also realize, uh with SharePoint framework and teams in parallel in teams is uh the action-based variant of messaging extensions.

B

This is a bit more ritual and I'm really really praying for this to come to Outlook as well I already covered. What do we need for the Manifest yeah quite easy?

B

We need the version 1.13 and that's all static, Tab and the scope personal nothing else is needed.

B

The second thing is what we can do and what I did you remember that I was storing either to teams or to OneDrive? Is you can detect in your app which kind of host which kind of Microsoft 360 price product I'm running in yeah, so I might either run in teams or what I'm doing here is, if I'm, not in teams in Outlook or in a default way, then I use a different component, then I use here. My OneDrive component, um while I, was using um sorry all right.

B

Here's my OneDrive component and teams I would use the teams component yeah and uh just to add this, it's not in the code side here, but this sort option we have. If you want to detect it specifically, is also office at the third pillar. In the scenario, what I was also using the sample for is to illustrate how to use a single sign-only because, of course uh doing some graph calls in the back end.

B

They will need single sign-on for this and why I'm doing this in this way, um I'm showing here so I, try to do as much as I can on the server side. Only so the only thing what I need to do really on client-side is get my initial bootstrap or ID token, which represents the user. It's already authenticated inside teams or office or Outlook, and then I directly call my backend operation and the backend operation. Does all the additional thing for me: I have to exchange the token to an access.

B

Token, therefore, I might need a secret for my app registration. All the things only available on backend side I do not return the token to client-side I directly call my third party API in this case My Graph things and what I finally only do and what only reaches the client once again is my result. Nothing else so question would I do that on client side as well.

B

No I wouldn't do it if I can prevent and I've seen samples, also on Microsoft site. Unfortunately, who are doing that we are sharing the access token on client-side and so I do not appreciate that I mentioned they say. My demos were showing to you different, uh my my small digest uh mail, where this is a big uh picture map, so we have to distinct or we can distinct in the code if we are using. If we have a bigger mime content length so bigger than four megabyte, then we need a resumable upload session.

B

If not, we can simply upload it. Of course you can do the resumable upload session, which we I'm, showing on the bottom here. So I press create a section and then I can push my slices yeah, the first 320 kilobytes and so on and so forth. I could do that as well for smaller males, then I would save a lot of code yeah, but I, wouldn't uh yeah I would try to the simple wherever I can. So.

B

This is why I'm distincting between smaller and bigger file sizes here and the last thing is- you might have seen that I'm detecting that I already saw the mail yeah so that I do not do it twice or that I can prevent this. Potentially, how do I achieve that yeah? Of course, I could have a database or SharePoint list in the background and write down every mail I already started yeah, but would make sense.

B

But if you sing to achieve this Microsoft graph open extensions with Microsoft graph, open extensions, I can simply adjust any kind of simple metadata of my choice to Microsoft graph objects such as my mails, so I could even write a shoe size of the author of a male to email. If I would want to that's quite easy, simply yeah, you have to have a name, a unique name and write this as a extensional property.

B

That's an alternative. This is the schema extensions. This is a bit more robust and you can also query for males. Then, in this case you cannot so I cannot retrieve all my mails of my inbox that are already saved. That's not possible. I can only get an additional information if I have a mail. I can ask a do. I also have an extension or not okay, but this is how I was uh getting this up and running.

B

That I was already remembering hey this mail got stored somewhere else already, that's all for my site, as always, some resources about the shown content, so I have a blog post about that. The code is already shared as a PNP sample. There's some Microsoft documentation around this M365 apps and I also wrote an article on the PNP block about the different scenarios.

B

You remember the table, for instance, I was showing uh this is what bit more illustrating and just as an outlook for the early 2023 I will come up with another sample who will show all the missing things. So how will show not only how to realize it in teams, but also the same in SharePoint framework yeah? We will also realize such an uh the research-based messaging connector, and uh this is what I'm currently working on and stay tuned for this and see you in one of the next calls. Maybe for that to demo.

A

Awesome Marcus really good job I mean always always you do amazing work, uh but really love how you show the scenarios and you well documented and identified the what and the why and the where you're doing it. The code really great job uh super super stuff. Can't can't wait to see your next sample as well. So thank you for sharing that and putting it into the repository everybody. You can get that the links are in the chat as well, so great job Marcus. Thank you, you're rocking it.

B