EP 29: Mastering Custom App Development in Microsoft Teams

Transcript for this Episode:

INTRODUCTION VOICEOVER: This is Tech UNMUTED. The podcast of modern collaboration – where we tell the stories of how collaboration tools enable businesses to be more efficient and connected. With your hosts, George Schoenstein and Santi Cuellar. Welcome to Tech UNMUTED.

GEORGE: Welcome to the latest episode of Tech UNMUTED. I'm not actually sure what we're talking about today, Santi.

SANTI: I did that on purpose because I wanted to surprise you. [chuckles] George, you remember early on when we started this podcast, one of the things we would say is, "Man, Teams is really becoming like the central hub for everything." Right?

GEORGE: Yes.

SANTI: And, "Hey, we can do just about anything in Teams." It was that one thing that you and I said, "You know, there's one thing we can't do in Teams." Do you remember what that was?

GEORGE: I do. It's email.

SANTI: It's email. Microsoft has no plans, by the way, on adding email to Teams. What if I showed you how you, as the average user, can create an app to allow emails to be viewed in Teams? Would you like that?

GEORGE: Sounds like a plan. Why don't we take a look?

SANTI: Let's do it. I'm going to share my screen and show you real quick how to add email to Teams. The first thing we want to do is we want to go to this portal. It's called the Development Portal for Teams or the Developers Portal. The address for those who are listening, the address for that is dev, that's D-E-V.teams.microsoft.com. Basically, you log in using your Microsoft 365, your Office credentials, basically. This is your starting point. This is a, I hate saying no code. This is a low-code developer's platform. That means that anybody can do this. Watch how easy it is to create an app here.

We're going to click on Apps, and there is a button on the upper left-hand corner that says New App. We're going to go ahead and do that. We're going to give our app a name. I have learned that the simpler the name is, the easier it is to find this app in the future. I'm just going to call it Email, literally. We're going to call it Email. We're going to go ahead and click Add. Now it begins. It starts off at the basic information tab. Here's where you can add a description. By the way, you have to add a description. I'm going to go ahead and just type in here, web access for email.

As you scroll down the screen, you're going to see immediately, the first thing you see is something called an App ID. Now, this App ID is generated by this developer's portal. This is a unique identifier for this specific app. However, I don't want you to confuse this particular App ID with a second App ID I'm going to show you in just a few minutes. Unfortunately, they're both called App IDs, but they have a different function. This one is the App ID for this particular app generated by this developer's portal.

GEORGE: Do you need any specific permissions or access or anything to do this?

SANTI: No, not to do this. You will need permissions, though, to publish it. That's where I'm going to show you how we make this available in Teams from an admin perspective.

GEORGE: Got it.

SANTI: This is end-user access right here. I'm going to get a short description. Just basically access your email in Teams. I'm not going to type in a long description. I'm going to, for the sake of time, I'm just going to copy the short description, throw it into the long description. You can track your versions here. We're obviously on Version 1.0. This is where you would do that. You would track your versions here as you develop a new version to this app. Developer company name. We're going to call this Tech UNMUTED, Inc. Does that exist? [laughter] We're going to say it's TechUNMUTED.com for the sake of this. It does want the HTTPS prefix. It won't take just the domain. Perfect.

It's going to want you to add a URL for the privacy policy. I'm going to make one up here. I'm just making up these URLs as I go along for the sake of this demo. Also, for your terms of use. Perfect. That's it. That's all you need from this basic information tab is basically the name of your app, your short description, your long description and the company name, URL, privacy policy, terms of use. Just add all these URLs in. Now, look where it says Application and then (Client's ID). See that? That is not the application ID I previously showed you. This is an application ID that is generated by Azure Active Directory.

What is this for? We're not going to demonstrate this today. What this is, is if you want to add features to this app that are driven by Microsoft Azure, an admin would have to register this app you create in the Azure portal. That would generate a unique ID that you would use to put in here.

GEORGE: That would be consumption-based or something else, right?

SANTI: Yes. Notifications, bots, AI functions, stuff that comes out of Azure.

GEORGE: Got it.

SANTI: You would have to register this app in there and then it would generate an App ID and you throw that App ID in here. For today, we don't really need it. I'm not going to go into that level because that's more of an admin thing. I'm going to continue with the end-user experience. We're going to hit Save. There it is, the basics of the app has been saved. If you click on Branding, this is where you can upload your custom icons. We're not going to do that today. You can generate, it gives you all the things you need to know about the size of the pixels and whatnot. Then you upload your custom icons here.

App Features, which is the next option on the menu. This is where you add what the app is going to do. Some of these things you need that Azure App ID I referenced just a few minutes ago. For example, if I wanted a bot or if I wanted to have activity feed notifications, those things come from Azure. None of those things will work. The one that will work is this first one called Personal App. Because I don't need Azure for this particular function. We're going to go ahead and create our first tab. This is what we're going to see in Teams. When we click on App, on our app, the first thing that's going to load is going to be, well, Outlook.

