{"id":11247,"date":"2022-08-23T09:00:25","date_gmt":"2022-08-23T16:00:25","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=11247"},"modified":"2023-03-21T10:37:53","modified_gmt":"2023-03-21T17:37:53","slug":"build-a-productivity-dashboard-with-microsoft-teams-toolkit-for-visual-studio","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/build-a-productivity-dashboard-with-microsoft-teams-toolkit-for-visual-studio\/","title":{"rendered":"Build a productivity dashboard with Microsoft Teams Toolkit for Visual Studio"},"content":{"rendered":"<p><span class=\"TextRun SCXW67695848 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW67695848 BCX0\">Great news for .NET developers, <\/span><span class=\"NormalTextRun CommentStart SCXW67695848 BCX0\">Teams Toolkit <\/span><span class=\"NormalTextRun SCXW67695848 BCX0\">for Visual Studio <\/span><span class=\"NormalTextRun SCXW67695848 BCX0\">is <\/span><span class=\"NormalTextRun SCXW67695848 BCX0\">now<\/span> <span class=\"NormalTextRun SCXW67695848 BCX0\">generally available<\/span><span class=\"NormalTextRun SCXW67695848 BCX0\">!<\/span><\/span><span class=\"TextRun SCXW67695848 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\">\u00a0<span class=\"NormalTextRun SCXW67695848 BCX0\">If you didn\u2019t have a chance to review updates in Teams Toolkit for Visual Studio, please review the<\/span><span class=\"NormalTextRun SCXW67695848 BCX0\"> recent<\/span> <\/span><a class=\"Hyperlink SCXW67695848 BCX0\" href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/post-notifications-to-microsoft-teams-with-net-using-teams-toolkit-for-visual-studio\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"TextRun Underlined SCXW67695848 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW67695848 BCX0\" data-ccp-charstyle=\"Hyperlink\">announcement<\/span><\/span><\/a> <span class=\"TextRun SCXW67695848 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW67695848 BCX0\">published earlier this month.\u00a0<\/span><\/span><\/p>\n<p><span data-contrast=\"auto\">In this post, I will show you the steps to get started with Teams Toolkit for Visual Studio and build your first Teams tab with ASP.NET Core to boost your productivity:<\/span><\/p>\n<ol>\n<li><span style=\"font-size: 1rem;\" data-contrast=\"auto\">Setup and install Teams Toolkit for Visual Studio<\/span><span style=\"font-size: 1rem;\" data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/li>\n<li data-leveltext=\"%1.\" data-font=\"\" data-listid=\"4\" data-list-defn-props=\"{&quot;335552541&quot;:0,&quot;335559684&quot;:-1,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769242&quot;:[65533,0],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;%1.&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"1\" data-aria-level=\"1\"><span data-contrast=\"auto\">Create your first Teams app with ASP.NET Core on Visual Studio<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/li>\n<li data-leveltext=\"%1.\" data-font=\"\" data-listid=\"4\" data-list-defn-props=\"{&quot;335552541&quot;:0,&quot;335559684&quot;:-1,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769242&quot;:[65533,0],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;%1.&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"1\" data-aria-level=\"1\"><span data-contrast=\"auto\">Enhance your Teams app by accessing calendar events, to-do tasks and file folders<\/span><\/li>\n<\/ol>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/oneproductivityhub-proxy.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11258\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/oneproductivityhub-proxy.png\" alt=\"Image of one productivity hub using AspNET core\" width=\"1801\" height=\"1143\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/oneproductivityhub-proxy.png 2256w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/oneproductivityhub-proxy-300x190.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/oneproductivityhub-proxy-1024x650.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/oneproductivityhub-proxy-768x487.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/oneproductivityhub-proxy-1536x975.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/oneproductivityhub-proxy-2048x1300.png 2048w\" sizes=\"(max-width: 1801px) 100vw, 1801px\" \/><\/a><\/p>\n<h2><span class=\"TextRun SCXW129450208 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW129450208 BCX0\">\u2692<\/span><\/span><span class=\"TextRun SCXW129450208 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW129450208 BCX0\">\ufe0f<\/span><\/span><span class=\"TextRun SCXW129450208 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"> <span class=\"NormalTextRun SCXW129450208 BCX0\">Setup <\/span><span class=\"NormalTextRun SCXW129450208 BCX0\">and install <\/span><span class=\"NormalTextRun SCXW129450208 BCX0\">Teams Toolkit for Visual Studio<\/span><\/span><span class=\"EOP SCXW129450208 BCX0\" data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559738&quot;:240,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/h2>\n<p><span data-contrast=\"auto\">Before getting started building apps with Teams Toolkit for Visual Studio, you need to complete pre-requisites:<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/p>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"2\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Symbol&quot;,&quot;469769242&quot;:[8226],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;\uf0b7&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"1\" data-aria-level=\"1\"><span data-contrast=\"auto\">Install <\/span><a href=\"https:\/\/visualstudio.microsoft.com\/\"><span data-contrast=\"none\">Visual Studio 2022<\/span><\/a><span data-contrast=\"auto\"> version 17.3 or higher. In the Visual Studio Installer:<\/span>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"2\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Symbol&quot;,&quot;469769242&quot;:[8226],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;\uf0b7&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"1\" data-aria-level=\"1\"><span data-contrast=\"auto\">Select <\/span><strong>ASP.NET and web development<\/strong><span data-contrast=\"auto\"> inside the Workloads.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/li>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"2\" data-list-defn-props=\"{&quot;335552541&quot;:1,&quot;335559684&quot;:-2,&quot;335559685&quot;:720,&quot;335559991&quot;:360,&quot;469769226&quot;:&quot;Symbol&quot;,&quot;469769242&quot;:[8226],&quot;469777803&quot;:&quot;left&quot;,&quot;469777804&quot;:&quot;\uf0b7&quot;,&quot;469777815&quot;:&quot;hybridMultilevel&quot;}\" aria-setsize=\"-1\" data-aria-posinset=\"1\" data-aria-level=\"1\"><span data-contrast=\"auto\">Select <\/span><strong>Microsoft Teams development tools<\/strong><span data-contrast=\"auto\"> inside the Installation details.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span data-contrast=\"auto\">\n<\/span> <a style=\"background-color: #f7f7f9; font-size: 1rem;\" href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/2.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11256\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/2.png\" alt=\"Image 2\" width=\"1800\" height=\"902\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/2.png 2500w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/2-300x150.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/2-1024x513.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/2-768x385.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/2-1536x770.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/2-2048x1027.png 2048w\" sizes=\"(max-width: 1800px) 100vw, 1800px\" \/><\/a><\/p>\n<ul>\n<li><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\"><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\"> <span class=\"TextRun SCXW110307843 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW110307843 BCX0\">When you are building Teams apps, you need sideloading permission<\/span><span class=\"NormalTextRun SCXW110307843 BCX0\">s to install and debug your app. <\/span><span class=\"NormalTextRun CommentStart SCXW110307843 BCX0\">Be sure you have a Microsoft 365 <\/span><span class=\"NormalTextRun SCXW110307843 BCX0\">account<\/span> <span class=\"NormalTextRun SCXW110307843 BCX0\">with permissions <\/span><span class=\"NormalTextRun SCXW110307843 BCX0\">to <\/span><span class=\"NormalTextRun SCXW110307843 BCX0\">test <\/span><span class=\"NormalTextRun SCXW110307843 BCX0\">and debug <\/span><span class=\"NormalTextRun SCXW110307843 BCX0\">your Teams app. You may find the setup instructions in the <a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoftteams\/platform\/concepts\/build-and-test\/prepare-your-o365-tenant\">Prepare your Microsoft 365 tenant<\/a>. If you don\u2019t already have a Microsoft 365 <\/span><span class=\"NormalTextRun SCXW110307843 BCX0\">account,<\/span><span class=\"NormalTextRun SCXW110307843 BCX0\"> you can register for a free one through the <\/span><\/span><a class=\"Hyperlink SCXW110307843 BCX0\" href=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-365\/dev-program\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"TextRun Underlined SCXW110307843 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW110307843 BCX0\" data-ccp-charstyle=\"Hyperlink\">Microsoft 365 Developer Program<\/span><\/span><\/a><span class=\"TextRun SCXW110307843 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW110307843 BCX0\">.<\/span><\/span><span class=\"EOP SCXW110307843 BCX0\" data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559738&quot;:240,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/span><\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2><strong>\ud83e\uddf5<\/strong> Create your first Teams app with ASP.NET Core on Visual Studio<\/h2>\n<p>After successfully completing the setup, you are ready to build your first Teams app with Teams Toolkit for Visual Studio:<\/p>\n<ol>\n<li>Open Visual Studio and select <strong>Create a new project<\/strong>:<\/li>\n<\/ol>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/3.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11249\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/3.png\" alt=\"Image 3\" width=\"1799\" height=\"1202\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/3.png 2500w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/3-300x200.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/3-1024x684.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/3-768x513.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/3-1536x1026.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/3-2048x1368.png 2048w\" sizes=\"(max-width: 1799px) 100vw, 1799px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>2. Search and select <strong>Microsoft Teams App<\/strong>, select <strong>Next<\/strong>:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/4.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11250\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/4.png\" alt=\"Image of creating a new project\" width=\"1800\" height=\"1191\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/4.png 2500w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/4-300x199.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/4-1024x678.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/4-768x508.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/4-1536x1016.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/4-2048x1355.png 2048w\" sizes=\"(max-width: 1800px) 100vw, 1800px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>3. Define a project name and select the location you would like to save your project, select <strong>Create<\/strong>:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/5.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11251\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/5.png\" alt=\"Image showing defining your project name and location\" width=\"1800\" height=\"1195\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/5.png 2500w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/5-300x199.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/5-1024x680.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/5-768x510.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/5-1536x1020.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/5-2048x1360.png 2048w\" sizes=\"(max-width: 1800px) 100vw, 1800px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>4. Select <strong>Tab<\/strong> as an application type and select <strong>Create<\/strong>:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/6.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11252\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/6.png\" alt=\"Image of how to create a new Teams application by selecting application type\" width=\"1800\" height=\"1234\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/6.png 2500w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/6-300x206.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/6-1024x702.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/6-768x527.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/6-1536x1053.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/6-2048x1404.png 2048w\" sizes=\"(max-width: 1800px) 100vw, 1800px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>5. Once your project is created, Right click to the project, select <strong>Teams Toolkit &gt; Prepare Teams App Dependencies <\/strong>and make sure to login with your Microsoft 365 Developer Program.<\/p>\n<p>6. To run your app, press <strong>F5<\/strong> key or select the Start Debugging button with <strong>Microsoft Teams (browser)<\/strong> on the top bar of Visual Studio.<\/p>\n<p>After your app runs successfully for the first time, it will look like the below. You may realize that authentication and user profile details are already available in your Teams app:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/build-app.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11261 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/build-app.png\" alt=\"Finished Teams app image\" width=\"1007\" height=\"671\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/build-app.png 1007w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/build-app-300x200.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/build-app-768x512.png 768w\" sizes=\"(max-width: 1007px) 100vw, 1007px\" \/><\/a><\/p>\n<h2><\/h2>\n<h2>\ud83c\udfa8 Enhance your Teams app by accessing calendar events, to-do tasks and file folders<\/h2>\n<p>Once your Teams tab is created successfully, the next step is to enhance your tab with Microsoft 365 data, so you can view your calendar events, to-do tasks or file folders from your app. You will leverage from Microsoft Graph Toolkit (MGT) components and provider to design your productivity dashboard.<\/p>\n<h3><strong>1\ufe0f\u20e3 <\/strong>Use the MSAL2 Provider to enable Single Sign On<\/h3>\n<p>To use MGT components in the app, user should authenticate and get a user token for Microsoft Graph.\u00a0You can avoid signing in twice by leveraging from Single Sign On (SSO) automatically sign in users via the current session. Teams Toolkit for Visual Studio handles Azure Active Directory app registration that will be consumed with MSAL2 Provider to enable SSO:<\/p>\n<ol>\n<li>In your project, go to <strong>Pages &gt; _Host.cshtml <\/strong>and add the following references at the top of the page:\n<pre class=\"prettyprint\">@using Microsoft.Extensions.Configuration\r\n@inject IConfiguration Configuration<\/pre>\n<\/li>\n<li>In <strong>_Host.cshtml, <\/strong>add the following code snippet inside <em>&lt;body&gt;&lt;\/body&gt;<\/em>:\n<pre class=\"prettyprint\">&lt;script src=\"https:\/\/unpkg.com\/@@microsoft\/mgt\/dist\/bundle\/mgt-loader.js\"&gt;&lt;\/script&gt;\r\n&lt;script&gt;\r\n        mgt.Providers.globalProvider = new mgt.Msal2Provider({\r\n            clientId: \"@Configuration[\"TeamsFx:Authentication:ClientId\"]\",\r\n            loginHint: \"@User.Claims.FirstOrDefault(c =&gt; c.Type == \"preferred_username\")?.Value\",\r\n            redirectUri: \"\/blank-auth-end.html\",\r\n            loginType: mgt.LoginType.Popup,\r\n            authority: \"@Configuration[\"TeamsFx:Authentication:OAuthAuthority\"]\",\r\n            scopes: [\"User.Read\", \"User.ReadBasic.All\", \"Calendars.Read\", \"Files.Read\", \"Files.Read.All\", \"Sites.Read.All\", \"Tasks.Read\", \"Tasks.ReadWrite\", \"People.Read\"]\r\n        });\r\n&lt;\/script&gt;<\/pre>\n<p><em>Note: To enable SSO, you need to provide a loginHint (the email for the current signed in user). This will set the provider in SSO mode which will attempt to sign in the user if they are already signed in elsewhere.<\/em><\/li>\n<li>Redirect Uri of the AAD app is defined as blank-auth-end.html for Single Page App, so you need to create an empty redirect page for single sign on process. Right click to <strong>wwwroot<\/strong>, select \u201cNew item\u201d and create <strong>blank-auth-end.html\u00a0<\/strong>file.<\/li>\n<\/ol>\n<h3><strong>2\ufe0f\u20e3 <\/strong>Design your tab with Microsoft Graph Toolkit components<\/h3>\n<p>Let\u2019s start building your productivity dashboard with Microsoft Graph Toolkit components and style with CSS:<\/p>\n<ol>\n<li>In <strong>Tab.razor<\/strong> page, add the following code inside <em>&lt;div&gt;&lt;\/div&gt; <\/em>to initialize the Person component:\n<pre class=\"prettyprint\">&lt;div&gt;\r\n   &lt;mgt-person person-query=\"me\" view=\"oneline\"&gt;&lt;\/mgt-person&gt;\r\n&lt;\/div&gt;<\/pre>\n<\/li>\n<li>To structure your productivity dashboard, add the following code snippet right under the Person component inside <em>&lt;div&gt;&lt;\/div&gt;<\/em>:\n<pre class=\"prettyprint\">&lt;div class=\"features\"&gt;\r\n            &lt;div class=\"header\"&gt;\r\n                &lt;div class=\"title\"&gt;\r\n                    &lt;h2&gt;One Productivity Hub&lt;\/h2&gt;\r\n                    &lt;div class=\"row\"&gt;\r\n                        &lt;div class=\"column\"&gt;&lt;h3&gt;Calendar events&lt;\/h3&gt;&lt;\/div&gt;\r\n                        &lt;div class=\"column\"&gt;&lt;h3&gt;To-do tasks&lt;\/h3&gt;&lt;\/div&gt;\r\n                        &lt;div class=\"column\"&gt;&lt;h3&gt;Files&lt;\/h3&gt;&lt;\/div&gt;\r\n                    &lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div class=\"row\" id=\"content\"&gt;\r\n                &lt;div class=\"column\" id=\"mgt-col\"&gt;&lt;\/div&gt;\r\n                &lt;div class=\"column\" id=\"mgt-col\"&gt;&lt;\/div&gt;\r\n                &lt;div class=\"column\" id=\"mgt-col\"&gt;&lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<\/li>\n<li>Under div tagged with <em>class=&#8221;row&#8221;<\/em>, add the Agenda component inside the first column div:\n<pre class=\"prettyprint\"><code>&lt;mgt-agenda&gt;&lt;\/mgt-agenda&gt;<\/code><\/pre>\n<\/li>\n<li>Under div tagged with <em>class=&#8221;row&#8221;<\/em>, add the To-do component inside the second column div:\n<pre class=\"prettyprint\"><code>&lt;mgt-todo&gt;&lt;\/mgt-todo&gt;<\/code><\/pre>\n<\/li>\n<li>Under div tagged with <em>class=&#8221;row&#8221;<\/em>, add the File list component inside the third column div:\n<pre class=\"prettyprint\"><code>&lt;mgt-file-list&gt;&lt;\/mgt-file-list&gt;<\/code><\/pre>\n<\/li>\n<li>Inside <strong>Tab.razor.css<\/strong> page, remove the existing code and copy the following css to style your app:\n<pre class=\"prettyprint\">body,\r\n#root &gt; div {\r\n\tbackground-color: #F3F2F1;\r\n}\r\n.features {\r\n\tmin-height: 80vh;\r\n\tmargin: 20px;\r\n\tbackground-color: #FFF;\r\n\tbox-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.11), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);\r\n\tborder-radius: 4px;\r\n\tfont-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n}\r\n.header {\r\n\tdisplay: flex;\r\n\tbackground-color: #f0f0f0;\r\n}\r\n.title {\r\n\tmargin-top: 20px;\r\n\tmargin-left: 10px;\r\n\twidth: 100%;\r\n}\r\n\t.title h2 {\r\n\t\tfont-size: 24px;\r\n\t\tpadding-left: 5px;\r\n\t\tdisplay: inline;\r\n\t\tfont-weight: 600;\r\n\t}\r\n\t.title h3 {\r\n\t\tfloat: left;\r\n\t\twidth: 33%;\r\n\t\tbackground: transparent;\r\n\t\tfont-size: 16px;\r\n\t\tmargin-bottom: 10px;\r\n\t\tpadding-left: 10px;\r\n\t\tpadding-top: 10px;\r\n\t\tcolor: #8A8886;\r\n\t\tfont-weight: 600;\r\n\t}\r\nmgt-person {\r\n\tmargin-top: 20px;\r\n\tmargin-left: 20px;\r\n\t--avatar-size: 60px;\r\n\t--font-family: 'Segoe UI';\r\n\t--font-size: 20px;\r\n\t--font-weight: 700;\r\n\t--color: black;\r\n\t--text-transform: none;\r\n\t--line2-font-size: 14px;\r\n\t--line2-font-weight: 400;\r\n\t--line2-color: #8A8886;\r\n\t--line2-text-transform: none;\r\n}\r\n#content, html, body {\r\n\theight: 98%;\r\n}\r\n#mgt-col {\r\n\tfloat: left;\r\n\twidth: 33%;\r\n\tbackground: transparent;\r\n\theight: 60vh;\r\n\toverflow: hidden;\r\n\tpadding: 5px;\r\n\tmargin-top: 5px;\r\n}\r\n\t#mgt-col:hover {\r\n\t\toverflow-y: auto;\r\n\t}<\/pre>\n<\/li>\n<\/ol>\n<h3><strong>3\ufe0f\u20e3 <\/strong>Test your app<\/h3>\n<p>Press <strong>F5<\/strong> or select the <strong>Start Debugging<\/strong> button with <strong>Microsoft Teams (browser)<\/strong> in the toolbar of Visual Studio to test your app. Your productivity dashboard is ready to use! \ud83e\udd73 Add some calendar events, to-do tasks and file folders in your Microsoft 365 account to make your productivity dashboard look fabulous! \u2728<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/oneproductivityhub-proxy.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11258\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/oneproductivityhub-proxy.png\" alt=\"Image oneproductivityhub ASP.NET Core\" width=\"1801\" height=\"1143\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/oneproductivityhub-proxy.png 2256w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/oneproductivityhub-proxy-300x190.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/oneproductivityhub-proxy-1024x650.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/oneproductivityhub-proxy-768x487.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/oneproductivityhub-proxy-1536x975.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/08\/oneproductivityhub-proxy-2048x1300.png 2048w\" sizes=\"(max-width: 1801px) 100vw, 1801px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>I hope you enjoyed this tutorial and learning how to build your own productivity dashboard. Source code for this sample is available in the <a href=\"https:\/\/github.com\/OfficeDev\/TeamsFx-Samples\/tree\/release\/graph-toolkit-productivity-hub-aspnetcore\">TeamsFX Samples GitHub Repository<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h3><strong>\ud83d\udcda<\/strong> Learn More<\/h3>\n<ul>\n<li><a href=\"https:\/\/developer.microsoft.com\/microsoft-teams\">Microsoft Teams Developer Center<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoftteams\/platform\/overview\">Teams Toolkit Documentation<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/teams-toolkit-overview-visual-studio\">Teams Toolkit overview for Visual Studio<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoftteams\/platform\/sbs-gs-csharp\">Build your first Teams app using C#<\/a><\/li>\n<li><a style=\"background-color: #f7f7f9; font-size: 1rem;\" href=\"https:\/\/docs.microsoft.com\/en-us\/graph\/toolkit\/overview\">Microsoft Graph Toolkit Overview<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>Special thanks to John Miller, Tomomi Imura, Zhidi Shang, Yu Zhang, Renlong Tu, Ning Tang for helping me write this tutorial! \ud83d\udc9c<\/p>\n<p>&nbsp;<\/p>\n<div style=\"text-align: center;\"><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/0WFN8X9Tp8A\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Follow this tutorial to build your first Teams tab with ASP.NET Core and Teams Toolkit for Visual Studio to boost productivity, now generally available! <\/p>\n","protected":false},"author":82723,"featured_media":11327,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,128],"tags":[186,187,23,55],"class_list":["post-11247","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-graph","category-microsoft-teams","tag-net","tag-asp-net-core","tag-teams-toolkit","tag-visual-studio"],"acf":[],"blog_post_summary":"<p>Follow this tutorial to build your first Teams tab with ASP.NET Core and Teams Toolkit for Visual Studio to boost productivity, now generally available! <\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/11247","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\/82723"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=11247"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/11247\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/11327"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=11247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=11247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=11247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}