Physiology of an Adaptive Card Extension

The Adaptive Card Extension (aka ACE) is a custom component that enable the user to extend the Viva Connections’ dashboard using SPFx.

When you create a Generic Card using the Microsoft SharePoint Yeoman generator you will have a solution like the following:

In detail the src folder structure will be like the following picture:

The principal files that you are interested in are:

• {your ACE name}AdaptiveCardExtension.ts
• {your ACE name}PropertyPane.ts
• cardView
  • CardView.ts
• quickView
  • QuickView.ts
  • template
  • QuickViewTemplate.json

Structure of the ACE

Main content of the ACE

In the {your ACE name}AdaptiveCardExtension.ts file you have the definition of the ACE, this is where you define the other views that are used and to do so you can use the properties cardNavigator and quickViewNavigator. With these properties you can register all the views that you want to use in the ACE.

The renderCard method specify which is the card view to show for the ACE.

Property Pane

In the {your ACE name}PropertyPane.ts file you can specify all the properties that you want to be specified in the property pane editor. There are many available property field types such as:

• PropertyPaneTextField
• PropertyPaneDropdown
• PropertyPaneCheckbox
• PropertyPaneButton
• PropertyPaneSlider
• PropertyPaneToggle

Card View

In the CardView.ts file, inside the cardViewParameters method, you can specify the various parts of the card view, starting with SPFx version 1.18 you can return a BasicCardView object, the default object has the following structure:

Beside the structure of the card view you can declare what to do when the user click on the card view thanks to the onCardSelection method, the default value is:

Which specify a target URL to navigate to when the card view is clicked.

Quick View

The quick view is formed by two files:

• The QuickView.ts file contains the operations that you want to perform in the quick view, basically it contains two methods:
  • data: returns the object to be bound in the quick view
  • template: returns the json file that represent the structure of the quick view
• The QuickViewTemplate.json file contains the structure of the quick view that is represented. If you’re wondering how to write this file you can use the Adaptive Card Designer or if you want some hint of the possible applications you can view a list of samples from Microsoft.

Conclusions

You have many ways to customize an ACE, and I think they are an amazing tool that empower the developer and the user to do useful things, also is worth mentioning that by default they can be used both in a desktop and a mobile environment. If you’re interested in knowing more you can check the official Microsoft documentation here.

If you want to view the default generic adaptive card extension created with the Yeoman SharePoint generator you can view it here on GitHub.

Hope that helps!