{"id":13341,"date":"2023-03-29T09:30:20","date_gmt":"2023-03-29T16:30:20","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=13341"},"modified":"2023-03-29T03:06:54","modified_gmt":"2023-03-29T10:06:54","slug":"create-a-teams-tab-and-outlook-add-in-with-a-hello-world-project","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/create-a-teams-tab-and-outlook-add-in-with-a-hello-world-project\/","title":{"rendered":"Create a Teams tab and Outlook Add-in with a Hello World project"},"content":{"rendered":"<p>Hello developers! Improve your app development process with our new Teams Toolkit pre-release version. In just minutes, you can easily create a Hello World project with both Microsoft Teams tab and Outlook Add-in elements backed by a single unified app manifest. Let this single powerful tool handle the setup, debugging and running for you, so you can focus on building great apps for your users.<\/p>\n<p>Join me in this tutorial as we explore how to build an application with multiple app elements using the Teams Toolkit in Visual Studio Code. \u00a0Get ready to take your app development beyond the limits of a single platform and create an experience that is seamless across all channels.<\/p>\n<h2>Installation of Teams Toolkit pre-release version<\/h2>\n<p>Teams Toolkit is available for free for Visual Studio Code. Setup and\u00a0<a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/install-teams-toolkit?tabs=vscode&amp;pivots=visual-studio-code#install-a-pre-release-version\">install the Teams Toolkit pre-release version.<\/a><\/p>\n<p>And check if your developer environment has <a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/tools-prerequisites\" target=\"_blank\" rel=\"noopener\">all the prerequisites<\/a> to create an application.<\/p>\n<h2>Create the Hello World app<\/h2>\n<p>To create the new app from Teams Toolkit for Teams Tab and Outlook Add-in:<\/p>\n<ul>\n<li>Select the Teams Toolkit extension icon and select button <strong>Create a new app.<\/strong><\/li>\n<li>This opens a top menu in Visual Studio Code with options:<\/li>\n<\/ul>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li>Start with a Teams capability.<\/li>\n<li>Start with an Outlook add-in.<\/li>\n<li>Start from a sample.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>Choose option 3, <strong style=\"font-size: 1rem; text-align: var(--bs-body-text-align);\">Start from a sample<\/strong><span style=\"font-size: 1rem; text-align: var(--bs-body-text-align);\">.<\/span><\/p>\n<p>[Note] In this tutorial, we will demonstrate how to quickly create a single project that includes both Teams capabilities and an Outlook add-in using the sample available in option 3. However, if you prefer, you can also start with option 1 or 2 and add capabilities later.<\/p>\n<ul>\n<li>From the list of samples, search for <strong>Outlook<\/strong> and select the sample called <strong>Hello World Teams tab and Outlook Add-in<\/strong>.<\/li>\n<li>Choose the location to scaffold the sample app project and select enter.<\/li>\n<li>Your app&#8217;s project scaffolding will be initiated and once it&#8217;s ready, it will open in a separate instance of Visual Studio Code<\/li>\n<\/ul>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-1.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-13347\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-1-1024x572.png\" alt=\"The new sample \u201cGet Started with Hello World Teams tab and Outlook Add-in sample\u201d is scaffolded and ready to run\" width=\"640\" height=\"358\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-1-1024x572.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-1-300x168.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-1-768x429.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-1.png 1379w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>The app is now ready to run and tested in both Teams and Outlook.<\/p>\n<p>In Teams, we will test the Teams tab app and on Outlook we will test the Outlook add-in.<\/p>\n<h2>Run the app<\/h2>\n<p>Teams Toolkit also makes the developer experience simple by supporting full stack debugging, including hot reload and attached debugger through Visual Studio Code. You can debug your app seamlessly in the Teams or Outlook client* by simply changing the options in the Run and <strong>Debug Activity Panel<\/strong> in Visual Studio Code.<\/p>\n<p>Your app is now ready to run and debug. Select <strong>F5<\/strong>, which will kick off the necessary tasks needed to run and debug your application locally in <strong>Teams<\/strong>.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-2.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-13346\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-2-1024x615.png\" alt=\"The sample is running in the Teams browser\" width=\"640\" height=\"384\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-2-1024x615.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-2-300x180.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-2-768x461.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-2.png 1379w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>For our application to run and debug in Outlook client* to test the <strong>Outlook add-in<\/strong>, use the <strong>Run and Debug Activity Panel <\/strong>in Visual Studio Code and select <strong>Outlook Desktop (Edge Chromium)<\/strong> and then press <strong>F5<\/strong>.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-3.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-13345\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-3.png\" alt=\"Run and debug activity panel where Outlook desktop is chosen\" width=\"903\" height=\"827\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-3.png 903w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-3-300x275.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-3-768x703.png 768w\" sizes=\"(max-width: 903px) 100vw, 903px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Once you have run the app, it will ask you to install a certificate, proceed to install it.<\/p>\n<p>Once everything is ready, select an email to test the Outlook add-in. You will notice the new <strong>Contoso Add-in<\/strong> on the top ribbon with two commands to <strong>Show Taskpane<\/strong> and to <strong>Perform an action.<\/strong><\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-4.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-13344\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-4-1024x329.png\" alt=\"Contoso add-in with Show taskpane and perform an action command buttons\" width=\"640\" height=\"206\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-4-1024x329.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-4-300x96.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-4-768x246.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-4.png 1100w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>If you select <strong>Show Taskpane<\/strong> you will be able to see the task pane on the right side like shown below. There is a link <strong>Run<\/strong> which if selected will give you the subject of the email printed out.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-5.png\"><img decoding=\"async\" class=\"aligncenter wp-image-13343 size-large\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-5-1024x657.png\" alt=\"The task panel shown with the subject line printed.\" width=\"640\" height=\"411\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-5-1024x657.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-5-300x193.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-5-768x493.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-5.png 1100w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>If you select <strong>Perform an action,<\/strong> your app will perform an action in the email that adds a message as shown below:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-6.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-13342\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-6-1024x316.png\" alt=\"The app performed an action that intended a line of text in the mail\" width=\"640\" height=\"198\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-6-1024x316.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-6-300x92.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-6-768x237.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Outlook-addin-blog_image-6.png 1100w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>* Only supported in Outlook Windows Client in Beta channel with Build number 16320 or higher for test accounts.<\/p>\n<h2>Source code<\/h2>\n<p>Now that you have seen how the app runs on both Teams and Outlook Client*, let\u2019s look at the source code. In the project structure, the main source code folders that you as a developer need to investigate to customize your app further are:<\/p>\n<ul>\n<li><strong>add-in \u2013 <\/strong>which contains the source code for the Outlook Add-in.<\/li>\n<li><strong>tab \u2013 <\/strong>which contains the source code for the Teams tab app.<\/li>\n<\/ul>\n<p>Examining the manifest.json file in the \/appPackage folder reveals properties for Teams personal tabs (&#8220;staticTabs&#8221;), Teams team or group tabs (&#8220;configurableTabs&#8221;), and Outlook add-in capabilities (&#8220;extensions&#8221;), all in a single, unified manifest.<\/p>\n<p>Overall, the new pre-release version of Teams toolkit makes building cross-platform apps much easier. So, what are you waiting for? Try creating this app using this tutorial today! We encourage you to provide feedback in\u00a0<u><a href=\"https:\/\/github.com\/OfficeDev\/TeamsFx\/issues\">TeamsFx GitHub issues<\/a><\/u>\u00a0to help us make things better.<\/p>\n<h2>Resources<\/h2>\n<ul>\n<li><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/teams-toolkit-for-visual-studio-code-update-march-2023\/\">Teams Toolkit for Visual Studio Code update &#8211; March 2023 (microsoft.com)<\/a><\/li>\n<li><a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/teams-toolkit-fundamentals?pivots=visual-studio-code\">Teams Toolkit Overview &#8211; Teams | Microsoft Learn<\/a><\/li>\n<li><a href=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-teams\">Microsoft Teams Dev Center | APIs and app development<\/a><\/li>\n<\/ul>\n<p>Follow us on <a href=\"https:\/\/twitter.com\/Microsoft365Dev\">Microsoft 365 Developer (@Microsoft365Dev) \/ Twitter<\/a> for the latest news and announcements.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In just minutes, you can easily create a Hello World project with both Microsoft Teams tab and Outlook Add-in elements backed by a single unified app manifest.<\/p>\n","protected":false},"author":71938,"featured_media":13384,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[128,11],"tags":[12],"class_list":["post-13341","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-teams","category-office-add-ins","tag-outlook"],"acf":[],"blog_post_summary":"<p>In just minutes, you can easily create a Hello World project with both Microsoft Teams tab and Outlook Add-in elements backed by a single unified app manifest.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/13341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/71938"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=13341"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/13341\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/13384"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=13341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=13341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=13341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}