Viva Connections: Effective Design Samples for Adaptive Cards

In this 14-minute developer-focused demo, Alex Clark shares a brief overview of Viva Connections Dashboard and Cards along with the Adaptive Card samples repo. Add an Adaptive Card template to a Dashboard page. Populate template with JSON from Adaptive Card Designer. Learn about Card JSON (the design) and Data JSON file (static data). Not shown is building out more robust “custom” cards – full SPFx ACE extensions that connect various end points, LOB systems, etc. Develop basic cards in Adaptive Card Designer or in VS Code.

Adaptive Cards are an open source design system used to create interactive and engaging experiences for users. Adaptive Cards for Viva Connections provide a library of pre-built card designs that can be used to quickly build custom experiences in the Microsoft Teams app. These cards have been designed with accessibility, scalability, and extensibility in mind so they can be adapted for use across multiple platforms and channels. Additionally, the cards are optimized for mobile devices making them easy to use on any device. With these cards you can easily add images, videos, buttons and other interactive elements into conversations or notifications within Teams.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 12, 2023.

Demo Presenter

📺 Alex Clark (Microsoft) | @sharepointalex

Supporting materials

• Templates - Adaptive Card templates - design examples | https://github.com/pnp/AdaptiveCards-…
• Documentation - Build your first SharePoint Adaptive Card Extension | https://learn.microsoft.com/sharepoin…
• Learn - Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections | https://learn.microsoft.com/training/…
• Documentation - Adaptive Cards Template Language | https://learn.microsoft.com/adaptive-…
• Tool – Adaptive Cards Designer | https://www.adaptivecards.io/designer/