Microsoft 365 Community Microsoft Teams, 20 Apr 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Surfacing your existing solution in Microsoft Teams

Description

If you have web-based apps, they can be surfaced in a Microsoft Teams tab (iFrame). In this 15-minute Developer-focused demo, Rick Van Rousselt examines security options – start with protection built into your app and add external access control by Teams. Add apps on Personal (static) or Group (Teams aware static) tabs after adding app to App Studio. Build tips: Make your app Teams aware, use different contentUrl and websiteUrl, use responsive apps, use simple app navigation. This PnP Community demo is taken from the Microsoft Teams community call – April 2021, recorded on April 20, 2021.

Demo Presenter: Rick Van Rousselt (Advantive) | @RickVanRousselt

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

Let's get started so your existing solutions in microsoft teams. Well, of course, in the beginning uh of every company of course, has a web-based application. It can be a custom-based application.

A

It has to be web-based, of course, because teams is also web-based we're not going to run the exe files or even pod files in microsoft teams, but if it's web-based, then we can surface it in microsoft, teams which makes it accessible from where everybody's working and most people are working in teams these days so yeah, just a few clicks and your application that you either built 10 years ago or a year ago or whatever or even a third party application that you built that you bought somewhere or your company bought somewhere service teams, makes it yeah much easier for people to access.

A

You don't want to know how many internets I've seen that were just a massive amount of links, because people needed to find all their applications somewhere, so um themes isn't fancy or anything special. In that case it uses iframes, which uh yeah it's a well-tested um framework. It used that it's a web technology, that's already been around for a long time. Now it has it perks, it has its drawbacks. So yeah there are things we have to take into consideration.

A

One of them is security. So um if you once build an app you sh, if it's a web-based app, you should have built security into it. It used to be the x-frame options, making sure that your app was not iframeable, because if somebody can log in and they and they can iframe your login page, if you really want to try it out, try iframing the microsoft at the office 365 for microsoft, 365 login page. You won't be able to do that.

A

Why? Because yeah, then somebody can iframe your webpage with the logins and then put it on their own web page and then hide it with some css, and then somebody can steal your data or your login credentials so yeah. These are all all trusted and very old. The extreme options is already an old one. Nowadays, it's content security policy that will um yeah protect your app. So if you have, if you did your job yeah, not correctly but yeah, if it's an internal app, I I don't want to yeah it's not that like.

A

I always do it, but still it should be there, but it's not always there. If it's there, you have to take that into account. We'll look at that a little bit later, but yeah. Of course your app has security, but teams also have some security measures in place, which means that yeah normally, if you run something from a web page, then yeah making requests to different domains. Yeah, it's that's not allowed. You always have to do requests to the same domain.

A

But of course, if that was the case, then the internet wouldn't work because yeah we all had to host our own uh files and images and javascript files and whatever so yeah there is. There is a trick to it. Well, in teams, it's called the valid domain. So if we add a domain to our manifest, if we do the app studio, it's all automatic, but if we add entry store val domains that will make it serveable in teams so that team. That way, we tell teams hey.

A

You can do this, this domain, it's for me, it's safe, so we go ahead and serve content from it. Now the easiest way to get an application in teams is a static tab, so static tabs. A personal tab like you see, on the left hand, side of teams you can just within a few clicks, get something in there get a working application or an existing application inside of teams. Of course, do we need a more teams aware application?

A

So if we're building something from sketch or if we really need to have some something teams aware, then of course the themes sdk comes in the picture, but just to add it, it's pretty basic. We create a static tab and we're good to go. Let me show you now I have created the most fancy fancy app. You will ever see actually just file new project. New.Net start new project and you're good to go so you'll probably recognize how cool it looks.

A

So one give it one. Second, to start up there, we go should be running now yep, so I think everybody recognized this from the day they started development. So if you're not a developer, you can also do this. Of course, as long as you have access to deploy, apps and teams, you can also get an existing app inside of teams. So this is my cool company app where you can order lunch, so uh yeah, very ugly, but very basic. I think everybody who can yeah, who did a few lessons in development, can already build this.

