Adaptive Cards Javascript library for HTML Clients
Adaptive Cards are a revolutionary tool for developers looking to enhance their applications with a consistent and interactive user interface. This open-source library allows for the creation of card-based UI elements that can easily be integrated across different platforms, ensuring a seamless user experience. The key purpose of the Adaptive Cards module is to provide a straightforward way to design and implement interactive cards that can display content and accept user input, without having to worry about the underlying platform-specific details. This flexibility not only speeds up development processes but also improves the maintainability and scalability of applications.
To begin using Adaptive Cards in your project, you can simply run the command npm install adaptivecards. This command integrates the Adaptive Cards library into your Node.js application, making it ready to use immediately. With Adaptive Cards installed, developers can leverage a wide range of features like customizable elements, dynamic content, and input forms, all of which are designed to operate across different devices and operating systems. This capability makes it an ideal choice for projects requiring a high level of interaction and user engagement, such as chatbots, notification systems, and more complex data-driven applications.
One of the most significant benefits of using Adaptive Cards is their compatibility with major industry leaders and services, such as Microsoft Teams, Outlook, and more. This compatibility ensures that developers can deploy Adaptive Cards in environments where their applications are most likely to reach their target audience. Moreover, Adaptive Cards support a schema that allows developers to specify exactly how cards are rendered, thus maintaining visual consistency across different platforms. This approach not only enhances the user experience but also aligns with modern design principles, making applications more appealing and accessible to users worldwide.
A README file for the adaptivecards code repository. View Code
Adaptive Cards are a new way for developers to exchange content in a common and consistent way. Get started today by putting Adaptive Cards into Microsoft Teams, Outlook Actionable Messages, Cortana Skills, or Windows Timeline -- or render cards inside your own apps by using our SDKs.
Adaptive Cards are designed to render anywhere that your users are. The following native platform renderers are under development right now.
PS: Latest Build Status is against main
branch.
Platform | Latest Release | Source | Docs | Latest Build Status |
---|---|---|---|---|
JavaScript | Source | Docs | ||
.NET | Source | Docs | ||
.NET WPF | Source | Docs | ||
.NET HTML | Source | Docs | ||
Windows UWP | Source | Docs | ||
Android | Source | Docs | ||
iOS | Source | Docs | ||
Card Designer | Source | Docs |
We release the Adaptive Cards products on the third week of each month, assuming there are updates. Please see the table below for the most recent and upcoming release dates.
Product | Last Release Date | Next Release Date |
---|---|---|
Website | 3/18/2024 | 4/22/2024 |
Designer | 1/31/2023 | 7/17/2023 |
JavaScript Renderer | 6/23/2023 | 7/17/2023 |
JavaScript Renderer Beta | 4/9/2023 | 7/17/2023 |
JavaScript Templating | 9/16/2022 | 7/17/2023 |
XAML Renderer | 2/2/2024 | 3/2/2024 |
XAML Object Model | 2/2/2024 | 3/2/2024 |
WinUI 3 Renderer | 2/2/2024 | 3/2/2024 |
WinUI 3 Object Model | 2/2/2024 | 3/2/2024 |
C++/WinRT Templating | 2/2/2024 | 3/2/2024 |
C#/WinRT Templating | 2/2/2024 | 3/2/2024 |
.NET Renderer | 12/1/2022 | 7/17/2023 |
.NET Templating | 3/7/2023 | 7/17/2023 |
Note: These release dates are subject to change based on availability and active development of each product.
We require the C++ code inside this project to follow the clang-format. If you change them, please make sure your changed files are formatted correctly.
Make sure clang-format version 12.0.0 and above version is used.
ClangFormat describes a set of tools that are built on top of LibFormat. It can support your workflow in a variety of ways including a standalone tool and editor integrations. For details, refer to https://clang.llvm.org/docs/ClangFormat.html
Two scripts are provided to help you format files.
Windows user only: use FormatSource.ps1. This script use clang-format.exe which is built into Visual Studio by default.
Execute below command in the root folder of the project
PowerShell.exe -ExecutionPolicy Bypass scripts\FormatSource.ps1 -ModifiedOnly $False
If it's the first time to run the script, make sure clang-format version 12.0.0 or above in the output. Otherwise you may need to upgrade Visual Studio or use your own clang-format binaries.
[clang-format] Version is:
clang-format version 12.0.0
Both Windows and MAC users: Use clang-format npmjs package
Execute below command in source/nodejs
npm run format
Make sure npm install
is run before.
git pre-commit hook
is an optional process. When you run git commit
, it will automatically do the format check and auto fix the format if error detected.
First make sure clang-format binary is installed in your dev enviroment. Then modify scripts/hooks/pre-commit to make sure clangFormat is point to the correct path. And finally setup the git hook.
Two ways to setup the hook:
scripts/hooks/pre-commit
to .git/hooks
git config --local core.hooksPath scripts/hooks
Consumption of the AdaptiveCards binary packages are subject to the Microsoft EULA (End User License Agreement). Please see the relevant terms as listed below:
NOTE: All of the source code, itself, made available in this repo as well as our NPM packages, continue to be governed by the open source MIT license.
The following SDKs are lovingly maintained by the Adaptive Cards community. Their contributions are sincerely appreciated! 🎉
Platform | Install | Repo | Maintainer |
---|---|---|---|
ReactNative | GitHub | BigThinkCode | |
Pic2Card | GitHub | BigThinkCode | |
Vue.js | GitHub | Tim Cadenbach |
There are many ways to contribute to Adaptive Cards.
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.
Feature | Schema Version | Platform | Parsing | Rendering |
---|---|---|---|---|
Action.OpenUrl | v1.0 | All | :white_check_mark: | :white_check_mark: |
Action.ShowCard | v1.0 | All | :white_check_mark: | :white_check_mark: |
Action.Submit | v1.0 | All | :white_check_mark: | :white_check_mark: |
Column | v1.0 | All | :white_check_mark: | :white_check_mark: |
ColumnSet | v1.0 | All | :white_check_mark: | :white_check_mark: |
Container | v1.0 | All | :white_check_mark: | :white_check_mark: |
Fact | v1.0 | All | :white_check_mark: | :white_check_mark: |
FactSet | v1.0 | All | :white_check_mark: | :white_check_mark: |
Image | v1.0 | All | :white_check_mark: | :white_check_mark: |
ImageSet | v1.0 | All | :white_check_mark: | :white_check_mark: |
Input.ChoiceSet | v1.0 | All | :white_check_mark: | :white_check_mark: |
Input.Date | v1.0 | All | :white_check_mark: | :white_check_mark: |
Input.Number | v1.0 | All | :white_check_mark: | :white_check_mark: |
Input.Text | v1.0 | All | :white_check_mark: | :white_check_mark: |
Input.Time | v1.0 | All | :white_check_mark: | :white_check_mark: |
Input.Toggle | v1.0 | All | :white_check_mark: | :white_check_mark: |
SelectAction | v1.0 | All | :white_check_mark: | :white_check_mark: |
TextBlock | v1.0 | All | :white_check_mark: | :white_check_mark: |
Explicit Image Dimension | v1.1 | All | :white_check_mark: | :white_check_mark: |
Background Color | v1.1 | All | :white_check_mark: | :white_check_mark: |
Vertical Content Alignment | v1.1 | All | :white_check_mark: | :white_check_mark: |
Action Icon | v1.1 | All | :white_check_mark: | :white_check_mark: |
Action Style | v1.2 | All | :white_check_mark: | :white_check_mark: |
Toggle Visibility | v1.2 | All | :white_check_mark: | :white_check_mark: |
ActionSet | v1.2 | All | :white_check_mark: | :white_check_mark: |
Fallback | v1.2 | All | :white_check_mark: | :white_check_mark: |
Container BackgroundImage | v1.2 | All | :white_check_mark: | :white_check_mark: |
Container MinHeight | v1.2 | All | :white_check_mark: | :white_check_mark: |
Container Bleed | v1.2 | All | :white_check_mark: | :white_check_mark: |
Container Style | v1.2 | All | :white_check_mark: | :white_check_mark: |
Image Data Uri | v1.2 | All | :white_check_mark: | :white_check_mark: |
Action Icon Data Uri | v1.2 | All | :white_check_mark: | :white_check_mark: |
Input.Text Inline Action | v1.2 | All | :white_check_mark: | :white_check_mark: |
TextBlock FontType | v1.2 | All | :white_check_mark: | :white_check_mark: |
RichTextBlock | v1.2 | All | :white_check_mark: | :white_check_mark: |
Input Label | v1.3 | All | :white_check_mark: | :white_check_mark: |
Input ErrorMessage | v1.3 | All | :white_check_mark: | :white_check_mark: |
AssociatedInputs | v1.3 | All | :white_check_mark: | :white_check_mark: |
RichTextBlock UnderLine | v1.3 | All | :white_check_mark: | :white_check_mark: |
Action.Refresh | v1.4 | All | :white_check_mark: | :white_check_mark: |
AdaptiveCard Authentication | v1.4 | All | :white_check_mark: | :white_check_mark: |
Action.Execute | v1.4 | All | :white_check_mark: | :white_check_mark: |
Action IsEnabled | v1.5 | JS | :white_check_mark: | :white_check_mark: |
Action IsEnabled | v1.5 | iOS | :white_check_mark: | :white_check_mark: |
Action IsEnabled | v1.5 | Android | :white_check_mark: | :white_check_mark: |
Action IsEnabled | v1.5 | XAML | :white_check_mark: | :white_check_mark: |
Action IsEnabled | v1.5 | .NET | :white_check_mark: | :x: |
Action Mode | v1.5 | JS | :white_check_mark: | :white_check_mark: |
Action Mode | v1.5 | iOS | :white_check_mark: | :white_check_mark: |
Action Mode | v1.5 | Android | :white_check_mark: | :white_check_mark: |
Action Mode | v1.5 | XAML | :white_check_mark: | :white_check_mark: |
Action Mode | v1.5 | .NET | :white_check_mark: | :x: |
Action/SelectAction ToolTip | v1.5 | JS | :white_check_mark: | :white_check_mark: |
Action/SelectAction ToolTip | v1.5 | iOS | :white_check_mark: | :white_check_mark: |
Action/SelectAction ToolTip | v1.5 | Android | :white_check_mark: | :white_check_mark: |
Action/SelectAction ToolTip | v1.5 | XAML | :white_check_mark: | :white_check_mark: |
Action/SelectAction ToolTip | v1.5 | .NET | :white_check_mark: | :x: |
Input.ChoiceSet Filtered Style | v1.5 | JS | :white_check_mark: | :white_check_mark: |
Input.ChoiceSet Filtered Style | v1.5 | iOS | :white_check_mark: | :white_check_mark: |
Input.ChoiceSet Filtered Style | v1.5 | Android | :white_check_mark: | :white_check_mark: |
Input.ChoiceSet Filtered Style | v1.5 | XAML | :white_check_mark: | :white_check_mark: |
Input.ChoiceSet Filtered Style | v1.5 | .NET | :white_check_mark: | :x: |
Input.Text Password Style | v1.5 | JS | :white_check_mark: | :white_check_mark: |
Input.Text Password Style | v1.5 | iOS | :white_check_mark: | :white_check_mark: |
Input.Text Password Style | v1.5 | Android | :white_check_mark: | :white_check_mark: |
Input.Text Password Style | v1.5 | XAML | :white_check_mark: | :white_check_mark: |
Input.Text Password Style | v1.5 | .NET | :white_check_mark: | :x: |
TextBlock Heading Style | v1.5 | JS | :white_check_mark: | :white_check_mark: |
TextBlock Heading Style | v1.5 | iOS | :white_check_mark: | :white_check_mark: |
TextBlock Heading Style | v1.5 | Android | :white_check_mark: | :white_check_mark: |
TextBlock Heading Style | v1.5 | XAML | :white_check_mark: | :white_check_mark: |
TextBlock Heading Style | v1.5 | .NET | :white_check_mark: | :x: |
RTL | v1.5 | JS | :white_check_mark: | :white_check_mark: |
RTL | v1.5 | iOS | :white_check_mark: | :white_check_mark: |
RTL | v1.5 | Android | :white_check_mark: | :white_check_mark: |
RTL | v1.5 | XAML | :white_check_mark: | :white_check_mark: |
RTL | v1.5 | .NET | :white_check_mark: | :x: |
Table | v1.5 | JS | :white_check_mark: | :white_check_mark: |
Table | v1.5 | iOS | :white_check_mark: | :white_check_mark: |
Table | v1.5 | Android | :white_check_mark: | :white_check_mark: |
Table | v1.5 | XAML | :white_check_mark: | :white_check_mark: |
Table | v1.5 | .NET | :white_check_mark: | :x: |
Carousel | v1.6 | JS | :white_check_mark: | :white_check_mark: |
Carousel | v1.6 | iOS | :x: | :x: |
Carousel | v1.6 | Android | :x: | :x: |
Carousel | v1.6 | XAML | :x: | :x: |
Carousel | v1.6 | .NET | :x: | :x: |
ImageSet Stacked Presentation Style | v1.6 | JS | :white_check_mark: | :white_check_mark: |
ImageSet Stacked Presentation Style | v1.6 | iOS | :x: | :x: |
ImageSet Stacked Presentation Style | v1.6 | Android | :x: | :x: |
ImageSet Stacked Presentation Style | v1.6 | XAML | :x: | :x: |
ImageSet Stacked Presentation Style | v1.6 | .NET | :x: | :x: |
Dynamic Type Ahead Search | v1.6 | JS | :x: | :x: |
Dynamic Type Ahead Search | v1.6 | iOS | :white_check_mark: | :x: |
Dynamic Type Ahead Search | v1.6 | Android | :white_check_mark: | :x: |
Dynamic Type Ahead Search | v1.6 | XAML | :x: | :x: |
Dynamic Type Ahead Search | v1.6 | .NET | :x: | :x: |
Label Position | v1.6 | JS | :x: | :x: |
Label Position | v1.6 | iOS | :x: | :x: |
Label Position | v1.6 | Android | :x: | :x: |
Label Position | v1.6 | XAML | :x: | :x: |
Label Position | v1.6 | .NET | :x: | :x: |
Inline Editable Input Style | v1.6 | JS | :x: | :x: |
Inline Editable Input Style | v1.6 | iOS | :x: | :x: |
Inline Editable Input Style | v1.6 | Android | :x: | :x: |
Inline Editable Input Style | v1.6 | XAML | :x: | :x: |
Inline Editable Input Style | v1.6 | .NET | :x: | :x: |