{"id":12661,"date":"2023-01-11T04:33:09","date_gmt":"2023-01-11T12:33:09","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=12661"},"modified":"2023-01-31T16:00:18","modified_gmt":"2023-02-01T00:00:18","slug":"learn-how-to-create-adaptive-card-extensions-aces-for-microsoft-viva-connections-and-viva-home","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/learn-how-to-create-adaptive-card-extensions-aces-for-microsoft-viva-connections-and-viva-home\/","title":{"rendered":"Learn how to create Adaptive Card Extensions (ACEs) for Microsoft Viva Connections and Viva Home"},"content":{"rendered":"<p><span data-contrast=\"auto\">We\u2019re excited to announce a new learning module focusing on building Adaptive Card Extensions (ACEs) for Microsoft Viva Connections and for upcoming Microsoft Viva Home. The <a href=\"https:\/\/aka.ms\/viva\/ace\/learn\">Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections<\/a> <\/span><span data-contrast=\"auto\">learning module is the best way to learn how you can extend Viva Connections and Viva home by building extensions with <a href=\"https:\/\/aka.ms\/spfx\">SPFx<\/a> and <a href=\"https:\/\/adaptivecards.io\/\">Adaptive Cards<\/a> techniques. ACEs are built with the same SharePoint Framework (SPFx), which you can use to build experiences across Microsoft 365 for Microsoft Teams, Outlook. Office 365 app (Office) and SharePoint.<\/span><\/p>\n<p><span data-contrast=\"auto\">You can use ACEs to expose the business business information and actions for end users with an experience which is optimized for both mobile and desktop experiences. ACEs is a great way to drive more users also to your existing Microsoft Teams applications by exposing your existing features for the enterprise audience.<\/span><\/p>\n<p><span data-contrast=\"none\">This new learning module will teach you:<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/p>\n<ul>\n<li>Understand Viva Connections extensibility options<\/li>\n<li>Understand how Adaptive Card Extensions are exposed in the Viva Connections<\/li>\n<li>Create custom ACEs using SPFx (SharePoint Framework)<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4 aria-level=\"1\"><span data-contrast=\"none\">Viva Connections \u2013 the gateway to modern employee experience<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559738&quot;:240,&quot;335559739&quot;:0,&quot;335559740&quot;:259}\">\u00a0<\/span><\/h4>\n<p><span data-contrast=\"auto\"><a href=\"https:\/\/www.microsoft.com\/en-us\/microsoft-viva\/connections\">Microsoft Viva Connections<\/a> provides a curated, company-branded experience that brings together relevant news, conversations, and other resources in Microsoft 365.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">Viva Home also works as the \u201cfront door\u201d to an employee\u2019s experience and is available at no cost to all 270 million daily active Microsoft Teams users. It can be extended with custom components built using modern web technologies. You can use the skills you already have to build solutions for your customers and help them stay in the flow of the work.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/aces-learning-viva-home-connections-1.png\"><img decoding=\"async\" class=\"size-full wp-image-12665 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/aces-learning-viva-home-connections-1.png\" alt=\"Image aces learning viva home connections\" width=\"1000\" height=\"563\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/aces-learning-viva-home-connections-1.png 1000w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/aces-learning-viva-home-connections-1-300x169.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/aces-learning-viva-home-connections-1-768x432.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><span data-contrast=\"auto\">\u00a0<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/p>\n<h4 aria-level=\"1\"><span data-contrast=\"none\">About the learning module<\/span><\/h4>\n<p><span data-contrast=\"auto\">The Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections learning module consists of four modules:<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/p>\n<ol>\n<li><span data-contrast=\"auto\"><strong>Basics of ACEs: card templates, CardViews, properties, and states<\/strong> &#8211; Focuses on the introduction of the ACE model and how they are being created.<\/span><\/li>\n<li><b><span data-contrast=\"auto\">Exercise &#8211; Create SPFx Basic Card ACE showing SharePoint list data <\/span><\/b>&#8211; Step-by-step exercise on creating your first ACE component with SPFx.<\/li>\n<li><b><span data-contrast=\"auto\">ACE QuickViews and working with view navigators <\/span><\/b>&#8211; More details around the quick views and card views and their differences.<\/li>\n<li><span data-contrast=\"auto\"><strong>Exercise &#8211; Create an SPFx Image Card ACE displaying image carousel<\/strong> &#8211; Building an ACE which a bit more complex scenario.<\/span><span data-ccp-props=\"{&quot;134233279&quot;:true,&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/li>\n<li><strong>Viva Connections Actions for media selection and locations<\/strong> &#8211; Introduction to of Media and Location features in ACEs.<\/li>\n<li><strong>Exercise &#8211; Create an SPFx ACE with geo-location capabilities<\/strong> &#8211; Building an ACE which takes advantage of the geo location capabilities.<\/li>\n<\/ol>\n<h4><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/aces-learning-module-new.png\"><img decoding=\"async\" class=\"size-full wp-image-12681 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/aces-learning-module-new.png\" alt=\"Image aces learning module new\" width=\"914\" height=\"571\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/aces-learning-module-new.png 914w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/aces-learning-module-new-300x187.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/aces-learning-module-new-768x480.png 768w\" sizes=\"(max-width: 914px) 100vw, 914px\" \/><\/a><\/h4>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>We highly recommend using the <a href=\"https:\/\/aka.ms\/viva\/ace\/learn\">Microsoft Learn platform<\/a> to access this training material. We have also published the material as a <a href=\"https:\/\/www.youtube.com\/playlist?list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs\">YouTube Video playlist<\/a> in the Microsoft 365 Community YouTube channel.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/aces-learning-videos-youtube.png\"><img decoding=\"async\" class=\"size-full wp-image-12663 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/aces-learning-videos-youtube.png\" alt=\"Image aces learning videos youtube\" width=\"800\" height=\"548\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/aces-learning-videos-youtube.png 800w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/aces-learning-videos-youtube-300x206.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/01\/aces-learning-videos-youtube-768x526.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h4><span data-contrast=\"none\">What you need to know to complete this learning module<\/span><\/h4>\n<p><span data-contrast=\"auto\">The Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections learning modules is perfectly suited for developers who already know how to build web apps, but want to grow their skills to build apps for <a href=\"https:\/\/www.microsoft.com\/en-us\/microsoft-viva\/connections\">Microsoft Viva Connections<\/a> and how to integrate your existing Microsoft Teams applications to this new enterprise canvas.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/p>\n<p><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><span data-contrast=\"auto\">To complete this learning module, you will need:<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/p>\n<ul>\n<li>Experience using SharePoint Online at the intermediate level<\/li>\n<li>Ability to program with JavaScript, TypeScript, and Node.js<\/li>\n<li>Familiar with Adaptive Cards for creating the user experiences<\/li>\n<li>Experience using Visual Studio Code at the intermediate level<\/li>\n<li>Access to a Microsoft 365 tenant<\/li>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"3\" aria-setsize=\"-1\" data-aria-posinset=\"1\" data-aria-level=\"1\">Node.js v16<\/li>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"3\" aria-setsize=\"-1\" data-aria-posinset=\"1\" data-aria-level=\"1\">SPFx v1.16.1<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4 aria-level=\"1\"><span data-contrast=\"none\">Start learning how to build Adaptative Card Extensions today<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559738&quot;:240,&quot;335559739&quot;:0,&quot;335559740&quot;:259}\">\u00a0<\/span><\/h4>\n<p><span data-contrast=\"auto\">Many organizations use Viva Connections to engage with their employees and keep them informed. By extending Viva Connections, you can help these organizations bring their business-critical information to their employees\u2019 fingertips.\u00a0<\/span><a href=\"https:\/\/aka.ms\/viva\/ace\/learn\"><span data-contrast=\"none\">Learn how to build Adaptive Card Extensions (ACEs) for Viva Connections<\/span><\/a><span data-contrast=\"auto\"> using your existing web development skills and we look forward to hearing from you what you\u2019ll build next.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/p>\n<p><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">Happy learning! \ud83e\udde1\ud83d\ude80<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019re excited to announce a new learning module focusing on building Adaptive Card Extensions (ACEs) for Microsoft Viva Connections and for upcoming Microsoft Viva Home.<\/p>\n","protected":false},"author":69217,"featured_media":12667,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1,128,142,9],"tags":[],"class_list":["post-12661","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-365-developer","category-microsoft-teams","category-microsoft-viva","category-sharepoint-framework"],"acf":[],"blog_post_summary":"<p>We\u2019re excited to announce a new learning module focusing on building Adaptive Card Extensions (ACEs) for Microsoft Viva Connections and for upcoming Microsoft Viva Home.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/12661","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\/69217"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=12661"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/12661\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/12667"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=12661"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=12661"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=12661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}