{"id":6232,"date":"2021-04-14T08:04:18","date_gmt":"2021-04-14T15:04:18","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=6232"},"modified":"2023-03-17T07:27:48","modified_gmt":"2023-03-17T14:27:48","slug":"build-quality-microsoft-teams-apps-with-these-best-practices-part-2","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/build-quality-microsoft-teams-apps-with-these-best-practices-part-2\/","title":{"rendered":"Build quality Microsoft Teams apps with these best practices: Part 2"},"content":{"rendered":"<p>We\u2019re excited to continue along in this blog series to provide you the best practices for building high quality Microsoft Teams apps that will enable engaging experiences and delight users. <a href=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-365\/blogs\/build-quality-microsoft-teams-apps-with-these-best-practices-part-1\/\">In the first part of this series<\/a>, we covered the basics of getting started and the best practices you should follow when it comes to designing collaborative scenarios, integrating app authentication, building chat bots, utilizing adaptive cards, and using task modules. In part 2, we cover building and designing tab apps, message extensions, mobile experiences, meeting apps, and notifications.<\/p>\n<p><em class=\"x-hidden-focus\">This is the second of a 3-part blog series compiled of best practices that will guide you through developing high quality, impactful and engaging apps for Microsoft Teams. <em class=\"\">View <a href=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-365\/blogs\/build-quality-microsoft-teams-apps-with-these-best-practices-part-1\/\">Part 1<\/a> and <a href=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-365\/blogs\/build-quality-microsoft-teams-apps-with-these-best-practices-part-3\/\">Part 3<\/a> in the series for additional best practices.<\/em><\/em><\/p>\n<h2>Tabs for Teams<\/h2>\n<p>Tabs provide a UX unique to Teams \u2013 a canvas for hosting a UI directly in Teams. Like a bookmarked webpage, tabs provide a view which users can return to time and time again.<\/p>\n<p>Tabs can be configured for channels, chat, and personal scopes, and can be unique in each of those scopes. Personal tabs are important drivers of employee productivity, and channel tabs drive collaboration and information sharing. Group chat tabs are special in that they also power the tab views for Meetings Extensibility.<\/p>\n<h3>General Tab Guidance<\/h3>\n<p>Questions to ask yourself:<\/p>\n<ul>\n<li>Do tabs use Teams-styled navigation, such as breadcrumb trails or hamburger menus instead of left rails?<\/li>\n<li>Do tabs have fewer than three levels of navigation?<\/li>\n<li>Do tabs use multi-window capabilities for complex editing workflows?<\/li>\n<li>Are Help and Settings menus available from the tab header?<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-6238 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Teams-blog-2-image-1.jpg\" alt=\"A Contoso tab contains simple, Teams-styled navigation with a filter menu\" width=\"624\" height=\"351\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Teams-blog-2-image-1.jpg 624w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Teams-blog-2-image-1-300x169.jpg 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/p>\n<p style=\"text-align: center;\"><em>A Contoso tab contains simple, Teams-styled navigation with a filter menu instead of a left\n<\/em><em>rail. It contains key actions like (1) Settings, (2) Rename and (3) Remove from the top rail.\nHelp could be listed in the top rail as well. <\/em><\/p>\n<h3>Channel Tabs<\/h3>\n<p>Question to ask yourself.<\/p>\n<ul>\n<li>When the tab is added to a channel, does the associated bot (when applicable) post to the team to provide content that is relevant to the tab that\u2019s been added?<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-6237 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Teams-blog-2-image-2.jpg\" alt=\"The Contoso bot posts a helpful message to a channel when a tab is added.\" width=\"446\" height=\"326\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Teams-blog-2-image-2.jpg 446w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Teams-blog-2-image-2-300x219.jpg 300w\" sizes=\"(max-width: 446px) 100vw, 446px\" \/><\/p>\n<p style=\"text-align: center;\"><em>The Contoso bot posts a helpful message to a channel when a tab is added. <\/em><\/p>\n<h3>Personal Tabs<\/h3>\n<p>Questions to ask yourself:<\/p>\n<ul>\n<li>For personal tab, is there an ability to share content from the personal experience to other team members?<\/li>\n<li>Does the personal tab show a view that is unique for the user?\n<ul>\n<li>This can be achieved by aggregating content from multiple sources into a single view, or only showing information that\u2019s relevant to the user.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-6236 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Teams-blog-2-image-3.jpg\" alt=\"A Contoso personal tab aggregates personalized content\" width=\"534\" height=\"300\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Teams-blog-2-image-3.jpg 534w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Teams-blog-2-image-3-300x169.jpg 300w\" sizes=\"(max-width: 534px) 100vw, 534px\" \/><\/p>\n<p style=\"text-align: center;\"><em>A Contoso personal tab aggregates personalized content,\ngiving a user a view of project tasks across many projects. <\/em><\/p>\n<p>More guidance:<\/p>\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoftteams\/platform\/tabs\/what-are-tabs\">What are custom tabs in Teams? &#8211; Teams | Microsoft Docs<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoftteams\/platform\/tabs\/design\/tabs\">Designing your tab for desktop and web &#8211; Teams | Microsoft Docs<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoftteams\/platform\/concepts\/design\/design-teams-app-ui-templates\">Designing your app with UI templates &#8211; Teams | Microsoft Docs<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoftteams\/platform\/concepts\/design\/personal-apps\">Designing your personal app &#8211; Teams | Microsoft Docs<\/a><\/li>\n<li><a href=\"https:\/\/www.figma.com\/community\/file\/916836509871353159\">Teams UI Toolkit<\/a> &gt; UI Templates &gt; Breadcrumb<\/li>\n<\/ul>\n<h2>Message Extensions<\/h2>\n<p>Question to ask yourself:<\/p>\n<ul>\n<li>Does the message extension provide a 0-term query such as \u201clast used\u201d to encourage engagement?<\/li>\n<\/ul>\n<p>When users invoke message extensions, they have the intention to reference a recently used item; pre-populate message extension search with recently updated items to reduce user effort and drive faster result.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-6235 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Teams-blog-2-image-4.jpg\" alt=\"A Contoso Message Extension shows recently used items\" width=\"581\" height=\"275\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Teams-blog-2-image-4.jpg 581w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Teams-blog-2-image-4-300x142.jpg 300w\" sizes=\"(max-width: 581px) 100vw, 581px\" \/><\/p>\n<p style=\"text-align: center;\"><em>A Contoso Message Extension shows recently used items without requiring a user\nto enter a search term. <\/em><\/p>\n<p>More guidance:<\/p>\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoftteams\/platform\/messaging-extensions\/what-are-messaging-extensions\">What are messaging extensions? &#8211; Teams | Microsoft Docs<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoftteams\/platform\/messaging-extensions\/design\/messaging-extension-design\">Zero-term queries &#8211; Teams | Microsoft Docs<\/a><\/li>\n<\/ul>\n<h2>Teams Mobile experience<\/h2>\n<p>Question to ask yourself:<\/p>\n<ul>\n<li>Is the app fully usable on mobile with no issues with responsiveness, usability, or mobile policies?<\/li>\n<\/ul>\n<p>In today\u2019s hybrid workplace, mobile functionality is critical to employee productivity and workflows. Building an app UI that is designed to work on mobile ensures your users will be able to continue their workflows regardless of which device they\u2019re using.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-6234\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Teams-blog-2-image-5.jpg\" alt=\"The Contoso app uses Adaptive Cards\" width=\"624\" height=\"346\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Teams-blog-2-image-5.jpg 891w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Teams-blog-2-image-5-300x166.jpg 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Teams-blog-2-image-5-768x426.jpg 768w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/p>\n<p style=\"text-align: center;\"><em>The Contoso app uses Adaptive Cards which are designed to scale on mobile views. <\/em><\/p>\n<h2>Meeting apps<\/h2>\n<p>Question to ask yourself:<\/p>\n<ul>\n<li>Do the meeting app tabs have role-based views for the meeting organizer and participants?<\/li>\n<\/ul>\n<p>Meetings Extensibility is a Teams feature built from overwhelming customer requests for improved collaboration and app experiences in Teams meetings. User needs change depending on the user\u2019s role within a meeting, so ensure that content presented in a meetings app tab is tailored to the audience.<\/p>\n<p>More guidance:<\/p>\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoftteams\/platform\/apps-in-teams-meetings\/teams-apps-in-meetings\">Apps in Teams meetings &#8211; Teams | Microsoft Docs<\/a><\/li>\n<\/ul>\n<h2>Notifications<\/h2>\n<p>Question to ask yourself:<\/p>\n<ul>\n<li>Does the app provide relevant notifications in the activity feed or via bot message when there has been activity in the app?<\/li>\n<\/ul>\n<p>App notifications in Teams keep users informed of important updates in your service while allowing them to remain in their collaborative context. Apps which use notifications drive richer engagement by bringing important updates to Teams and allowing immediate workflow response.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-6233 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Teams-blog-2-image-6.jpg\" alt=\"The Contoso app pushes notifications to the Activity Feed\" width=\"624\" height=\"351\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Teams-blog-2-image-6.jpg 624w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/04\/Teams-blog-2-image-6-300x169.jpg 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/p>\n<p style=\"text-align: center;\"><em>The Contoso app pushes notifications to the Activity Feed when changes are made. <\/em><\/p>\n<p>More guidance:<\/p>\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/graph\/teams-send-activityfeednotifications\">Send activity feed notifications to users &#8211; Microsoft Graph | Microsoft Docs<\/a><\/li>\n<\/ul>\n<p class=\"x-hidden-focus\">We\u2019re excited to be providing you these best practices and hope that these will help guide you on your journey for building high quality Teams apps! Next week, we will cover Part 3 of our blog series exploring considerations that must be thought through before publishing your Teams app into our marketplace.<\/p>\n<p class=\"x-hidden-focus\">Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Part 2 of this series, we share best practices on building and designing tab apps, message extensions, mobile experiences, meeting apps, and notifications.<\/p>\n","protected":false},"author":114597,"featured_media":25159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[8,3,128],"tags":[],"class_list":["post-6232","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adaptive-cards","category-microsoft-graph","category-microsoft-teams"],"acf":[],"blog_post_summary":"<p>In Part 2 of this series, we share best practices on building and designing tab apps, message extensions, mobile experiences, meeting apps, and notifications.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/6232","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\/114597"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=6232"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/6232\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/25159"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=6232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=6232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=6232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}