microsoft / adaptivecards Goto Github PK

A new way for developers to exchange card content in a common and consistent way.

License: MIT License

CSS 2.98% HTML 0.18% TypeScript 15.51% JavaScript 5.30% C# 26.41% C++ 23.95% C 0.31% CMake 0.09% Java 12.65% Objective-C 2.21% Objective-C++ 9.15% Ruby 0.05% Batchfile 0.13% PowerShell 0.21% SWIG 0.57% ANTLR 0.03% Makefile 0.01% Swift 0.04% SCSS 0.20% Shell 0.02%

cards bot-framework adaptive-cards adaptivecards adaptive xaml wpf xamarin ios android

adaptivecards's Introduction

Adaptive Cards

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.

Dive in

Install and Build

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	Source	Docs
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

Release schedule

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	2/6/2024	3/11/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.

Code format

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.

IDE integration

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

Format with script

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.

Use Git pre-commit hook

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:

Copy scripts/hooks/pre-commit to .git/hooks
git config --local core.hooksPath scripts/hooks

End User License Agreement for our binary packages

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.

Community SDKs

The following SDKs are lovingly maintained by the Adaptive Cards community. Their contributions are sincerely appreciated! 🎉

Platform	Repo	Maintainer
ReactNative	GitHub	BigThinkCode
Pic2Card	GitHub	BigThinkCode
Vue.js	GitHub	Tim Cadenbach

Contribute

There are many ways to contribute to Adaptive Cards.

Submit bugs and help us verify fixes as they are checked in.
Review the source code changes.
Engage with Adaptive Cards users and developers on StackOverflow.
Join the #adaptivecards discussion on Twitter.
Contribute bug fixes.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Supported Features

Feature	Schema Version	Platform	Parsing	Rendering
Action.OpenUrl	v1.0	All	✅	✅
Action.ShowCard	v1.0	All	✅	✅
Action.Submit	v1.0	All	✅	✅
Column	v1.0	All	✅	✅
ColumnSet	v1.0	All	✅	✅
Container	v1.0	All	✅	✅
Fact	v1.0	All	✅	✅
FactSet	v1.0	All	✅	✅
Image	v1.0	All	✅	✅
ImageSet	v1.0	All	✅	✅
Input.ChoiceSet	v1.0	All	✅	✅
Input.Date	v1.0	All	✅	✅
Input.Number	v1.0	All	✅	✅
Input.Text	v1.0	All	✅	✅
Input.Time	v1.0	All	✅	✅
Input.Toggle	v1.0	All	✅	✅
SelectAction	v1.0	All	✅	✅
TextBlock	v1.0	All	✅	✅
Explicit Image Dimension	v1.1	All	✅	✅
Background Color	v1.1	All	✅	✅
Vertical Content Alignment	v1.1	All	✅	✅
Action Icon	v1.1	All	✅	✅
Action Style	v1.2	All	✅	✅
Toggle Visibility	v1.2	All	✅	✅
ActionSet	v1.2	All	✅	✅
Fallback	v1.2	All	✅	✅
Container BackgroundImage	v1.2	All	✅	✅
Container MinHeight	v1.2	All	✅	✅
Container Bleed	v1.2	All	✅	✅
Container Style	v1.2	All	✅	✅
Image Data Uri	v1.2	All	✅	✅
Action Icon Data Uri	v1.2	All	✅	✅
Input.Text Inline Action	v1.2	All	✅	✅
TextBlock FontType	v1.2	All	✅	✅
RichTextBlock	v1.2	All	✅	✅
Input Label	v1.3	All	✅	✅
Input ErrorMessage	v1.3	All	✅	✅
AssociatedInputs	v1.3	All	✅	✅
RichTextBlock UnderLine	v1.3	All	✅	✅
Action.Refresh	v1.4	All	✅	✅
AdaptiveCard Authentication	v1.4	All	✅	✅
Action.Execute	v1.4	All	✅	✅
Action IsEnabled	v1.5	JS	✅	✅
Action IsEnabled	v1.5	iOS	✅	✅
Action IsEnabled	v1.5	Android	✅	✅
Action IsEnabled	v1.5	XAML	✅	✅
Action IsEnabled	v1.5	.NET	✅	❎
Action Mode	v1.5	JS	✅	✅
Action Mode	v1.5	iOS	✅	✅
Action Mode	v1.5	Android	✅	✅
Action Mode	v1.5	XAML	✅	✅
Action Mode	v1.5	.NET	✅	❎
Action/SelectAction ToolTip	v1.5	JS	✅	✅
Action/SelectAction ToolTip	v1.5	iOS	✅	✅
Action/SelectAction ToolTip	v1.5	Android	✅	✅
Action/SelectAction ToolTip	v1.5	XAML	✅	✅
Action/SelectAction ToolTip	v1.5	.NET	✅	❎
Input.ChoiceSet Filtered Style	v1.5	JS	✅	✅
Input.ChoiceSet Filtered Style	v1.5	iOS	✅	✅
Input.ChoiceSet Filtered Style	v1.5	Android	✅	✅
Input.ChoiceSet Filtered Style	v1.5	XAML	✅	✅
Input.ChoiceSet Filtered Style	v1.5	.NET	✅	❎
Input.Text Password Style	v1.5	JS	✅	✅
Input.Text Password Style	v1.5	iOS	✅	✅
Input.Text Password Style	v1.5	Android	✅	✅
Input.Text Password Style	v1.5	XAML	✅	✅
Input.Text Password Style	v1.5	.NET	✅	❎
TextBlock Heading Style	v1.5	JS	✅	✅
TextBlock Heading Style	v1.5	iOS	✅	✅
TextBlock Heading Style	v1.5	Android	✅	✅
TextBlock Heading Style	v1.5	XAML	✅	✅
TextBlock Heading Style	v1.5	.NET	✅	❎
RTL	v1.5	JS	✅	✅
RTL	v1.5	iOS	✅	✅
RTL	v1.5	Android	✅	✅
RTL	v1.5	XAML	✅	✅
RTL	v1.5	.NET	✅	❎
Table	v1.5	JS	✅	✅
Table	v1.5	iOS	✅	✅
Table	v1.5	Android	✅	✅
Table	v1.5	XAML	✅	✅
Table	v1.5	.NET	✅	❎
Carousel	v1.6	JS	✅	✅
Carousel	v1.6	iOS	❎	❎
Carousel	v1.6	Android	❎	❎
Carousel	v1.6	XAML	❎	❎
Carousel	v1.6	.NET	❎	❎
ImageSet Stacked Presentation Style	v1.6	JS	✅	✅
ImageSet Stacked Presentation Style	v1.6	iOS	❎	❎
ImageSet Stacked Presentation Style	v1.6	Android	❎	❎
ImageSet Stacked Presentation Style	v1.6	XAML	❎	❎
ImageSet Stacked Presentation Style	v1.6	.NET	❎	❎
Dynamic Type Ahead Search	v1.6	JS	❎	❎
Dynamic Type Ahead Search	v1.6	iOS	✅	❎
Dynamic Type Ahead Search	v1.6	Android	✅	❎
Dynamic Type Ahead Search	v1.6	XAML	❎	❎
Dynamic Type Ahead Search	v1.6	.NET	❎	❎
Label Position	v1.6	JS	❎	❎
Label Position	v1.6	iOS	❎	❎
Label Position	v1.6	Android	❎	❎
Label Position	v1.6	XAML	❎	❎
Label Position	v1.6	.NET	❎	❎
Inline Editable Input Style	v1.6	JS	❎	❎
Inline Editable Input Style	v1.6	iOS	❎	❎
Inline Editable Input Style	v1.6	Android	❎	❎
Inline Editable Input Style	v1.6	XAML	❎	❎
Inline Editable Input Style	v1.6	.NET	❎	❎

