Microsoft 365 Community Microsoft Teams, 17 Mar 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Gmail migration app in Teams from the Microsoft Hackathon

Description

In this 11-minute developer focused demo, Tom Resing and Mark Allen show off a Microsoft Teams app sample that allows users to migrate Gmail inbound email filters as Outlook new message rules. Two migration options – fetch filters directly from Gmail or Upload a Gmail filter export (XML). Uses Fluent UI controls, Teams Toolkit, Graph authentication and client side React scripting. Verify migration configuration in Outlook Rules. Presenters step through code for both migration options. Works reliably on Teams web client, needs adjustments for Desktop client. This PnP Community demo is taken from the General Microsoft 365 Developer community call recorded on March 17, 2022.

Demo Presenters
• Tom Resing (Microsoft) | @resing
• Mark Allan (MVP) | @MarkXA

Supporting materials:
• Move Your Filters app - https://github.com/pnp/teams-dev-samples/tree/main/samples/tab-move-your-filters

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

I'm really excited to be here with mark, and I want to talk a little bit about the inspiration, so anybody have an email inbox, that's out of control and mine is right. Now, honestly, I think there are emails I need to respond to from uh five days ago, at the least I had a colleague at linkedin who was uh in a bit of a concern over her lack of control. She tweeted don't expect to hear from me today.

A

I just got migrated from gmail to outlook, as you know, microsoft acquired linkedin five years ago and they were using gmail and she was part of the beta wave of moving into outlook. They moved her inbox and they didn't move the filters she had for all of the distribution lists she was on, so she couldn't find any of the emails she needed to read and respond to from all the uh junk that was in her distribution list that she didn't normally read.

A

So I looked into this and tried to understand how I could help her. I thought there must be some tool that would do this. I couldn't find any so I did a quick proof of concept in plain javascript five years ago at that first, microsoft, hackathon and I've tried for the last few years to see if I could get it integrated into the product, and I apparently failed to make the business case.

A

So I pivoted last fall when I saw that mvps were now included in the microsoft global hackathon for the first time and pitched the idea and luckily found uh a group of contributors led by mark really on the strong contributions and also sid who bob had pointed out, had submitted a team sample uh earlier this week so I'll hand it off to mark for a demo.

B

C

Right so so this is, you know some gmail filters that I've set up here with basically some filters that do most of the things that you might want filters to do and the basic problem we have is that yeah we, you know we we work for somebody, who's been acquired and we're all shifting over from gmail to m365.

C

um We want to get these these copied over, so we want to either export these filters in some way or just get them copied over, so that although our email has been set up and our folders have been set up, we don't have the these filters going.

C

um So what we did is we set up teams app to do this. um The essential point here is that you know you're already in teams you're already authenticated into microsoft, 365 once you're in there, and it means that in theory this is a nice easy place for you to go and load up. You know you know, sort of a tab in this case which allows you to do this import.

C

So yeah, it's it's it's a it's a it's essentially very, very simple. Looking up so you come in, you can either use that export and simply just upload the xml here. um What we've also got is a built-in fetch gmail here. So what that will do if I hit that that will fire up the normal google oauth flow go off to my gmail account and actually pull those filters in so doesn't use fingers.

C

um So you can see here what we've got um we're using the you know the fluent ui controls here. So that's pulled in those three rules. We can turn them on or off, um and you know essentially that that that's pretty much the guts of it is, you know it will go off and fetch your filters. And now, if I hit move them.

C

Right I've been wearing green, I'm in ireland said patrick's day. The luck of the irish should trump the demo gods. I've seen this work. That's I promise you. This does work.

C

Okay, I'm not going to try and try and debug that now, but essentially that just will take you to a final screen that says: hooray. You've imported three filters: click here to see them and when you click here to see them, it will pop you through to your rules, pop-up in outlook, and you should then be able to see filters and adjust them and show them.

C

I should point out at this point: I am an azure mvp. I have not a clue what's been going on in the rest of this call. um So part part of the point of this. This particular sample is how easy it is, in theory, to get all this stuff going when you know nothing about 365 or graph at all.

