{"id":4900,"date":"2021-05-12T06:28:45","date_gmt":"2021-05-12T14:28:45","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=4900"},"modified":"2022-03-29T16:46:45","modified_gmt":"2022-03-29T23:46:45","slug":"five-new-features-enhancing-adaptive-cards-in-microsoft-teams","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/five-new-features-enhancing-adaptive-cards-in-microsoft-teams\/","title":{"rendered":"Five new features enhancing Adaptive Cards in Microsoft Teams"},"content":{"rendered":"

Note: This is part one of a blog series <\/em>related to Adaptive Cards in Microsoft Teams.<\/em><\/p>\n

Adaptive Cards are UI containers that bots use to deliver rich content (images, buttons, URLs, formatted text, etc.) in Microsoft Teams. They help organize complex workflows, action commands and display information to users. Adaptive Cards play a critical part in your bot\u2019s lifecycle \u2013 from sending the introductory message, posting application updates via notifications, and initiating workflows via actions. Overall, you can think of them as the \u2018front-end\u2019 for your bots and messaging extensions<\/em>\u00a0within Teams.<\/p>\n

More than half of all users who interact with Teams bots do so through Adaptive Cards. Adaptive Cards are an open-source, cross platform way of creating beautiful cards that users interact with<\/strong>. They allow developers, like you, to create a card once that will work across Microsoft Teams, Outlook, Windows or any other application that supports Adaptive Cards.<\/p>\n

\"Sample<\/p>\n

\"Image<\/a><\/p>\n

We have invested heavily in updating Adaptive Cards capabilities for Microsoft Teams this past year and we\u2019re excited to share five<\/strong> n<\/b>ew<\/b> features that will simplify workflows and user interaction models for your bots.<\/p>\n

Building f<\/strong>ull-width Adaptive <\/b>C<\/strong>ards<\/b><\/h4>\n

In the past, developers were not able to make use of the full-width available for messages within the Teams interface. This often resulted in cards expanding vertically with densely packed information. We\u2019re now happy to share that you can create compact and coherent Adaptive Cards that utilize the full-width<\/a> with more pixels available for showcasing content.<\/p>\n

\"full<\/a><\/p>\n

Type-ahead (auto<\/b>–<\/strong>complete support)<\/b><\/h4>\n

Adaptive Cards allow for input choice selection within the Input.Choiceset schema element. However, for complex workflows, we saw cards with tens to hundreds of choices and asking users to filter through and select through a sizable number of choices can significantly slow down task completion \u2013 resulting in a less than ideal user experience. Typeahead support within Adaptive Cards can now simplify input selection<\/a> by narrowing or filtering the set of input choices as a user is typing the input.<\/p>\n

\"Type-ahead<\/a><\/p>\n

Information masking <\/strong><\/h4>\n

There are numerous scenarios where data\/information needed to be masked. The information masking property can be used to mask specific information, such as password or other sensitive input from users within the Adaptive card Input.Text input element<\/a>. This can be used to provide an extra layer of privacy when users enter passwords.<\/p>\n

\"Information<\/a><\/p>\n

Note: <\/em>This feature only supports client-side information masking, the masked input text is sent as clear text to the https endpoint address that was specified durin<\/em>g bot configuration.<\/em><\/p>\n

Expanded (Stage) view for images <\/strong><\/h4>\n

You can now selectively display images within Adaptive Cards using the share to stage property<\/a>. When users hover over the images, they would see an expand icon and be able to see a zoomed in version of the image. This feature will be particularly useful for cards with multiple images.<\/p>\n

\"expand\u00a0 \u00a0\u00a0\"expanded<\/p>\n

Submission feedback for card actions<\/strong><\/h4>\n

Lastly, we’re adding submission feedback for cards actions. Whenever users submit information via Action.Submit<\/a> or Action.Execute<\/a> to your bot we will show a success indicator upon completion of the invoke call.<\/p>\n

Note: This feature will be GA in June 2021 and requires no additional work<\/strong> on your part!<\/em><\/p>\n

\"Submission<\/a><\/p>\n

More<\/strong> features<\/strong> coming soon<\/strong>!<\/strong><\/h4>\n

We will be releasing more features and updates over the next few months and have some exciting updates to share at Build conference,<\/a> May 25-27, 2021! We will continue to post new updates on these features once released.<\/p>\n

Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"

Learn about the new Adaptive Cards features that will simplify workflows and user interaction models for your bots and work across multiple platforms including Microsoft Teams, Outlook, Windows and more.<\/p>\n","protected":false},"author":69086,"featured_media":25159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[8,128],"tags":[12,27],"class_list":["post-4900","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adaptive-cards","category-microsoft-teams","tag-outlook","tag-windows"],"acf":[],"blog_post_summary":"

Learn about the new Adaptive Cards features that will simplify workflows and user interaction models for your bots and work across multiple platforms including Microsoft Teams, Outlook, Windows and more.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4900","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\/69086"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=4900"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4900\/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=4900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=4900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=4900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}