adaptivecards's People

Contributors

Stargazers

Watchers

Forkers

40a stevengum dsanvita williamholmes alexandrehenzen peterblazejewicz blahartinger mig242 photodesignch preshi kris444 zhusongm gerrymanoim rghv spotlabsnet globalcherry-group yizelviz robsonmobile ericdahlvang tongyliu llenroc arunpareek alexxnica kryndex githubcodi jshoffner tony-zhu mrbrennonwilliams jeffwilcox sk8tz sandboxorg eanders-ms synk kazuki-ma danmarshall deanchalk caining0 yash-7 kbuchanan alysonjorge eduardtruuvaart sap172 yeohan vsreeraj clancey guru98 tfennel mollyd16 aqibmalik29 ulcreativesoftware dptejas sundarapandian-balasubramanian compulim antonio8101 pyrotechnist sschutten vxnsbir1ugsp boomerhudson lobanetse ashwani-ksprof mniew slstinson fatterbetter indierawk2k2 rednivrug15 wictorwilen dhruvinparikh an888ha fastmicroservices luco2018 ismanapa abir-dutta sdharshraj firefoxxy8 identifier awaemmanuel sweetcard ritekr fussypants tnev shmuelgutman dalavancloud duk42111 dbdness geekysrm maxakbar adufilie y1026 hippietilley danwong arafattehsin kartik1607 drako0013 andrewaguirrep solidcloudio sunlight5288 codematrix drnl tao-lagash j420247

adaptivecards's Issues

Section "title" property

Example seen in FlightIntinerary.

               {
                                                "title": "Passengers",
                                                "separator": "bottom",
                                                "items": [
                                                                {
                                                                                "@type": "TextBlock",
                                                                                "text": "Sarah Hum"
                                                                },
                                                                {
                                                                                "@type": "TextBlock",
                                                                                "text": "Jeremy Goldberg"
                                                                },
                                                                {
                                                                                "@type": "TextBlock",
                                                                                "text": "Evan Litvak"
                                                                }
                                                ]
                                }