A

So I need to get this running, of course, inside of teams now, because this is running locally. I of course also have ngoc running, which makes it servable from the web. If you have your web application running somewhere, if it's already an existing one, it should be serviceable from the web now in teams.

A

I think we all know that and if you don't know that, take a look at it app studio, easiest way to get started, because if you have to need to get an app inside of teams, it's with a manifest, we call the manifest it's json file. It describes. What's your, what does your app do? Who created it? What does the company name, what what's the features of the app so yeah? If you don't like json or you you're, just starting out, then this one is the simplest. Why?

A

Because there's a ui that will guide you into everything I already created one. This is, of course, my test app one which is a really cool naming because in other tenants, I'm already at the test app 595, so just give it a name give it. This is the things you really have to do. It has to give you unique id and a version number of corks and all that stuff give you give it your own name, nothing, fancy, but we add a personal tab within that personal tab, I'll just click edit.

A

For now we just give it a name and enter the id which is yeah, I think, for the people who come from the sharepoint background and internal name or something that defines it as a unique id just called tab again, and I just gave it my url, so just my normal, where my app is running this in this case, it's a public, url click save we click install. Of course you need to have permissions to do this. Not everybody can do this.

A

So if you want to, if you know the tenant admin- or you know the team's admin, then this is gonna or it's not allowed in your company. It's gonna be a little bit harder, but you can still download this package and maybe give it to a some yeah, some administrator in your company who can then install it. I can just click install because this is a demo application or a demo tenant, so I'm in full charge. Here I click on, add and already get my app running did.

A

I should be running here where's, my teams, I, of course the security, that's what I meant. So I built this app normally according to best practices, so I said no! No! No! No! You cannot iframe my app. So if you didn't build the app yourself if you're not developer, just ask hey mr developer man or if you're your own developer, just say. Okay, I want to make sure that teams at microsoft.com, where teams is running, of course, can surface my app. So now I'm allowed this, as you can see here, these are the x-frame options.

A

These are the old ones. Those still work in internet explorer, of course, but if you want to be modern these days, content security policy is like the new version, with a lot more options, so you can say uh yeah. Okay images can be that can be shown from this domain, and I can I frame it from this domain and so there's a lot more options than only just the extreme of the old one.

A

So I have it back and running so if we gonna try it again, so I just click refresh. We have our company app now some things so here I can order my lunch, of course, yeah cool. I got a cool, pop-up yeah, so um some things we have to take in consideration. Of course you already might notice it. We have our team's navigation here. We have other navigation here, so the about tab is here a tab we have because this was my original application.

A

We have some navigation here as well, which makes it of course, yeah. If you have a really complex application with a lot of navigation and a lot of um yeah a lot of stuff going on, it might get a little bit complex. So if you converting existing applications to be shown in teams, take that into consideration that- maybe you want to you know, put a small part into teams and not the entire application. The thing that's really necessary to be in teams and not the entire navigation structure, with the five million links in now.

A

I did this for c-sharp, but it doesn't matter it's it's iframe technology, whatever whatever you like from from a development perspective, if you have an app that's running, I don't know sap. As you can see here, this one is node, so I'm running node as well. I already created it in advance, so this is my of course, my test app too, and my really cool note skills which are not that nice should be running. Is it still running should be ah there? We go see how cool see in this one I already created teams specific.

A

Why? Because I added the sdk. So this is a node app, but of course I did it with the generator. So it already knows they already built in team specific uh javascript that can come. That makes sure that teams can talk to my app and my app can talk to teams which makes sure that I can get okay. This is my username but same story.

A

I can just put stuff into teams existing stuff. Now, if I go back to my test app one of course, how do I get specific? So let's say I okay. I have my app in teams, but I want to get specific. You know I want to get specific context in teams well, in app studio, it's really shown pretty good. I will show you in the manifest really the json file a little bit later, but, as you can see here, we have two urls. We can enter a content url and a website url.

