A gallery of 14 Adaptive Card Extensions for use with Viva Connections. These samples provide a demonstration of the art of the possible as well as provide design guidance for laying out different types of data using Adaptive Cards and SPFx. There is also a Microsoft Teams Personal app that when installed handles deep links from the sample cards.

The Personal App can also be used as a gallery to show the different cards and get details on different resources for building Adaptive Card Extensions.

This solution uses mock data but includes a service layer. Images that are structural to the layout of the cards are included in the project. Images that are related to the data are referenced as URLs in the data files in the project. Those images are referenced directly from the following repo https://github.com/pnp/spfx-reference-scenarios. Please ensure that this repo is allowed before you deploy the solution.

Included Samples

Benefits

Design template for showing news or articles with imagery and deep links to Teams.

Event Schedule

Design template for showing lists of data and taped interface. Includes registration form and multiple card navigation with deep linking to Teams.

FAQ Accordion

Design template for showing expand and collapse sections in an accordion style. Submission form with a deep linking to Teams.

Image Carousel

Design template for displaying images in a carousel with product data.

Inventory Details

Design template for displaying lists of data with images. Details conditional formatting and deep link to Teams.

Pay Slips

Design template for displaying lists of numerical data. Includes date manipulation and navigation.

Simple List with Praise

Design template for displaying lists of people with a deep link to Teams.

Team Calendar

Design template for a dynamic calendar showing different events happening on each day.

Holidays

Design template for a vertical timeline of events with image and description.

Time Off Request

Design template for showing a request form with form elements and deep link to Teams.

COVID-19 Booster

Design template for textual information and registration form and deep link to Teams.

Cafeteria Menu

Design template for showing visual list of data with images. Shows examples of a tabbed interface and data manipulation.

Installation

You can add the app to the app catalog from the store. Once the application is in the app catalog select the app in the list and in the Files tab select Sync to Teams. This will install the app as a personal app in Teams. Once it has been deployed to Teams you can either deploy it using a global policy from the Teams Admin center or add it individually by Selecting the Apps Icon from the left rail in Teams > Built for your org > ACE Design Template Gallery.

Adaptive Card Extension Design Gallery

by Sympraxis Consulting