In the Adaptive Cards community call for October, Matt Hidinger gave a demo and deep-dive into Adaptive Components.

Deep dive into Adaptive Components

(Note: we’ve iterated on this quite a bit since last month’s community call)

Adaptive Components are a new concept that enable the creation of high-level UI “components” powered by templating and Adaptive Card elements. You can think of them like “molecules”, built by arranging Adaptive Card elements (“atoms”) into unique and helpful ways.

For example, the card below contains two Components:

1. The “File Component”, showing the file icon, title, URL and set of actions to open the file.
2. The two “People Components”, next to Requested by and Approver showing the person’s profile picture and name.

Components can be rendered within the card body by providing the name of the component you want to use, using the convention of [COMPONENT-DOMAIN]/[COMPONENT-NAME]. For example, if you want to use the File Chiclet component seen above, you’ll use the name "graph.microsoft.com/file" and provide the file properties received from the Graph API.

Notice only the data properties are needed to render the component, so for Files, you pass along the name, fileType, and webUrl.

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Component",
            "name": "graph.microsoft.com/file",
            "properties": {
               "name": "FY2020-Contoso.docx",
               "fileType": "docx",
               "webUrl": "https://adaptivecardsblob.blob.core.windows.net/assets/AdaptiveCardsSpec.docx"
            }
        }
    ]
}

When authoring a component for others to use, the creator gives the component a name, describes the shape of the data it expects, and uses Templating and Expressions to transform the data into Adaptive Card elements. Check out the GitHub issue for some example components, or see the backend component registry for the full list.

The power of components is really in 3 areas:

1. Allow apps to learn new UI components on the fly. Because Components are purely declarative, we can rely on component registries to allow the fetching of remote components via HTTP.
2. Help bootstrap the sharing of common types of UI among teams internally or with the public. Components can be hosted in GitHub repos and shared with others, making developers much more productive when building Cards.
3. Support multiple views over data. Lastly, we plan to make a component broadly useful, on different Hosts, with different display constraints, and different renderer schema versions. The example below shows a simple “Thing” component that has 3 different views over the same data.

Try it yourself

Interested in trying it out? You’re in luck! We have an early prototype to play with, note that it is pre-alpha and will be buggy!

1. Load up the Designer from the above URL.
2. Drag over a Component from Card Elements toolbox on the left.
3. On the designer surface, select the Component, and click Choose…
4. A dialog should open with a list of available components, this might take ~30 seconds or so due to the service starting up.
5. Click on the iextrading.com/stockQuote component.
6. Change the Element Properties and observe the component UI updating. E.g., Set Change value to -2.69
7. Play around with it by mix-and-matching different components that are currently available.

Want to contribute components?

Component definitions are stored in a GitHub repo and published to a service. They are purely declarative files that can be downloaded directly on the client without having to manually build up Adaptive Card UI directly. This means anyone can contribute new Components just by opening a PR in this repo and sharing them with the world.

Let us know on GitHub or Productboard if components is something you would benefit from in your day-to-day card usage!

Watch the call here

Resources

• Watch the latest Adaptive Cards session from Build 2020
• Adaptive Cards Roadmap
• Adaptive Card Templating Overview
• https://aka.ms/ACFeatures – Let us know what features you need

Next month’s call will be held on Thursday, November 12, 2020 at 9:00am PST. We look forward to talking to you then! Download a recurring calendar invite here at https://aka.ms/adaptivecardscommunitycall.

Check out the previous month’s call recording on our Office Development YouTube Channel

Adaptive Cards feedback channels

• Issues and feature requests
• Technical questions

The Adaptive Cards developer community call is on the 2nd Thursday of each month. We will provide you with the opportunity to learn about Adaptive Cards in general, how they could be a great tool in your applications and contribute to the evolution of the format and SDKs. Each month, we’ll discuss new features we are bringing to the platform, our roadmap, and listen to your feedback and suggestions.