{"id":9559,"date":"2022-02-15T05:21:23","date_gmt":"2022-02-15T13:21:23","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=9559"},"modified":"2022-05-26T14:54:08","modified_gmt":"2022-05-26T21:54:08","slug":"updated-design-guidance-for-viva-connections-custom-cards","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/updated-design-guidance-for-viva-connections-custom-cards\/","title":{"rendered":"Updated design guidance for Viva Connections custom cards and quick views"},"content":{"rendered":"<p>As part the continuously evolving guidance we have now updated the <a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/viva\/design\/design-intro\">Viva Connections Adaptive Card Extension design guidance<\/a> and have also provide <a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/viva\/design\/quick-view-samples\">open-source designs for adaptive cards<\/a> which demonstrates the art of possible within the Viva Connections Mobile mobile experiences.<\/p>\n<h2>About mobile experiences<\/h2>\n<p><a href=\"http:\/\/aka.ms\/vivaconnections\">Viva Connections<\/a> mobile experiences can be extended with the widely adopted <a href=\"https:\/\/aka.ms\/spfx\">SharePoint Framework<\/a> (SPFx). SPFx acts as the orchestrator for the mobile first experiences by providing connection between the information from APIs and the presentation with the Adaptive Card technology. Viva Connections is your gateway to a modern employee experience where you can build and integrate apps that shape culture and foster connections to help employees thrive.<\/p>\n<p>We will continue evolving the provided guidance, samples and other assets based on your feedback and input.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/02\/adaptive-card-templates.png\">\n<img decoding=\"async\" class=\"aligncenter wp-image-9561\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/02\/adaptive-card-templates-1024x670.png\" alt=\"Image Adaptive Card templates for Viva Connections\" width=\"1000\" height=\"654\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/02\/adaptive-card-templates-1024x670.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/02\/adaptive-card-templates-300x196.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/02\/adaptive-card-templates-768x502.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/02\/adaptive-card-templates.png 1342w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<h2>Updated resources<\/h2>\n<p>Here are the updated resources for our partners and customers to take advantage:<\/p>\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/viva\/design\/design-intro\">Designing custom cards for your dashboard<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/viva\/design\/designing-quick-view\">Designing Quick Views<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/viva\/design\/quick-view-samples\">Adaptive Card Extension Quick View samples<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/pnp\/AdaptiveCards-Templates\">Open-sourced Adaptive Card design samples in GitHub<\/a><\/li>\n<\/ul>\n<p>Following video taken from our Microsoft 365 platform community calls (weekly call for everyone to join) shows how you can take advantage of the newly provided Adaptive Card designs in Viva Connections.<\/p>\n<p><iframe title=\"Introduction to new Adaptive Cards samples for Viva Connections Quick View designs\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/zcCNaQya1BA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h3 id=\"additional-resources-and-support\" class=\"\">Additional resources and support<i class=\"fabric-icon fabric-icon--Link\" aria-hidden=\"true\"><\/i><i class=\"fabric-icon fabric-icon--Link\" aria-hidden=\"true\"><\/i><\/h3>\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/sharepoint-framework-overview?WT.mc_id=m365-47395-cxa\" target=\"_blank\" rel=\"noopener\">Overview of the SharePoint Framework<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/web-parts\/get-started\/build-a-hello-world-web-part?WT.mc_id=m365-47395-cxa\" target=\"_blank\" rel=\"noopener\">Getting started with SharePoint Framework<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/build-for-teams-overview?WT.mc_id=m365-47395-cxa\" target=\"_blank\" rel=\"noopener\">Build for Microsoft Teams using SharePoint Framework<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/viva\/overview-viva-connections?WT.mc_id=m365-47395-cxa\" target=\"_blank\" rel=\"noopener\">Overview of Viva Connections Extensibility<\/a><\/li>\n<li><a href=\"https:\/\/aka.ms\/m365\/dev\/learn\/connections\" target=\"_blank\" rel=\"noopener\">Microsoft Learn \u2013 Extend Microsoft Viva Connections<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/learn\/paths\/m365-sharepoint-associate\/?WT.mc_id=m365-47395-cxa\" target=\"_blank\" rel=\"noopener\">Microsoft Learn \u2013 Extend Microsoft SharePoint \u2013 Associate<\/a><\/li>\n<li><a href=\"https:\/\/adoption.microsoft.com\/sample-solution-gallery?sortby=creationDateTime-true&amp;keyword=&amp;product=Viva&amp;action=ajax_plugin_call_sample_solution_gallery\">Viva Connections code and design samples<\/a> from the Microsoft 365 Unified Sample gallery<\/li>\n<\/ul>\n<p class=\"\">If you are looking into building experiences for\u00a0<span class=\"brand\">Microsoft 365<\/span>, we strongly recommend on joining our community calls and other\u00a0<span class=\"brand\">Microsoft 365<\/span>\u00a0community activities. More details from\u00a0<a href=\"https:\/\/aka.ms\/m365pnp\" target=\"_blank\" rel=\"noopener\">https:\/\/aka.ms\/m365pnp<\/a>.<\/p>\n<p class=\"\">Happy coding! Sharing is caring!\u00a0<a class=\"lightbox-link\" href=\"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/svg\/1f9e1.svg\" target=\"_blank\" rel=\"noopener\" aria-label=\"Lightbox image, click or press enter to enlarge\" data-featherlight=\"image\"><img decoding=\"async\" class=\"emoji lazyloaded\" role=\"img\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/svg\/1f9e1.svg\" alt=\"\ud83e\udde1\" data-src=\"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/svg\/1f9e1.svg\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Updated design guidance and reusable assets for Microsoft Viva Connections mobile experiences.<\/p>\n","protected":false},"author":69217,"featured_media":9560,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[8,142,9],"tags":[],"class_list":["post-9559","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adaptive-cards","category-microsoft-viva","category-sharepoint-framework"],"acf":[],"blog_post_summary":"<p>Updated design guidance and reusable assets for Microsoft Viva Connections mobile experiences.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/9559","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=9559"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/9559\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/9560"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=9559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=9559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=9559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}