A

Now, what's the difference, um the content, url is the thing that themes will show the website. Url is a thing that, if you click on the website icon in your app, it will open a second tab or a new browser depending on, if you're in the teams, teams teamsclient and it will open up this url. So this way I can say, hey in a query, string super simple. The context now is teams- and I can even say a teams also provide me with some additional data.

A

You can view whatever the few things that you can get from teams that teams can serve to your application in the query string you can find on the documentation. Of course, it's like a tenant id or or sometimes the the channel id or the team's id. So depending on where you are in this case, it's a static tab, so I can get my username.

A

So, let's save this one, let's see if I can install the new version, I didn't update it. So, let's see if it works, it could be that I have to bump the version. Oh no see we're already good to go so in this version nothing fancy, nothing specific yeah, don't shoot me! It's really ugly. Actually, I'm almost embarrassed to show you. So if I look here, the only thing I do is get the context out of the query: string get the username out of the gray string if it steams.

A

I have my special layout, so my special view, without the navigation and with the added hello rig so hello, my username and I just show that, while, if it's not then I'll just use my normal application, so if I now click see this is the website icon, if you click here, just open up the normal application.

A

So this way you can just surface your application, pretty basic, pretty simple in teams of course remember what I said about the valid domain. So if you go here, that's a cool thing about app studio. It already does that for you, I didn't show you that, but it does because it just works automatically in an app studio. If you go to domains and permissions, you will see it already added my domain here. Why? Because it's figured out from the tab hey. This is the domain.

A

I can't even change it just read only so absolutely you're, smart enough, of course, if you do everything from the manifest directly which yeah, if you get used to developing for microsoft teams, you do it like this. Then of course you can do whatever you want, and you can of course delete it here. Remember if you're doing stuff like this- and you have weird issues like I just had- that it doesn't want to show it or something like that.

A

Then this could be one of the problems and because it's browser-based, of course, we can even use the browser, geolocation or media. So you can do a lot of normal stuff that you can do in normal web development as well.

A

Now, if we go back to my presentation, so quick wrap up so um things to consider okay, responsive web design- I know it's been around for years, but yeah still not all applications are, and you are already running inside- of teams with the team's navigation so be in the team's client. So yeah, I wouldn't add a web application from the 90s in there because then you're gonna see some weird things. Don't do that now, like I said, teams already has navigation so adding more and more layers of navigation onto it.

A

Yeah it's not not gonna make your users uh have a a simple program to use or a simple application to use. If you have the time so quickly, add your application, two teams. Will it won't? Take you that long? But if you have the time, make your application teams aware by implementing the sdk it's even if it's just switching the team of teams.

A

So if somebody has the dark team or the light team, switching that with your application, with with the look and feel of your application, makes a whole world of difference and, of course, adding a different content. Url and the website url gives your application the ability to know if your user is visiting it from teams, so that was super fast superfly.

A

I hope you guys uh enjoy it and uh yeah. Okay, I think stefan already did the intro. um If you want to know more select, the texas show back to you, vassa.

B

Excellent, thank you rick. I have one question for you: why would you expose your existing application in teams.

A

um Because yeah people are working now, these days more and more in teams, and I think there's a lot of studies out there now these days. That say, if you switch focus too much that yeah, it's not good! You you lose time. You have to get back on track if you're already in teams you're already working there. It's super easy, just even if you're in a meeting, I don't want to open up my internet click on the next link to go to my crm system.

A

Then click on the next system link to go on the sales system, because that's in my mind the way I have to go to that system and then find my information. No, if I'm in teams, I can find my information there, while I'm I'm needing it, I'm having the meeting or I'm I'm having a conversation about it. So that would be.

B

Yeah, I I was pretty sure that you have a good clarification on that as well, because I think you covered that in your book as well. So that's what we're saying.

A

Thank you so much. Thank you. Rick.

B