Physiology of an Adaptive Card Extension
Tags: spfx
Published: 2023-12-26 09:35:35

---
title: Physiology of an Adaptive Card Extension
published: true
date: 2023-10-11 07:51:00 UTC
tags: SPFx
canonical_url: 
---

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:

![](https://iamguidozamcode.files.wordpress.com/2023/09/image-9.png?w=372)

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

![](https://iamguidozamcode.files.wordpress.com/2023/09/image-11.png?w=328)

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:

![](https://iamguidozamcode.files.wordpress.com/2023/09/image-12.png?w=426)

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:

![](https://iamguidozamcode.files.wordpress.com/2023/09/image-13.png?w=1004)

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](https://adaptivecards.io/designer/) or if you want some hint of the possible applications you can view a [list of samples from Microsoft](https://adaptivecards.io/samples/).

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](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension).

If you want to view the default generic adaptive card extension created with the Yeoman SharePoint generator you can view it [here on GitHub](https://github.com/GuidoZam/blog-samples/tree/main/ACEs/MyFirstACE).

Hope that helps!