DEMO - Create a Microsoft Teams personal tab

Key Takeaways

in this demo we're going to create a new microsoft team's personal tab by using the microsoft teams yeoman generator visual studio code and app studio developing microsoft teams apps requires a microsoft 365 tenant microsoft teams configured for development and the necessary tools installed in your workstation for the microsoft 365 tenant follow the instructions in the microsoft teams documentation on how to prepare your microsoft 365 tenant for obtaining a developer tenant if you don't already have a microsoft 365 account make sure that you have also enabled microsoft teams for your organization microsoft teams must be configured to enable custom apps and allow custom apps to be uploaded to your tenant in order to build custom apps for microsoft teams again follow the instructions on the same prepare your microsoft 365 tenant page that i previously mentioned you'll use node.js to create a custom microsoft teams app in this module in this demo the exercises and demos in this module assume that you have the following tools installed on your developer workstation node.js version 12 or higher npm version 6 or higher gulp version 4 or higher yeoman version 3 or higher the yeoman generator for microsoft teams version 3 or higher and the latest version of visual studio code you must have the minimum versions of these prerequisites installed on your workstation in order to complete this demo so we're going to start by opening up a command prompt i'm going to go to the directory where i want to save my work so i'm going to do that inside my dev folder and then i want to create a new folder where my project is going to go so i'm going to create one called learn ms teams tabs and then i'll just go ahead and jump in that folder now i'm going to start the yeoman generator by typing in yo teams so yeoman is going to start and ask me a series of questions so let's go ahead and walk through each one of these it's going to ask us what's the solution name i'll just call this learn ms teams tabs we're going to use the current folder because we're already in the folder we want this to be created the title of the app is learn ms teams tabs company name we'll just leave it as default which is contoso um the manifest version we want to use is the most recent one available which is 1.8 do we want to do quick scaffolding i'll just default there it's going to ask us what do we want to create or add to our project so i'm going to leave the default option of a tab where do you want to host this solution this doesn't matter right now we can change this at a later date so i'm just going to choose the default do you want to show a loading indicator i'll just choose the default option the name for our tab we'll call this our learn personal tab it's going to be a personal tab so i'll select that and we don't need a single sign-on support for this so i'll just choose no most of the answers to these questions can be changed after you create the project so for example the url where the project's going to be hosted that's not really important at the time of creating and testing the project that can always be changed later so after we answer all the questions the generator creates the scaffolding for the project and then it's going to run npm install to download all the dependencies that are required by the project now before we can customize the tab let's test the tab to see the initial developer experience that we're going to have for testing so from the command line i'm in the root folder for my project and what i'm going to do is i'm going to run the following command called in gulp ingrock serve now this sculpt task runs many other tasks that are all displayed on the command line tools that you see here on the console the ingroup serv task builds your project and starts a local web server and then it starts the ingrock process with a random subdomain that creates a secure url to your local web server so you can see that right here now microsoft teams requires that all content be displayed within a tab be loaded from an https request so in development this can be done by using the tool in grok that creates that secure routable url to our local http web server ngrc is included as a dependency within the project so there's really nothing set up that we need to set up and configure for this so we can see that our web server is now running and we can also see that we have our tab right here on the index page so i'm going to go ahead and open up our browser and in the browser i'm going to navigate to our site which i grab that i'll grab that url that was shown just a moment ago so there's hostname copy that go to https and that url right there so now we can see we're actually requesting uh the url of our site or of our locally hosted web server and we're getting it through our ngrok secure routable url now i'm going to update the url in the browser so i can load the actual tab that was created by the scaffolding process so as we can see there in the console that was in the learn personal tab index.html so i'll go ahead and grab that and i'll paste that in and we can now see what our tab looks like so here you can see the page can determine that it is not running within the microsoft teams client so we have that message where it says not in microsoft teams now let's load the tab in microsoft teams so what i'm going to do is come over here to microsoft teams so i'll go to teams.microsoft.com and it's going to automatically sign me in as my currently signed in user so i'm signed in as this user megan bowen on my on my test tenant so what i'm going to do is go ahead and i'm going to install the app i'm going to select the upload custom app and i'm going to upload it for me or my teams so the dialog box that appears i'm going to go select the app package that is generated buy the yeoman generator and buy our project so this is it right here they have the learn.msteamstabs.zip it's going to be inside of the package folder in my in my project after pack after the package is uploaded uh i can now see a view of my app and what that just did by clicking the add button that's going to install uh my app now notice when the content page is loaded in the tab within the microsoft teams client it displays the entity id property of the tab not the message this is not hosted in microsoft teams as you saw when you view the content page in the browser the tab can detect if it's loaded within microsoft teams client by using the microsoft teams javascript sdk now the next step is we want to make some changes to our project so what i'm going to do is i'm going to uninstall the project by right clicking the app inside of my more apps i'm going to uninstall the app by right clicking the app if i come over here into my more apps page i'm going to right click on this and i'm going to choose uninstall and then click uninstall again that's presented to me so i've uninstalled my app now let's come back over to our console and i'm going to go ahead and stop the process from running so now we can implement the user interface for the tab