C

um You know my main expertise coming into this was was react, which is where I came in so we'll we'll switch over to the to the react bit because that's a bit easier to go through um so yeah. Essentially, this is a fairly simple teams, toolkit app so yeah we've installed the teams, toolkit visual studio code extension and that scaffold, something that looks pretty much like this. So yeah we've got our library stuff in here for using graph and things already there.

C

So you know that we've got the two things here. So we've got a filter upload there, which is a fairly simple thing. You know not really related to 365 at all um the slightly more interesting one here is this gmail fetch. So what this is able to do is we can use a standard react. Google login feed it in uh fluent ui button, as you saw that all connected up nicely gives it gives us the thing.

C

Yeah we've got an error message here, which is an error message, control which you just saw in fact, which shows an official team's alert. But you know the nice thing about this. Is that you know we can go in. We can pop up the login and get the airwolf going within the teams app. um This works reliably on a standard web teams, um depending on the version of your desktop clients. Sometimes it does sometimes it doesn't.

C

uh Tom has seen it working either in the desktop client, but with the the version that I've got that that bit doesn't work. So you you know, you may find yourself having to use that backup of importing the export.

C

um But what we can do here, you know we can just go off within here: go and fetch off veteran information from each of the criteria and turn that into a standard format which will then pull in so we've got here. You know that's the bit where we actually display everything. So that's pulling through all your various.

C

You know text items for each of the things that are in there, so you can see all the things that we're displaying there and then in you know the final stage where we actually pull it in when it's working um yeah we've got a fairly simple thing here. We just use that use graph library thing that the teams toolkit gave us it comes in.

C

We then just go and get a couple of older ids and rules from the graph, and then we can just go through each of the filters turn that into the format that outlook is expecting and then just go and post that up as a new message rule so yeah.

C

In theory, we just got a few few lines of graph api code there and hey presto: we've imported all our gmail filters as outlook rules, and then you know that that's the bit that you didn't see, but migration complete head off to outlook, go and see the rules.

C

um So yeah, that's pretty much. You know what what's going on in there um I did put in a pr for this. um I'm told that the person who was checking the pr couldn't get it up and running so I'm going to add some extra magic and throw a dev container in there.

C

So hopefully, when you go and get this from the from the samples repo there'll be a dev container in which means that you can just tell teams to run it in the dev container and that will automatically pull in the toolkit extension for you and have everything.

B

Probably talk, it's got some connection to whatever tenant you are debugging in so you might want. We should talk offline, there's some, maybe some stuff in there. You don't want to ship. So just let's, let's try yeah.

C

We'll get that going around it, then we can be sure that it all works perfectly on anybody else's machine, because that's what containers are for so.

B

Yeah, no, I I get that. I get that that's great thanks. I really appreciate it.

C

um But yeah that that's that's it for the demo. um If anybody has any questions or if tom has anything further, he would like to say I I I I should just say I said thanks again to sid and rewards who did some of the code for this. I I just kind of pasted it together and gluten did all the glue and added a bit of ui to it. So thanks to them, and thanks to microsoft, for letting us in the hackathon yes this year.

C

Yes, it's quite quite a privilege to be involved in the microsoft internal hackathon.

A

Yeah great thanks mark. I just want to encourage you if you're, an mvp or original director. Please join us in the next microsoft global hackathon. I was really excited to be able to uh hack with three uh mvps that last year and if you're not an mvp, keep up these community contributions and then reach for it very.

C

Cool, yes, that was purely some client side script. Not that that whole thing is react, so you don't have to host it on an app service or anything. You could, in theory, just shove it up in storage or static web app or something, and that would all be all be cool when you're actually deploying it live.

D

Awesome yeah, that's very cool and- and I mark I appreciate you mentioning that the m365 uh landscape is kind of new to you as an azure developer. It shows how ease the ease of extensibility there is within that landscape. So uh really thank you for sharing that and pointing that out all right, great stuff. Next.

B

Really cool demo thanks guys.

D

Yeah absolutely.