Semantics:

Always displayed at the same location within the section (probably at the top)
Always rendered using a very specific font (size, weight, color)
Possibly useful for accessibility or speech-devices

Toast Notifications using JSON

// TODO: Handle actions with input
// TODO: What about inputs that don't have actions?
// TODO: Can we go semantic with title, description, etc

{
	"@type": "AdaptiveCard",
	"title": "Adaptive Card design session",
	"description1": "Conf Room 112/3377 (10)",
	"description2": "12:30 PM - 1:30 PM",
	"body": [
	    {
	        "@type": "TextBlock",
	        "text": "Snooze for"
	    },
	    {
	        "@type": "MultichoiceInput",
	        "size": "stretch",
	        "choices": [
	            { "display": "5 minutes" },
	            { "display": "15 minutes" },
	            { "display": "30 minutes" }
	        ]
	    },
	    {
	        "@type": "ActionGroup",
	        "items": [
	            {
	                "@type": "HttpPOST",
	                "name": "Snooze"
	            },
	            {
	                "@type": "HttpPOST",
	                "name": "I'll be late"
	            },
	            {
	                "@type": "HttpPOST",
	                "name": "Dismiss"
	            }
	        ]
	    }
	]
}

Create Bot that generates Adaptive Card responses

Multi-targeting a single payload to multiple containers

Visualizer UI gets 2nd-tier configuration for Client preview

Selecting "Live Tile" shows additional options to choose which Tile Size to the Visualizer will show. E.g., Small, Medium, Wide, Large.

HTML renderer enable strictNullChecks and noImplicitAny

Live Tile using JSON

// TODO: Do we have MRT issues?
// TODO: What about high contrast?
// TODO: LTR and RTL
// TODO: Should we add TileGeneric?
// TODO: Narrator support

{
    "branding": "none",
    "TileSmall": {
        "branding": {},
        "visual": [
            
        ]
    },
    "TileMedium": {
        "branding": {},
        "visual": [

        ]
    },
     "TileWide": {
        "branding": {},
        "visual": [
            
        ]
    },
    "TileLarge": {
        "branding": {},
        "visual": [
            
        ]
    }
}

Renderer generating bitmaps

Should this be built into the renderer or left up to the host app?

Add Stock Card sample

Similar to

iOS/Android/UWP Shared Code Prototype

Update schema documentation once draft is ready

Google Now scenario validation

Prototype translation layer from Adaptive XML to Adaptive JSON

Tooling to validate json payload against the schema

Host App for Android Renderer

Sections become more semantic

Flesh out "House of Cards" concept

Allowing a single payload to house multiple Card variations. E.g., a developer could include an AdaptiveCard targeting Skype, an FbCard targetting FB Messenger, and a SpeechCard meant to being read on a headless device.

This should also cover the the Skype scenario where a Card has a Collapsed and FullScreen view, as seen here on Facebook Messenger:

Add Receipt Card sample

Card versioning and fallback

Problem

If a bot developer absolutely requires a v2 renderer, and fallback would not be appropriate, they can add this attribute and the renderer would output something like “Unfortunately this content couldn’t be displayed”

Schema

version is a required property on all payloads.
minVersion is an optional property that allows a developer to declare that their card must only be renderered on a supported version.

Example

{
    "$schema": "../../schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "99.0",
    "minVersion": "99.0",
    "fallbackText": "This card requires Adaptive Cards version 99.0, which probably doesn't exist",
    "body": [
        {
            "type": "TextBlock",
            "text": "THIS SHOULD NOT APPEAR! It should show the fallback text"
        }        
    ]
}

Renderer spec

A renderer MUST implement a particular version of the schema.
If a renderer encounters a minRequiredVersion property in the AdaptiveCard that is higher than the supported version, it MUST return the fallbackText instead.

User-friendly errors in the Visualizer with malformed JSON

Automatically deploy the Visualizer to a hosted site on build

Visualizer supports domain-specific payloads

A User can paste in a full Timeline or Bot payload and visualize the adaptive section

TextBlock isSubtle property

Should we make subtle a textColor semantic value versus the isSubtle property. Is it useful to combine them?

{ textColor: "warning", "isSubtle": true }

Schema for List-based choice input

Cortana Scenario: User says "Find a Starbucks", and it presents a customized list of numbered items that the user can choose. They need more than just a "displayName" that we have in the MultiChoiceInput

Renderer allows containers to support custom types

Scenario: Toast Notifications have a progress bar in their payloads

 "body": [
                    {
                        "type": "TextBlock",
                        "text": "Serious Pie",
                        "textWeight": "bolder",
                        "textSize": "medium"
                    },
                    **{
                        "type": "ProgressBar",
                        "Value": "50"
                    }**
                ]

The Renderer should provide some kind of callback to the container to handle generating UI for any unknown types

Bot Framework payload
Activity Timeline payload
Outlook Connector
Live Tile
Toast Notification
Cortana