GUITACA BLOGS
Blogs from our authors

Microsoft 365: The best recipes for developers
Gustavo Velez
Learn more and buy
Return to Blogs
Adaptive Cards Tools - Adaptive Card Studio for Visual Studio CodeGustavo Velez
Adaptive Cards are an open format to show content. There are several tools to help to design and create Adaptive Cards11-02-2021
Teams

Adaptive Cards are an open format that enables developers to create content for user interfaces. Cards are used in messages, bots, emails, and any kind of application that needs to show information for users. Adaptive Cards control the colors, fonts, specific parts of the layout, buttons’ shapes, backgrounds, and other elements that make the Card to look, once displayed, as another piece of the user interface.

Adaptive Cards are used in messages, bots, emails, and any kind of application that needs to show information for users. Currently, Adaptive Cards can be used (for Microsoft technologies) in the Bot Framework, Outlook, Teams, Cortana, the Windows Timeline, and Windows Notifications. They use JSON to define the content of the cards.

To create and preview Adaptive Cards you can use Visual Studio Code with the extension Adaptive Card Studio (https://marketplace.visualstudio.com/items?itemName=madewithcardsio.adaptivecardsstudiobeta). The extension is open-sourced and available on the GitHub site https://github.com/MadeWithCards/AdaptiveCardsStudio. Install the extension in Visual Studio Code:

Create a JSON file with the card code and save it locally on the developer's computer. In this article, we are using the Expense Approval example published on the site https://amdesigner.azurewebsites.net. Then, open the folder where the JSON file is in Visual Studio Code. The button Adaptive Cards in the left-side menu will show all the cards found in the folder.

The Template button shows the source code and a preview of the card.

There is an Accounts - Sign in requested button in the left-side menu, and the option Sign in to use Adaptive Card Studio to sign into an Office 365 account, but it seems to have no function in the current version of the extension.

Return to Blogs