Adaptive Card Extension Design Gallery
by Sympraxis Consulting
A gallery of 14 Adaptive Card Extensions showing a variety of design options for data layout.
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.