We're going to create this personal tab. We're going to call this Inbox. That's what I'm going to call the tab Inbox. The content URL, and I have it here because I opened up my OWA Outlook Web Access, so I can grab the URL. We're going to put the content URL, which is basically HTTPSoutlook.office.com/mail. The website address is going to be the same, except I'm going to get rid of the mail portion. Just leave the outlook.office.com. Scope is personal. Down below where context, you click on the dropdown and just choose personal tab. What we've done here is we've configured what the app is going to do.

The app is going to produce a tab, a visible tab, and it's going to load the content from that URL. What's that URL? That's Outlook. We're going to go ahead and hit Confirm and hit Save. By the way, by default, it will add a second tab called About that's generated by the system. Inbox will be first, About will be second. It's basically grabbing all the basic information you filled in that earlier tab. All right. I'm going to click down now. That was App Features. I'm going to click on Permissions for a minute, and we're not going to do a deep dive here. There's just two things I want to do here.

GEORGE: Wow.

SANTI: What it will not do is if you leave the app, so let's say I'm in the email app and I go back into my chat, it will not produce any badge or anything that says, "Hey, there's something new happening in the app, you need to come back and look." That function comes from Azure, and that's where we need that application registered in Azure, but we're not doing that today. You can do this from a device perspective, you'll get a little audible that you have a new email. There's a lot of other permissions here that we're not going to go into. There's permissions around Team itself, around chats and meetings and around users.

It's a great thing to just spend time reviewing this. However, there is explanations for each of these. It tells you when you click and expand on these, what the functions are, and there's different API calls here, too. Again, we're keeping it simple for today. We're just checking off, send the user notifications and open links and external apps. I'm going to click Save. There's a single sign-on option. We're not going to do a single sign-on today. For this particular example, we don't need it, because I'm actually just logging into Outlook online, and I'm already logged in on my Microsoft 365 account. We're good, but there is a single sign-on option. Also, languages. You can add different languages to this, but we're not going to do that today. Then finally, domains.

Here, I want to make sure that it is recognizing the domain. I'm going to copy the web address again and come back here for Outlook online. In this case, it just wants the domain. It doesn't want the HTTPS. Whereas previously, it required it here, it just wants the domain. The domain is outlook.office.com. That's the only thing that you do there. At this point, this app is ready.

GEORGE: I see it.

SANTI: There's nothing else we have to do. Now, we're going to go ahead and publish this app. You ready? I'm going to click Publish to Org. That means it's going to publish to our organization, meaning it will not go to the store. It will go to an internal section of the apps within Teams. I'm going to go ahead and click Publish. Publish your app. We're going to wait for a confirmation that it has been published. Hold on. There it is, status submitted. From a user perspective, that's all I have to do to create an app inside this portal. The app is created. However, now, in order for this app to show up in Teams, you need to have your Teams admin publish the app.

I'm now going to switch roles. I'm going to put on my admin role for a minute here, My Hub, and I'm going to switch. I'm going to go into the Teams admin center. As an admin for the organization, I'm going to go to applications. It's actually called Teams Apps. There's a tab called Manage Apps. If you look here, as soon as this loads up, it should indicate here that there's one app pending approval. It's loading up. Here it is. Pending approval says one submitted custom app. There it is. Now, as an admin, I need to publish this so that it's available to my users in my organization. The best way I found to do this, because even though you have this pending approval, none of this is clickable. It's not like I can click on this. We named our app what? Email, right?

GEORGE: Email, yes.

SANTI: I'm just going to search for Email. There it is. There's our app. Right now, by default, it's blocked, but we're going to go ahead and fix that. I'm going to go ahead and click on the app. As an admin here, I'm going to go ahead and publish it. This is going to push the app out into the internal store. Again, when you go to Teams and you click on Apps, you can look at the App Store. There's a section of that store that's only internal to your organization. Let me show you what that looks like. It does take a few minutes for everything to flow through and publish. Let me switch to now Microsoft Teams. I'm back as a user. Here I am, I'm in Microsoft Teams.

If I want to add an app, where do I go? I go to the app icon in Microsoft Teams. When you do that, you're going to see there's a section here called Built for your Org. That is where this app is going to show up. In fact, it's already here. There it is. See it? It says Email Tech UNMUTED. Built for your Org. I'm going to go ahead and click Add. I think it's still flowing through because the button that says Add doesn't show up yet. Let's give it a second here. It does take a minute for it. Let me refresh it. It takes a minute. Once you hit Publish, it does need a couple of minutes to finish the process of publishing.

