Get started building Microsoft Teams apps

Key Takeaways

hello and welcome to another video where we're going to learn together the core concepts of microsoft teams application development this video is going to be your complete guide to know how you can start developing apps for microsoft teams let's jump in how are you doing bob i'm doing great and i'm really excited so many of our partners and customers are looking to build teams applications and they don't even know where to start so i'm hoping that this video can help them figure out what it is that they would be building and where to start exactly and if what if they already have something that they've built they can bring into teams that's also something we're going to look into right it's true a lot of our documentation assumes you're starting from scratch and while that's certainly an important use case a lot of our isv friends out there they've already invested in a big application they're not going to start over again so we'll cover that too exactly yes let's do it yeah i thought i would show a quick demo that um even maybe some people haven't even seen microsoft teams so it's i thought i would start with a quick demo that shows even teams out of the box very briefly and then all the different places where an application could run and how that could help users in their daily life cool let's see it so we're going to start with a consulting company called adatum and uh and just sort of a day in the life of how they would use microsoft teams so our story opens where i've gotten an email from tony smith who is one of our sales uh representatives he has some really good news that we just won a big deal we won the contoso deal which is great except for uh he just sticks it in at the end that oh we agreed we'd start on monday what like we don't even have like the lead um you know for this project hired yet so um that puts me in a bit of a predicament also it'd be nice if tony would use teams because it's really better than email so we'll we'll see if we can get him to start using teams off teams and you can see i actually have an app uh pinned here at the top which is the get started app yeah um just some other things there's my activity feed this is where i go in the morning just to see what is uh waiting for my attention so anything that requires attention kind of those alerts all build up here i've got a chat place where i can have chats with people or bots throughout my organization just informally and then there are teams which are more organized they're topic based they have membership and and then there are channels underneath of there you can see here the recruiting channel has a confidential channel and two public channels where we can work on our recruiting efforts together there's also a calendar here this is the same calendar that i use in outlook inside of microsoft 365 but i can just easily find it here just so i don't have to switch applications so much i can make phone calls depending on the plan they could be regular phone calls or just through teams and then i can get to recent files here's another app this is a first party app that comes with the product for shift management so if a team of people are actually working in say a retail environment or manufacturing environment they can actually swap off shifts and see what the schedule is right here nice and then applications so these are just all some of the applications that are available inside of the app catalog and we're going to get into that quite a bit later in the video so i'm going to go to the recruiting channel in the bad old days i would have sent an email off to um some unnamed alias and just prayed that i got a response now i can actually come in here and collaborate directly with the everyone who's involved with recruiting and you can see here madeline is saying something in french but fortunately there's a translation built in which is kind of nice so i'm just going to come in here and um and ask kind of desperately for help um so the i'm going to at mention the channel which will kind of obviously send everybody a notification but i'm really kind of desperate here first for a quick turnaround and hopefully that will work and now i noticed that katie uh who is the lead recruiter she just responded spoke to a great candidate today that's great but she wants a job description of course it makes sense so let me uh let me go for that so right here inside of the recruiting channel we have our documents and one of the things is our job descriptions so what i want is somebody a lot like this full stack developer it's just going to be a slight difference on it so i'm going to just save a copy of that um that i don't have to leave teams to do any of this yeah that's what i was going to ask so everything is inside teams yeah exactly and i'm using actually a first party application is microsoft word and i'm using that right inside of teams so now i can come in here and edit the i take away the job code that's for hr to insert and i'm just going to add this one experience that i want which is somebody who has some iot experience and now i'm going to open up the conversation panel and share this with the rest of the team so in other words yeah i could be using the application and having a chat at the same time so i'm just going to bring katie in and see if she'll look at it and hopefully she will in fact it she is and i can see that here she is literally co-authoring the uh the document so we're editing the doc at the same time as we're chatting about the doc and she's going to go ahead and fill in that job code which is great so i think we're we're kind of like on the right track here and again this could be your app right you could have your app also um you know with the chat alongside that's just always available and it looks like tony wants me now okay well at least he's in teams that's good but uh looks like they need react experience okay so let me go back to the chat to the team and uh let katie know that we need that we need the react experience because that's probably pretty pretty important um and then we'll see yeah okay so katie's calling the candidate that's great oh tony again yes tony i know right like well you know he's he closed the big deal i'm not going to complain but do they have a cv he already wants the cv so you know what i'm going to do i'm going to add katie to this conversation now watch carefully what happens right now it's me and tony in a one-on-one chat and you can see over on the left it just says tony smith okay add katie we're going to end up with a new chat with the three of us inside of here and now um next time tony has a question katie will see it directly right and we can all work in here on this particular little recruiting effort and um oh great so katie has a cv here for this candidate and again we can come in here and now we're actually we're it's similar to before because we're editing the document together it's a it's a first party app running with a chat alongside except for this time it's a group chat it's just katie and tony and myself it's not the entire team's channel so that's something that i think robbie is going to highlight later is just sort of how do these different environments or different scopes work inside of teams okay so so that's just kind of out of the box what happens if we start adding an application in here as well so i'm going to show an application and we're going to introduce a few of the major capabilities tabs bots and adaptive carts now i'm logged in as katie and i'm back in that team's channel or that team for recruiting and you can see here that i have a hiring board tab so this is great because i can see all the job openings and the candidates who are in the pipeline without leaving the team so um let me come here i'm going to actually add a new tab and this is kind of interesting this is called a configuration page so when you add a tab in a teams channel you get this configuration experience now i know robbie's going to again explain this a little bit more later but a little foreshadowing this is just an iframe right so where it says to new talent app and at the bottom where it says post to the channel those are teams everything in between is something that the application developer wrote and it's just running in an iframe these configuration pages work for tabs and also for connectors and messaging extensions and uh again we'll get into all that terminology later but just letting you know this is kind of a common pattern and what we've done here the app developer stripped away their navigation because you don't really want to navigate every time you go into the tab right i mean part of the pain of switching apps is not just switching but it's having to go look up certain information inside of the app when you go to use it so we're going to just highlight this specific urgent hire right here and then we're going to go into that and you can see it so now other people can just click on this tab to see what's the urgent kind of higher of the day and you can see that it also put a notification into the channel so that um you know people can kind of be drawn in here so that's that's what tabs are um the other big thing that is common in teams applications is bots so inside of a team's channel you have to mention the bot otherwise the bot would get kind of get confused by all the conversation going on between the people in the in the team and you can see here that it's actually showing me all of the active job postings so i can click into one of these and what you're seeing is something richer than a typical text message that might come from a bot specifically it's called an adaptive card and that's something that we'll also cover a little bit later in this video we can interact with those adaptive cards we can display richer information using the adaptive cards and now let's add another concept on here remembering that tabs could be any web page bots could be any azure bot and adaptive cards are just simple json structures so now let's add something called a task module a lot of new developers a lot of new teams developers miss this and don't realize there's something normally would be called a dialog box but it's called a task module in teams for historical reasons and that also could be any web page or adaptive card so let's see how that can be used to interact with one user at a time while we're in the middle of the group chat or the the team environment so katie's going to say all right i want to create a new position so she's got another job opening she needs to fill and you can see that now this pops up and and sort of allows her to interact directly without everybody else inside of that team having to see what she's doing until she's done right so she can fill in all the details of this job description and confirm it and it will post the uh result right here inside the team's channel and now she can fill in a little bit of information and share the outcome with the rest of the team let me ask you to think for just a moment how many emails did that just save instead of emailing katie having her enter the job maybe having to go back and forth on it a couple of times then she's going to actually have to email everybody telling them about the new opening it all happened right here in plain sight of everybody in the team so when i come back to check what's going on i'm going to see this new job description without having it clutter up my inbox all right so that's a task module the last thing that i want to show is and again that could be any web page or adaptive card the last thing to show here is a messaging extension so this is something that runs inside of the bot uh framework it's really just a web service that could be hosted anywhere and so let's take a look at what that would be like so um we just interviewed that candidate that um that katie recommended and we need to get feedback from the team so instead of sending an email she's going to post a feedback request right here and what you're seeing here is while she's in the compose box where she where you would normally write a a message she's actually able to go and insert business data into there because the hr app has a connection into a messaging extension so now here's the candidate can click that and we're going to get this nice adaptive card with all the information about donna and request to go ahead and fill in that feedback now watch what happens i'm actually this is back to me um on my phone i've just been working with a client and um all i have with me is my phone so i'm gonna come in to check on this and i'll see that um again i have my chat i have everything that i would have had on my desktop and here is that adaptive card now in the old days i might have had to drive back to the office to get on the corporate network to go to some line of business system to submit my feedback or maybe i have to go get my computer and connect to a vpn so that i can get in and update the feedback oh and when i went in by the way to that hr app i'd have to find the candidate again i'd have to figure out which candidate it was now i don't have to do any of that i'm on my phone all i have to do is um i could schedule another interview or just click leave a comment and i'm just going to use the voice feature on my phone to do this and leave my little comment i don't have to look up the candidate switch apps or anything and i'll go ahead and submit that and that's it i'm done i i don't have to think about it i can just get the task done right away and here's the feedback by the way this is what an adaptive card looks like on your phone so works the same on a phone as it does in on the desktop application while i'm here i'm actually going to go and build the hours for the consulting meeting i just had again i'll use the voice feature on the phone and again instead of having to go into the app and some other app and find the client enter the data i can just ask a bot what it is that i want and it will translate with ridiculous accuracy 20 minutes into out and and confirm and i can go ahead and it bills my time so this is the way you can kind of streamline your work with microsoft teams apps all right that's that's great bob i mean i have a question though so you said um tabs are iframes um now it's a task module which is like a dialog box that popped up is that also an iframe that you can put in teams usually yes but you can also have an adaptive card which i know you're going to discuss those a little bit later you could put that inside of your your pop-up your dialogue but i think the most powerful method is to just use an iframe and yeah if you're basically anywhere in teams that you're providing a visual user interface outside of the conversation that's going to be an iframe and the same sdks and programming techniques will work in an adaptive card in a tab or in one of those configuration pages like i showed when i was setting up the tab cool so now we're gonna talk about uh messaging extensions and uh you know a bit more about machine extensions there are two types of uh messaging extensions one is the search base one and the other is an action based one so search space is probably the most widely used i would say because it's so so useful if you've got external data that you want to plug right into teams application you can do that you can perform a search get that information put that in a chat for you to share with your teammates so um we will show you demos on these as well yes that's the one that i just showed right the one yeah hr demo was a search based and i had a couple of search queries that i could do there exactly and if you look closely in that you you all also can see multiple tabs i think you had the search for uh candidates and also for positions and they're like tabs so you can have multiple tabs of you know different search categories cetera it's pretty useful stuff and action-based one is if you want to do something with that um with a message if you want to invoke a like a task module and then put that information in a chat you know to put more eyes into your message etc you would uh go for an action-based one um and there are a few areas that you probably uh need to be familiarized with like you can see in this um um deck here we've got uh the compost area which is down below where you actually type your message you can see those tiny icons um especially um you know like if you want to format the message or if you want to put a nice gif you would go into that compose area uh where you can see icons that's where you actually invoke your messaging extensions as well so if you see the three dots there you could just open up and find your app uh which will be a messaging extension there is also um on your message if you click on the ellipsis that is number two here you can see there is more action so this is another area where you can invoke your messaging extension um maybe to share this message into teams etc and right on top uh number three is where you could quickly go and find your messaging extension if you're used other chat apps you would be familiar with this you know slash to do or that something like that you could go ahead and invoke your messaging extension from the bar up there um so that's few things we wanted to discuss with you know with messaging extension and another thing that we didn't discuss here is the uh meeting apps you could have applications show up uh for example stabs show up in a meeting you could have people collaborate in a meeting as well so there are three areas where you would put your applications while maybe before a meeting you know you're preparing for a meeting you've uh have all the attendees information everything is set up you could have like a tab uh where you could show uh some information that's one area where you could utilize to put your application in when you're in the meeting so if if you're in a meeting with your teammates and you want to collaborate maybe it's a sprint planning session or it's uh some sort of a project status meeting you could bring up your app you could bring up devops or any board or anything you could work collaboratively uh with your team that's another area where you can focus so let me just share my screen so if you can see here they're actually called side panels where you can show your app in a side panel you could also show in a stage where you can collaborate with your teammates and you could also bring up your site panel and then you could also have your results you know whatever and maybe it's a voting uh you know that you did during the meeting you could have those results displayed after the meeting um as well so there are three different uh areas where you could plug in applications in your teams and this is so beneficial so useful um that in fact you know i was just talking to my son um about any app ideas any meeting app ideas because he was in a bunch of teams meetings during lockdown and he came up with this idea that he should be able to open up minecraft from from his team meetings i know i want to play minecraft during meetings i don't know i know so yeah i mean maybe that's not your business case but you get the idea right i think it's a great idea so um that's another area that is coming in hot you know meeting apps and there are a few samples as well that we will share towards the end of this session now that we've seen all the capabilities that you can build in microsoft teams applications maybe now we need to deep dive and understand where microsoft teams applications sit in microsoft 365 space let's start by just looking at the teams architecture itself and i think that will probably help and then maybe we can dig into the the app aspect of it so as you'll see here's the microsoft teams architecture and along the top we have the client which i'll talk about more in just a second and in the bottom you'll see that the services include not only team specific services and some services for communication that are actually originated with skype for business but there are other services here like sharepoint onedrive we saw word onenote exchange for emails right so your files live in sharepoint on onedrive all of these are more mature services that are part of microsoft 365 they support a number of compliance and security features that our customers need so by building teams on top of those we actually are able to provide the security and compliance features without having to reinvent all of that now the and your app is going to live there with all those services right where it says your service is here and and robbie is going to get into that in just a minute uh just to talk quickly about the team's client architecture currently the desktop application in windows mac and linux i should add linux to the slide it's an electron app which means that there's common code between that and the web browser based uh teams and then there are native applications for apple and android so just so that you know you probably want to think about testing in these three in the three major clients somewhere in the desktop and then something on an iphone or an ipad and then something on android just to make sure that you're kind of testing everything otherwise there aren't huge differences between mobile and desktop obviously any tabs or any user interface that you build you want that to be responsive so that it will look good on different screen sizes one final concept that i want to highlight is the idea of microsoft 365 groups so before we even had teams we had something called office 365 groups which has now been renamed microsoft 365 groups the idea here is that if a group of people are working together they're going to need access to a set of files to a calendar to some streaming videos to some notes and all these different icons are just the different applications rather than having to one by one give permission with a microsoft 365 group you can actually give permission to all of those underlying assets in one membership service so if rabia joins the team we add her to the microsoft 365 group she gets access to the sharepoint files the calendar and outlook the videos in stream the reports in power bi etc etc etc and then if she leaves the group i don't need to remember to clean all those things up i just remove her from the microsoft 365 group and i'm done so teams is built on this in fact every team has a microsoft 365 group underneath of it and so when you add a member to a team you're actually adding them to a microsoft 365 group this even goes to the point where the id that identifies an m365 group and the team id are the same number the same globally unique id so the advantage of this is that if you are building an app that's going to run in a team rather than in a one-on-one or group chat you can rely on the fact that there's a sharepoint site there where you could put files and that the users of that team have permission to that sharepoint site the same thing would be true for an outlook calendar or any of these other workloads so that's just kind of a good thing to keep in mind about teams itself when you're building an app where does all this data go where is all this data coming from where's all this data going in this is a question that keeps coming up so do you want to put some light into this you know where do teams application data live absolutely well the answer is actually on this slide which i i grabbed from my friend rob gates it's kind of he had to pull this together from a lot of different sources short term the data lands in places like cosmos db for messages and other locations in azure in the long term all that data is ultimately pushed either into exchange or sharepoint or onedrive and sharepoint and onedrive are kind of the same product with different front ends so the reason for that is for compliance reasons if you wanted to do retention schedules if you wanted to do uh e-discovery things like that those are supported there the thing is even though we're showing this to you you shouldn't really know this you should really use the microsoft graph because this is kind of internals of microsoft teams and it might change over time so really the best bet is to use the microsoft graph now one thing that you probably do need to understand though is about files in particular files um this probably won't change over time and you can still use the microsoft graph api to get to this but it is useful to understand where files are stored if you're inside of a microsoft teams team then your files are going to land in the sharepoint site that is underlying that team so you remember there's always a microsoft 365 group for each team there's always a sharepoint site for each m365 group and your files are going to be organized by channel into folders within the document library of that site so if you just are trying to navigate where things are this could be helpful if you're in a one-on-one or a group chat then the files land in the sender's onedrive so if i send a file to rabia in a one-on-one chat it goes in my onedrive in a special folder called teams chat files and it's going to set the permissions to include rabia automatically so that she can see the file so this is about microsoft 365 data so what if what if i've got some data that i'm storing uh in my application so is that data in teams or is that app data somewhere else it's somewhere else it's wherever your app wants to put it right your app might use some database it might use some back-end system and it's really up to you as a developer to decide where you want to store that data and a lot of the apps that have come from our isv partners they already had put the data somewhere and who knows it might be in amazon it might be an azure it might be on premises and it's really not our business it's their business right because they're yeah so you know azure's a nice we'd love it if you put it in azure but you don't have to so rabia perhaps now you could take us a step further down the rabbit hole and actually get into how the teams app fits in to all of this uh yep absolutely so um a bit of a overview of what we just talked about you can have tabs their iframes hosted anywhere okay they should be up in the cloud somewhere that is easily browseable from the internet so we have got bots you know web services that uses azure about framework messaging extension their web services again they use bot framework again to communicate with your web service and microsoft teams connectors you know notifying channels you know if you already have web hooks that you've developed you could easily make a connector out of it adaptive cards like bob mentioned earlier you know they are just interactive cards or rich you know ui that you can put into teams application it's just a simple json file um an activity feed um i think this one also we showed earlier bob showed in the um in the demo you know where you could see all your notifications that you need to get on top so you could also uh program and develop stuff that could invoke a notification there in the activity feed these are the things that you can develop right now and mind you these things are all hosted somewhere else it does not live in microsoft teams it is surfaced in microsoft teams using something called a app package and this app package basically consists of three files two icons with basically just helping you know identifying the application um and one manifest file which is again a json file it's like a file that holds everything together so if you've got a tab it will tell microsoft um teams that hey this application actually points to this url that is probably online somewhere or if it's a bot it would say hey use this bot id and you know invoke and connect with this web service um things like that so this is basically what happens so you when you say developing teams applications not like you develop something where it lives inside teams it's like you develop an application that is already out there somewhere online and you're just going to surface that into microsoft teams that's great and the manifest is going to tell teams where where to find the app that's right and you know what it it's always good to show something than just talk about it so i'm just gonna open up the manifest file of um the hr app that we saw because it's perfect right so we because we already saw the capabilities that app can uh provide i can just go in and deep dive and show in dissect and show you you know where each of those um capabilities live so this is basically um i'm just gonna make it a bit bigger but this is basically the manifest file like i said it's a json file it will it it actually consists of in the beginning it will consist of the name of the app you know the developer name the privacy url terms url etc basically names and descriptions and stuff like that then you see something called configurable tabs now these are uh tabs you know so it's it's um configurable in the sense that it it is it has settings you know so you can put settings in and configure that tab to act a certain way maybe it's just a title name or maybe it's uh you know some some sort of a query string that you want to pass um so this configurable tab if you can see here it points to a url that is um you know somewhere hosted in azure websites you know like it is probably a static web app or something um and this is where you tell microsoft teams that okay this app actually points to this tab and you can see here scopes which we will again come into uh in our next uh discussion that is team scopes that's something that we all need to know so we've got these scopes as well uh for this capability and static that's not just to point out that right that that the um configurable tabs can only run in a team or a group chat and static tabs can only run in personal personal it's kind of a limitation there i guess exactly so yeah that's right so static tabs basically are like personal like bob mentioned there are personal tabs that would be there for each user so it's basically for users so if as a user you're logged in and you want to see maybe a list of my tasks for today or my you know most important emails or something like that you've developed an app that actually shows personalized information for that particular user then you would put that in the static tabs and configurable tabs are basically like bob mentioned it's something in the team you know a team project status report or some sort of a dashboard in your team so these two are tags um and this is how you configure them i mean you mentioned them in in the manifest file you can see here content url is where it points uh your tab information where it brings out that information and uh put that as an iframe inside microsoft teams now coming to the next capability it's bots so i've mentioned i've already configured uh for this particular app we've already configured the bot um in azure uh framework so we've got registered bot here we provide the bot id um we you know these are the command lists like if you've noticed you know if you want to uh type something and get you know it would actually surface when when you go in and at mention the bot it will show you what do you want me to do with this spot you know maybe you want candidate details maybe you want positions uh maybe you want a bit of a help there you know all these things you would provide here um and then there are connectors so if you've got a connector to notify your channel on a new position that opened up in the hr system then you know i would probably go ahead and configure my connector and then provide the configuration url which is basically my webhook uh url into uh this section so as you can see now maybe you're getting the idea all these things are pointing to things they're like pointers um so for each uh capability there is a specific property that you can fill in uh so and so and compose extension well no points in guessing it is for a messaging extension um you can see search base one and you can also see action based one if you have so uh search base one it would have something like um type query and if it's a type action then it would be an action based uh messaging extension so these are where you can go ahead and configure um and tell microsoft teams that hey um i've got you know messaging extension that does this this this and in the back end of course there is uh bot code running for that you need the bot framework yep so this is basically um an overview of how your manifest file will look like which basically is that holds everything together for your application in microsoft teams it's great it's great to understand and i can see here there's even a valid domain section there at the end yeah so do you have to have all of the websites in there that you're going to use in the app yep absolutely so if you've got domains that you want to you know let microsoft teams surface in teams then you definitely have to put it here for security reasons yeah that makes a lot of sense it's great cool next up we're gonna discuss about scopes that we quickly saw in the manifest file which is also pretty important topic so teams application scopes can be divided into three the first one being the team scope which basically is when your application is in a teams channel say for example you've got a hr recruiting channel where recruiters discuss about new positions or new candidates then you probably would have your application if you have got a tab that displays you know the whole information then you would have that in a team scope because you want to put that in a team's channel now group conversations or meeting ones are basically when you have one-on-one chat or you have you know rece when we when we saw the demo we saw that tony and um another recruiter and yourself who are in a conversation right three people in one conversation they're called group conversations you can all if you want to add some uh application into that kind of a conversation or a one-on-one chat then you probably will scope your application um as you know for for group conversation you also have the third one which is the personal scope personal scope is when you want to have your applications only for that particular logged-in user for example the example that i mentioned before you know you want to see something uh that i did you know my task my personal hub things like that then you would basically go for a personal scoped app so these are the three scopes you have to keep in mind when you're building applications so that your app can adjust accordingly in different contexts and if you have noticed these little icons that we've put in here you can see that connectors are teams based so they are always in a team scope because you're notif basically notifying a channel exactly so ravia something i've been asked a lot by our partners is what are the software development kits and apis that you would use as developing a team i mean i get that your your team's app is running in a web page somewhere or it's a running a web service implementing a bot but when it needs to do things what are there just so many sdks in microsoft 365 that it's really easy to get confused that's a great point bob and um yes honestly if you if you have got tabs or if you've got uh some um web app that's online or if you've got a meeting app then you would you teams js sdk um but if you have got a bot or messaging extension they would use the azure bot framework sdk so these are the two things i would say development wise you invest in an sdk4 based on each applications now your applications like i mentioned you know tabs bots messaging whatever it is if you want to leverage all the services in microsoft 365 and get the data or you know do actions on them then you would use uh microsoft graph which is basically a single entry api that you would use to access all these different workloads in microsoft 365. um so that's one area you would uh that is one api that you would use in your application if you want to um you know like use the services in microsoft 365 or the data um and uh for authentication purposes and for identity related then you would go for azure active directory so these are the different uh i mean technical investments that you would uh do for your application based on what what you want to build what capability you want to build and what kind of data you want to use in your application so rabia we've seen adaptive cards in the in the demo and i'm wondering if you can explain how they how they kind of work to everyone sure so if you've used um you know any action cards from outlook or if you've used a bot you know basically um a card in your teams where you've done some action approve something etc then you probably have used adaptive cards and i also like this example where um if for windows users if you've seen your notification pop up about some updates happening or some email that you need to reply to etc that's an adaptive card they're basically uh made to enable you to take actions right from your applications cross-platform cross app snippets of ui uh it's really rich and it also takes uh the form of the host that that it is in so if it's an outlook it will look like an outlook uh application um outlook card in teams it would look like a teams card basically it's just it's just an amazing piece of um discovery i would say so if you can go to adaptivecars.io you can see a whole lot of information about what an adaptive card is and when you're creating teams application you might want to consider you know changing your um ui or if you want to pull in more eyes into your messages or your cards or your forms then adaptive cars is your best friend um so you can go to this link here adaptivecards.io and you can see a whole bunch of documentation um on why and how useful adaptive cards are you could also uh this is my favorite so designer is another tab in this website where you can go ahead and design adaptive cards they're like what bob mentioned snippets of json that you can go ahead and design with bunch of elements that you have on your left side um so one of the card looks like this you know if you want to put some nice looking ui uh into your application you can do so um and uh there are so many samples that is the best thing about this is that you've got samples for you to go ahead and copy and improvise and use in your application i really like the list of samples that they've provided and this is the schema explorer so if you want to know more about what you need to put inside that json then you could go ahead and refer to this schema as well so yeah adaptive cards are super super usable usable actionable uh cards that you can use in your application especially uh with teams all right so we've seen the app capabilities we've talked about scopes we've talked about the sdks and that we need to build a teams app now bob i have a question what if i don't have any of these things i have my web service um or i have my tab how would i create an app using a ui well this is something that's kind of in the process of changing so let me show you the way it looks now at the time of this filming and then we can kind of get into where it's where it's sort of going over time so right now there's something called app studio and um this has a manifest editor in it so if we look at that same hr app inside of app studio it's the same as the manifest json file that you just showed it's just that it's giving me kind of a little form to fill out and making the whole thing a little bit easier so this is something that i think a lot of existing teams developers are familiar with one of the things that i will typically do is come in here and actually download the app manifest and check it into source control so that might be that makes sense right because a lot of times you don't really want to do this this is great for one-off use but if you're building an app for distribution you're probably going to want to have the manifest in your source control system along with the code that uses it now this app studio thing is going away and it will be replaced by something called the team's developer portal it's currently in preview so we may we may end up redoing this uh video or part of it when this comes out we'll see how that goes but it for the time being this is the same sort of thing as app studio it's just that it's browser-based and again i can come in here and hopefully find that app here it is and it's the same sort of thing this has more help for store validation and that'll be other videos and things like that um but but basically again it's the same sort of thing where at the end i can publish my app within my organization i can publish it to the store and submit it for the store or i can just download the app package and then go ahead and put that into source control or however i want to manage that it's just like you showed it's just a zip file with two icons and a manifest.json file and this is just a convenience there are other tools like powerapps will generate an app manifest for you so there's some tools that will generate it for you as well now if i go back into teams you'll see here under apps this is what users would see when they come in if they want to install an app and built for your org these are ones that have been installed into our tenant whereas all these others are actually in the app store and again we'll be covering in other videos how to get your app into the app store if you so desire if i want to upload a custom app i can either do this for me or my teams this is all this requires an administrative policy which i'll show in just a sec so this is turned off by default if you want people to be able to upload directly and use an app without putting it in any catalog you need to enable that policy or because i'm a tenant admin i can upload an app for my whole org and then um right or i could submit this to the app catalog which would actually run it through an approval workflow where an administrator could then add it to the organizational um catalog so maybe i want to maybe i've written an app and i'm in one of the free developer tenants that anyone can get um and i built the app now i want to deploy it in my company's tenant maybe i would submit that there so there's a lot of different ways to get your app on this list so that people can can install it and use it let me show you what the administrator would see so here i am looking at the team's admin admin center and uh you can see here that i can manage apps i could upload the apps into my enterprise catalog right here if i want to this is also where if somebody submitted an app where i would see that there was apps pending approval and i could decide whether or not to allow those to go into the catalog so here's that same app that we looked at before and you can see that i can set permissions and get a little bit of information about the app from right here inside of the admin center permission policies are where you actually decide who has permission to use which apps so um i just have the org wide policy here but i could set up different policies maybe everybody in a certain job role has a certain app and nobody else does so i could put those people inside of a policy and then just allow those users to to have access to those apps each policy allows you to allow all the apps allow specific apps and block all the others or flip that block all specific apps and allow all the others or just block all the apps so this is available these choices are available for microsoft apps for third-party apps enterprise apps so you can really control that and you should be aware if you're writing an app that administrators can actually control who can see your app or whether they're allowed to use your app so you want to be nice to the administrators for sure now here's setup policies this is where you can first of all turn on and off who can upload custom apps who can pin apps onto the navigation and then i can proactively install apps for the users so maybe i want to push an app out to all the hr personnel or out to all the frontline workers or what have you right i could do that and then the user doesn't have to figure out how to install an app it's automatically installed and you can even go a step further and pin the apps proactively for those users so remember i had that get started app and i had this app in my earlier demo well that's because they were pinned here inside of these policies another way that you can proactively publish apps or install them for people is to build them into a team template so this is something you might want to encourage administrators to do if your app is designed to work inside of a certain type of team let me show you how this works so i'm going to come in here and add a new team template and let's just go ahead and make this a staffing team so this is something that anytime we're hiring we're going to use one of these and i give it a description and a locale and all these kind of details and i'm going to add a channel automatically called interview tips and this will show up anytime anybody creates a staffing team and then i can also go ahead and edit this channel and add an app inside of the general channel of every one of those teams so now the new talent app is going to be automatically provisioned whenever anybody creates a staffing team so again the nice thing is right a lot of users are not going to think about using a an app at all but if you can set up one of these team templates they don't have to think about it so there's my staffing team i'm just creating a new one it comes with two channels and one app i'll make it private which just means that it's not going to be discoverable by people who aren't proactively added to the team and then when it creates the team after a little bit of time and i can add my members in there let's add tony and katie tony again yeah well you can't you know tony you got to be nice to him he brings in a lot of business we really like him here's the here's the new talent app uh right inside here we can set you remember that configuration experience that i showed you earlier right it's the same app same code but i didn't have to install it it was done just by creating a staffing project this is brilliant so rabia i know when people go to look at the team's documentation a lot of times they're going to see instructions that say that they should run something called yo teams which is a yeoman generator or something called a team's toolkit yeah and so could you explain a little bit about the difference between those and what whether they're really necessary uh especially for people who have already an existing app um i'm glad you asked this is a hot topic right so we've got two code generators right now in the documentation we've got yeoman generator which is a cli based um generator which scaffolds our project for teams applications for you and it was probably the first generator we had uh so it's a community built one uh it's amazing it um is it actually scuffles uh react uh apps it it has many capabilities that it can scaffold then we have uh the microsoft microsoft owned um code generator which is called teams toolkit so teams toolkit it's a extension in vs code and visual studio that you can install it's pretty simple to install and you can just get started you know it's like a wizard that would run um and then you could create an app i think it also has a cli side to it where you could just run comments and create applications um but the thing is um you could also have an application that you already have wrap and running somewhere like we mentioned hosted somewhere that you could bring into teams right so for that you don't need a code generator because you already have your application this is really all about leveraging what you've already built if you have a web page or single page app maybe that could become a teams tab with some slight modifications if you have web hooks the ability to send and receive web hooks you could use connectors or outgoing web hooks or incoming web hooks we haven't gotten into that yet but we'll talk about that in a future video if you have a bot that runs in the azure bot framework then you could reuse that in your team's app whether it was written with code or with a bot framework composer power virtual agents they can all work inside of teams if you have a web service that looks up some information maybe you could adapt that in with the bot framework into a messaging extension to allow querying that information so the point here is that teams is actually designed to support what you've already built you don't have to kind of start from scratch each time so let me show you the simplest possible teams app in a way this is a team clock i generated the scaffolding with create react app which is a facebook generator it doesn't matter what i used because i don't have to touch the code at all to make it run inside of teams the key is that it's running locally and that i have a manifest here that i've created for this with localhost colon 3000 um as my url and then here's my static tab pointing to uh pointing to that code and then i added localhost colon 3000 to valid domains that's it now if i wanted my tab to be configurable so that it could work in a team's channel or group conversation i would need to build a little configuration page normally this could have a whole little form of data on it but in this case i don't really have anything special there so if we take a look at the code it's really simple i'm using the microsoft teams javascript sdk here on line 40 i'm saying that the form data which there is nothing on th