` containing the inner card)
--------------------------------------------------------------------------------
/AdaptiveCards/rendering-cards/speech.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Handling Speech
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 06/26/2017
6 | ms.topic: concept-article
7 | ---
8 |
9 | # Handling speech
10 |
11 | To support speech adaptive Cards has the `speak` property which contains information on how a card should be read aloud to a user.
12 |
13 | The speech tag can be annotated using [SSML markup](/previous-versions/office/developer/speech-technologies/hh361578(v=office.14)).
14 | SSML gives you the ability control the speed, tone, inflection of the speech. It even allows you to stream audio or a render a TTS audio stream
15 | from your own service, giving you a great deal of customization.
16 |
17 | There are 2 patterns for speak property usage by a host application:
18 | * **on delivery** - When a card is delivered a client may opt to read the Speak property for the card to describe the card as a whole.
19 | * **on demand** - In order to support a richer accessibility model the schema supports a speak tag per element.
20 | This allows for clients to read each element to recipients with accessibility requirements.
21 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/ios/host-config.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Host config - iOS SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 06/26/2017
6 | ms.topic: how-to
7 | ---
8 |
9 | # Host config - iOS
10 |
11 | Host can be configured through HostConfig which can be generated by JSON string
12 |
13 | ```objective-c
14 | ACOParseResult *hostconfigParseResult = [ACOHostConfig FromJson:self.hostconfig];
15 | ```
16 |
17 | Default HostConfig can be instantiated
18 |
19 | ```objective-c
20 | ACOHostConfig *defaultConfig = [[ACHostConfig alloc] init];
21 | ```
22 |
23 | ## Render a card using host config
24 |
25 | Renderer takes adaptive card and host config. HostConfig can be nil, and if nil, default value will be used.
26 |
27 | ```objective-c
28 | ACRRenderResult *renderResult;
29 | renderResult = [ACRRenderer render:cardParseResult.card
30 | config:hostconfigParseResult.config
31 | widthConstraint:300.0];
32 | ```
33 |
34 | ## Customization
35 |
36 | There are 3 ways to customize the adaptive card rendering:
37 |
38 | 1. Host Config
39 | 2. XIB
40 | 3. Custom element rendering
41 |
--------------------------------------------------------------------------------
/LICENSE-CODE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 | Copyright (c) Microsoft Corporation
3 |
4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
5 | associated documentation files (the "Software"), to deal in the Software without restriction,
6 | including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
7 | and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
8 | subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all copies or substantial
11 | portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
14 | NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
15 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
16 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
17 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/uwp/host-config.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Host config - UWP SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 06/26/2017
6 | ms.topic: how-to
7 | ---
8 |
9 | # Host config - UWP
10 |
11 | To customize the renderer you provide an instance of the HostConfig object. (See [Host Config Schema](../../../rendering-cards/host-config.md) for the full description.)
12 |
13 | > The HostConfig object will be instantiated with defaults, so you can set just the properties you want to change.
14 |
15 | Example:
16 |
17 | ```csharp
18 | var hostConfig = new AdaptiveHostConfig()
19 | {
20 | FontSizes = {
21 | Small = 15,
22 | Normal = 20,
23 | Medium = 25,
24 | Large = 30,
25 | ExtraLarge= 40
26 | }
27 | };
28 | renderer.HostConfig = hostConfig;
29 | ```
30 |
31 | > Alternatively, you can load the HostConfig from a JSON string.
32 |
33 | Example:
34 |
35 | ```csharp
36 | var hostConfig = AdaptiveHostConfig.FromJsonString(jsonString);
37 |
38 | renderer.HostConfig = hostConfig;
39 | ```
40 |
41 | When you pass it in to the UWPRenderer you are setting the default HostConfig to use for every card you render.
42 |
--------------------------------------------------------------------------------
/ThirdPartyNotices:
--------------------------------------------------------------------------------
1 | ##Legal Notices
2 | Microsoft and any contributors grant you a license to the Microsoft documentation and other content
3 | in this repository under the [Creative Commons Attribution 4.0 International Public License](https://creativecommons.org/licenses/by/4.0/legalcode),
4 | see the [LICENSE](LICENSE) file, and grant you a license to any code in the repository under the [MIT License](https://opensource.org/licenses/MIT), see the
5 | [LICENSE-CODE](LICENSE-CODE) file.
6 |
7 | Microsoft, Windows, Microsoft Azure and/or other Microsoft products and services referenced in the documentation
8 | may be either trademarks or registered trademarks of Microsoft in the United States and/or other countries.
9 | The licenses for this project do not grant you rights to use any Microsoft names, logos, or trademarks.
10 | Microsoft's general trademark guidelines can be found at https://go.microsoft.com/fwlink/?LinkID=254653.
11 |
12 | Privacy information can be found at https://privacy.microsoft.com/en-us/
13 |
14 | Microsoft and any contributors reserve all others rights, whether under their respective copyrights, patents,
15 | or trademarks, whether by implication, estoppel or otherwise.
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/winui-3/extensibility.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Extensibility - WinUI 3 SDK
3 | description: This article walks you through the process of using extensibility in the WinUI 3 SDK.
4 | author: JeanRoca
5 | ms.author: jproca
6 | ms.date: 05/04/2023
7 | ms.topic: article
8 | ---
9 |
10 | # Extensibility - WinUI 3
11 |
12 | ## Changing per element rendering
13 |
14 | Implement a renderer class and set it in the renderer
15 |
16 | ```csharp
17 | // My custom renderer is going to replace how textblocks should render!
18 | public class MyCustomRenderer : IAdaptiveElementRenderer
19 | {
20 | public UIElement Render(IAdaptiveCardElement element, AdaptiveRenderContext context)
21 | {
22 | var adaptiveTextBlock = element as AdaptiveTextBlock;
23 | TextBlock textblock = new TextBlock()
24 | {
25 | Text = adaptiveTextBlock.Text + "I want every single textblock to append this text, and it should be aligned to the right!",
26 | HorizontalAlignment = HorizontalAlignment.Right
27 | };
28 |
29 | return textblock;
30 | }
31 | }
32 |
33 | renderer.ElementRenderers.Set("TextBlock", new MyCustomRenderer());
34 | ```
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/ios/native-styling.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Native styling - iOS SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 06/26/2017
6 | ms.topic: article
7 | ---
8 |
9 | # Native styling - iOS
10 |
11 | Use XIB for fine-grained styling.
12 |
13 | The following XIBs exist
14 |
15 | | XIB | Usage |
16 | |---|---|
17 | | ACRButton.xib | buttons |
18 | | ACRCellForCompactMode.xib | ChoiceSet compact mode|
19 | | ACRDatePicker.xib | DatePicker for Input.Date |
20 | | ACRDateTextField.xib | TextField for Input.Date |
21 | | ACRInputTableView.xib | Container for Inputs |
22 | | ACRLabelView.xib | TextBlock |
23 | | ACRPickerView.xib | ChoiceSet |
24 | | ACRQuickActionMultilineView.xib | Quick Actions with multilines |
25 | | ACRQuickActionView.xib | Quick Actions |
26 | | ACRTextField.xib | Input |
27 |
28 | XIB can be edited through XCode IB.
29 | Once XIBs are edited to the specification.
30 | From a terminal
31 | ```
32 | ibtool --compile name.nib name.xib
33 | ```
34 |
35 | For example, to style a button
36 | ```
37 | ibtool --compile ACRButton.nib ACRButton.xib
38 | ```
39 |
40 | The generated nib files can be then replaced at AdaptiveCards.framework
41 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/javascript/getting-started.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: JavaScript SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 11/28/2017
6 | ms.topic: get-started
7 | ---
8 |
9 | # Getting started - JavaScript
10 |
11 | As we described in [Getting Started](../../../authoring-cards/getting-started.md) page, an Adaptive Card is a JSON-serialized card object model. This is a JavaScript SDK for generating client-side HTML in the browser.
12 |
13 | ## Install
14 |
15 | ### Node
16 |
17 | [](https://www.npmjs.com/package/adaptivecards)
18 |
19 | ```console
20 | npm install adaptivecards
21 | ```
22 |
23 | ### CDN
24 |
25 | ```html
26 |
27 | ```
28 |
29 | ## Usage
30 |
31 | ### Import the module
32 |
33 | ```js
34 | // import the module
35 | import * as AdaptiveCards from "adaptivecards";
36 |
37 | // or require it
38 | var AdaptiveCards = require("adaptivecards");
39 |
40 | // or use the global variable if loaded from CDN
41 | AdaptiveCards.renderCard(...);
42 | ```
43 |
44 | ## Next steps
45 |
46 | See [Render a card](render-a-card.md) for the next steps!
47 |
--------------------------------------------------------------------------------
/AdaptiveCards/docfx.json:
--------------------------------------------------------------------------------
1 | {
2 | "build": {
3 | "content": [
4 | {
5 | "files": [
6 | "**/*.md",
7 | "**/*.yml"
8 | ],
9 | "exclude": [
10 | "**/obj/**",
11 | "**/includes/**",
12 | "README.md",
13 | "LICENSE",
14 | "LICENSE-CODE",
15 | "ThirdPartyNotices"
16 | ]
17 | }
18 | ],
19 | "resource": [
20 | {
21 | "files": [
22 | "**/*.png",
23 | "**/*.jpg"
24 | ],
25 | "exclude": [
26 | "**/obj/**",
27 | "**/includes/**"
28 | ]
29 | }
30 | ],
31 | "overwrite": [],
32 | "externalReference": [],
33 | "globalMetadata": {
34 | "ms.service": "adaptive-cards",
35 | "uhfHeaderId": "MSDocsHeader-AdaptiveCards",
36 | "breadcrumb_path": "~/breadcrumb/toc.yml",
37 | "titleSuffix": "Adaptive Cards",
38 | "searchScope": ["Adaptive Cards"],
39 | "feedback_system": "GitHub",
40 | "feedback_github_repo": "MicrosoftDocs/AdaptiveCards"
41 | },
42 | "fileMetadata": {},
43 | "template": [],
44 | "dest": "AdaptiveCards",
45 | "markdownEngineName": "markdig"
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/net-html/native-styling.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Native styling - .NET HTML SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 10/19/2017
6 | ms.topic: article
7 | ---
8 |
9 | # Native styling - .NET HTML
10 |
11 | While Host Config will get you most of the way there on each platform, it's likely that you will have to do some native styling on each platform.
12 |
13 | HTML makes this easy by adding CSS classes to every element.
14 |
15 | | Element | CSS class |
16 | |---|---|
17 | | AdaptiveCard | ac-adaptivecard |
18 | | All Actions | ac-pushButton |
19 | | Select Actions | ac-selectable |
20 | | Action.OpenUrl | ac-action-openUrl |
21 | | Action.ShowCard | ac-action-showCard |
22 | | Action.Submit | ac-action-submit |
23 | | ActionSet | ac-actionset |
24 | | Column | ac-column |
25 | | ColumnSet | ac-columnset |
26 | | Container | ac-container |
27 | | All Inputs | ac-input |
28 | | Input.ChoiceSet | ac-multichoiceInput |
29 | | Input.Date | ac-dateInput |
30 | | Input.Number | ac-numberInput |
31 | | Input.Text | ac-textInput |
32 | | Input.Time | ac-timeInput |
33 | | Input.Toggle| - |
34 | | Image | ac-image |
35 | | ImageSet | ac-imageset |
36 | | FactSet | ac-factset |
37 | | TextBlock | ac-textblock |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/net-html/getting-started.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: .NET HTML SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 01/04/2021
6 | ms.topic: get-started
7 | ---
8 |
9 | # Getting started - .NET HTML
10 |
11 | As we described in [Getting Started](../../../authoring-cards/getting-started.md) page, an Adaptive Card is a JSON-serialized card object model. This is a .NET library for generating HTML markup, typically from a server.
12 |
13 | > [!IMPORTANT]
14 | >
15 | > **As of 12/31/2020 this package is in Maintenance mode and no longer in active development**. It will only receive critical bugs and security fixes. Please see our [Support policy](/lifecycle/end-of-support/end-of-support-2020) for more details. If you are interested in maintaining this project we would be happy to provide support where possible -- please reach out on GitHub and let us know.
16 |
17 | ## NuGet install
18 |
19 | [](https://www.nuget.org/packages/AdaptiveCards.Rendering.Html)
20 |
21 | ```console
22 | Install-Package AdaptiveCards.Rendering.Html -IncludePrerelease
23 | ```
24 |
25 | ## Next steps
26 |
27 | See [Render a card](render-a-card.md) for the next steps!
28 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/winui-3/host-config.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Host config - WinUI 3 SDK
3 | description: This article walks you through the process of customizing the Host Config using the WinUI 3 SDK.
4 | author: JeanRoca
5 | ms.author: jproca
6 | ms.date: 05/04/2023
7 | ms.topic: how-to
8 | ---
9 |
10 | # Host config - WinUI 3
11 |
12 | To customize the renderer you provide an instance of the HostConfig object. (See [Host Config Schema](../../../rendering-cards/host-config.md) for the full description.)
13 |
14 | > The HostConfig object will be instantiated with defaults, so you can set just the properties you want to change.
15 |
16 | Example:
17 |
18 | ```csharp
19 | var hostConfig = new AdaptiveHostConfig()
20 | {
21 | FontSizes = {
22 | Small = 15,
23 | Normal = 20,
24 | Medium = 25,
25 | Large = 30,
26 | ExtraLarge= 40
27 | }
28 | };
29 | renderer.HostConfig = hostConfig;
30 | ```
31 |
32 | > Alternatively, you can load the HostConfig from a JSON string.
33 |
34 | Example:
35 |
36 | ```csharp
37 | var hostConfig = AdaptiveHostConfig.FromJsonString(jsonString);
38 |
39 | renderer.HostConfig = hostConfig;
40 | ```
41 |
42 | When you pass it in to the WinUI3 Renderer you are setting the default HostConfig to use for every card you render.
43 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/net-html/host-config.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Host config - .NET HTML SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 10/19/2017
6 | ms.topic: article
7 | ---
8 |
9 | # Host config - .NET HTML
10 |
11 | A [Host Config](../../../rendering-cards/host-config.md) is a shared configuration object that all renderers understand. This allows you to define common styles (e.g., font family, font sizes, default spacing) and behaviors (e.g., max number of actions) that will be automatically interpreted by each platform renderer.
12 |
13 | The goal is that the native UI generated by each platform renderer will look very similar with minimal work on your part.
14 |
15 | ```csharp
16 | // Construct programmatically
17 | renderer.HostConfig = new AdaptiveHostConfig()
18 | {
19 | FontFamily = "Comic Sans",
20 | FontSizes = {
21 | Small = 15,
22 | Default = 20,
23 | Medium = 25,
24 | Large = 30,
25 | ExtraLarge= 40
26 | }
27 | };
28 |
29 | // Or parse from JSON
30 | renderer.HostConfig = AdaptiveHostConfig.FromJson(@"{
31 | ""fontFamily"": ""Comic Sans"",
32 | ""fontSizes"": {
33 | ""small"": 25,
34 | ""default"": 26,
35 | ""medium"": 27,
36 | ""large"": 28,
37 | ""extraLarge"": 29
38 | }
39 | }");
40 | ```
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/android/getting-started.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Android SDK
3 | author: almedina-ms
4 | ms.author: almedina
5 | ms.date: 09/27/2017
6 | ms.topic: get-started
7 | ---
8 |
9 | # Getting started - Android
10 |
11 | This is a renderer which targets Android native controls.
12 |
13 | ## Install Maven package
14 |
15 | [](https://search.maven.org/#search%7Cga%7C1%7Ca%3A%22adaptivecards-android%22)
16 |
17 | You can find the published packages [here](https://search.maven.org/artifact/io.adaptivecards/adaptivecards-android)
18 |
19 | To include library to your project you must include this line into your project gradle.build under the dependencies section
20 |
21 | ```build.gradle
22 | implementation 'io.adaptivecards:adaptivecards-android:1.1.0'
23 | ```
24 | You need to change the version number depending on the version you want to include into your project
25 |
26 | ## Add import
27 |
28 | To include the object model, add this import
29 |
30 | ```
31 | import io.adaptivecards.objectmodel.*;
32 | ```
33 |
34 | To include the renderer, add this import
35 |
36 | ```
37 | import io.adaptivecards.renderer.*;
38 | ```
39 |
40 | ## Next steps
41 |
42 | See [Render a card](render-a-card.md) for the next steps!
43 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/authoring-cards/javascript.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: JavaScript SDK for Adaptive Cards
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 07/26/2019
6 | ms.topic: article
7 | ---
8 |
9 | # JavaScript SDK for creating cards
10 |
11 | > [!IMPORTANT]
12 | > The library for serializing JSON is still in development and your milage may vary.
13 |
14 | As we described in the [Getting Started](../../authoring-cards/getting-started.md), an Adaptive Card is nothing more than a serialized JSON object of a card object model. To make it easy to manipulate the object model we have defined some libraries which define a strongly typed class hierarchy that is easy to serialize/deserialize json.
15 |
16 | You can use any tooling that you want to create the adaptive card json.
17 |
18 | The `adaptivecards` npm package defines a library for working with adaptive cards in javascript
19 |
20 | ## To install
21 | ```console
22 | npm install adaptivecards
23 | ```
24 |
25 | ## Example
26 |
27 | The following API shows how to construct an Adaptive Card using the object model and serialize it to JSON.
28 |
29 | ```typescript
30 | let card = new Adaptive.AdaptiveCard();
31 | card.version = new Adaptive.Version(1, 0);
32 |
33 | let textBlock = new Adaptive.TextBlock();
34 | textBlock.text = "Hello World";
35 |
36 | card.addItem(textBlock);
37 |
38 | let json = card.toJSON();
39 | ```
40 |
--------------------------------------------------------------------------------
/AdaptiveCards/content/icons/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
25 |
--------------------------------------------------------------------------------
/.openpublishing.publish.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "docsets_to_publish": [
3 | {
4 | "docset_name": "AdaptiveCards",
5 | "build_source_folder": "AdaptiveCards",
6 | "build_output_subfolder": "AdaptiveCards",
7 | "locale": "en-us",
8 | "monikers": [],
9 | "moniker_ranges": [],
10 | "open_to_public_contributors": true,
11 | "type_mapping": {
12 | "Conceptual": "Content",
13 | "ManagedReference": "Content",
14 | "RestApi": "Content"
15 | },
16 | "build_entry_point": "docs",
17 | "template_folder": "_themes",
18 | "version": 0
19 | }
20 | ],
21 | "notification_subscribers": [],
22 | "sync_notification_subscribers": null,
23 | "branches_to_filter": [],
24 | "git_repository_branch_open_to_public_contributors": "main",
25 | "skip_source_output_uploading": false,
26 | "need_preview_pull_request": true,
27 | "contribution_branch_mappings": null,
28 | "dependent_repositories": [
29 | {
30 | "path_to_root": "_themes",
31 | "url": "https://github.com/Microsoft/templates.docs.msft",
32 | "branch": "main",
33 | "branch_mapping": {}
34 | }
35 | ],
36 | "branch_target_mapping": null,
37 | "need_generate_pdf_url_template": false,
38 | "need_generate_pdf": false,
39 | "need_generate_intellisense": false,
40 | "docs_build_engine": {
41 | "name": "docfx_v3"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/AdaptiveCards/samples/toc.yml:
--------------------------------------------------------------------------------
1 | - name: Activity Update
2 | href: activity-update.md
3 | - name: Agenda
4 | href: agenda.md
5 | - name: Application login
6 | href: application-login.md
7 | - name: Calendar reminder
8 | href: calendar-reminder.md
9 | - name: Expense report
10 | href: expense-report.md
11 | - name: Flight details
12 | href: flight-details.md
13 | - name: Flight itinerary
14 | href: flight-itinerary.md
15 | - name: Flight update
16 | href: flight-update.md
17 | - name: Flight update table
18 | href: flight-update-table.md
19 | - name: Food order
20 | href: food-order.md
21 | - name: Image gallery
22 | href: image-gallery.md
23 | - name: Input form
24 | href: input-form.md
25 | - name: Input form with rtl
26 | href: input-form-with-right-to-left.md
27 | - name: Inputs with validation
28 | href: inputs-with-validation.md
29 | - name: Order confirmation
30 | href: order-confirmation.md
31 | - name: Order delivery
32 | href: order-delivery.md
33 | - name: Restaurant
34 | href: restaurant.md
35 | - name: Restaurant order
36 | href: restaurant-order.md
37 | - name: Show card wizard
38 | href: show-card-wizard.md
39 | - name: Sporting event
40 | href: sport-event.md
41 | - name: Stock update
42 | href: stock-update.md
43 | - name: Weather compact
44 | href: weather-compact.md
45 | - name: Weather large
46 | href: weather-large.md
47 | - name: Product video
48 | href: product-video.md
49 |
50 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/ios/actions.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Actions - iOS SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 06/26/2017
6 | ms.topic: article
7 | ---
8 |
9 | # Actions - iOS
10 |
11 | Developers can receive actions such SubmitAction and OpenUrl by implementing ACRActionDelegate, and set it to instance of AdaptiveCard.
12 |
13 | ```objective-c
14 | //// delegate implementation
15 | - (void) didFetchUserResponses:(ACOAdaptiveCard *)card action:(ACOBaseActionElement *)action
16 | {
17 | if(action.type == ACROpenUrl){
18 | NSURL *url = [NSURL URLWithString:[action url]];
19 | SFSafariViewController *svc = [[SFSafariViewController alloc] initWithURL:url];
20 | [self presentViewController:svc animated:YES completion:nil];
21 | }
22 | else if(action.type == ACRSubmit){
23 | /// inputs can be examined by method inputs
24 | NSData * userInputsAsJson = [card inputs];
25 | NSString *str = [[NSString alloc] initWithData:userInputsAsJson encoding:NSUTF8StringEncoding];
26 | NSLog(@"user response fetched: %@ with %@", str, [action data]);
27 | }
28 | }
29 |
30 | /// register the delegate with ACRView instance
31 | adaptiveView.acrActionDelegate = self;
32 |
33 | /// if using ACRViewController, pass delegate as argument
34 | ACRRenderResult *renderResult = [ACRRenderer renderAsViewController:card config:config frame:frame delegate:acrActionDelegate];
35 | ```
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/xamarin/android/adaptivecards-rendering-xamarin-android-renderer-renderedadaptivecard.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: RenderedAdaptiveCard class - Xamarin.Android SDK
3 | author: almedina-ms
4 | ms.author: almedina
5 | ms.date: 12/02/2019
6 | ms.topic: article
7 | ---
8 |
9 | # RenderedAdaptiveCard
10 |
11 | ```csharp
12 | public class RenderedAdaptiveCard : Java.Lang.Object
13 | ```
14 |
15 | **Namespace**
16 |
17 | ```csharp
18 | namespace AdaptiveCards.Rendering.Xamarin.Android.Renderer
19 | ```
20 |
21 | ### Summary
22 |
23 | | Attributes | |
24 | | ---- | --- |
25 | | AdaptiveCard | Logical representation of the rendered adaptive card. |
26 | | Inputs | Dictionary of input element and information added by the user. |
27 | | View | Visual result from the rendering process. |
28 | | Warnings | List of warnings produced from the rendering process. |
29 |
30 |
31 |
32 | | Public methods | |
33 | | --- | ---- |
34 | | ```void``` | [```AddWarning AdaptiveCards.Rendering.Xamarin.Android.Renderer.AdaptiveWarning warning)```](#addwarning) |
35 |
36 | ## Public Methods
37 |
38 | ---
39 |
40 | ###
AddWarning
41 |
Added in version 0.1
42 |
43 | ```csharp
44 | public void AddWarning (AdaptiveWarning warning)
45 |
46 | ```
47 |
48 | Adds a warning to the warning list.
49 |
50 | | Parameters | |
51 | | --- | --- |
52 | | warning | ```AdaptiveCards.Rendering.Xamarin.Android.Renderer.AdaptiveWarning``` |
53 |
--------------------------------------------------------------------------------
/AdaptiveCards/getting-started/outlook.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Adaptive Cards in Outlook
3 | author: dclaux
4 | ms.author: dclaux
5 | ms.date: 5/10/2018
6 | ms.topic: article
7 | ---
8 |
9 | # Adaptive Cards for Outlook Actionable Message Developers
10 |
11 | Whether you are filling out a survey, approving an expense report, or updating a CRM sales opportunity, Actionable Messages enable you to take quick actions right from within Outlook. Developers can now embed Adaptive Cards in their emails or notifications, elevating user engagement with their services and increasing organizational productivity.
12 |
13 | You can now use Adaptive Cards to power your Outlook Actionable Messages, and create rich experiences like the one showcased at the Build 2018 conference:
14 |
15 | ## GitHub
16 | 
17 |
18 | ## Limeade
19 | 
20 |
21 | ## Ready to start?
22 |
23 | - Browse to [Actionable messages in Outlook and Office 365 Groups](/outlook/actionable-messages/), which will guide you through the steps of creating your first Actionable Message scenario.
24 | - Use the Actionable Message Card Playground tool to see card samples, create your own cards, send them to your own Office 365 account and see them in [Outlook for the Web](https://outlook.office.com).
25 | - Would you rather not write JSON manually? The [Adaptive Card Designer](https://adaptivecards.microsoft.com/designer) lets you create Adaptive Cards without writing a single line of JSON!
26 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/android/render-a-card.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Render a card - Android SDK
3 | author: almedina-ms
4 | ms.author: almedina
5 | ms.date: 09/27/2017
6 | ms.topic: how-to
7 | ---
8 |
9 | # Render a card - Android
10 |
11 | Here's how to render a card using the Android SDK.
12 |
13 | ## Create Adaptive Card Object Instance from JSON Text
14 |
15 | ```java
16 | ParseResult parseResult = AdaptiveCard.DeserializeFromString(jsonText, AdaptiveCardRenderer.VERSION, elementParserRegistration);
17 | AdaptiveCard adaptiveCard = parseResult.GetAdaptiveCard();
18 | ```
19 | > [!IMPORTANT]
20 | > **Breaking changes for v1.2**
21 | >
22 |
23 | 1. ElementParserRegistration parameter changed to ParseContext which includes an ElementParserRegistration and an ActionParserRegistration object
24 |
25 | ```java
26 | ParseContext context = new ParseContext(); // Empty parseContext so only known elements up to v1.2 will be parsed
27 | ParseResult parseResult = AdaptiveCard.DeserializeFromString(jsonText, AdaptiveCardRenderer.VERSION, context);
28 | ```
29 |
30 | or
31 |
32 | ```java
33 | ParseContext context = new ParseContext(elementParserRegistration, actionParserRegistration);
34 | ParseResult parseResult = AdaptiveCard.DeserializeFromString(jsonText, AdaptiveCardRenderer.VERSION, context);
35 | ```
36 |
37 | ## Render a card
38 |
39 | ```java
40 | RenderedAdaptiveCard renderedCard = AdaptiveCardRenderer.getInstance().render(context, fragmentManager, adaptiveCard, cardActionHandler, hostConfig);
41 | View v = renderedCard.getView();
42 | ```
43 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/android/native-styling.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Native styling - Android SDK
3 | author: almedina-ms
4 | ms.author: almedina
5 | ms.date: 09/27/2017
6 | ms.topic: article
7 | ---
8 |
9 | # Native styling - Android
10 |
11 | Native styling is not supported on the android renderer, v1.2 introduces the support for styling some properties:
12 |
13 | ## Action Sentiment
14 |
15 | Action sentiment is included in **v1.2** and while not supporting as many styles as other versions, actions with *destructive* or *positive* sentiment can be styled by implementing a valid style and adding the following line into the styles.xml for your project
16 |
17 | ```styles.xml
18 |
- @style/adaptiveActionDestructive
19 |
- @style/adaptiveActionPositive
20 | ```
21 |
22 | ## Inline Action
23 |
24 | Text inputs with an inline action allows styling for the action being rendered. This allows styling the action as a button (adaptiveInlineAction) or as an image (adaptiveInlineActionImage)
25 |
26 | ```styles.xml
27 |
- @style/adaptiveInlineAction
28 |
- @style/adaptiveInlineActionImage
29 | ```
30 |
31 | > [!IMPORTANT]
32 | > All item names must be kept as shown here as the renderer looks for those exact names
33 |
34 | ## Action.ShowCard
35 |
36 | Action.ShowCard can be styled by adding styles to your theme in styles.xml.
37 |
38 | ```styles.xml
39 |
- @style/adaptiveShowCardAction
40 | ```
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/javascript/host-config.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Host config - JavaScript SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 11/28/2017
6 | ms.topic: how-to
7 | ---
8 |
9 | # Host config - JavaScript
10 |
11 | ```js
12 | // Create an AdaptiveCard instance
13 | var adaptiveCard = new AdaptiveCards.AdaptiveCard();
14 |
15 | // Set its hostConfig property unless you want to use the default Host Config
16 | // Host Config defines the style and behavior of a card
17 | adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
18 | fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
19 | // More host config options
20 | });
21 |
22 | // Render the card to an HTML element:
23 | var renderedCard = adaptiveCard.render();
24 | ```
25 |
26 | ## Customization
27 |
28 | There are 3 ways to customize the adaptive card rendering:
29 | 1. Host Config
30 | 2. CSS styling
31 | 3. Custom element rendering
32 |
33 | ### HostConfig
34 |
35 | A [Host Config](../../../rendering-cards/host-config.md) is a shared configuration object that all renderers understand. This allows you to define common styles (e.g., font family, font sizes, default spacing) and behaviors (e.g., max number of actions) that will be automatically interpreted by each platform renderer.
36 |
37 | The goal is that the native UI generated by each platform renderer will look very similar with minimal work on your part.
38 |
39 | ```javascript
40 | var renderOptions = {
41 | ...
42 | hostConfig: {
43 | // Define your host config object here
44 | // See the HostConfig docs for details
45 | }
46 | };
47 | ```
48 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/net-html/extensibility.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Extensibility - .NET HTML SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 10/19/2017
6 | ms.topic: article
7 | ---
8 |
9 | # Extensibility - .NET HTML
10 |
11 | ## Custom Element Rendering
12 |
13 | For full control of the renderer you can use the `ElementRenderers` property to **add**, **remove**, or **override** default renderers.
14 |
15 | The following example shows how you could define a custom `"type": "Rating"` element and render it.
16 |
17 | ```csharp
18 | // Register the new type with the JSON parser
19 | AdaptiveTypedElementConverter.RegisterTypedElement
();
20 |
21 | // Add the new type to the element renderer registry
22 | renderer.ElementRenderers.Set(MyCustomRating.Render);
23 |
24 | // Define a custom Rating element type
25 | public class MyCustomRating : AdaptiveElement
26 | {
27 | public override string Type => "Rating";
28 |
29 | public double Rating { get; set; }
30 |
31 | public AdaptiveTextSize Size { get; set; }
32 |
33 | public AdaptiveTextColor Color { get; set; }
34 |
35 | public static FrameworkElement Render(MyCustomRating rating, AdaptiveRenderContext context)
36 | {
37 | var textBlock = new AdaptiveTextBlock
38 | {
39 | Size = rating.Size,
40 | Color = rating.Color
41 | };
42 | for (int i = 0; i < rating.Rating; i++)
43 | {
44 | textBlock.Text += "\u2605";
45 | }
46 | textBlock.Text += $" ({rating.Rating})";
47 | return context.Render(textBlock);
48 | }
49 | }
50 | ```
51 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/net-wpf/extensibility.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Extensibility - .NET WPF SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 10/19/2017
6 | ms.topic: article
7 | ---
8 |
9 | # Extensibility - .NET WPF
10 |
11 | ## Custom Element Rendering
12 |
13 | For full control of the renderer you can use the `ElementRenderers` property to **add**, **remove**, or **override** default renderers.
14 |
15 | The following example shows how you could define a custom `"type": "Rating"` element and render it.
16 |
17 | ```csharp
18 | // Register the new type with the JSON parser
19 | AdaptiveTypedElementConverter.RegisterTypedElement();
20 |
21 | // Add the new type to the element renderer registry
22 | renderer.ElementRenderers.Set(MyCustomRating.Render);
23 |
24 | // Define a custom Rating element type
25 | public class MyCustomRating : AdaptiveElement
26 | {
27 | public MyCustomRating() { Type = "Rating"; }
28 |
29 | public override string Type { get; set; }
30 |
31 | public AdaptiveTextSize Size { get; set; }
32 |
33 | public AdaptiveTextColor Color { get; set; }
34 |
35 | public static FrameworkElement Render(MyCustomRating rating, AdaptiveRenderContext context)
36 | {
37 | var textBlock = new AdaptiveTextBlock
38 | {
39 | Size = rating.Size,
40 | Color = rating.Color
41 | };
42 | for (int i = 0; i < rating.Rating; i++)
43 | {
44 | textBlock.Text += "\u2605";
45 | }
46 | textBlock.Text += $" ({rating.Rating})";
47 | return context.Render(textBlock);
48 | }
49 | }
50 | ```
51 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/net-wpf/host-config.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Host config - .NET WPF SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 10/19/2017
6 | ms.topic: article
7 | ---
8 |
9 | # Host config - .NET WPF
10 |
11 | A [Host Config](../../../rendering-cards/host-config.md) is a shared configuration object that all renderers understand. This allows you to define common styles (e.g., font family, font sizes, default spacing) and behaviors (e.g., max number of actions) that will be automatically interpreted by each platform renderer.
12 |
13 | The goal is that the native UI generated by each platform renderer will look very similar with minimal work on your part.
14 |
15 | ```csharp
16 | // Construct programmatically
17 | renderer.HostConfig = new AdaptiveHostConfig()
18 | {
19 | FontStyles = new FontStylesConfig()
20 | {
21 | Default = new FontStyleConfig()
22 | {
23 | FontFamily = "Consolas",
24 | FontSizes = {
25 | Small = 15,
26 | Default = 20,
27 | Medium = 25,
28 | Large = 30,
29 | ExtraLarge= 40
30 | }
31 | },
32 | }
33 | };
34 |
35 | // Or parse from JSON
36 | renderer.HostConfig = AdaptiveHostConfig.FromJson(@"{
37 | ""fontStyles"": {
38 | ""default"": {
39 | ""fontFamily"": ""Consolas"",
40 | ""fontSizes"": {
41 | ""small"": 15,
42 | ""default"": 20,
43 | ""medium"": 25,
44 | ""large"": 30,
45 | ""extraLarge"": 40
46 | }
47 | }
48 | }}");
49 | ```
50 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/net-html/render-a-card.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Render a card - .NET HTML SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 10/19/2017
6 | ms.topic: how-to
7 | ---
8 |
9 | # Render a card - .NET HTML
10 |
11 | Here's how to render a card using the .NET HTML SDK.
12 |
13 | ## Instantiate a renderer
14 |
15 | The next step is to create an instance of the renderer.
16 |
17 | ```csharp
18 | using AdaptiveCards;
19 | using AdaptiveCards.Rendering;
20 | using AdaptiveCards.Rendering.Html;
21 | // ...
22 |
23 | // Create a card renderer
24 | AdaptiveCardRenderer renderer = new AdaptiveCardRenderer();
25 |
26 | // For fun, check the schema version this renderer supports
27 | AdaptiveSchemaVersion schemaVersion = renderer.SupportedSchemaVersion; // 1.0
28 | ```
29 |
30 | ## Render a card to HTML
31 |
32 | ```csharp
33 | // Build a simple card
34 | // In the real world this would probably be provided as JSON
35 | AdaptiveCard card = new AdaptiveCard(renderer.SupportedSchemaVersion)
36 | {
37 | Body = { new AdaptiveTextBlock() { Text = "Hello World" } }
38 | };
39 |
40 | try
41 | {
42 | // Render the card
43 | RenderedAdaptiveCard renderedCard = renderer.RenderCard(card);
44 |
45 | // Get the output HTML
46 | HtmlTag html = renderedCard.Html;
47 |
48 | // (Optional) Check for any renderer warnings
49 | // This includes things like an unknown element type found in the card
50 | // Or the card exceeded the maximum number of supported actions, etc
51 | IList warnings = renderedCard.Warnings;
52 | }
53 | catch(AdaptiveException ex)
54 | {
55 | // Failed rendering
56 | }
57 | ```
58 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/net-wpf/actions.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Actions - .NET WPF SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 10/19/2017
6 | ms.topic: article
7 | ---
8 |
9 | # Actions - .NET WPF
10 |
11 | Any `actions` within the card will render as WPF `Button`s, but it's up to your app to handle what happens when a user presses them.
12 |
13 | The `RenderedAdaptiveCard` object provides an `OnAction` event for this purpose.
14 |
15 | ```csharp
16 | // Event handler fires when a user clicks an action within the card
17 | renderedCard.OnAction += MyActionHandler;
18 |
19 | private void MyActionHandler(RenderedAdaptiveCard sender, AdaptiveActionEventArgs e)
20 | {
21 | if (e.Action is AdaptiveOpenUrlAction openUrlAction)
22 | {
23 | Process.Start(openUrlAction.Url.AbsoluteUri);
24 | }
25 | else if (e.Action is AdaptiveShowCardAction showCardAction)
26 | {
27 | // Action.ShowCard can be rendered inline automatically
28 | // ... but if you want to handle show card as a "popup", you handle this event
29 | if (_myHostConfig.Actions.ShowCard.ActionMode == ShowCardActionMode.Popup)
30 | {
31 | var dialog = new ShowCardWindow(showCardAction.Title, showCardAction, Resources);
32 | dialog.Owner = this;
33 | dialog.ShowDialog();
34 | }
35 | }
36 | else if (e.Action is AdaptiveSubmitAction submitAction)
37 | {
38 | var inputs = sender.UserInputs.AsJson();
39 | inputs.Merge(submitAction.Data);
40 | MessageBox.Show(this, JsonConvert.SerializeObject(inputs, Formatting.Indented), "SubmitAction");
41 | }
42 | }
43 | ```
44 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/uwp/actions.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Actions - UWP SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 06/26/2017
6 | ms.topic: article
7 | ---
8 |
9 | # Actions - UWP
10 |
11 | Any **actions** within the card will render as UWP **Button**'s, but it's up to your app to handle what happens when a user presses them (except for ShowCard actions... see code snippet for more info).
12 |
13 | The `RenderedAdaptiveCard` object provides an `Action` event for this purpose.
14 |
15 | ```csharp
16 | // Render a card (as previously shown)
17 | RenderedAdaptiveCard renderedAdaptiveCard = renderer.RenderAdaptiveCard(card);
18 |
19 | // ...
20 |
21 | // Attach the event handler for action click events
22 | renderedAdaptiveCard.Action += RenderedAdaptiveCard_Action;
23 |
24 | private async void RenderedAdaptiveCard_Action(RenderedAdaptiveCard sender, AdaptiveActionEventArgs args)
25 | {
26 | if (args.Action is AdaptiveOpenUrlAction openUrlAction)
27 | {
28 | await Launcher.LaunchUriAsync(openUrlAction.Url);
29 | }
30 |
31 | else if (args.Action is AdaptiveShowCardAction showCardAction)
32 | {
33 | // This is only fired if, in HostConfig, you set the ShowCard ActionMode to Popup.
34 | // Otherwise, the renderer will automatically display the card inline without firing this event.
35 | }
36 |
37 | else if (args.Action is AdaptiveSubmitAction submitAction)
38 | {
39 | // Get the data and inputs
40 | string data = submitAction.DataJson.Stringify();
41 | string inputs = args.Inputs.AsJson().Stringify();
42 |
43 | // Process them as desired
44 | }
45 | }
46 | ```
47 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/uwp/render-a-card.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Render a card - UWP SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 06/26/2017
6 | ms.topic: how-to
7 | ---
8 |
9 | # Render a card - UWP
10 |
11 | Here's how to render a card using the UWP SDK.
12 |
13 | ## Create an instance of your renderer
14 |
15 | Create an instance of the renderer library.
16 |
17 | ```csharp
18 | using AdaptiveCards.Rendering.Uwp;
19 | // ...
20 |
21 | var renderer = new AdaptiveCardRenderer();
22 | ```
23 |
24 | ## Create a card from a JSON string
25 |
26 | ```csharp
27 | var card = AdaptiveCard.FromJsonString(jsonString);
28 | ```
29 |
30 | ## Create a card from a JSON object
31 |
32 | ```csharp
33 | var card = AdaptiveCard.FromJson(jsonObject);
34 | ```
35 |
36 | ## Render a card
37 |
38 | Acquire a card from a source and render it.
39 |
40 | ```csharp
41 | RenderedAdaptiveCard renderedAdaptiveCard = renderer.RenderAdaptiveCard(card);
42 |
43 | // Check if the render was successful
44 | if (renderedAdaptiveCard.FrameworkElement != null)
45 | {
46 | // Get the framework element
47 | var uiCard = renderedAdaptiveCard.FrameworkElement;
48 |
49 | // Add it to your UI
50 | myGrid.Children.Add(uiCard);
51 | }
52 | ```
53 |
54 | ## Example
55 |
56 | Here is an example from the UWP renderer.
57 |
58 | ```csharp
59 | var renderer = new AdaptiveCardRenderer();
60 | var card = AdaptiveCard.FromJsonString(jsonString);
61 | var renderedAdaptiveCard = renderer.RenderAdaptiveCard(card.AdaptiveCard);
62 | if (renderedAdaptiveCard.FrameworkElement != null)
63 | {
64 | myGrid.Children.Add(renderedAdaptiveCard.FrameworkElement);
65 | }
66 | ...
67 | ```
68 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/xamarin/android/adaptivecards-rendering-xamarin-android-renderer-cardrendererregistration.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: CardRendererRegistration class - Xamarin.Android SDK
3 | author: almedina-ms
4 | ms.author: almedina
5 | ms.date: 12/02/2019
6 | ms.topic: article
7 | ---
8 |
9 | # CardRendererRegistration
10 |
11 | ```csharp
12 | public class CardRendererRegistration : Java.Lang.Object
13 | ```
14 |
15 | **Namespace**
16 | ```csharp
17 | namespace AdaptiveCards.Rendering.Xamarin.Android.Renderer.Registration
18 | ```
19 |
20 | ### Summary
21 |
22 | | Public methods | |
23 | | --- | ---- |
24 | | ```void``` | [```RegisterFeatureRegistration (FeatureRegistration featureRegistration)```](#registerfeatureregistration) |
25 |
26 | ## Public Methods
27 |
28 | ---
29 |
30 | ### RegisterFeatureRegistration
31 | Added in version 0.1.0
32 |
33 | ```csharp
34 | public void RegisterFeatureRegistration (FeatureRegistration featureRegistration)
35 | ```
36 |
37 | Registers a [```FeatureRegistration```](adaptivecards-rendering-xamarin-android-objectmodel-featureregistration.md) object for the card renderer to use.
38 |
39 | | Parameters | |
40 | | --- | --- |
41 | | featureRegistration | [```AdaptiveCards.Rendering.Xamarin.Android.ObjectModel.FeatureRegistration```](adaptivecards-rendering-xamarin-android-objectmodel-featureregistration.md) |
42 |
43 | #### Sample
44 |
45 | ```csharp
46 | FeatureRegistration featureRegistration = new FeatureRegistration();
47 | featureRegistration.AddFeature("MyFeature", "1.2.0");
48 | CardRendererRegistration.Instance.RegisterFeatureRegistration(featureRegistration);
49 | ```
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/xamarin/android/actions.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Actions - Xamarin.Android SDK
3 | author: almedina-ms
4 | ms.author: almedina
5 | ms.date: 12/02/2019
6 | ms.topic: article
7 | ---
8 |
9 | # Actions - Xamarin.Android
10 |
11 | When a cards action is executed, the class that was passed to the render call that implements the [```ICardActionHandler```](adaptivecards-renderin-xamarin-android-renderer-actionhandler-icardactionhandler.md) interface gets invoked. Here is how to define your action handler:
12 |
13 | ```csharp
14 | using AdaptiveCards.Rendering.Xamarin.Android.ObjectModel;
15 | using AdaptiveCards.Rendering.Xamarin.Android.Renderer.ActionHandler;
16 |
17 | // ...
18 |
19 | public class CardActionHandlerImpl : ICardActionHandler
20 | {
21 |
22 | public void OnAction(BaseActionElement element, RenderedAdaptiveCard renderedCard)
23 | {
24 | ActionType actionType = element.ElementType;
25 | if (actionType == ActionType.Submit)
26 | {
27 | var submitAction = SubmitAction.Dynamic_cast(element);
28 | var data = submitAction.DataJson;
29 | Toast.MakeText(this, data + "\n" + inputValues, ToastLength.Short).Show();
30 | }
31 | else if (actionType == ActionType.ShowCard)
32 | {
33 | showCard(card);
34 | }
35 | else if (actionType == ActionType.OpenUrl)
36 | {
37 | openUrl(url);
38 | }
39 | }
40 |
41 | public void OnMediaPlay(BaseCardElement element, RenderedAdaptiveCard renderedCard) { }
42 |
43 | public void OnMediaStop(BaseCardElement element, RenderedAdaptiveCard renderedCard) { }
44 | }
45 | ```
46 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/net-wpf/getting-started.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: .NET WPF SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 10/19/2017
6 | ms.topic: get-started
7 | ---
8 |
9 | # Getting started - .NET WPF
10 |
11 | As we described in [Getting Started](../../../authoring-cards/getting-started.md) page, an Adaptive Card is a JSON-serialized card object model. This library makes it easy to render that JSON into WPF UI that you can use within your app.
12 |
13 | ## NuGet install
14 |
15 | [](https://www.nuget.org/packages/AdaptiveCards.Rendering.Wpf)
16 |
17 | ```console
18 | Install-Package AdaptiveCards.Rendering.Wpf
19 | ```
20 |
21 | ### Xceed enhanced input package
22 |
23 | This optional package enhances the Adaptive Card Input controls beyond what WPF provides out of the box. It has a dependency on `Extended.Wpf.Toolkit`
24 |
25 | [](https://www.nuget.org/packages/AdaptiveCards.Rendering.Wpf.Xceed)
26 |
27 | ```console
28 | Install-Package AdaptiveCards.Rendering.Wpf.Xceed
29 | ```
30 |
31 | ## WPF Visualizer Sample
32 |
33 | 
34 |
35 | The [WPF Visualizer sample](https://github.com/Microsoft/AdaptiveCards/tree/master/source/dotnet/Samples/WPFVisualizer) lets you visualize cards using WPF. A `Host Config` editor is built in for editing and viewing host config settings. Save these settings as a JSON to use them in rendering in your application.
36 |
37 | ## Next steps
38 |
39 | See [Render a card](render-a-card.md) for the next steps!
40 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/winui-3/actions.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Actions - WinUI 3 SDK
3 | description: This article walks you through how to implement Actions in Adaptive Cards using the WinUI 3 SDK.
4 | author: JeanRoca
5 | ms.author: jproca
6 | ms.date: 05/04/2023
7 | ms.topic: article
8 | ---
9 |
10 | # Actions - WinUI 3
11 |
12 | Any **actions** within the card will render as WinUI 3 **Button**'s, but it's up to your app to handle what happens when a user presses them (except for ShowCard actions... see code snippet for more info).
13 |
14 | The `RenderedAdaptiveCard` object provides an `Action` event for this purpose.
15 |
16 | ```csharp
17 | // Render a card (as previously shown)
18 | RenderedAdaptiveCard renderedAdaptiveCard = renderer.RenderAdaptiveCard(card);
19 |
20 | // ...
21 |
22 | // Attach the event handler for action click events
23 | renderedAdaptiveCard.Action += RenderedAdaptiveCard_Action;
24 |
25 | private async void RenderedAdaptiveCard_Action(RenderedAdaptiveCard sender, AdaptiveActionEventArgs args)
26 | {
27 | if (args.Action is AdaptiveOpenUrlAction openUrlAction)
28 | {
29 | await Launcher.LaunchUriAsync(openUrlAction.Url);
30 | }
31 |
32 | else if (args.Action is AdaptiveShowCardAction showCardAction)
33 | {
34 | // This is only fired if, in HostConfig, you set the ShowCard ActionMode to Popup.
35 | // Otherwise, the renderer will automatically display the card inline without firing this event.
36 | }
37 |
38 | else if (args.Action is AdaptiveSubmitAction submitAction)
39 | {
40 | // Get the data and inputs
41 | string data = submitAction.DataJson.Stringify();
42 | string inputs = args.Inputs.AsJson().Stringify();
43 |
44 | // Process them as desired
45 | }
46 | }
47 | ```
48 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/winui-3/render-a-card.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Render a card - WinUI 3 SDK
3 | description: This article walks you through the process of rendering an Adaptive Card using the WinUI 3 SDK.
4 | author: JeanRoca
5 | ms.author: jproca
6 | ms.date: 05/04/2023
7 | ms.topic: how-to
8 | ---
9 |
10 | # Render a card - WinUI 3
11 |
12 | Here's how to render a card using the WinUI 3 SDK.
13 |
14 | ## Create an instance of your renderer
15 |
16 | Create an instance of the renderer library.
17 |
18 | ```csharp
19 | using AdaptiveCards.Rendering.WinUI3;
20 | // ...
21 |
22 | var renderer = new AdaptiveCardRenderer();
23 | ```
24 |
25 | ## Create a card from a JSON string
26 |
27 | ```csharp
28 | var card = AdaptiveCard.FromJsonString(jsonString);
29 | ```
30 |
31 | ## Create a card from a JSON object
32 |
33 | ```csharp
34 | var card = AdaptiveCard.FromJson(jsonObject);
35 | ```
36 |
37 | ## Render a card
38 |
39 | Acquire a card from a source and render it.
40 |
41 | ```csharp
42 | RenderedAdaptiveCard renderedAdaptiveCard = renderer.RenderAdaptiveCard(card);
43 |
44 | // Check if the render was successful
45 | if (renderedAdaptiveCard.FrameworkElement != null)
46 | {
47 | // Get the framework element
48 | var uiCard = renderedAdaptiveCard.FrameworkElement;
49 |
50 | // Add it to your UI
51 | myGrid.Children.Add(uiCard);
52 | }
53 | ```
54 |
55 | ## Example
56 |
57 | Here is an example from the WinUI 3 renderer.
58 |
59 | ```csharp
60 | var renderer = new AdaptiveCardRenderer();
61 | var card = AdaptiveCard.FromJsonString(jsonString);
62 | var renderedAdaptiveCard = renderer.RenderAdaptiveCard(card.AdaptiveCard);
63 | if (renderedAdaptiveCard.FrameworkElement != null)
64 | {
65 | myGrid.Children.Add(renderedAdaptiveCard.FrameworkElement);
66 | }
67 | ...
68 | ```
69 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/net-image/render-a-card.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Render a card - .NET Image Rendering SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 10/19/2017
6 | ms.topic: article
7 | ---
8 |
9 | # Render a card - .NET Image
10 |
11 | Here's how to render a card using the .NET Image SDK.
12 |
13 | ```csharp
14 | try
15 | {
16 | // A URL that returns an Adaptive Card JSON payload
17 | var cardUrl = "http://adaptivecards.io/payloads/ActivityUpdate.json";
18 |
19 | // Timeout after 30 seconds
20 | var cts = new CancellationTokenSource(TimeSpan.FromSeconds(30));
21 |
22 | // Get the JSON from the card URL
23 | var client = new HttpClient();
24 | var response = await client.GetAsync(cardUrl, cts.Token);
25 | var json = await response.Content.ReadAsStringAsync();
26 |
27 | // Parse the Adaptive Card JSON
28 | AdaptiveCardParseResult parseResult = AdaptiveCard.FromJson(json);
29 | AdaptiveCard card = parseResult.Card;
30 |
31 | // Create a host config with no interactivity
32 | // (buttons in images would be deceiving)
33 | AdaptiveHostConfig hostConfig = new AdaptiveHostConfig()
34 | {
35 | SupportsInteractivity = false
36 | };
37 |
38 | // Create a renderer
39 | AdaptiveCardRenderer renderer = new AdaptiveCardRenderer(hostConfig);
40 |
41 | // Set any XAML resource Dictionary if you have one
42 | //renderer.ResourcesPath = ;
43 |
44 | // Render the card to png
45 | // Set createStaThread to true if running from a server
46 | RenderedAdaptiveCardImage renderedCard =
47 | await renderer.RenderCardToImageAsync(card, createStaThread: true, cancellationToken: cts.Token);
48 | }
49 | catch (OperationCanceledException)
50 | {
51 | // Timed out
52 | }
53 | catch (Exception ex)
54 | {
55 | // Log failure
56 | }
57 | ```
--------------------------------------------------------------------------------
/AdaptiveCards/authoring-cards/speech.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Speech and Advanced Customization
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 06/26/2017
6 | ms.topic: article
7 | ---
8 |
9 | # Speech and advanced customization
10 | We live in an era of speech interaction via services like Cortana. Adaptive cards are designed from day one to support speech, enabling cool new hands-full scenarios.
11 |
12 | The `speak` tag enables the adaptive card to be delivered to an environment where a visual display is not primary experience, such as to a car dashboard while driving.
13 |
14 | ## Speak property
15 | To support speech we have a `speak` property which contains text to say to the user. The text can be annotated using speech synthesis markup language
16 | ([SSML](/previous-versions/office/developer/speech-technologies/hh361578(v=office.14))). SSML controls the speed, tone, and inflection of the speech. It even allows you to stream audio or a render a TTS audio stream from your own service, giving you a great deal of flexibility for customization.
17 |
18 | There are two patterns for speak property usage by a host application:
19 |
20 | * **On delivery** - When a card is delivered, the client may opt to read the Speak property for the card to describe the card as a whole.
21 | * **On demand** - In order to support a richer accessibility model, the schema supports a speak tag for each element. The client may read a Speak property for each element in the card.
22 |
23 | ### Examples
24 |
25 | ```json
26 | "speak":"hello world!"
27 |
28 | "speak":"This is sentence 1.This is sentence two"
29 |
30 | "speak":"Time to wake up!"
31 | ```
32 |
33 | ## Speech content design
34 |
35 | Content designed for speech is different from content designed for visual display. When you design a card, you are designing an entire visual experience to present information to a user in a way that delights them. When designing for speech, you should think about how to verbally describe the content in a way that delights the user.
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/react-native/getting-started.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: ReactNative SDK
3 | description: Adaptive Card rendering SDK for ReactNative
4 | author: matthidinger
5 | ms.author: mahiding
6 | ms.date: 08/03/2022
7 | ms.topic: article
8 | ---
9 |
10 | # ReactNative Renderer
11 |
12 | A [community-supported](https://github.com/microsoft/AdaptiveCards/blob/main/SUPPORT.md) ReactNative renderer for Adaptive Cards, maintained by [BigThinkCode](https://www.bigthinkcode.com).
13 |
14 | > [!IMPORTANT]
15 | >
16 | > **Community Support Only**. This renderer is in active development but is maintained outside of Microsoft. **As such, we cannot guarantee any SLA for this SDK**. Please see our [Support policy](https://github.com/microsoft/AdaptiveCards/blob/main/SUPPORT.md) for more details.
17 | >
18 |
19 | ## Getting started
20 |
21 | ### Install the package
22 |
23 | `npm install adaptivecards-reactnative`
24 |
25 | ### Import the root component
26 |
27 | `import AdaptiveCard from 'adaptivecards-reactnative'`
28 |
29 | ### Render the component with required props
30 |
31 | ```jsx
32 |
49 | ```
50 |
51 | ## Full documentation and source code
52 |
53 | * [Documentation](https://www.npmjs.com/package/adaptivecards-reactnative)
54 | * [Source code](https://github.com/BigThinkcode/AdaptiveCards/tree/master/source/community/reactnative)
55 |
56 | ## Customization and Themeing
57 |
58 | To customize the rendering, please see the [theme config](./theme-config.md) documentation.
59 |
--------------------------------------------------------------------------------
/AdaptiveCards/schema-explorer/metadata.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Metadata Element
3 | author: luywang
4 | description: This page provides documentation for the `Metadata` element in the Adaptive Cards schema.
5 | ms.author: luywang
6 | ms.date: 12/11/2025
7 | ms.topic: concept-article
8 | ---
9 |
10 | # Metadata
11 |
12 | > [!NOTE]
13 | > **Are you building Copilot, Teams or Outlook scenarios powered by Adaptive Cards?**
14 | > Visit [**Adaptive Card Documentation Hub**](https://adaptivecards.microsoft.com/), the new one-stop-shop for all your Adaptive Card needs! It has all the resources you're looking for, including complete documentation for many new features, such as [Responsive layout](https://adaptivecards.microsoft.com/?topic=responsive-layout), [Icon](https://adaptivecards.microsoft.com/?topic=Icon), [Badge](https://adaptivecards.microsoft.com/?topic=Badge), [Carousel](https://adaptivecards.microsoft.com/?topic=Carousel), [Charts](https://adaptivecards.microsoft.com/?topic=Chart.Line), and much more!
15 |
16 | > **Important note about accessibility:**
17 | > In version 1.3 of the schema we introduced a [**label**](/adaptive-cards/authoring-cards/input-validation#labels) property on Inputs to improve accessibility. If the [Host app you are targeting](/adaptive-cards/resources/partners) supports v1.3 you should use **label** instead of a **TextBlock** as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.
18 |
19 | ## Metadata
20 |
21 | Defines various metadata properties.
22 |
23 | **Introduced in version 1.6**
24 |
25 | ### Metadata Properties
26 |
27 | | Property | Type | Required | Description | Version |
28 | | :--- | :--- | :--- | :--- | :--- |
29 | | **webUrl** | `string` | No | URL that uniquely identifies the card and serves as a browser fallback that can be used by some hosts. | 1.6 |
30 |
31 | ---
32 |
33 | ## Properties
34 |
35 | ### webUrl
36 |
37 | URL that uniquely identifies the card and serves as a browser fallback that can be used by some hosts.
38 |
39 | * **Type**: `string`
40 | * **Required**: No
41 |
42 |
--------------------------------------------------------------------------------
/AdaptiveCards/toc.yml:
--------------------------------------------------------------------------------
1 | - name: Overview
2 | href: index.md
3 | - name: Getting Started
4 | items:
5 | - name: Bot Developers
6 | href: getting-started/bots.md
7 | - name: Windows Developers
8 | href: getting-started/windows.md
9 | - name: Outlook Developers
10 | href: getting-started/outlook.md
11 | - name: Schema Explorer
12 | href: schema-explorer/toc.yml
13 | - name: Samples
14 | href: samples/toc.yml
15 | - name: Designer
16 | href: https://adaptivecards.microsoft.com/designer
17 | - name: Authoring Cards
18 | items:
19 | - name: Getting Started
20 | href: authoring-cards/getting-started.md
21 | - name: Card Schema
22 | href: schema-explorer/adaptive-card.md
23 | - name: Text Features
24 | href: authoring-cards/text-features.md
25 | - name: Input Validation
26 | href: authoring-cards/input-validation.md
27 | - name: Universal Bot Action Model
28 | href: authoring-cards/universal-action-model.md
29 | - name: Rendering Cards
30 | items:
31 | - name: Getting Started
32 | href: rendering-cards/getting-started.md
33 | - name: Actions
34 | href: rendering-cards/actions.md
35 | - name: Host Config
36 | href: rendering-cards/host-config.md
37 | - name: Extensibility
38 | href: rendering-cards/extensibility.md
39 | - name: Implement a Renderer
40 | href: rendering-cards/implement-a-renderer.md
41 | - name: SDKs
42 | items:
43 | - name: Authoring Cards
44 | href: sdk/authoring-cards/toc.yml
45 | - name: Rendering Cards
46 | href: sdk/rendering-cards/toc.yml
47 | - name: Designer SDK
48 | href: sdk/designer.md
49 | - name: Templating
50 | items:
51 | - name: Overview
52 | href: templating/index.md
53 | - name: Template Language
54 | href: templating/language.md
55 | - name: Templating SDKs
56 | href: templating/sdk.md
57 | - name: Template Service
58 | href: templating/service.md
59 | - name: Resources
60 | items:
61 | - name: Principles
62 | href: resources/principles.md
63 | - name: Partners
64 | href: resources/partners.md
65 | - name: Tools
66 | href: resources/tools.md
67 | - name: Roadmap
68 | href: resources/future.md
69 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/net-wpf/render-a-card.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Render a card - .NET WPF SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 10/19/2017
6 | ms.topic: how-to
7 | ---
8 |
9 | # Render a card - .NET WPF
10 |
11 | Here's how to render a card using the .NET WPF SDK.
12 |
13 | > [!NOTE]
14 | > **`Media` with HTTPS URLs will not work in WPF**
15 | >
16 | > Due to a [bug in the WPF MediaElement control](https://stackoverflow.com/questions/30702505/playing-media-from-https-site-in-media-element-throwing-null-reference-exception) we aren't able to render media that is served via HTTPS. You should use HTTP URLs in the `Media` element until this is addressed.
17 |
18 | ## Instantiate a renderer
19 |
20 | Create an instance of the renderer library.
21 |
22 | ```csharp
23 | using AdaptiveCards;
24 | using AdaptiveCards.Rendering;
25 | using AdaptiveCards.Rendering.Wpf;
26 | // ...
27 |
28 | // Create a card renderer
29 | AdaptiveCardRenderer renderer = new AdaptiveCardRenderer();
30 |
31 | // If using the Xceed package, enable the enhanced input
32 | renderer.UseXceedElementRenderers();
33 |
34 | // For fun, check the schema version this renderer supports
35 | AdaptiveSchemaVersion schemaVersion = renderer.SupportedSchemaVersion;
36 | ```
37 |
38 | ## Render a card to XAML
39 |
40 | ```csharp
41 | // Build a simple card
42 | // In the real world this would probably be provided as JSON
43 | AdaptiveCard card = new AdaptiveCard("1.0")
44 | {
45 | Body = { new AdaptiveTextBlock() { Text = "Hello World" } }
46 | };
47 |
48 | try
49 | {
50 | // Render the card
51 | RenderedAdaptiveCard renderedCard = renderer.RenderCard(card);
52 |
53 | // Get the FrameworkElement
54 | // Add this to your app's UI somewhere
55 | FrameworkElement fe = renderedCard.FrameworkElement;
56 |
57 | // (Optional) Check for any renderer warnings
58 | // This includes things like an unknown element type found in the card
59 | // Or the card exceeded the maximum number of supported actions, etc
60 | IList warnings = renderedCard.Warnings;
61 | }
62 | catch(AdaptiveException ex)
63 | {
64 | // Failed rendering
65 | }
66 | ```
67 |
68 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/uwp/native-styling.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Native styling - UWP SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 08/15/2018
6 | ms.topic: article
7 | ---
8 |
9 | # Native styling - UWP
10 |
11 | While Host Config will get you most of the way there on each platform, it's likely that you will have to do some native styling on each platform.
12 |
13 | UWP makes this easy by allowing you to pass a ResourceDictionary for fine-grained styling, behavior, animations, etc.
14 |
15 | | Element | Style names |
16 | |---|---|
17 | | AdaptiveCard | Adaptive.Card|
18 | | Action.OpenUrl | Adaptive.Action.OpenUrl |
19 | | Action.ShowCard | Adaptive.Action.ShowCard |
20 | | Action.Submit | Adaptive.Action.Submit |
21 | | Column | Adaptive.Column, Adaptive.Action.Tap |
22 | | ColumnSet | Adaptive.ColumnSet, Adaptive.VerticalSeparator |
23 | | Container | Adaptive.Container|
24 | | Input.ChoiceSet | Adaptive.Input.ChoiceSet, Adaptive.Input.ChoiceSet.ComboBox, Adaptive.Input.ChoiceSet.CheckBox, Adaptive.Input.ChoiceSet.Radio, Adaptive.Input.ChoiceSet.ComboBoxItem |
25 | | Input.Date | Adaptive.Input.Text.Date
26 | | Input.Number | Adaptive.Input.Text.Number |
27 | | Input.Text | Adaptive.Input.Text |
28 | | Input.Time | Adaptive.Input.Text.Time |
29 | | Input.Toggle| Adaptive.Input.Toggle|
30 | | Image | Adaptive.Image |
31 | | ImageSet | Adaptive.ImageSet |
32 | | FactSet | Adaptive.FactSet, Adaptive.Fact.Title, Adaptive.Fact.Value |
33 | | TextBlock | Adaptive.TextBlock |
34 |
35 | This sample XAML Resource dictionary that sets the background of all TextBlocks to Aqua. You will probably want something more advanced than this 😁
36 |
37 | ```xml
38 |
41 |
44 |
45 | ```
46 | ```csharp
47 | // Use a ResourceDictionary instance
48 | // DON'T use this property if rendering from a server
49 | renderer.Resources = myResourceDictionary;
50 | ```
51 |
--------------------------------------------------------------------------------
/AdaptiveCards/content/adaptive-card.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/AdaptiveCards/getting-started/windows.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Adaptive Cards for Windows Developers
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 06/26/2017
6 | ms.topic: article
7 | ---
8 |
9 | # Adaptive Cards for Windows Developers
10 |
11 | ## Timeline
12 |
13 | The first Windows experience to supports Adaptive Cards is Timeline, a brand new experience first introduced in Windows 10 1803.
14 |
15 | 
16 |
17 | ### UserActivity API
18 |
19 | The [`Windows.ApplicationModel.UserActivities.UserActivity`](/uwp/api/windows.applicationmodel.useractivities.useractivity) API is what populates an Activity into Timeline.
20 |
21 | The Adaptive Card will be supplied via the `Content` property of `VisualElement`, as seen below:
22 |
23 | ```csharp
24 | UserActivity userActivity = await channel.GetOrCreateUserActivityAsync(activityId, new HostName("contoso.com"));
25 | userActivity.ActivationUri = new Uri("rss-reader:article?" + article.Link);
26 | userActivity.DisplayText = article.Title; //used for details tile text
27 | userActivity.VisualElements.Content = AdaptiveCardBuilder.CreateAdaptiveCardFromJson(jsonString);
28 | await userActivity.SaveAsync();
29 | ```
30 |
31 | ### Learning Module
32 |
33 | There is a great 45-minute Learn module that covers these steps end-to-end.
34 |
35 | [Integrate adaptive cards into Windows 10 Timeline](/training/modules/integrate-app-into-windows-10-timeline/)
36 |
37 | ### Learn more
38 |
39 | This session at Build 2017 covers User Activities in detail.
40 |
41 | ## Other Windows Surfaces
42 | We don't have anything to share just yet, but we're working on incorporating Adaptive Cards into more Windows experiences.
43 |
44 | ## Dive in!
45 |
46 | We've barely scratched the surface in this tutorial, so check back soon and browse the links below to explore more about Adaptive Cards.
47 |
48 | * [Browse Sample cards](../schema-explorer/adaptive-card.md) for inspiration
49 | * Use the [Schema Explorer](../samples/activity-update.md) to learn the available elements
50 | * Build a card using the [Adaptive Card Designer](https://adaptivecards.microsoft.com/designer)
51 | * [Get in touch](https://github.com/Microsoft/AdaptiveCards/issues/new) with any feedback you have
52 |
--------------------------------------------------------------------------------
/AdaptiveCards/schema-explorer/toc.yml:
--------------------------------------------------------------------------------
1 | - name: AdaptiveCard
2 | href: adaptive-card.md
3 | - name: Card Elements
4 | items:
5 | - name: TextBlock
6 | href: text-block.md
7 | - name: Image
8 | href: image.md
9 | - name: Media
10 | href: media.md
11 | - name: MediaSource
12 | href: media-source.md
13 | - name: CaptionSource
14 | href: caption-source.md
15 | - name: RichTextBlock
16 | href: rich-text-block.md
17 | - name: TextRun
18 | href: text-run.md
19 | - name: Containers
20 | items:
21 | - name: ActionSet
22 | href: action-set.md
23 | - name: Container
24 | href: container.md
25 | - name: ColumnSet
26 | href: column-set.md
27 | - name: Column
28 | href: column.md
29 | - name: FactSet
30 | href: fact-set.md
31 | - name: Fact
32 | href: fact.md
33 | - name: ImagetSet
34 | href: image-set.md
35 | - name: Table
36 | href: table.md
37 | - name: TableCell
38 | href: table-cell.md
39 | - name: Actions
40 | items:
41 | - name: Action.OpenUrl
42 | href: action-open-url.md
43 | - name: Action.Submit
44 | href: action-submit.md
45 | - name: Action.ShowCard
46 | href: action-show-card.md
47 | - name: Action.ToggleVisibility
48 | href: action-toggle-visibility.md
49 | - name: TargetElement
50 | href: target-element.md
51 | - name: Action.Execute
52 | href: action-execute.md
53 | - name: Inputs
54 | items:
55 | - name: Input.Text
56 | href: input-text.md
57 | - name: Input.Number
58 | href: input-number.md
59 | - name: Input.Date
60 | href: input-date.md
61 | - name: Input.Time
62 | href: input-time.md
63 | - name: Input.Toggle
64 | href: input-toggle.md
65 | - name: Input.ChoiceSet
66 | href: input-choice-set.md
67 | - name: Input.Choice
68 | href: input-choice.md
69 | - name: Data.Query
70 | href: data-query.md
71 | - name: Types
72 | items:
73 | - name: BackgroundImage
74 | href: background-image.md
75 | - name: Refresh
76 | href: refresh.md
77 | - name: Authentication
78 | href: authentication.md
79 | - name: TokenExchangeResource
80 | href: token-exchange-resource.md
81 | - name: AuthCardButton
82 | href: authentication-card-button.md
83 | - name: Metadata
84 | href: metadata.md
85 |
86 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/xamarin/android/render-a-card.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Render a card - Xamarin.Android SDK
3 | author: almedina-ms
4 | ms.author: almedina
5 | ms.date: 12/02/2019
6 | ms.topic: how-to
7 | ---
8 |
9 | # Render a card - Xamarin.Android
10 |
11 | Here's how to render a card using the Xamarin.Android SDK.
12 |
13 | ## Create Adaptive Card Object Instance from JSON Text
14 |
15 | ```csharp
16 | using AdaptiveCards.Rendering.Xamarin.Android.ObjectModel;
17 | // ...
18 |
19 | ParseResult parseResult = AdaptiveCard.DeserializeFromString(jsonText, AdaptiveCardRenderer.Version);
20 | AdaptiveCard adaptiveCard = parseResult.AdaptiveCard;
21 | ```
22 |
23 | or you can also use a ```ParseContext``` object to be able to deserialize custom elements that are included in your adaptive card like this:
24 |
25 | ```csharp
26 | using AdaptiveCards.Rendering.Xamarin.Android.ObjectModel;
27 | // ...
28 |
29 | ParseContext context = new ParseContext(); // Empty parseContext so only known elements up to v1.2 will be parsed
30 | ParseResult parseResult = AdaptiveCard.DeserializeFromString(jsonText, AdaptiveCardRenderer.Version, context);
31 | ```
32 |
33 | or
34 |
35 | ```csharp
36 | using AdaptiveCards.Rendering.Xamarin.Android.ObjectModel;
37 | // ...
38 |
39 | ParseContext context = new ParseContext(elementParserRegistration, actionParserRegistration);
40 | ParseResult parseResult = AdaptiveCard.DeserializeFromString(jsonText, AdaptiveCardRenderer.Version, context);
41 | ```
42 |
43 | ## Render a card
44 |
45 | To be able to render a card you'll need some information
46 | * context: Obtainable from the Activity the card is hosted in
47 | * fragmentManager: can also be retrieved from the hosting activity
48 | * cardActionHandler: instance of [```ICardActionHandler```](adaptivecards-renderin-xamarin-android-renderer-actionhandler-icardactionhandler.md) to manage the action behaviour
49 |
50 | ```csharp
51 | using AdaptiveCards.Rendering.Xamarin.Android.ObjectModel;
52 | using AdaptiveCards.Rendering.Xamarin.Android.Renderer;
53 | using AdaptiveCards.Rendering.Xamarin.Android.Renderer.ActionHandler;
54 | // ...
55 |
56 | var renderedCard = AdaptiveCardRenderer.Instance.Render(context, fragmentManager, adaptiveCard, cardActionHandler, hostConfig);
57 | View v = renderedCard.View;
58 | ```
59 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/winui-3/native-styling.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Native styling - WinUI 3 SDK
3 | description: This article walks you through the process of implementing native styling using the WinUI 3 SDK.
4 | author: JeanRoca
5 | ms.author: jproca
6 | ms.date: 05/04/2023
7 | ms.topic: article
8 | ---
9 |
10 | # Native styling - WinUI 3
11 |
12 | While Host Config will get you most of the way there on each platform, it's likely that you will have to do some native styling on each platform.
13 |
14 | WinUI 3 makes this easy by allowing you to pass a ResourceDictionary for fine-grained styling, behavior, animations, etc.
15 |
16 | | Element | Style names |
17 | |---|---|
18 | | AdaptiveCard | Adaptive.Card|
19 | | Action.OpenUrl | Adaptive.Action.OpenUrl |
20 | | Action.ShowCard | Adaptive.Action.ShowCard |
21 | | Action.Submit | Adaptive.Action.Submit |
22 | | Column | Adaptive.Column, Adaptive.Action.Tap |
23 | | ColumnSet | Adaptive.ColumnSet, Adaptive.VerticalSeparator |
24 | | Container | Adaptive.Container|
25 | | Input.ChoiceSet | Adaptive.Input.ChoiceSet, Adaptive.Input.ChoiceSet.ComboBox, Adaptive.Input.ChoiceSet.CheckBox, Adaptive.Input.ChoiceSet.Radio, Adaptive.Input.ChoiceSet.ComboBoxItem |
26 | | Input.Date | Adaptive.Input.Text.Date
27 | | Input.Number | Adaptive.Input.Text.Number |
28 | | Input.Text | Adaptive.Input.Text |
29 | | Input.Time | Adaptive.Input.Text.Time |
30 | | Input.Toggle| Adaptive.Input.Toggle|
31 | | Image | Adaptive.Image |
32 | | ImageSet | Adaptive.ImageSet |
33 | | FactSet | Adaptive.FactSet, Adaptive.Fact.Title, Adaptive.Fact.Value |
34 | | TextBlock | Adaptive.TextBlock |
35 |
36 | This sample XAML Resource dictionary that sets the background of all TextBlocks to Aqua. You will probably want something more advanced than this 😁
37 |
38 | ```xml
39 |
42 |
45 |
46 | ```
47 | ```csharp
48 | // Use a ResourceDictionary instance
49 | // DON'T use this property if rendering from a server
50 | renderer.Resources = myResourceDictionary;
51 | ```
52 |
--------------------------------------------------------------------------------
/AdaptiveCards/content/fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "Glyphs";
3 | src: url("fonts/Glyphs/WinJSSymMDL2.eot");
4 | src: url("fonts/Glyphs/WinJSSymMDL2.eot#iefix") format("embedded-opentype"), url("fonts/Glyphs/WinJSSymMDL2.ttf") format("truetype");
5 | }
6 | @font-face {
7 | font-family: "Segoe UI";
8 | src: url("fonts/SegoeUI-Normal/latest.eot");
9 | src: url("fonts/SegoeUI-Normal/latest.eot?") format("embedded-opentype"), url("fonts/SegoeUI-Normal/latest.woff") format("woff"), url("fonts/SegoeUI-Normal/latest.ttf") format("truetype"), url("fonts/SegoeUI-Normal/latest.svg#web") format("svg");
10 | font-style: normal;
11 | font-weight: normal;
12 | }
13 | @font-face {
14 | font-family: "Segoe UI Semilight";
15 | src: url("fonts/SegoeUI-Semilight/latest.eot");
16 | src: url("fonts/SegoeUI-Semilight/latest.eot?") format("embedded-opentype"), url("fonts/SegoeUI-Semilight/latest.woff") format("woff"), url("fonts/SegoeUI-Semilight/latest.ttf") format("truetype"), url("fonts/SegoeUI-Semilight/latest.svg#web") format("svg");
17 | font-style: normal;
18 | font-weight: normal;
19 | }
20 | @font-face {
21 | font-family: "Segoe UI Semibold";
22 | src: url("fonts/SegoeUI-Semibold/latest.eot");
23 | src: url("fonts/SegoeUI-Semibold/latest.eot?") format("embedded-opentype"), url("fonts/SegoeUI-Semibold/latest.woff") format("woff"), url("fonts/SegoeUI-Semibold/latest.ttf") format("truetype"), url("fonts/SegoeUI-Semibold/latest.svg#web") format("svg");
24 | font-style: normal;
25 | font-weight: normal;
26 | }
27 | @font-face {
28 | font-family: "Segoe UI Bold";
29 | src: url("fonts/SegoeUI-Bold/latest.eot");
30 | src: url("fonts/SegoeUI-Bold/latest.eot?") format("embedded-opentype"), url("fonts/SegoeUI-Bold/latest.woff") format("woff"), url("fonts/SegoeUI-Bold/latest.ttf") format("truetype"), url("fonts/SegoeUI-Bold/latest.svg#web") format("svg");
31 | font-style: normal;
32 | font-weight: normal;
33 | }
34 | @font-face {
35 | font-family: "Fabric MDL2";
36 | src: url("fonts/Fabric-MDL2/latest.eot");
37 | src: url("fonts/Fabric-MDL2/latest.eot?") format("embedded-opentype"), url("fonts/Fabric-MDL2/latest.woff") format("woff"), url("fonts/Fabric-MDL2/latest.ttf") format("truetype"), url("fonts/Fabric-MDL2/latest.svg#web") format("svg");
38 | font-style: normal;
39 | font-weight: normal;
40 | }
41 |
42 |
43 |
--------------------------------------------------------------------------------
/AdaptiveCards/schema-explorer/input-choice.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Input.Choice Action
3 | author: luywang
4 | description: This page provides documentation for the `Input.Choice` input in the Adaptive Cards schema.
5 | ms.author: luywang
6 | ms.date: 12/11/2025
7 | ms.topic: concept-article
8 | ---
9 |
10 | # Input.Choice
11 |
12 | > [!NOTE]
13 | > **Are you building Copilot, Teams or Outlook scenarios powered by Adaptive Cards?**
14 | > Visit [**Adaptive Card Documentation Hub**](https://adaptivecards.microsoft.com/), the new one-stop-shop for all your Adaptive Card needs! It has all the resources you're looking for, including complete documentation for many new features, such as [Responsive layout](https://adaptivecards.microsoft.com/?topic=responsive-layout), [Icon](https://adaptivecards.microsoft.com/?topic=Icon), [Badge](https://adaptivecards.microsoft.com/?topic=Badge), [Carousel](https://adaptivecards.microsoft.com/?topic=Carousel), [Charts](https://adaptivecards.microsoft.com/?topic=Chart.Line), and much more!
15 |
16 | > **Important note about accessibility:**
17 | > In version 1.3 of the schema we introduced a [**label**](/adaptive-cards/authoring-cards/input-validation#labels) property on Inputs to improve accessibility. If the [Host app you are targeting](/adaptive-cards/resources/partners) supports v1.3 you should use **label** instead of a **TextBlock** as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.
18 |
19 | ## Input.Choice
20 |
21 | Describes a choice for use in a ChoiceSet.
22 |
23 | ### Input.Choice Properties
24 |
25 | | Property | Type | Required | Description | Version |
26 | | :--- | :--- | :--- | :--- | :--- |
27 | | **title** | `string` | Yes | Text to display. | 1.0 |
28 | | **value** | `string` | Yes | The raw value for the choice. **NOTE:** do not use a `,` in the value, since a `ChoiceSet` with `isMultiSelect` set to `true` returns a comma-delimited string of choice values. | 1.0 |
29 |
30 | ## Properties
31 |
32 | ### title (Version 1.0)
33 | Text to display.
34 | * **Type**: `string`
35 | * **Required**: Yes
36 |
37 | ### value (Version 1.0)
38 | The raw value for the choice. **NOTE:** do not use a `,` in the value, since a `ChoiceSet` with `isMultiSelect` set to `true` returns a comma-delimited string of choice values.
39 | * **Type**: `string`
40 | * **Required**: Yes
--------------------------------------------------------------------------------
/AdaptiveCards/schema-explorer/media-source.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: MediaSource Element
3 | author: luywang
4 | description: This page provides documentation for the `MediaSource` element in the Adaptive Cards schema.
5 | ms.author: luywang
6 | ms.date: 12/11/2025
7 | ms.topic: concept-article
8 | ---
9 |
10 | # MediaSource Element
11 |
12 | > [!NOTE]
13 | > **Are you building Copilot, Teams or Outlook scenarios powered by Adaptive Cards?**
14 | > Visit [**Adaptive Card Documentation Hub**](https://adaptivecards.microsoft.com/), the new one-stop-shop for all your Adaptive Card needs! It has all the resources you're looking for, including complete documentation for many new features, such as [Responsive layout](https://adaptivecards.microsoft.com/?topic=responsive-layout), [Icon](https://adaptivecards.microsoft.com/?topic=Icon), [Badge](https://adaptivecards.microsoft.com/?topic=Badge), [Carousel](https://adaptivecards.microsoft.com/?topic=Carousel), [Charts](https://adaptivecards.microsoft.com/?topic=Chart.Line), and much more!
15 |
16 | This page documents the **MediaSource** element, a type used within the `Media` element in the Adaptive Cards schema.
17 |
18 |
19 | > **Important note about accessibility:**
20 | > In version 1.3 of the schema we introduced a [**label**](/adaptive-cards/authoring-cards/input-validation#labels) property on Inputs to improve accessibility. If the [Host app you are targeting](/adaptive-cards/resources/partners) supports v1.3 you should use **label** instead of a **TextBlock** as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.
21 |
22 | ## MediaSource
23 |
24 | Defines a source for a Media element.
25 |
26 | **Introduced in version 1.1**
27 |
28 | ### MediaSource Properties
29 |
30 | | Property | Type | Required | Description | Version |
31 | | :--- | :--- | :--- | :--- | :--- |
32 | | **url** | `uri` | Yes | URL to media. Supports data URI in version 1.2+. | 1.1 |
33 | | **mimeType** | `string` | No | Mime type of associated media (e.g. `"video/mp4"`). For YouTube and other Web video URLs, `mimeType` can be omitted. | 1.1 |
34 |
35 | ## Properties
36 |
37 | ### mimeType
38 |
39 | Mime type of associated media (e.g. `"video/mp4"`). For YouTube and other Web video URLs, `mimeType` can be omitted.
40 |
41 | * **Type**: `string`
42 | * **Required**: No
43 |
44 | ### url
45 |
46 | URL to media. Supports data URI in version 1.2+.
47 |
48 | * **Type**: `uri`
49 | * **Required**: Yes
50 |
--------------------------------------------------------------------------------
/AdaptiveCards/schema-explorer/target-element.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Action.TargetElement Action
3 | author: luywang
4 | description: This page provides documentation for the `Action.TargetElement` action in the Adaptive Cards schema.
5 | ms.author: luywang
6 | ms.date: 12/11/2025
7 | ms.topic: concept-article
8 | ---
9 |
10 | # TargetElement
11 |
12 | > [!NOTE]
13 | > **Are you building Copilot, Teams or Outlook scenarios powered by Adaptive Cards?**
14 | > Visit [**Adaptive Card Documentation Hub**](https://adaptivecards.microsoft.com/), the new one-stop-shop for all your Adaptive Card needs! It has all the resources you're looking for, including complete documentation for many new features, such as [Responsive layout](https://adaptivecards.microsoft.com/?topic=responsive-layout), [Icon](https://adaptivecards.microsoft.com/?topic=Icon), [Badge](https://adaptivecards.microsoft.com/?topic=Badge), [Carousel](https://adaptivecards.microsoft.com/?topic=Carousel), [Charts](https://adaptivecards.microsoft.com/?topic=Chart.Line), and much more!
15 |
16 |
17 | This page documents the **TargetElement** type, which represents an entry used to specify elements whose visibility should be changed by an `Action.ToggleVisibility` action.
18 |
19 | > **Important note about accessibility:**
20 | > In version 1.3 of the schema we introduced a [**label**](/adaptive-cards/authoring-cards/input-validation#labels) property on Inputs to improve accessibility. If the [Host app you are targeting](/adaptive-cards/resources/partners) supports v1.3 you should use **label** instead of a **TextBlock** as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.
21 |
22 | ## TargetElement
23 |
24 | Represents an entry for `Action.ToggleVisibility`'s `targetElements` property.
25 |
26 | ### TargetElement Properties
27 |
28 | | Property | Type | Required | Description | Version |
29 | | :--- | :--- | :--- | :--- | :--- |
30 | | **elementId** | `string` | Yes | Element ID of element to toggle. | 1.0 |
31 | | **isVisible** | `boolean?` | No | If `true`, always show target element. If `false`, always hide target element. If not supplied, toggle target element's visibility. | 1.0 |
32 |
33 | ## Properties
34 |
35 | ### elementId (Version 1.0)
36 |
37 | Element ID of element to toggle
38 |
39 | * **Type**: `string`
40 | * **Required**: Yes
41 |
42 | ### isVisible (Version 1.0)
43 |
44 | If `true`, always show target element. If `false`, always hide target element. If not supplied, toggle target element's visibility.
45 |
46 | * **Type**: `boolean?`
47 | * **Required**: No
48 |
49 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/xamarin/android/getting-started.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Xamarin.Android SDK
3 | author: almedina-ms
4 | ms.author: almedina
5 | ms.date: 12/02/2019
6 | ms.topic: get-started
7 | ---
8 |
9 | # Getting started - Xamarin.Android
10 |
11 | This is a renderer library which targets native xamarin android applications and is based on the Android renderer that you can find [here](../../android/getting-started.md).
12 |
13 | ## NuGet install
14 |
15 | [](https://www.nuget.org/packages/AdaptiveCards.Rendering.Xamarin.Android)
16 |
17 | You can find the published packages [here](http://nuget.org)
18 |
19 | ```console
20 | Install-Package AdaptiveCards.Rendering.Xamarin.Android -Version 0.1.0-alpha
21 | ```
22 |
23 | ## Namespace
24 |
25 | The necessary namespaces for using this library are
26 | ```csharp
27 | // To import the base object model classes as AdaptiveCard, TextBlock, Column, ShowCardAction, ...
28 | using AdaptiveCards.Rendering.Xamarin.Android.ObjectModel;
29 |
30 | // To import the AdaptiveCardRenderer class
31 | using AdaptiveCards.Rendering.Xamarin.Android.Renderer;
32 |
33 | // To import the ICardActionHandler interface
34 | using AdaptiveCards.Rendering.Xamarin.Android.Renderer.ActionHandler;
35 |
36 | // To use feature registration and register custom behaviour
37 | using AdaptiveCards.Rendering.Xamarin.Android.Renderer.Registration;
38 | ```
39 |
40 | ## Xamarin.Android Visualizer Sample
41 |
42 | The Xamarin.Android Visualizer sample lets you visualize cards using Xamarin.Android. If you have ever used the Android sample application you'll find the experience to be really similar.
43 |
44 | ## Next steps
45 |
46 | For a quick start check [Render a card](render-a-card.md) for the next steps!
47 |
48 | For a more in depth view of the classes that have been binded for the Xamarin.Android renderer library, you can check some of the binded classes by clicking on them below:
49 | * [```AdaptiveCard```](adaptivecards-rendering-xamarin-android-objectmodel-adaptivecard.md)
50 | * [```AdaptiveCardRenderer```](adaptivecards-rendering-xamarin-android-renderer-adaptivecardrenderer.md)
51 | * [```CardRendererRegistration```](adaptivecards-rendering-xamarin-android-renderer-cardrendererregistration.md)
52 | * [```FeatureRegistration```](adaptivecards-rendering-xamarin-android-objectmodel-featureregistration.md)
53 | * [```ICardActionHandler```](adaptivecards-renderin-xamarin-android-renderer-actionhandler-icardactionhandler.md)
54 | * [```RenderedAdaptiveCard```](adaptivecards-rendering-xamarin-android-renderer-renderedadaptivecard.md)
55 |
--------------------------------------------------------------------------------
/AdaptiveCards/resources/partners.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Adaptive Cards Partners
3 | description: Adaptive Card platform partners and supported versions
4 | author: matthidinger
5 | ms.author: mahiding
6 | ms.date: 2/15/2021
7 | ms.topic: article
8 | ---
9 |
10 | # Partners
11 |
12 | Adaptive Cards are most useful when they benefit a broad range of developers. Our vision is to create a shared ecosystem where developers can write and share content across multiple platforms. Our goal is to work in cooperation with communities and companies to build out this vision and develop a universal card exchange framework.
13 |
14 | If you are interested in joining the Adaptive Cards ecosystem, please [reach out directly on GitHub](https://github.com/Microsoft/AdaptiveCards).
15 |
16 | ## Live
17 |
18 | Platform | Description | Documentation | Schema Version
19 | ---------|-------------|---------------|---------
20 | [Bot Framework Web Chat](https://github.com/Microsoft/BotFramework-WebChat) | Embeddable web chat control for the Microsoft Bot Framework | [Get Started](../getting-started/bots.md) | 1.6 (Web Chat 4.18.0)
21 | [Outlook Actionable Messages](/outlook/actionable-messages/) | Attach an actionable message to email | [Get Started](/outlook/actionable-messages/) | 1.0
22 | [Microsoft Teams](https://products.office.com/microsoft-teams/group-chat-software) | Platform that combines workplace chat, meetings, and notes | [Get Started](/microsoftteams/platform/concepts/cards/cards-reference#adaptive-card) | 1.5
23 | [Cortana Skills](/cortana/skills/adaptive-cards) | A virtual assistant for Windows 10 | [Get Started](../getting-started/bots.md) | 1.0
24 | [Windows Timeline](https://blogs.windows.com/windowsexperience/2017/12/19/announcing-windows-10-insider-preview-build-17063-pc/) | A new way to resume past activities you started on this PC, other Windows PCs, and iOS/Android devices. | [Get Started](../getting-started/windows.md) | 1.0
25 | [Cisco WebEx Teams](https://www.webex.com/team-collaboration.html) | Webex Teams helps speed up projects, build better relationships, and solve business challenges. | [Get Started](https://developer.webex.com/docs/api/guides/cards) | 1.2
26 | [Viva Connections](/viva/connections/viva-connections-overview) | Viva Connections is the gateway to the employee experience. It provides timely and relevant content and news, surfaces critical tasks and actions, and fosters connections between people. | [Get Started](/sharepoint/dev/spfx/viva/design/designing-quick-view ) | 1.2
27 | Windows Widgets | Widgets are small cards that display dynamic content from your favorite apps and services on your Windows desktop. | [Get Started](/windows/apps/design/widgets) | 1.6
28 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/authoring-cards/net.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: .NET SDK for Adaptive Cards
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 10/01/2017
6 | ms.topic: article
7 | ---
8 |
9 | # .NET SDK for Authoring Cards
10 |
11 | As we described in the [Getting Started](../../authoring-cards/getting-started.md) page, an Adaptive Card is a JSON object model. The .NET library makes working with that JSON much easier.
12 |
13 |
14 | ## NuGet Install
15 | The `AdaptiveCards` NuGet package provides types for working with adaptive cards in .NET
16 |
17 | [](https://www.nuget.org/packages/AdaptiveCards)
18 |
19 | ```console
20 | Install-Package AdaptiveCards
21 | ```
22 |
23 | ## Example: Create an AdaptiveCard and serialize to JSON
24 |
25 | This example demonstrates how to build an Adaptive Card using standard C# objects and then serialize it to JSON for transport over the wire.
26 |
27 | ```csharp
28 | using AdaptiveCards;
29 | // ...
30 |
31 | AdaptiveCard card = new AdaptiveCard(new AdaptiveSchemaVersion(1, 0));
32 |
33 | card.Body.Add(new AdaptiveTextBlock()
34 | {
35 | Text = "Hello",
36 | Size = AdaptiveTextSize.ExtraLarge
37 | });
38 |
39 | card.Body.Add(new AdaptiveImage()
40 | {
41 | Url = new Uri("http://adaptivecards.io/content/cats/1.png")
42 | });
43 |
44 | // serialize the card to JSON
45 | string json = card.ToJson();
46 | ```
47 |
48 | ## Example: Parse an AdaptiveCard from JSON
49 |
50 | This example demonstrates how to parse a JSON payload into an Adaptive Card. This makes it easy to manipulate the object model or even render Adaptive Cards inside your app by using our [renderer SDKs](../../rendering-cards/getting-started.md).
51 |
52 | ```csharp
53 | try
54 | {
55 | // Get a JSON-serialized payload
56 | // Your app will probably get cards from somewhere else :)
57 | var client = new HttpClient();
58 | var response = await client.GetAsync("http://adaptivecards.io/payloads/ActivityUpdate.json");
59 | var json = await response.Content.ReadAsStringAsync();
60 |
61 | // Parse the JSON
62 | AdaptiveCardParseResult result = AdaptiveCard.FromJson(json);
63 |
64 | // Get card from result
65 | AdaptiveCard card = result.Card;
66 |
67 | // Optional: check for any parse warnings
68 | // This includes things like unknown element "type"
69 | // or unknown properties on element
70 | IList warnings = result.Warnings;
71 | }
72 | catch(AdaptiveSerializationException ex)
73 | {
74 | // Failed to deserialize card
75 | // This occurs from malformed JSON
76 | // or schema violations like required properties missing
77 | }
78 | ```
79 |
--------------------------------------------------------------------------------
/AdaptiveCards/content/card.css:
--------------------------------------------------------------------------------
1 | .ac-image.ac-selectable {
2 | cursor: pointer;
3 | }
4 |
5 | .ac-container.ac-selectable {
6 | padding: 5px;
7 | }
8 |
9 | .ac-container.ac-selectable:hover {
10 | background-color: rgba(0, 0, 0, 0.1);
11 | }
12 |
13 | .ac-container.ac-selectable:active {
14 | background-color: rgba(0, 0, 0, 0.15);
15 | }
16 |
17 | .ac-pushButton {
18 | font-family: "Segoe UI", sans-serif;
19 | font-size: 14px;
20 | font-weight: 600;
21 | overflow: hidden;
22 | text-overflow: ellipsis;
23 | border: none;
24 | padding: 4px 10px 5px 10px;
25 | text-align: center;
26 | vertical-align: middle;
27 | cursor: default;
28 | background-color: #0078D7;
29 | color: white;
30 | -webkit-user-select: none;
31 | -moz-user-select: none;
32 | -ms-user-select: none;
33 | user-select: none;
34 | }
35 |
36 | .ac-pushButton:hover {
37 | background-color: #005A9E;
38 | }
39 |
40 | .ac-pushButton:active {
41 | background-color: #004D84;
42 | }
43 |
44 | .ac-linkButton {
45 | font-family: "Segoe UI", sans-serif;
46 | font-size: 14px;
47 | font-weight: 600;
48 | overflow: hidden;
49 | text-overflow: ellipsis;
50 | cursor: default;
51 | border: 2px solid #5D60B3;
52 | padding: 4px 10px 5px 10px;
53 | color: #5D60B3;
54 | background-color: white;
55 | -webkit-user-select: none;
56 | -moz-user-select: none;
57 | -ms-user-select: none;
58 | user-select: none;
59 | }
60 |
61 | .ac-linkButton:hover {
62 | background-color: #5D60B3;
63 | color: white;
64 | }
65 |
66 | .ac-linkButton:active {
67 | background-color: #4F5399;
68 | color: white;
69 | }
70 |
71 | /*
72 | Other styles that can be specified:
73 | .ac-linkButton.ac-expanded
74 | .ac-linkButton.ac-expanded:hover
75 | .ac-linkButton.ac-expanded:active
76 | */
77 | .ac-linkButton {
78 | text-align: center;
79 | vertical-align: middle;
80 | }
81 |
82 | .ac-input {
83 | font-family: "Segoe UI", sans-serif;
84 | font-size: 14px;
85 | color: black;
86 | }
87 |
88 | .ac-input.ac-textInput {
89 | height: 30px;
90 | resize: none;
91 | }
92 |
93 | .ac-input.ac-textInput.ac-multiline {
94 | height: 72px;
95 | }
96 |
97 | .ac-input.ac-textInput, .ac-input.ac-numberInput, .ac-input.ac-dateInput, .ac-input.ac-timeInput, .ac-input.ac-multichoiceInput {
98 | border: 1px solid #DDDDDD;
99 | padding: 4px 8px 4px 8px;
100 | }
101 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/net-wpf/native-styling.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Native styling - .NET WPF SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 10/19/2017
6 | ms.topic: article
7 | ---
8 |
9 | # Native styling - .NET WPF
10 |
11 | While Host Config will get you most of the way there on each platform, it's likely that you will have to do some native styling on each platform.
12 |
13 | WPF makes this easy by allowing you to pass a ResourceDictionary for fine-grained styling, behavior, animations, etc.
14 |
15 | | Element | Style names |
16 | |---|---|
17 | | AdaptiveCard | Adaptive.Card|
18 | | Action.OpenUrl | Adaptive.Action.OpenUrl |
19 | | Action.ShowCard | Adaptive.Action.ShowCard |
20 | | Action.Submit | Adaptive.Action.Submit |
21 | | Column | Adaptive.Column, Adaptive.Action.Tap |
22 | | ColumnSet | Adaptive.ColumnSet, Adaptive.VerticalSeparator |
23 | | Container | Adaptive.Container|
24 | | Input.ChoiceSet | Adaptive.Input.ChoiceSet, Adaptive.Input.ChoiceSet.ComboBox, Adaptive.Input.ChoiceSet.CheckBox, Adaptive.Input.ChoiceSet.Radio, Adaptive.Input.ChoiceSet.ComboBoxItem |
25 | | Input.Date | Adaptive.Input.Text.Date
26 | | Input.Number | Adaptive.Input.Text.Number |
27 | | Input.Text | Adaptive.Input.Text |
28 | | Input.Time | Adaptive.Input.Text.Time |
29 | | Input.Toggle| Adaptive.Input.Toggle|
30 | | Image | Adaptive.Image |
31 | | ImageSet | Adaptive.ImageSet |
32 | | FactSet | Adaptive.FactSet, Adaptive.Fact.Title, Adaptive.Fact.Value |
33 | | TextBlock | Adaptive.TextBlock |
34 |
35 | This sample XAML Resource dictionary that sets the background of all TextBlocks to Aqua. You will probably want something more advanced than this 😁
36 |
37 | ```xml
38 |
41 |
44 |
45 | ```
46 | ```csharp
47 | // Use a ResourceDictionary instance
48 | // DON'T use this property if rendering from a server
49 | renderer.Resources = myResourceDictionary;
50 |
51 | // ... or load it from a file path
52 | // USE this if rendering from a server
53 | renderer.ResourcesPath = ;
54 | ```
55 |
56 | > [!IMPORTANT]
57 | > **A note about server-side image generation**
58 | > The WPF renderer provides a `RenderCardToImageAsync` method that can be used for server-side image generation.
59 | > You must only use the `ResourcesPath` property if used in this environment.
60 | > See the [Image Rendering](../net-image/getting-started.md) docs for more
--------------------------------------------------------------------------------
/AdaptiveCards/schema-explorer/caption-source.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: CaptionSource Element
3 | author: luywang
4 | description: This page provides documentation for the `CaptionSource` element in the Adaptive Cards schema.
5 | ms.author: luywang
6 | ms.date: 12/11/2025
7 | ms.topic: concept-article
8 | ---
9 |
10 | # CaptionSource Element
11 |
12 | > [!NOTE]
13 | > **Are you building Copilot, Teams or Outlook scenarios powered by Adaptive Cards?**
14 | > Visit [**Adaptive Card Documentation Hub**](https://adaptivecards.microsoft.com/), the new one-stop-shop for all your Adaptive Card needs! It has all the resources you're looking for, including complete documentation for many new features, such as [Responsive layout](https://adaptivecards.microsoft.com/?topic=responsive-layout), [Icon](https://adaptivecards.microsoft.com/?topic=Icon), [Badge](https://adaptivecards.microsoft.com/?topic=Badge), [Carousel](https://adaptivecards.microsoft.com/?topic=Carousel), [Charts](https://adaptivecards.microsoft.com/?topic=Chart.Line), and much more!
15 |
16 |
17 | This page documents the **CaptionSource** element, a type used to define sources for media captions, typically within the `Media` element in the Adaptive Cards schema.
18 |
19 | > **Important note about accessibility:**
20 | > In version 1.3 of the schema we introduced a [**label**](/adaptive-cards/authoring-cards/input-validation#labels) property on Inputs to improve accessibility. If the [Host app you are targeting](/adaptive-cards/resources/partners) supports v1.3 you should use **label** instead of a **TextBlock** as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.
21 |
22 | ## CaptionSource
23 |
24 | Defines a source for captions.
25 |
26 | **Introduced in version 1.6**
27 |
28 | ### CaptionSource Properties
29 |
30 | | Property | Type | Required | Description | Version |
31 | | :--- | :--- | :--- | :--- | :--- |
32 | | **mimeType** | `string` | Yes | Mime type of associated caption file (e.g. `"vtt"`). For rendering in JavaScript, only `"vtt"` is supported. For rendering in UWP, `"vtt"` and `"srt"` are supported. | 1.6 |
33 | | **url** | `uri` | Yes | URL to captions. | 1.6 |
34 | | **label** | `string` | Yes | Label of this caption to show to the user. | 1.6 |
35 |
36 | ## Properties
37 |
38 | ### mimeType
39 |
40 | Mime type of associated caption file (e.g. `"vtt"`). For rendering in JavaScript, only `"vtt"` is supported, while for rendering in UWP, `"vtt"` and `"srt"` are supported.
41 |
42 | * **Type**: `string`
43 | * **Required**: Yes
44 |
45 | ### url
46 |
47 | URL to captions.
48 |
49 | * **Type**: `uri`
50 | * **Required**: Yes
51 |
52 | ### label
53 |
54 | Label of this caption to show to the user.
55 |
56 | * **Type**: `string`
57 | * **Required**: Yes
58 |
59 |
--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ## Security
4 |
5 | Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
6 |
7 | If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://aka.ms/opensource/security/definition), please report it to us as described below.
8 |
9 | ## Reporting Security Issues
10 |
11 | **Please do not report security vulnerabilities through public GitHub issues.**
12 |
13 | Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://aka.ms/opensource/security/create-report).
14 |
15 | If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://aka.ms/opensource/security/pgpkey).
16 |
17 | You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://aka.ms/opensource/security/msrc).
18 |
19 | Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
20 |
21 | * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
22 | * Full paths of source file(s) related to the manifestation of the issue
23 | * The location of the affected source code (tag/branch/commit or direct URL)
24 | * Any special configuration required to reproduce the issue
25 | * Step-by-step instructions to reproduce the issue
26 | * Proof-of-concept or exploit code (if possible)
27 | * Impact of the issue, including how an attacker might exploit the issue
28 |
29 | This information will help us triage your report more quickly.
30 |
31 | If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://aka.ms/opensource/security/bounty) page for more details about our active programs.
32 |
33 | ## Preferred Languages
34 |
35 | We prefer all communications to be in English.
36 |
37 | ## Policy
38 |
39 | Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://aka.ms/opensource/security/cvd).
40 |
41 |
42 |
--------------------------------------------------------------------------------
/AdaptiveCards/schema-explorer/authentication-card-button.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: AuthCardButton Element
3 | author: luywang
4 | description: This page provides documentation for the `AuthCardButton` element in the Adaptive Cards schema.
5 | ms.author: luywang
6 | ms.date: 12/11/2025
7 | ms.topic: concept-article
8 | ---
9 |
10 | # AuthCardButton
11 |
12 | > [!NOTE]
13 | > **Are you building Copilot, Teams or Outlook scenarios powered by Adaptive Cards?**
14 | > Visit [**Adaptive Card Documentation Hub**](https://adaptivecards.microsoft.com/), the new one-stop-shop for all your Adaptive Card needs! It has all the resources you're looking for, including complete documentation for many new features, such as [Responsive layout](https://adaptivecards.microsoft.com/?topic=responsive-layout), [Icon](https://adaptivecards.microsoft.com/?topic=Icon), [Badge](https://adaptivecards.microsoft.com/?topic=Badge), [Carousel](https://adaptivecards.microsoft.com/?topic=Carousel), [Charts](https://adaptivecards.microsoft.com/?topic=Chart.Line), and much more!
15 |
16 | > **Important note about accessibility:**
17 | > In version 1.3 of the schema we introduced a [**label**](/adaptive-cards/authoring-cards/input-validation#labels) property on Inputs to improve accessibility. If the [Host app you are targeting](/adaptive-cards/resources/partners) supports v1.3 you should use **label** instead of a **TextBlock** as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.
18 |
19 | ## AuthCardButton
20 |
21 | Defines a button as displayed when prompting a user to authenticate. This maps to the [`cardAction`](/dotnet/api/microsoft.bot.schema.cardaction) type defined by the Bot Framework.
22 |
23 | **Introduced in version 1.4**
24 |
25 | ### AuthCardButton Properties
26 |
27 | | Property | Type | Required | Description | Version |
28 | | :--- | :--- | :--- | :--- | :--- |
29 | | **type** | `string` | Yes | The type of the button. | 1.4 |
30 | | **value** | `string` | Yes | The value associated with the button. The meaning of value depends on the button’s type. | 1.4 |
31 | | **title** | `string` | No | The caption of the button. | 1.4 |
32 | | **image** | `string` | No | A URL to an image to display alongside the button’s caption. | 1.4 |
33 |
34 | ---
35 |
36 | ## Properties
37 |
38 | ### type
39 |
40 | The type of the button.
41 |
42 | * **Type**: `string`
43 | * **Required**: Yes
44 |
45 | ### title
46 |
47 | The caption of the button.
48 |
49 | * **Type**: `string`
50 | * **Required**: No
51 |
52 | ### image
53 |
54 | A URL to an image to display alongside the button's caption.
55 |
56 | * **Type**: `string`
57 | * **Required**: No
58 |
59 | ### value
60 |
61 | The value associated with the button. The meaning of value depends on the button's type.
62 |
63 | * **Type**: `string`
64 | * **Required**: Yes
65 |
66 |
67 |
--------------------------------------------------------------------------------
/AdaptiveCards/schema-explorer/fact.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Fact Element
3 | author: luywang
4 | description: This page provides documentation for the `Fact` element in the Adaptive Cards schema.
5 | ms.author: luywang
6 | ms.date: 12/11/2025
7 | ms.topic: concept-article
8 | ---
9 |
10 | # Fact Element
11 |
12 | > [!NOTE]
13 | > **Are you building Copilot, Teams or Outlook scenarios powered by Adaptive Cards?**
14 | > Visit [**Adaptive Card Documentation Hub**](https://adaptivecards.microsoft.com/), the new one-stop-shop for all your Adaptive Card needs! It has all the resources you're looking for, including complete documentation for many new features, such as [Responsive layout](https://adaptivecards.microsoft.com/?topic=responsive-layout), [Icon](https://adaptivecards.microsoft.com/?topic=Icon), [Badge](https://adaptivecards.microsoft.com/?topic=Badge), [Carousel](https://adaptivecards.microsoft.com/?topic=Carousel), [Charts](https://adaptivecards.microsoft.com/?topic=Chart.Line), and much more!
15 |
16 | This page documents the **Fact** element, which describes a single key/value pair within a `FactSet` container.
17 |
18 | > **Important note about accessibility:**
19 | > In version 1.3 of the schema we introduced a [**label**](/adaptive-cards/authoring-cards/input-validation#labels) property on Inputs to improve accessibility. If the [Host app you are targeting](/adaptive-cards/resources/partners) supports v1.3 you should use **label** instead of a **TextBlock** as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.
20 |
21 | ## Fact
22 |
23 | Describes a Fact in a FactSet as a key/value pair.
24 |
25 | ### Fact Properties
26 |
27 | | Property | Type | Required | Description | Version |
28 | | :--- | :--- | :--- | :--- | :--- |
29 | | **title** | `string` | Yes | The title of the fact. | 1.0 |
30 | | **value** | `string` | Yes | The value of the fact. | 1.0 |
31 |
32 | -----
33 |
34 | ## Example
35 |
36 | ### FactSet with Facts Example (JSON)
37 |
38 | ```json
39 | {
40 | "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
41 | "type": "AdaptiveCard",
42 | "version": "1.0",
43 | "body": [
44 | {
45 | "type": "FactSet",
46 | "facts": [
47 | {
48 | "title": "Fact 1",
49 | "value": "Value 1"
50 | },
51 | {
52 | "title": "Fact 2",
53 | "value": "Value 2"
54 | },
55 | {
56 | "title": "Fact 3",
57 | "value": "Value 3"
58 | },
59 | {
60 | "title": "Fact 4",
61 | "value": "Value 5"
62 | }
63 | ]
64 | }
65 | ]
66 | }
67 | ```
68 |
69 | ## Properties
70 |
71 | ### title
72 |
73 | The title of the fact.
74 |
75 | * **Type**: `string`
76 | * **Required**: Yes
77 |
78 | ### value
79 |
80 | The value of the fact.
81 |
82 | * **Type**: `string`
83 | * **Required**: Yes
84 |
85 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/javascript/render-a-card.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Render a card - JavaScript SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 08/30/2020
6 | ms.topic: how-to
7 | ---
8 |
9 | # Render a card - JavaScript
10 |
11 | Here's how to render a card using the JavaScript SDK.
12 |
13 | ## Usage
14 |
15 | ### Import the module
16 |
17 | ```js
18 | // import the module
19 | import * as AdaptiveCards from "adaptivecards";
20 |
21 | // or require it
22 | var AdaptiveCards = require("adaptivecards");
23 |
24 | // or use the global variable if loaded from CDN
25 | AdaptiveCards.renderCard(...);
26 | ```
27 |
28 | ## Render a card
29 |
30 | ```js
31 | // Author a card
32 | // In practice you'll probably get this from a service
33 | // see http://adaptivecards.io/samples/ for inspiration
34 | var card = {
35 | "type": "AdaptiveCard",
36 | "version": "1.0",
37 | "body": [
38 | {
39 | "type": "Image",
40 | "url": "http://adaptivecards.io/content/adaptive-card-50.png"
41 | },
42 | {
43 | "type": "TextBlock",
44 | "text": "Hello **Adaptive Cards!**"
45 | }
46 | ],
47 | "actions": [
48 | {
49 | "type": "Action.OpenUrl",
50 | "title": "Learn more",
51 | "url": "http://adaptivecards.io"
52 | },
53 | {
54 | "type": "Action.OpenUrl",
55 | "title": "GitHub",
56 | "url": "http://github.com/Microsoft/AdaptiveCards"
57 | }
58 | ]
59 | };
60 |
61 | // Create an AdaptiveCard instance
62 | var adaptiveCard = new AdaptiveCards.AdaptiveCard();
63 |
64 | // Set its hostConfig property unless you want to use the default Host Config
65 | // Host Config defines the style and behavior of a card
66 | adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
67 | fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
68 | // More host config options
69 | });
70 |
71 | // Set the adaptive card's event handlers. onExecuteAction is invoked
72 | // whenever an action is clicked in the card
73 | adaptiveCard.onExecuteAction = function(action) { alert("Ow!"); }
74 |
75 | // For markdown support you need a third-party library
76 | // E.g., to use markdown-it, include in your HTML page:
77 | //
78 | // And add this code to replace the default markdown handler:
79 | // AdaptiveCards.AdaptiveCard.onProcessMarkdown = function (text, result) {
80 | // result.outputHtml = markdownit().render(text);
81 | // result.didProcess = true;
82 | // };
83 |
84 | // Parse the card payload
85 | adaptiveCard.parse(card);
86 |
87 | // Render the card to an HTML element:
88 | var renderedCard = adaptiveCard.render();
89 |
90 | // And finally insert it somewhere in your page:
91 | document.body.appendChild(renderedCard);
92 | ```
93 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/xamarin/android/adaptivecards-rendering-xamarin-android-objectmodel-featureregistration.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: FeatureRegistration class - Xamarin.Android SDK
3 | author: almedina-ms
4 | ms.author: almedina
5 | ms.date: 12/02/2019
6 | ms.topic: how-to
7 | ---
8 |
9 | # Feature Registration
10 |
11 | ```csharp
12 | public class FeatureRegistration : Java.Lang.Object
13 | ```
14 |
15 | **Namespace**
16 | ```csharp
17 | namespace AdaptiveCards.Rendering.Xamarin.Android.ObjectModel
18 | ```
19 |
20 | ## Summary
21 |
22 | | Public methods | |
23 | | --- | ---- |
24 | | ```void``` | [```AddFeature(string featureName, string featureVersion)```](#addfeature) |
25 | | ```string``` | [```GetFeatureVersion(string featureName)```](#getfeatureversion) |
26 | | ```void``` | [```RemoveFeature (string featureName)```](#removefeature) |
27 |
28 | ## Public Methods
29 |
30 | ---
31 |
32 | ### AddFeature
33 | Added in version 0.1.0
34 |
35 | ```csharp
36 | public void AddFeature (string featureName,
37 | string featureVersion)
38 | ```
39 |
40 | Adds a feature containing its name and version to the renderer feature registration.
41 |
42 | | Parameters | |
43 | | --- | --- |
44 | | featureName | ```string``` |
45 | | featureVersion | ```string``` |
46 |
47 | #### Sample
48 |
49 | ```csharp
50 | FeatureRegistration featureRegistration = new FeatureRegistration();
51 | featureRegistration.AddFeature("MyFeature", "1.2.0");
52 | CardRendererRegistration.Instance.RegisterFeatureRegistration(featureRegistration);
53 | ```
54 |
55 | ---
56 |
57 | ### GetFeatureVersion
58 | Added in version 0.1.0
59 |
60 | ```csharp
61 | public string GetFeatureVersion (string featureName)
62 | ```
63 |
64 | Retrieves the version for a given feature.
65 |
66 | | Parameters | |
67 | | --- | --- |
68 | | featureName | ```string``` |
69 |
70 | | Returns | |
71 | | --- | --- |
72 | | ```string``` | Feature version for the given feature |
73 |
74 | #### Sample
75 |
76 | ```csharp
77 | FeatureRegistration featureRegistration = new FeatureRegistration();
78 | featureRegistration.AddFeature("MyFeature", "1.2.0");
79 | string featureVersion = featureRegistration.GetFeatureVersion("MyFeature"); // 1.2.0
80 | ```
81 |
82 | ---
83 |
84 | ### RemoveFeature
85 | Added in version 0.1.0
86 |
87 | ```csharp
88 | public void RemoveFeature (string featureName)
89 | ```
90 |
91 | Removes the given feature from the feature dictionary.
92 |
93 | | Parameters | |
94 | | --- | --- |
95 | | featureName | ```string``` |
96 |
97 | #### Sample
98 |
99 | ```csharp
100 | FeatureRegistration featureRegistration = new FeatureRegistration();
101 | featureRegistration.AddFeature("MyFeature", "1.2.0");
102 | featureRegistration.RemoveFeature("MyFeature");
103 | ```
104 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/javascript/actions.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Handling actions - JavaScript SDK
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 11/28/2017
6 | ms.topic: concept-article
7 | ---
8 |
9 | # Handling actions - JavaScript
10 |
11 | The JavaScript SDK introduces a base `Action` and a set of dedicated action classes (that all extend `Action`) that map to the various action types defined in the Adaptive Card schema:
12 | | Schema type name | JavaScript class |
13 | | --- | --- |
14 | | [Action.OpenUrl](https://adaptivecards.io/explorer/Action.OpenUrl.html) | `OpenUrlAction` |
15 | | [Action.ShowCard](https://adaptivecards.io/explorer/Action.ShowCard.html) | `ShowCardAction` |
16 | | [Action.ToggleVisibility](https://adaptivecards.io/explorer/Action.ToggleVisibility.html) | `ToggleVisibilityAction` |
17 | | [Action.Submit](https://adaptivecards.io/explorer/Action.Submit.html) | `SubmitAction` |
18 |
19 | ## Handling actions when users click action buttons
20 | To handle action execution with the JavaScript SDK, an application should provide a handler for either the global `AdaptiveCard.onExecuteAction` event, or for the per-card `adaptiveCardInstance.onExecuteAction` event. The event handler will be invoked regardless of the type of action being executed, and it is the responsibility of the application to test which type of action is being executed and run the appropriate code. Typically, applications will only need to explicitly handle `SubmitAction`, as other action types are automatically handled by the SDK.
21 |
22 | ### Example
23 |
24 | ```typescript
25 | // Create an AdaptiveCard instance
26 | let adaptiveCard = new AdaptiveCard();
27 |
28 | // Parse a card payload - this is just a very simple example
29 | adaptiveCard.parse(
30 | {
31 | "type": "AdaptiveCard",
32 | "version": "1.0",
33 | "actions": [
34 | {
35 | "type": "Action.Submit",
36 | "id": "clickMe",
37 | "title": "Click me!"
38 | }
39 | ]
40 | }
41 | )
42 |
43 | // Provide an onExecuteAction handler to handle the Action.Submit
44 | adaptiveCard.onExecuteAction = (action: Action) => {
45 | if (action instanceof SubmitAction) {
46 | // If you copy this code sample, remove the alert statement
47 | // and provide your own custom handling code
48 | alert("You clicked " + action.title);
49 | }
50 | }
51 |
52 | document.body.appendChild(adaptiveCard.render());
53 | ```
54 |
55 | ## Executing actions in code
56 |
57 | The JavaScript SDK allows you to execute actions in code if necessary via the `Action.execute()` method.
58 |
59 | ### Example
60 |
61 | ```typescript
62 | function triggerAction(card: AdaptiveCard, actionId: string) {
63 | let action = card.getActionById(actionId);
64 |
65 | if (action !== undefined) {
66 | // Executing an action in code will trigger the
67 | // onExecuteAction event
68 | action.execute();
69 | }
70 | }
71 | ```
72 |
--------------------------------------------------------------------------------
/AdaptiveCards/schema-explorer/token-exchange-resource.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: TokenExchangeResource Element
3 | author: luywang
4 | description: This page provides documentation for the `TokenExchangeResource` element in the Adaptive Cards schema.
5 | ms.author: luywang
6 | ms.date: 12/11/2025
7 | ms.topic: concept-article
8 | ---
9 |
10 | # TokenExchangeResource
11 |
12 | > [!NOTE]
13 | > **Are you building Copilot, Teams or Outlook scenarios powered by Adaptive Cards?**
14 | > Visit [**Adaptive Card Documentation Hub**](https://adaptivecards.microsoft.com/), the new one-stop-shop for all your Adaptive Card needs! It has all the resources you're looking for, including complete documentation for many new features, such as [Responsive layout](https://adaptivecards.microsoft.com/?topic=responsive-layout), [Icon](https://adaptivecards.microsoft.com/?topic=Icon), [Badge](https://adaptivecards.microsoft.com/?topic=Badge), [Carousel](https://adaptivecards.microsoft.com/?topic=Carousel), [Charts](https://adaptivecards.microsoft.com/?topic=Chart.Line), and much more!
15 |
16 | > **Important note about accessibility:**
17 | > In version 1.3 of the schema we introduced a [**label**](/adaptive-cards/authoring-cards/input-validation#labels) property on Inputs to improve accessibility. If the [Host app you are targeting](/adaptive-cards/resources/partners) supports v1.3 you should use **label** instead of a **TextBlock** as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.
18 |
19 | ## TokenExchangeResource
20 |
21 | Defines information required to enable on-behalf-of single sign-on user authentication. It maps to the [`TokenExchangeResource`](/dotnet/api/microsoft.bot.schema.tokenexchangeresource) type defined by the Bot Framework.
22 |
23 | **Introduced in version 1.4**
24 |
25 | ### TokenExchangeResource Properties
26 |
27 | | Property | Type | Required | Description | Version |
28 | | :--- | :--- | :--- | :--- | :--- |
29 | | **id** | `string` | Yes | The unique identified of this token exchange instance. | 1.4 |
30 | | **uri** | `string` | Yes | An application ID or resource identifier with which to exchange a token on behalf of. This property is identity provider- and application-specific. | 1.4 |
31 | | **providerId** | `string` | Yes | An identifier for the identity provider with which to attempt a token exchange. | 1.4 |
32 |
33 | ---
34 |
35 | ## Properties
36 |
37 | ### id
38 |
39 | The unique identified of this token exchange instance.
40 |
41 | * **Type**: `string`
42 | * **Required**: Yes
43 |
44 | ### uri
45 |
46 | An application ID or resource identifier with which to exchange a token on behalf of. This property is identity provider- and application-specific.
47 |
48 | * **Type**: `string`
49 | * **Required**: Yes
50 |
51 | ### providerId
52 |
53 | An identifier for the identity provider with which to attempt a token exchange.
54 |
55 | * **Type**: `string`
56 | * **Required**: Yes
57 |
58 |
--------------------------------------------------------------------------------
/AdaptiveCards/schema-explorer/data-query.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Data.Query Action
3 | author: luywang
4 | description: This page provides documentation for the `Data.Query` input in the Adaptive Cards schema.
5 | ms.author: luywang
6 | ms.date: 12/11/2025
7 | ms.topic: concept-article
8 | ---
9 |
10 | # Data.Query
11 |
12 | > [!NOTE]
13 | > **Are you building Copilot, Teams or Outlook scenarios powered by Adaptive Cards?**
14 | > Visit [**Adaptive Card Documentation Hub**](https://adaptivecards.microsoft.com/), the new one-stop-shop for all your Adaptive Card needs! It has all the resources you're looking for, including complete documentation for many new features, such as [Responsive layout](https://adaptivecards.microsoft.com/?topic=responsive-layout), [Icon](https://adaptivecards.microsoft.com/?topic=Icon), [Badge](https://adaptivecards.microsoft.com/?topic=Badge), [Carousel](https://adaptivecards.microsoft.com/?topic=Carousel), [Charts](https://adaptivecards.microsoft.com/?topic=Chart.Line), and much more!
15 |
16 | > **Important note about accessibility:**
17 | > In version 1.3 of the schema we introduced a [**label**](/adaptive-cards/authoring-cards/input-validation#labels) property on Inputs to improve accessibility. If the [Host app you are targeting](/adaptive-cards/resources/partners) supports v1.3 you should use **label** instead of a **TextBlock** as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.
18 |
19 | ## Data.Query
20 |
21 | The data populated in the event payload for fetching dynamic choices, sent to the card-author to help identify the dataset from which choices might be fetched to be displayed in the dropdown. It might contain auxiliary data to limit the maximum number of choices that can be sent and to support pagination.
22 |
23 | ### Data.Query Properties
24 |
25 | | Property | Type | Required | Description | Version |
26 | | :--- | :--- | :--- | :--- | :--- |
27 | | **dataset** | `string` | Yes | The dataset to be queried to get the choices. | 1.6 |
28 | | **count** | `number` | No | The maximum number of choices that should be returned by the query. It can be ignored if the card-author wants to send a different number. | 1.6 |
29 | | **skip** | `number` | No | The number of choices to be skipped in the list of choices returned by the query. It can be ignored if the card-author does not want pagination. | 1.6 |
30 |
31 | ---
32 |
33 | ## Properties
34 |
35 | ### dataset
36 |
37 | The dataset to be queried to get the choices.
38 |
39 | * **Type**: `string`
40 | * **Version**: 1.6
41 | * **Required**: Yes
42 |
43 | ### count
44 |
45 | The maximum number of choices that should be returned by the query. It can be ignored if the card-author wants to send a different number.
46 |
47 | * **Type**: `number`
48 | * **Version**: 1.6
49 | * **Required**: No
50 |
51 | ### skip
52 |
53 | The number of choices to be skipped in the list of choices returned by the query. It can be ignored if the card-author does not want pagination.
54 |
55 | * **Type**: `number`
56 | * **Version**: 1.6
57 | * **Required**: No
58 |
--------------------------------------------------------------------------------
/AdaptiveCards/schema-explorer/authentication.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Authentication Element
3 | author: luywang
4 | description: This page provides documentation for the `Authentication` element in the Adaptive Cards schema.
5 | ms.author: luywang
6 | ms.date: 12/11/2025
7 | ms.topic: concept-article
8 | ---
9 |
10 | # Authentication
11 |
12 | > [!NOTE]
13 | > **Are you building Copilot, Teams or Outlook scenarios powered by Adaptive Cards?**
14 | > Visit [**Adaptive Card Documentation Hub**](https://adaptivecards.microsoft.com/), the new one-stop-shop for all your Adaptive Card needs! It has all the resources you're looking for, including complete documentation for many new features, such as [Responsive layout](https://adaptivecards.microsoft.com/?topic=responsive-layout), [Icon](https://adaptivecards.microsoft.com/?topic=Icon), [Badge](https://adaptivecards.microsoft.com/?topic=Badge), [Carousel](https://adaptivecards.microsoft.com/?topic=Carousel), [Charts](https://adaptivecards.microsoft.com/?topic=Chart.Line), and much more!
15 |
16 | > **Important note about accessibility:**
17 | > In version 1.3 of the schema we introduced a [**label**](/adaptive-cards/authoring-cards/input-validation#labels) property on Inputs to improve accessibility. If the [Host app you are targeting](/adaptive-cards/resources/partners) supports v1.3 you should use **label** instead of a **TextBlock** as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.
18 |
19 | ## Authentication
20 |
21 | Defines authentication information associated with a card. This maps to the [`OAuthCard`](/dotnet/api/microsoft.bot.schema.oauthcard) type defined by the Bot Framework.
22 |
23 | **Introduced in version 1.4**
24 |
25 | ### Authentication Properties
26 |
27 | | Property | Type | Required | Description | Version |
28 | | :--- | :--- | :--- | :--- | :--- |
29 | | **text** | `string` | No | Text that can be displayed to the end user when prompting them to authenticate. | 1.4 |
30 | | **connectionName** | `string` | No | The identifier for registered OAuth connection setting information. | 1.4 |
31 | | **tokenExchangeResource** | `TokenExchangeResource` | No | Provides information required to enable on-behalf-of single sign-on user authentication. | 1.4 |
32 | | **buttons** | `AuthCardButton[]` | No | Buttons that should be displayed to the user when prompting for authentication. The array MUST contain one button of type “signin”. Other button types are not currently supported. | 1.4 |
33 |
34 | ---
35 |
36 | ## Properties
37 |
38 | ### text
39 |
40 | Text that can be displayed to the end user when prompting them to authenticate.
41 |
42 | * **Type**: `string`
43 | * **Required**: No
44 |
45 | ### connectionName
46 |
47 | The identifier for registered OAuth connection setting information.
48 |
49 | * **Type**: `string`
50 | * **Required**: No
51 |
52 | ### tokenExchangeResource
53 |
54 | Provides information required to enable on-behalf-of single sign-on user authentication.
55 |
56 | * **Type**: `TokenExchangeResource`
57 | * **Required**: No
58 | * **Allowed values**:
59 | * `TokenExchangeResource`
60 |
61 | ### buttons
62 |
63 | Buttons that should be displayed to the user when prompting for authentication. The array MUST contain one button of type "signin". Other button types are not currently supported.
64 |
65 | * **Type**: `AuthCardButton[]`
66 | * **Required**: No
67 | * **Allowed values**:
68 | * `AuthCardButton`
69 |
70 |
--------------------------------------------------------------------------------
/AdaptiveCards/schema-explorer/refresh.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Refresh Element
3 | author: luywang
4 | description: This page provides documentation for the `Refresh` element in the Adaptive Cards schema.
5 | ms.author: luywang
6 | ms.date: 12/11/2025
7 | ms.topic: concept-article
8 | ---
9 |
10 | # Refresh
11 |
12 | > [!NOTE]
13 | > **Are you building Copilot, Teams or Outlook scenarios powered by Adaptive Cards?**
14 | > Visit [**Adaptive Card Documentation Hub**](https://adaptivecards.microsoft.com/), the new one-stop-shop for all your Adaptive Card needs! It has all the resources you're looking for, including complete documentation for many new features, such as [Responsive layout](https://adaptivecards.microsoft.com/?topic=responsive-layout), [Icon](https://adaptivecards.microsoft.com/?topic=Icon), [Badge](https://adaptivecards.microsoft.com/?topic=Badge), [Carousel](https://adaptivecards.microsoft.com/?topic=Carousel), [Charts](https://adaptivecards.microsoft.com/?topic=Chart.Line), and much more!
15 |
16 | > **Important note about accessibility:**
17 | > In version 1.3 of the schema we introduced a [**label**](/adaptive-cards/authoring-cards/input-validation#labels) property on Inputs to improve accessibility. If the [Host app you are targeting](/adaptive-cards/resources/partners) supports v1.3 you should use **label** instead of a **TextBlock** as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.
18 |
19 | ## Refresh
20 |
21 | Defines how a card can be refreshed by making a request to the target Bot.
22 |
23 | **Introduced in version 1.4**
24 |
25 | ### Refresh Properties
26 |
27 | | Property | Type | Required | Description | Version |
28 | | :--- | :--- | :--- | :--- | :--- |
29 | | **action** | `Action.Execute` | No | The action to be executed to refresh the card. Clients can run this refresh action automatically or can provide an affordance for users to trigger it manually. | 1.4 |
30 | | **expires** | `string` | No | A timestamp that informs a Host when the card content has expired, and that it should trigger a refresh as appropriate. The format is ISO-8601 Instant format. E.g., 2022-01-01T12:00:00Z. | 1.6 |
31 | | **userIds** | `string[]` | No | A list of user Ids informing the client for which users should the refresh action should be run automatically. Some clients will not run the refresh action automatically unless this property is specified. Some clients may ignore this property and always run the refresh action automatically. | 1.4 |
32 |
33 | ---
34 |
35 | ## Properties
36 |
37 | ### action
38 |
39 | The action to be executed to refresh the card. Clients can run this refresh action automatically or can provide an affordance for users to trigger it manually.
40 |
41 | * **Type**: `Action.Execute`
42 | * **Required**: No
43 | * **Allowed values**:
44 | * `Action.Execute`
45 |
46 | ### expires
47 |
48 | A timestamp that informs a Host when the card content has expired, and that it should trigger a refresh as appropriate. The format is ISO-8601 Instant format. E.g., 2022-01-01T12:00:00Z.
49 |
50 | * **Type**: `string`
51 | * **Version**: 1.6
52 | * **Required**: No
53 |
54 | ### userIds
55 |
56 | A list of user Ids informing the client for which users should the refresh action should be run automatically. Some clients will not run the refresh action automatically unless this property is specified. Some clients may ignore this property and always run the refresh action automatically.
57 |
58 | * **Type**: `string[]`
59 | * **Required**: No
60 |
--------------------------------------------------------------------------------
/AdaptiveCards/samples/product-video.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Sample of Product Video
3 | author: luywang
4 | description: This page provides a sample code for Product Video Cards.
5 | ms.author: luywang
6 | ms.date: 12/15/2025
7 | ms.topic: concept-article
8 | ---
9 |
10 | # Product Video
11 |
12 | > [!NOTE]
13 | > **Are you building Copilot, Teams or Outlook scenarios powered by Adaptive Cards?**
14 | > Visit [**Adaptive Card Documentation Hub**](https://adaptivecards.microsoft.com/), the new one-stop-shop for all your Adaptive Card needs! It has all the resources you're looking for, including complete documentation for many new features, such as [Responsive layout](https://adaptivecards.microsoft.com/?topic=responsive-layout), [Icon](https://adaptivecards.microsoft.com/?topic=Icon), [Badge](https://adaptivecards.microsoft.com/?topic=Badge), [Carousel](https://adaptivecards.microsoft.com/?topic=Carousel), [Charts](https://adaptivecards.microsoft.com/?topic=Chart.Line), and much more!
15 |
16 | These samples are *just a teaser* of the type of cards you can create. Go ahead and tweak them to make any scenario possible\!
17 |
18 | **Important note about accessibility:** In version 1.3 of the schema we introduced a **label** property on Inputs to improve accessibility. If the [Host app you are targeting](/adaptive-cards/resources/partners) supports v1.3 you should use **label** instead of a **TextBlock** as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.
19 |
20 | ## Product video sample
21 |
22 | The following section displays the JSON for a "Product video" Adaptive Card sample, shown with and without templating.
23 |
24 | ### JSON Code (Without Templating)
25 |
26 | **JSON**
27 |
28 | ```json
29 | {
30 | "type": "AdaptiveCard",
31 | "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
32 | "version": "1.5",
33 | "body": [
34 | {
35 | "type": "Media",
36 | "sources": [
37 | {
38 | "mimeType": "video/mp4",
39 | "url": "https://adaptivecards.io/content/movie.mp4"
40 | }
41 | ],
42 | "poster": "https://adaptivecards.io/content/poster-video.png",
43 | "altText": "A close up of a flower"
44 | },
45 | {
46 | "type": "TextBlock",
47 | "text": "The Contoso Home Loan app provides you with the most up-to-date loan rates.",
48 | "wrap": true,
49 | "spacing": "large"
50 | }
51 | ],
52 | "actions": [
53 | {
54 | "type": "Action.OpenUrl",
55 | "title": "Learn More",
56 | "url": "http://adaptivecards.io"
57 | }
58 | ]
59 | }
60 | ```
61 |
62 | ### JSON Code (With Templating)
63 |
64 | **Data JSON**
65 |
66 | ```json
67 | {
68 | "sources": [
69 | {
70 | "mimeType": "video/mp4",
71 | "url": "https://adaptivecards.io/content/movie.mp4"
72 | }
73 | ],
74 | "poster": "https://adaptivecards.io/content/poster-video.png",
75 | "altText": "A close up of a flower",
76 | "description": "The Contoso Home Loan app provides you with the most up-to-date loan rates.",
77 | "url": "http://adaptivecards.io"
78 | }
79 | ```
80 |
81 | **Template JSON**
82 |
83 | ```json
84 | {
85 | "type": "AdaptiveCard",
86 | "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
87 | "version": "1.5",
88 | "body": [
89 | {
90 | "type": "Media",
91 | "sources": [
92 | {
93 | "$data": "${sources}",
94 | "mimeType": "${mimeType}",
95 | "url": "${url}"
96 | }
97 | ],
98 | "poster": "${poster}",
99 | "altText": "${altText}"
100 | },
101 | {
102 | "type": "TextBlock",
103 | "text": "${description}",
104 | "wrap": true,
105 | "spacing": "large"
106 | }
107 | ],
108 | "actions": [
109 | {
110 | "type": "Action.OpenUrl",
111 | "title": "Learn More",
112 | "url": "${url}"
113 | }
114 | ]
115 | }
116 | ```
117 |
118 |
--------------------------------------------------------------------------------
/AdaptiveCards/resources/tools.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Adaptive Cards Tools
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 03/14/2019
6 | ms.topic: article
7 | ---
8 |
9 | # Tools and Samples
10 |
11 | ## Card Designer
12 |
13 | Need for a tool to design your cards? Look no further than the browser-based adaptive card designer at [https://adaptivecards.microsoft.com/designer](https://adaptivecards.microsoft.com/designer).
14 |
15 | [](https://adaptivecards.microsoft.com/designer)
16 |
17 | ### Embed the designer into your app
18 |
19 | But why send your users there when you can **embed the card designer directly into your web** app using our JavaScript library.
20 |
21 | Check out the [adaptivecards-designer](https://npmjs.com/adaptivecards-designer) package to get started.
22 |
23 | ## Schema validation
24 |
25 | Schema validation is a powerful way of making authoring easier and enabling tooling.
26 |
27 | We have provided a complete [JSON Schema file](https://adaptivecards.io/schemas/1.2.0/adaptive-card.json) for editing and validating adaptive cards in json. Note that the schema URL is versioned, newer versions of Adaptive Cards will have a corresponding URL.
28 |
29 | In Visual Studio and Visual Studio Code you can get automatic Intellisense by including a `$schema` reference.
30 |
31 | 
32 |
33 | 
34 |
35 | ## Example
36 |
37 | ```json
38 | {
39 | "$schema": "http://adaptivecards.io/schemas/1.2.0/adaptive-card.json",
40 | "type": "AdaptiveCard",
41 | "version": "1.0",
42 | "body": []
43 | }
44 | ```
45 |
46 | ## Visual Studio Code Extensions
47 |
48 | ### **Adaptive Cards Studio**
49 |
50 | 
51 |
52 | With AdaptiveCards Studio you can author cards directly in Visual Studio Code. The Extension automatically detects all Adaptive Cards in your working space and lets you easily edit the card template and sample data.
53 |
54 | [Read more and install it from the Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=madewithcardsio.adaptivecardsstudiobeta)
55 |
56 |
57 | ### **Adaptive Card Viewer**
58 |
59 | We have created a Visual Studio code extension which allows you to visualize the card you are editing in real time
60 | inside the editor itself.
61 |
62 | 
63 |
64 | To install, open Extensions Marketplace and search for **Adaptive Card Viewer**.
65 |
66 | 
67 |
68 | ### Usage
69 |
70 | When you are editing a .json file with an Adaptive Card `$schema` property you can view by using `Ctrl+Shift+V A`.
71 | ```json
72 | {
73 | "$schema": "http://adaptivecards.io/schemas/1.2.0/adaptive-card.json",
74 | "type": "AdaptiveCard",
75 | "version": "1.0",
76 | "body": []
77 | }
78 | ```
79 |
80 | ### Options
81 |
82 | The following Visual Studio Code setting is available for the AdaptiveCards Viewer. This can be set in User Settings or Workspace Settings.
83 |
84 | ```js
85 | {
86 | // Open or not open the preview screen automatically
87 | "adaptivecardsviewer.enableautopreview": true,
88 | }
89 | ```
90 |
91 | ## WPF Visualizer Sample
92 |
93 | The [WPF visualizer sample project](https://github.com/Microsoft/AdaptiveCards/tree/master/source/dotnet/Samples/WPFVisualizer) lets you visualize cards using WPF/Xaml on a Windows machine. A `hostconfig`
94 | editor is built in for editing and viewing host config settings. Save these settings as a JSON to use them in rendering
95 | in your application.
96 |
97 | 
98 |
99 | ## WPF ImageRender Sample
100 |
101 | The [ImageRender sample project](https://github.com/Microsoft/AdaptiveCards/tree/master/source/dotnet/Samples/AdaptiveCards.Sample.ImageRender) turns any card into a PNG from the command line using WPF.
102 |
--------------------------------------------------------------------------------
/AdaptiveCards/sdk/rendering-cards/xamarin/android/adaptivecards-rendering-xamarin-android-renderer-adaptivecardrenderer.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: AdaptiveCardRenderer class - Xamarin.Android SDK
3 | author: almedina-ms
4 | ms.author: almedina
5 | ms.date: 12/02/2019
6 | ms.topic: article
7 | ---
8 |
9 | # AdaptiveCardRenderer
10 |
11 | ```csharp
12 | public class AdaptiveCardRenderer : global::Java.Lang.Object
13 | ```
14 |
15 | **Namespace**
16 | ```csharp
17 | namespace AdaptiveCards.Rendering.Xamarin.Android.Renderer
18 | ```
19 |
20 | ### Summary
21 |
22 | | Public methods | |
23 | | --- | ---- |
24 | | ```RenderedAdaptiveCard``` | [```Render (Context context, FragmentManager fragmentManager, AdaptiveCard adaptiveCard, ICardActionHandler cardActionHandler)```](#render0) |
25 | | ```RenderedAdaptiveCard``` | [```Render (Context context, FragmentManager fragmentManager, AdaptiveCard adaptiveCard, ICardActionHandler cardActionHandler, HostConfig hostConfig)```](#render1) |
26 |
27 | ## Public Methods
28 |
29 | ---
30 |
31 | ### Render
32 | Added in version 0.1.0
33 |
34 | ```csharp
35 | public RenderedAdaptiveCard Render (Context context,
36 | FragmentManager fragmentManager,
37 | AdaptiveCard adaptiveCard,
38 | ICardActionHandler cardActionHandler)
39 | ```
40 |
41 | Renders the specified adaptive card with default values for the host config.
42 |
43 | | Parameters | |
44 | | --- | --- |
45 | | context | ```Android.Content.Context``` |
46 | | fragmentManager | ```Android.Support.V4.App.FragmentManager``` |
47 | | adaptiveCard | [```AdaptiveCards.Rendering.Xamarin.Android.ObjectModel.AdaptiveCard```](adaptivecards-rendering-xamarin-android-objectmodel-adaptivecard.md) |
48 | | cardActionHandler | [```AdaptiveCards.Rendering.Xamarin.Android.Renderer.ActionHandler.ICardActionHandler```](adaptivecards-renderin-xamarin-android-renderer-actionhandler-icardactionhandler.md) |
49 |
50 | | Returns | |
51 | | --- | --- |
52 | | [```AdaptiveCards.Rendering.Xamarin.Android.Renderer.RenderedAdaptiveCard```](adaptivecards-rendering-xamarin-android-renderer-renderedadaptivecard.md) | |
53 |
54 | #### Sample
55 |
56 | ```csharp
57 | ParseResult parseResult = AdaptiveCard.DeserializeFromString(jsonText, AdaptiveCardRenderer.Version);
58 | RenderedAdaptiveCard renderedCard = AdaptiveCardRenderer.Instance.Render(context, SupportFragmentManager, parseResult.AdaptiveCard, cardActionHandler);
59 | ```
60 |
61 | ---
62 |
63 | ### Render
64 | Added in version 0.1.0
65 |
66 | ```csharp
67 | RenderedAdaptiveCard Render (Context context,
68 | FragmentManager fragmentManager,
69 | AdaptiveCard adaptiveCard,
70 | ICardActionHandler cardActionHandler,
71 | HostConfig hostConfig)
72 | ```
73 |
74 | Renders the specified adaptive card with using the given host config.
75 |
76 | | Parameters | |
77 | | --- | --- |
78 | | context | ```Android.Content.Context``` |
79 | | fragmentManager | ```Android.Support.V4.App.FragmentManager``` |
80 | | adaptiveCard | [```AdaptiveCards.Rendering.Xamarin.Android.ObjectModel.AdaptiveCard```](adaptivecards-rendering-xamarin-android-objectmodel-adaptivecard.md) |
81 | | cardActionHandler | [```AdaptiveCards.Rendering.Xamarin.Android.Renderer.ActionHandler.ICardActionHandler```](adaptivecards-renderin-xamarin-android-renderer-actionhandler-icardactionhandler.md) |
82 | | hostConfig | ```AdaptiveCards.Rendering.Xamarin.Android.ObjectModel.HostConfig``` |
83 |
84 | | Returns | |
85 | | --- | --- |
86 | | [```AdaptiveCards.Rendering.Xamarin.Android.Renderer.RenderedAdaptiveCard```](adaptivecards-rendering-xamarin-android-renderer-renderedadaptivecard.md) | |
87 |
88 | #### Sample
89 |
90 | ```csharp
91 | ParseResult parseResult = AdaptiveCard.DeserializeFromString(jsonText, AdaptiveCardRenderer.Version);
92 | RenderedAdaptiveCard renderedCard = AdaptiveCardRenderer.Instance.Render(context, SupportFragmentManager, parseResult.AdaptiveCard, cardActionHandler, hostConfig);
93 | ```
--------------------------------------------------------------------------------
/AdaptiveCards/samples/application-login.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Sample of Application Login
3 | author: luywang
4 | description: This page provides a sample code for Application Login Cards.
5 | ms.author: luywang
6 | ms.date: 12/15/2025
7 | ms.topic: concept-article
8 | ---
9 |
10 |
11 | # Application Login
12 |
13 | > [!NOTE]
14 | > **Are you building Copilot, Teams or Outlook scenarios powered by Adaptive Cards?**
15 | > Visit [**Adaptive Card Documentation Hub**](https://adaptivecards.microsoft.com/), the new one-stop-shop for all your Adaptive Card needs! It has all the resources you're looking for, including complete documentation for many new features, such as [Responsive layout](https://adaptivecards.microsoft.com/?topic=responsive-layout), [Icon](https://adaptivecards.microsoft.com/?topic=Icon), [Badge](https://adaptivecards.microsoft.com/?topic=Badge), [Carousel](https://adaptivecards.microsoft.com/?topic=Carousel), [Charts](https://adaptivecards.microsoft.com/?topic=Chart.Line), and much more!
16 |
17 | These samples are *just a teaser* of the type of cards you can create. Go ahead and tweak them to make any scenario possible\!
18 |
19 | **Important note about accessibility:** In version 1.3 of the schema we introduced a **label** property on Inputs to improve accessibility. If the [Host app you are targeting](/adaptive-cards/resources/partners) supports v1.3 you should use **label** instead of a **TextBlock** as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.
20 |
21 |
22 |
23 | ## Application login sample
24 |
25 | The following section displays the JSON for an "Application login" Adaptive Card sample, shown with and without templating.
26 |
27 | ### JSON Code (Without Templating)
28 |
29 | **JSON**
30 |
31 | ```json
32 | {
33 | "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
34 | "type": "AdaptiveCard",
35 | "version": "1.5",
36 | "body": [
37 | {
38 | "type": "TextBlock",
39 | "size": "medium",
40 | "weight": "bolder",
41 | "text": "Application Login",
42 | "horizontalAlignment": "center",
43 | "wrap": true,
44 | "style": "heading"
45 | },
46 | {
47 | "type": "Input.Text",
48 | "style": "text",
49 | "id": "UserVal",
50 | "label": "Username",
51 | "isRequired": true,
52 | "errorMessage": "Username is required"
53 | },
54 | {
55 | "type": "Input.Text",
56 | "id": "PassVal",
57 | "style": "password",
58 | "label": "Password",
59 | "isRequired": true,
60 | "errorMessage": "Password is required"
61 | }
62 | ],
63 | "actions": [
64 | {
65 | "type": "Action.Submit",
66 | "title": "Login",
67 | "data": {
68 | "id": "LoginVal"
69 | }
70 | }
71 | ]
72 | }
73 | ```
74 |
75 | ### JSON Code (With Templating)
76 |
77 | **Data JSON**
78 |
79 | ```json
80 | {
81 | "ApplicationInfo": {
82 | "title": "Application Login"
83 | }
84 | }
85 | ```
86 |
87 | **Template JSON**
88 |
89 | ```json
90 | {
91 | "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
92 | "type": "AdaptiveCard",
93 | "version": "1.5",
94 | "body": [
95 | {
96 | "type": "TextBlock",
97 | "size": "medium",
98 | "weight": "bolder",
99 | "text": " ${ApplicationInfo.title}",
100 | "horizontalAlignment": "center",
101 | "wrap": true,
102 | "style": "heading"
103 | },
104 | {
105 | "type": "Input.Text",
106 | "style": "text",
107 | "id": "UserVal",
108 | "label": "Username",
109 | "isRequired": true,
110 | "errorMessage": "Username is required"
111 | },
112 | {
113 | "type": "Input.Text",
114 | "id": "PassVal",
115 | "style": "password",
116 | "label": "Password",
117 | "isRequired": true,
118 | "errorMessage": "Password is required"
119 | }
120 | ],
121 | "actions": [
122 | {
123 | "type": "Action.Submit",
124 | "title": "Login",
125 | "data": {
126 | "id": "LoginVal"
127 | }
128 | }
129 | ]
130 | }
131 | ```
132 |
133 |
134 |
--------------------------------------------------------------------------------
/AdaptiveCards/authoring-cards/getting-started.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Getting Started
3 | author: matthidinger
4 | ms.author: mahiding
5 | ms.date: 11/9/2017
6 | ms.topic: get-started
7 | ---
8 |
9 | # Getting Started
10 |
11 | An Adaptive Card is a JSON-serialized card object model.
12 |
13 | ## Adaptive Card structure
14 |
15 | The basic structure of a card is as follows:
16 |
17 | * `AdaptiveCard` - The root object describes the AdaptiveCard itself, including its element makeup, its actions, how it should be spoken, and the schema version required to render it.
18 | * `body` - The body of the card is made up of building-blocks known as `elements`. Elements can be composed in nearly infinite arrangements to create many types of cards.
19 | * `actions` - Many cards have a set of actions a user may take on it. This property describes those actions which typically get rendered in an "action bar" at the bottom.
20 |
21 | ### Example Card
22 |
23 | This sample card which includes a single line of text followed by an image.
24 |
25 | ```json
26 | {
27 | "type": "AdaptiveCard",
28 | "version": "1.0",
29 | "body": [
30 | {
31 | "type": "TextBlock",
32 | "text": "Here is a ninja cat"
33 | },
34 | {
35 | "type": "Image",
36 | "url": "http://adaptivecards.io/content/cats/1.png"
37 | }
38 | ]
39 | }
40 | ```
41 |
42 | ## `Type` property
43 |
44 | Every element has a `type` property which identifies what kind of object it is. Looking at the above card, you can see we have two elements, a `TextBlock` and an `Image`.
45 |
46 | All Adaptive Card elements **stack vertically** and **expand to the width of their parent** (think `display: block` in HTML). However, you can use a `ColumnSet` to create side-by-side columns of containers.
47 |
48 | ## Adaptive Elements
49 |
50 | The most fundamental elements are:
51 |
52 | * **TextBlock** - adds a block of text with properties to control what the text looks like
53 | * **Image** - adds an image with properties to control what the image looks like
54 |
55 | ## Container elements
56 |
57 | Cards can also have containers, which arrange a collection of child elements.
58 |
59 | * **Container** - Defines a a collection of elements
60 | * **ColumnSet/Column** - Defines a collection of columns, each column is a container
61 | * **FactSet** - Container of Facts
62 | * **ImageSet** - Container of Images so that UI can show appropriate photo gallery experience for a collection of images.
63 |
64 | ## Input elements
65 |
66 | Input elements allow you to ask for native UI to build simple forms:
67 |
68 | * **Input.Text** - get text content from the user
69 | * **Input.Date** - get a Date from the user
70 | * **Input.Time** - get a Time from the user
71 | * **Input.Number** - get a Number from the user
72 | * **Input.ChoiceSet** - Give the user a set of choices and have them pick
73 | * **Input.Toggle** - Give the user a single choice between two items and have them pick
74 |
75 | ## Actions
76 |
77 | Actions add buttons to the card. These can perform a variety of actions, like opening a URL or submitting some data.
78 |
79 | * **Action.OpenUrl** - the button opens an external URL for viewing
80 | * **Action.ShowCard** - Requests a sub-card to be shown to the user.
81 | * **Action.Submit** - Ask for all of the input elements to be gathered up into an object which is then sent to you through some method defined by the host application.
82 |
83 | > **Example Action.Submit**: With Skype, an Action.Submit will send a Bot Framework bot activity back to the bot with the **Value** property containing an object with all of the input data on it.
84 |
85 | ## Learn More
86 |
87 | * [Browse Sample cards](https://adaptivecards.io/samples/) for inspiration
88 | * Use the [Schema Explorer](https://adaptivecards.io/explorer) to browse the available elements
89 | * Build a card using the [Interactive Visualizer](https://vnext.adaptivecards.io/visualizer/)
90 | * [Get in touch](https://github.com/Microsoft/AdaptiveCards/issues/new?title=%5BWebsite%5D%20%5BYour%20feedback%20title%20here%5D&body=%0D%0A%0D%0A%5BYour%20detailed%20feedback%20here%5D%0D%0A%0D%0A---%0D%0A*%20URL%3A%20https%3A%2F%2Fadaptivecards.io%2Fsamples%2F) with any feedback you have
91 |
--------------------------------------------------------------------------------