Let's try one more time. It's not letting me add it. Hold on. Let's do it this way. Sometimes I find that if I search for it here, there it is. See, it hasn't flown through. Look, there's the Add button.

GEORGE: Interesting.

SANTI: I've seen this happen. It just takes time for it to finish its thing. I've done it before. If I search for Email under the search field for apps, somehow the Add button shows up sooner. No, it didn't work here either. Let's see here. There's no Add button, George. [laughs] This is what happens when you do a live podcast, right?

GEORGE: Yes.

SANTI: This is the whole point of this. I must have missed a step. I don't think I did. Let me just check real quick here, just to make sure. Now, I'm pretty sure. The app is ready to go. I think it's just a matter of letting it finish its process. Because permissions are good to go here, the domain's there, and the app features here. Let me make sure. Oh, it didn't save my tab. Did you see that?

GEORGE: Yes.

[silence]

SANTI: We are not. We got this. I'm going to just add the URLs again. I must have missed a save. No, I could have sworn I hit Save here. Remember, it had the Inbox.

GEORGE: I thought you did that, actually.

SANTI: Yes. For some reason, it just didn't take it. Now, what I have to do now, because I made a change? I need to come here and update the version. I'm going to put a 1 at the end. It's a good thing we're doing this. Hit save. I'm going to publish this now to the org.

GEORGE: Do you have to go back in and improve again?

SANTI: I do. I'll say 1.0.1 because I updated the app version. See, this has now been updated. I got to go back into the Teams app real quick.

GEORGE: Does the end user who would pick up an app, install it and add it? You make an update on the back end, does it dynamically update, or do they need to--

SANTI: No, I have to still see. Look, last updated, right?

GEORGE: Got it.

SANTI: It should show me the version number here. I'm going to go ahead and hit Publish because there's been an update. I'm going to hit Publish here. The admin always has to publish it. Yes, even if you create an update, you have to let your admin know, "Hey, I made a change. Can you just go ahead and approve that?" Now we go back into Teams again. Now we're going to hit Refresh here because now we're looking for a new version. [chuckles] Let's refresh this real quick. Remember, the old version was 1.0.0.

GEORGE: 1.0.0, yes.

SANTI: I just added a new version. It should have a 1 at the end now. Let's take a look here. This is still the old version, see?

GEORGE: Yes.

SANTI: Let's just--

GEORGE: Do you want to do your search thing again and see if that brings up the new one?

SANTI: Yes. Usually finds it first. See, it hasn't published it. It takes about two minutes. Every time I do it, it takes about two minutes to get it. We're close, George, I can feel it.

GEORGE: Yes.

SANTI: [laughs]

GEORGE: This is good. These are the steps people are going to have to troubleshoot, right?

SANTI: Of course. Not only that, the whole purpose here is you have a low-code platform now where anybody can develop an app. That's brilliant. You just have to know that some of these things would just take a little time. Here's the new version.

GEORGE: There's the .1 and the add.

SANTI: That's right. Here's the version now .1, and now I can add it, so I'm going to go ahead and do so.

GEORGE: The thing to keep in mind here, we're 20 minutes in, right?

SANTI: Yes.

GEORGE: We're 20 minutes in without having to go back and do a fix. It's so quick to-

SANTI: There it is.

GEORGE: -be able to build these custom apps.

SANTI: I just built an app, George. There's your email inside of Teams.

GEORGE: Nice.

SANTI: Awesome. We just did it live on a podcast. Look, here it is. I can access it. Now, this is not my inbox. Obviously, I'm using a Sandbox, so it's a Sandbox mailbox, but as you can see here, you can access all your emails here. If you had to, you could potentially just click and access all the other features of Outlook, but the whole purpose here was to add email to Teams, which was missing, and now we have it, and so there you go, folks. Let me just stop sharing. I know it was a lot of steps, but honestly--

GEORGE: It was and it wasn't, right?

SANTI: That's what I'm saying. It was and it wasn't. Meaning, when you first do it, you're like, "Oh, where do I start?" I've done it so many times now that I can just breeze through it, but literally, I just showed everybody how you can take the average information worker and say, "Hey, you know what? I have an idea for an app." They can go into the dev portal, create an app from scratch and then publish it, just like that. George, happy birthday. I just gave you an email app for your Teams environment. [laughter]

Folks, this brings our podcast to an end. I hope you enjoyed this one. Go out there and write your new app.

Your organization's admins will either love you or hate you for it, but listen, this is a good time to subscribe. Go ahead and hit subscribe on your favorite podcast platform, including YouTube. Until next time, stay connected and stay curious. See you all next time.

CLOSING VOICEOVER: Visit www.fusionconnect.com/techunmuted for show notes and more episodes. Thanks for listening.

Episode Credits:

Produced by: Fusion Connect