Modals - Adaptive Cards

Overview - What is an Adaptive Card?

Microsoft definition of Adaptive Cards: Adaptive Cards are platform-agnostic snippets of UI, authored in JSON, that apps and services can openly exchange. When delivered to a specific app, the JSON is transformed into native UI that automatically adapts to its surroundings. It helps design and integrate light-weight UI for all major platforms and frameworks.

Our simple description of Adaptive Cards: We use them as a tool to easily create as a form and use it inside the app or the chat. Same as the Tekos, it translates hard coding into visual interface.

You can find them all over our products we share. Most of our Apps use Adaptive Cards in any form and shape.

Example Card with Amazon stocks

Example Cards of Hubspot & Pipedrive Apps

They can be useful for many type of needs:

1. Form to get user data like name, surname, mail, phone, address etc.

2. Store important tokens/keys in the flow for the apps.

3. Or for simple actions like Create a reminder, display prompt, Data fetched from apps.

Example card of Shopify App

As you can see we use them for simple usage with static data, but also the content of the Adaptive Cards can be dynamic depending on the requirements.

On the Shopify app we used some custom function to create an array with products and also to count the price tags.

Everything about how to create more complicated cards using the tekos flow you can find in the Adaptive Cards - Variables tutorial.