├── .gitattributes ├── .github └── policies │ └── resourceManagement.yml ├── .gitignore ├── .openpublishing.publish.config.json ├── .openpublishing.redirection.json ├── AdaptiveCards ├── authoring-cards │ ├── card-schema.md │ ├── getting-started.md │ ├── input-validation.md │ ├── media │ │ ├── text-features │ │ │ └── markdown.png │ │ └── universal-action-model │ │ │ ├── inconsistent-action-model-lifecycle.png │ │ │ ├── inconsistent-action-model.png │ │ │ ├── new-universal-action-model.jpg │ │ │ └── universal-action-model-lifecycle.jpg │ ├── speech.md │ ├── text-features.md │ └── universal-action-model.md ├── breadcrumb │ └── toc.yml ├── content │ ├── AdventureWorksLogo.png │ ├── Airplane in circle blue.png │ ├── Airplane in circle.png │ ├── Airplane.png │ ├── AlkiBeach.jpg │ ├── BainbridgeIsland.jpg │ ├── CalendarIcon.png │ ├── Closed bug 92x92.png │ ├── Cloudy-Square.png │ ├── Cloudy.png │ ├── Decrease.png │ ├── Drizzle-Square.png │ ├── Drizzle.png │ ├── FabrikamLogo.png │ ├── GoldenGardensPark.jpg │ ├── Haze-Square.png │ ├── Haze.png │ ├── Increase.png │ ├── Limeade.png │ ├── MargiesTravel.png │ ├── Mostly Cloudy-Background-Dark.jpg │ ├── Mostly Cloudy-Background.jpg │ ├── Mostly Cloudy-Square.png │ ├── Mostly Cloudy.png │ ├── PieChart.png │ ├── Relecloud.png │ ├── Slight Drizzle-Square.png │ ├── Slight Drizzle.png │ ├── Snow-Square.png │ ├── Snow.png │ ├── Sunny-Square.png │ ├── Sunny.png │ ├── Thunderstorms-Square.png │ ├── Thunderstorms.png │ ├── action_submit_behavior.png │ ├── action_submit_behaviour.png │ ├── adaptive-card-200.png │ ├── adaptive-card-50.png │ ├── adaptive-card.svg │ ├── adaptive-cards-100.png │ ├── bot-framework.png │ ├── card.css │ ├── cards │ │ ├── AdaptiveCardsDiagram.png │ │ ├── card1.png │ │ ├── fb-airline-checkin.png │ │ ├── flightupdate.png │ │ ├── outlook.png │ │ ├── skype.png │ │ ├── speech.png │ │ ├── visualizer.png │ │ ├── weather.png │ │ └── windows.png │ ├── cats │ │ ├── Cat_Sat_1_400x406.png │ │ ├── Cat_Sat_2-Glasses_400x297.png │ │ └── Cat_Sat_2_400x297.png │ ├── column_width_image_width_2.png │ ├── connect │ │ ├── blog.png │ │ ├── friends.png │ │ ├── github.png │ │ ├── stackoverflow.png │ │ └── twitter.png │ ├── cortana-logo.png │ ├── designer.png │ ├── downarrow.png │ ├── fonts.css │ ├── fonts │ │ ├── Glyphs │ │ │ ├── SegMDL2.1.56.woff │ │ │ ├── WinJSSymMDL2.eot │ │ │ ├── WinJSSymMDL2.svg │ │ │ ├── WinJSSymMDL2.ttf │ │ │ ├── WinJSSymMDL2.woff │ │ │ ├── WinJSSymMDL2.woff2 │ │ │ ├── winjs-symbols.eot │ │ │ ├── winjs-symbols.ttf │ │ │ └── winjs-symbols.woff │ │ ├── SegoeUI-Bold │ │ │ ├── latest.eot │ │ │ ├── latest.svg │ │ │ ├── latest.ttf │ │ │ ├── latest.woff │ │ │ └── latest.woff2 │ │ ├── SegoeUI-Normal │ │ │ ├── latest.eot │ │ │ ├── latest.svg │ │ │ ├── latest.ttf │ │ │ ├── latest.woff │ │ │ └── latest.woff2 │ │ ├── SegoeUI-Semibold │ │ │ ├── latest.eot │ │ │ ├── latest.svg │ │ │ ├── latest.ttf │ │ │ ├── latest.woff │ │ │ └── latest.woff2 │ │ └── SegoeUI-Semilight │ │ │ ├── latest.eot │ │ │ ├── latest.svg │ │ │ ├── latest.ttf │ │ │ ├── latest.woff │ │ │ └── latest.woff2 │ ├── height1_text_wrap_off.png │ ├── height2_text_wrap_on.png │ ├── icons │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon.png │ │ ├── browserconfig.xml │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── manifest.json │ │ ├── mstile-150x150.png │ │ └── safari-pinned-tab.svg │ ├── icons_blue │ │ ├── blue-144.png │ │ ├── blue-192.png │ │ ├── blue-48.png │ │ ├── blue-512.png │ │ ├── blue-72.png │ │ └── blue-96.png │ ├── icons_transparent │ │ ├── white-144.png │ │ ├── white-192.png │ │ ├── white-48.png │ │ ├── white-512.png │ │ ├── white-72.png │ │ └── white-96.png │ ├── icons_white │ │ ├── white-144.png │ │ ├── white-192.png │ │ ├── white-48.png │ │ ├── white-512.png │ │ ├── white-72.png │ │ └── white-96.png │ ├── image_size_3.png │ ├── image_size_auto_stretch.png │ ├── imagesize2.png │ ├── overview.jpg │ ├── shared.css │ ├── spacing1.png │ ├── spacing2_not_affected.png │ ├── spacing3_seperator.png │ ├── spacing4_with_seperator.png │ ├── spacing5_no_effect.png │ ├── spacing_no_effect.png │ ├── style1.png │ ├── style2_withBleed.png │ ├── uparrow.png │ ├── videoposter.jpg │ ├── videoposter.png │ ├── width3_auto_stretch_auto.png │ ├── width5_w50_p100_w50_auto.png │ ├── width6_all_auto.png │ ├── width_1_auto_stretch.png │ ├── width_2_stretch_stretch.png │ └── width_4_w50_p100_w50.png ├── docfx.json ├── getting-started │ ├── bots.md │ ├── flow.md │ ├── media │ │ ├── bots │ │ │ ├── hello-adaptivecards.png │ │ │ └── scuba-chat.png │ │ ├── outlook │ │ │ ├── GitHub.png │ │ │ └── Limeade.jpg │ │ └── windows │ │ │ └── timeline.png │ ├── outlook.md │ └── windows.md ├── index.md ├── rendering-cards │ ├── actions.md │ ├── extensibility.md │ ├── getting-started.md │ ├── host-config.md │ ├── implement-a-renderer.md │ ├── renderer-behaviour.md │ └── speech.md ├── resources │ ├── future.md │ ├── media.md │ ├── media │ │ └── tools │ │ │ ├── autocomplete.png │ │ │ ├── designer.jpg │ │ │ ├── invalidjson1.png │ │ │ ├── vscode-extension-marketplace.png │ │ │ ├── vscode-extension.png │ │ │ └── wpfvisualizer.png │ ├── partners.md │ ├── principles.md │ └── tools.md ├── sdk │ ├── authoring-cards │ │ ├── javascript.md │ │ ├── net.md │ │ └── toc.yml │ ├── designer.md │ └── rendering-cards │ │ ├── android │ │ ├── actions.md │ │ ├── extensibility.md │ │ ├── getting-started.md │ │ ├── host-config.md │ │ ├── native-styling.md │ │ └── render-a-card.md │ │ ├── ios │ │ ├── actions.md │ │ ├── extensibility.md │ │ ├── getting-started.md │ │ ├── host-config.md │ │ ├── native-styling.md │ │ └── render-a-card.md │ │ ├── javascript │ │ ├── actions.md │ │ ├── extensibility.md │ │ ├── fabric.md │ │ ├── getting-started.md │ │ ├── host-config.md │ │ ├── native-styling.md │ │ └── render-a-card.md │ │ ├── net-html │ │ ├── actions.md │ │ ├── extensibility.md │ │ ├── getting-started.md │ │ ├── host-config.md │ │ ├── native-styling.md │ │ └── render-a-card.md │ │ ├── net-image │ │ ├── actions.md │ │ ├── extensibility.md │ │ ├── getting-started.md │ │ ├── host-config.md │ │ ├── native-styling.md │ │ └── render-a-card.md │ │ ├── net-wpf │ │ ├── actions.md │ │ ├── extensibility.md │ │ ├── getting-started.md │ │ ├── host-config.md │ │ ├── native-styling.md │ │ └── render-a-card.md │ │ ├── react-native │ │ ├── getting-started.md │ │ └── theme-config.md │ │ ├── toc.yml │ │ ├── uwp │ │ ├── actions.md │ │ ├── extensibility.md │ │ ├── getting-started.md │ │ ├── host-config.md │ │ ├── native-styling.md │ │ └── render-a-card.md │ │ ├── winui-3 │ │ ├── actions.md │ │ ├── extensibility.md │ │ ├── getting-started.md │ │ ├── host-config.md │ │ ├── native-styling.md │ │ └── render-a-card.md │ │ └── xamarin │ │ └── android │ │ ├── actions.md │ │ ├── adaptivecards-renderin-xamarin-android-renderer-actionhandler-icardactionhandler.md │ │ ├── adaptivecards-rendering-xamarin-android-objectmodel-adaptivecard.md │ │ ├── adaptivecards-rendering-xamarin-android-objectmodel-featureregistration.md │ │ ├── adaptivecards-rendering-xamarin-android-renderer-adaptivecardrenderer.md │ │ ├── adaptivecards-rendering-xamarin-android-renderer-cardrendererregistration.md │ │ ├── adaptivecards-rendering-xamarin-android-renderer-renderedadaptivecard.md │ │ ├── getting-started.md │ │ ├── host-config.md │ │ ├── native-styling.md │ │ └── render-a-card.md ├── templating │ ├── content │ │ ├── 2019-08-01-12-08-13.png │ │ └── 2019-08-01-13-58-27.png │ ├── index.md │ ├── language.md │ ├── sdk.md │ └── service.md └── toc.yml ├── LICENSE ├── LICENSE-CODE ├── README.md ├── SECURITY.md └── ThirdPartyNotices /.gitattributes: -------------------------------------------------------------------------------- 1 | # Set the default behavior, in case people don't have core.autocrlf set. 2 | * text=auto 3 | 4 | # Explicitly declare text files you want to always be normalized and converted 5 | # to native line endings on checkout. 6 | *.c text 7 | *.h text 8 | 9 | # Declare files that will always have CRLF line endings on checkout. 10 | *.sln text eol=crlf 11 | 12 | # Denote all files that are truly binary and should not be modified. 13 | *.png binary 14 | *.jpg binary -------------------------------------------------------------------------------- /.github/policies/resourceManagement.yml: -------------------------------------------------------------------------------- 1 | id: 2 | name: GitOps.PullRequestIssueManagement 3 | description: GitOps.PullRequestIssueManagement primitive 4 | owner: 5 | resource: repository 6 | disabled: false 7 | where: 8 | configuration: 9 | resourceManagementConfiguration: 10 | scheduledSearches: [] 11 | eventResponderTasks: 12 | - if: 13 | - payloadType: Pull_Request 14 | - isAction: 15 | action: Opened 16 | then: 17 | - addCodeFlowLink 18 | description: 19 | onFailure: 20 | onSuccess: 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | log/ 2 | obj/ 3 | _site/ 4 | .optemp/ 5 | _themes*/ 6 | .vs 7 | .openpublishing.buildcore.ps1 -------------------------------------------------------------------------------- /.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": false, 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 | } -------------------------------------------------------------------------------- /.openpublishing.redirection.json: -------------------------------------------------------------------------------- 1 | { 2 | "redirections": [ 3 | { 4 | "source_path": "AdaptiveCards/create/CardSchema.md", 5 | "redirect_url": "/adaptive-cards/authoring-cards/card-schema", 6 | "redirect_document_id": true 7 | }, 8 | { 9 | "source_path": "AdaptiveCards/create/GettingStarted.md", 10 | "redirect_url": "/adaptive-cards/authoring-cards/getting-started", 11 | "redirect_document_id": true 12 | }, 13 | { 14 | "source_path": "AdaptiveCards/create/Speech.md", 15 | "redirect_url": "/adaptive-cards/authoring-cards/speech", 16 | "redirect_document_id": true 17 | }, 18 | { 19 | "source_path": "AdaptiveCards/create/TextFeatures.md", 20 | "redirect_url": "/adaptive-cards/authoring-cards/text-features", 21 | "redirect_document_id": true 22 | }, 23 | { 24 | "source_path": "AdaptiveCards/create/libraries/Javascript.md", 25 | "redirect_url": "/adaptive-cards/sdk/authoring-cards/javascript", 26 | "redirect_document_id": true 27 | }, 28 | { 29 | "source_path": "AdaptiveCards/create/libraries/NET.md", 30 | "redirect_url": "/adaptive-cards/sdk/authoring-cards/net", 31 | "redirect_document_id": true 32 | }, 33 | { 34 | "source_path": "AdaptiveCards/display/GettingStarted.md", 35 | "redirect_url": "/adaptive-cards/rendering-cards/getting-started", 36 | "redirect_document_id": true 37 | }, 38 | { 39 | "source_path": "AdaptiveCards/display/HostConfig.md", 40 | "redirect_url": "/adaptive-cards/rendering-cards/host-config", 41 | "redirect_document_id": true 42 | }, 43 | { 44 | "source_path": "AdaptiveCards/display/ImplementingRenderer.md", 45 | "redirect_url": "/adaptive-cards/rendering-cards/implement-a-renderer", 46 | "redirect_document_id": true 47 | }, 48 | { 49 | "source_path": "AdaptiveCards/display/RendererStatus.md", 50 | "redirect_url": "/adaptive-cards/rendering-cards/renderer-status", 51 | "redirect_document_id": true 52 | }, 53 | { 54 | "source_path": "AdaptiveCards/display/Speech.md", 55 | "redirect_url": "/adaptive-cards/rendering-cards/speech", 56 | "redirect_document_id": true 57 | }, 58 | { 59 | "source_path": "AdaptiveCards/display/libraries/Android.md", 60 | "redirect_url": "/adaptive-cards/sdk/rendering-cards/android/getting-started", 61 | "redirect_document_id": true 62 | }, 63 | { 64 | "source_path": "AdaptiveCards/display/libraries/HTMLClient.md", 65 | "redirect_url": "/adaptive-cards/sdk/rendering-cards/javascript/getting-started", 66 | "redirect_document_id": true 67 | }, 68 | { 69 | "source_path": "AdaptiveCards/display/libraries/NET-HTML.md", 70 | "redirect_url": "/adaptive-cards/sdk/rendering-cards/net-html/getting-started", 71 | "redirect_document_id": true 72 | }, 73 | { 74 | "source_path": "AdaptiveCards/display/libraries/NET-Image.md", 75 | "redirect_url": "/adaptive-cards/sdk/rendering-cards/net-image/getting-started", 76 | "redirect_document_id": true 77 | }, 78 | { 79 | "source_path": "AdaptiveCards/display/libraries/NET-WPF.md", 80 | "redirect_url": "/adaptive-cards/sdk/rendering-cards/net-wpf/getting-started", 81 | "redirect_document_id": true 82 | }, 83 | { 84 | "source_path": "AdaptiveCards/display/libraries/UWP.md", 85 | "redirect_url": "/adaptive-cards/sdk/rendering-cards/uwp/getting-started", 86 | "redirect_document_id": true 87 | }, 88 | { 89 | "source_path": "AdaptiveCards/display/libraries/iOS.md", 90 | "redirect_url": "/adaptive-cards/sdk/rendering-cards/ios/getting-started", 91 | "redirect_document_id": true 92 | }, 93 | { 94 | "source_path": "AdaptiveCards/get-started/Bots.md", 95 | "redirect_url": "/adaptive-cards/getting-started/bots", 96 | "redirect_document_id": true 97 | }, 98 | { 99 | "source_path": "AdaptiveCards/get-started/Outlook.md", 100 | "redirect_url": "/adaptive-cards/getting-started/outlook", 101 | "redirect_document_id": true 102 | }, 103 | { 104 | "source_path": "AdaptiveCards/get-started/Windows.md", 105 | "redirect_url": "/adaptive-cards/getting-started/windows", 106 | "redirect_document_id": true 107 | } 108 | ] 109 | } -------------------------------------------------------------------------------- /AdaptiveCards/authoring-cards/card-schema.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Card Schema 3 | author: paulcam206 4 | ms.author: paulcam 5 | ms.date: 09/18/2018 6 | ms.topic: reference 7 | --- 8 | 9 | # Card Schema 10 | 11 | Please see the [Schema Explorer on adaptivecards.io](https://adaptivecards.io/explorer/) to learn about the card schema! -------------------------------------------------------------------------------- /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: article 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 | -------------------------------------------------------------------------------- /AdaptiveCards/authoring-cards/input-validation.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Input Validation 3 | author: rebeccaanne 4 | ms.author: rebecch 5 | ms.date: 07/24/2020 6 | ms.topic: article 7 | --- 8 | 9 | # Input Validation 10 | 11 | In versions 1.3 and later of the schema, AdaptiveCards supports client side input validation of Input types. 12 | 13 | ### Validation Properties 14 | 15 | The following properties are supported for validation in AdaptiveCards: 16 | 17 | | Input | Properties | 18 | | --- | --- | 19 | | `Input.ChoiceSet` | `isRequired` | 20 | | `Input.Date` | `isRequired`
`min`
`max` | 21 | | `Input.Number` | `isRequired`
`min`
`max` | 22 | | `Input.Text` | `isRequired`
`regex`
`maxLength` | 23 | | `Input.Time` | `isRequired`
`min`
`max` | 24 | | `Input.Toggle` | `isRequired` | 25 | 26 | An `errorMessage` property is available on all input types to specify what error a user should be shown if they enter an invalid value. 27 | 28 | > [!NOTE] 29 | > 30 | > Min and max properties (including maxLength) on some platforms may be enforced directly by the control. For example, a min property on Input.Date may be enforced by not allowing users to select a date before the minimum in a date picker. In that case, the error message may not be shown. 31 | 32 | ## Labels 33 | 34 | Another property added in schema version 1.3 for all input elements is the `label` string property. Using the `label` property is the recommended way of tagging inputs in an Adaptive Card, vis-a-vis the `placeholder` property. It is a simple and concise way of labelling inputs for card authors and has the following benefits: 35 | 36 | * Validation indicators: as mentioned above inputs can be now marked as required, labels for required inputs will have a visual indicator next to them. This visual indicator is defined in the `HostConfig` and by default is rendered as an asterisk `*`. 37 | * Accessibility: by having a connection between labels and inputs, renderer libraries can set the necessary properties to allow users using assistive technologies (screen readers) to be able to interact correctly with inputs inside adaptive cards. 38 | * Labels vs Placeholders: as Katie Sherwin explains in the article [Placeholders in form fields are harmful](https://www.nngroup.com/articles/form-design-placeholders/) using placeholders has many negative consequences such as straining users' short term memory, making it harder for users to verify their inputs before submitting, providing difficulties for users to read them as, usually, placeholder text has poor color contrast against it's background or screen readers not reading the placeholder text at all, just to name a few. 39 | * TextBlock and RichTextBlock: while using other card elements as labels may seem as a good solution it presents the issue of not being able to enforce proximity between inputs and labels, on the other hand by using the `label` property, we can ensure that both visual elements are rendered next to each other which helps users who need screen magnifiers. 40 | 41 | ## Fields to be validated and submitted 42 | 43 | Inputs will be validated when the user clicks on an Action.Submit action in the card. Those inputs which will be validated and submitted for a given Action.Submit action are: 44 | 45 | - Inputs on the same card as the Action.Submit 46 | - Inputs on any parent cards of the card containing the Action.Submit in the case of a card under an Action.ShowCard 47 | 48 | If those inputs pass validation, the values in their fields will be passed back to the client. If they do not pass validation, the error messages for the invalid inputs will be shown, and the submit will not be sent. 49 | 50 | > [!NOTE] 51 | > 52 | > Inputs will **not** be validated or submitted if they are on a card that is a child or sibling card of the card containing the Action.Submit. This includes cards from Action.ShowCards in ActionSets in the body of that card. This is a change in behavior from renderer versions prior to 2.0, and applies to cards of all schema versions, regardless of whether input validation properties are used. 53 | 54 | ## Other Considerations and Known Issues 55 | 56 | - It is not recommended to create inputs with validation properties that may not always be visible due to interaction with Action.ToggleVisibility. Error messages and visual indications that the input is invalid will not be shown if the input is not currently visible, which may cause confusion for users as to why their submit is blocked. 57 | 58 | - Behavior of input validation for hosts using popup show cards using the `"actions":"showCard":"actionMode":"popup"` value in their host config is not well defined. Popup show cards may be deprecated in a future release. -------------------------------------------------------------------------------- /AdaptiveCards/authoring-cards/media/text-features/markdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/authoring-cards/media/text-features/markdown.png -------------------------------------------------------------------------------- /AdaptiveCards/authoring-cards/media/universal-action-model/inconsistent-action-model-lifecycle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/authoring-cards/media/universal-action-model/inconsistent-action-model-lifecycle.png -------------------------------------------------------------------------------- /AdaptiveCards/authoring-cards/media/universal-action-model/inconsistent-action-model.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/authoring-cards/media/universal-action-model/inconsistent-action-model.png -------------------------------------------------------------------------------- /AdaptiveCards/authoring-cards/media/universal-action-model/new-universal-action-model.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/authoring-cards/media/universal-action-model/new-universal-action-model.jpg -------------------------------------------------------------------------------- /AdaptiveCards/authoring-cards/media/universal-action-model/universal-action-model-lifecycle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/authoring-cards/media/universal-action-model/universal-action-model-lifecycle.jpg -------------------------------------------------------------------------------- /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":"" 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/authoring-cards/text-features.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Text Features 3 | author: matthidinger 4 | ms.author: mahiding 5 | ms.date: 06/18/2020 6 | ms.topic: article 7 | --- 8 | 9 | # Text features 10 | 11 | [TextBlock](https://adaptivecards.io/explorer/TextBlock.html) offers advanced features for formatting and localizing the text. 12 | 13 | ## Markdown (Commonmark subset) 14 | 15 | To support inline markup, Adaptive Cards support a **subset** of the [Commonmark](https://commonmark.org/help/) Markdown syntax. 16 | 17 | > [!NOTE] 18 | > 19 | > [RichTextBlock](https://adaptivecards.io/explorer/RichTextBlock.html) does not support markdown, but offers a wide array of text configuration options directly within the the [TextRun](https://adaptivecards.io/explorer/TextRun.html) 20 | 21 | _Supported_ 22 | 23 | | Text Style | Markdown | 24 | |-----------------|-----| 25 | | **Bold** | ```**Bold**``` | 26 | | _Italic_ | ```_Italic_``` | 27 | | Bullet list | ```- Item 1\r- Item 2\r- Item 3``` | 28 | | Numbered list | ```1. Green\r2. Orange\r3. Blue``` | 29 | | Hyperlinks | ```[Title](url)``` | 30 | 31 | _Not supported_ 32 | 33 | * Headers 34 | * Tables 35 | * Images 36 | * Anything not in the table above 37 | 38 | ### Markdown Example 39 | 40 | The below payload would render something like this: 41 | 42 | ![markdown screenshot](media/text-features/markdown.png) 43 | 44 | ```json 45 | { 46 | "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", 47 | "type": "AdaptiveCard", 48 | "version": "1.0", 49 | "body": [ 50 | { 51 | "type": "TextBlock", 52 | "text": "This is some **bold** text" 53 | }, 54 | { 55 | "type": "TextBlock", 56 | "text": "This is some _italic_ text" 57 | }, 58 | { 59 | "type": "TextBlock", 60 | "text": "- Bullet \r- List \r", 61 | "wrap": true 62 | }, 63 | { 64 | "type": "TextBlock", 65 | "text": "1. Numbered\r2. List\r", 66 | "wrap": true 67 | }, 68 | { 69 | "type": "TextBlock", 70 | "text": "Check out [Adaptive Cards](https://adaptivecards.io)" 71 | } 72 | ] 73 | } 74 | ``` 75 | 76 | ## Date/Time formatting and localization 77 | 78 | Sometimes you won't know the timezone of the user receiving the card, so Adaptive Cards offers `DATE()` and `TIME()` formatting functions to automatically localize the time on the target device. 79 | 80 | ### Date/Time Example 81 | 82 | ```json 83 | { 84 | "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", 85 | "type": "AdaptiveCard", 86 | "version": "1.0", 87 | "body": [ 88 | { 89 | "type": "TextBlock", 90 | "text": "Your package will arrive on {{DATE(2017-02-14T06:00:00Z, SHORT)}} at {{TIME(2017-02-14T06:00:00Z)}}", 91 | "wrap": true 92 | } 93 | ] 94 | } 95 | ``` 96 | 97 | The above card will display: 98 | 99 | > **Your package will arrive on Tue, Feb 14th, 2017 at 6:00 AM** 100 | 101 | ### Date/Time function rules 102 | 103 | There are some rules to properly interpret the the date/time functions on every platform. If the rules aren't met then the raw string will be displayed to the user, and no one wants that. 104 | 105 | 1. **CASE SENSITIVE** (must be all caps) 106 | 1. **NO SPACES** between the `{{`, `}}`, or parentheses 107 | 1. **STRICT [RFC 3389](https://tools.ietf.org/html/rfc3339) FORMATTING** (See examples below) 108 | 1. **MUST BE** a valid date and time 109 | 110 | ### Valid formats 111 | 112 | * `2017-02-14T06:08:00Z` 113 | * `2017-02-14T06:08:00-07:00` 114 | * `2017-02-14T06:08:00+07:00` 115 | 116 | ### Date formatting param 117 | 118 | For dates, an optional param may be specified to format the output. 119 | 120 | 121 | | Format | Example | 122 | |---------------------|-------------------------------| 123 | | `COMPACT` (Default) | "2/13/2017" | 124 | | `SHORT` | "Mon, Feb 13th, 2017" | 125 | | `LONG` | "Monday, February 13th, 2017" | 126 | 127 | -------------------------------------------------------------------------------- /AdaptiveCards/breadcrumb/toc.yml: -------------------------------------------------------------------------------- 1 | - name: Docs 2 | tocHref: / 3 | topicHref: / 4 | items: 5 | - name: Adaptive Cards 6 | tocHref: /adaptive-cards/ 7 | topicHref: /adaptive-cards/index 8 | -------------------------------------------------------------------------------- /AdaptiveCards/content/AdventureWorksLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/AdventureWorksLogo.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Airplane in circle blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Airplane in circle blue.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Airplane in circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Airplane in circle.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Airplane.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Airplane.png -------------------------------------------------------------------------------- /AdaptiveCards/content/AlkiBeach.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/AlkiBeach.jpg -------------------------------------------------------------------------------- /AdaptiveCards/content/BainbridgeIsland.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/BainbridgeIsland.jpg -------------------------------------------------------------------------------- /AdaptiveCards/content/CalendarIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/CalendarIcon.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Closed bug 92x92.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Closed bug 92x92.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Cloudy-Square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Cloudy-Square.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Cloudy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Cloudy.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Decrease.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Decrease.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Drizzle-Square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Drizzle-Square.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Drizzle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Drizzle.png -------------------------------------------------------------------------------- /AdaptiveCards/content/FabrikamLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/FabrikamLogo.png -------------------------------------------------------------------------------- /AdaptiveCards/content/GoldenGardensPark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/GoldenGardensPark.jpg -------------------------------------------------------------------------------- /AdaptiveCards/content/Haze-Square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Haze-Square.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Haze.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Haze.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Increase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Increase.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Limeade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Limeade.png -------------------------------------------------------------------------------- /AdaptiveCards/content/MargiesTravel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/MargiesTravel.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Mostly Cloudy-Background-Dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Mostly Cloudy-Background-Dark.jpg -------------------------------------------------------------------------------- /AdaptiveCards/content/Mostly Cloudy-Background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Mostly Cloudy-Background.jpg -------------------------------------------------------------------------------- /AdaptiveCards/content/Mostly Cloudy-Square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Mostly Cloudy-Square.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Mostly Cloudy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Mostly Cloudy.png -------------------------------------------------------------------------------- /AdaptiveCards/content/PieChart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/PieChart.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Relecloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Relecloud.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Slight Drizzle-Square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Slight Drizzle-Square.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Slight Drizzle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Slight Drizzle.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Snow-Square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Snow-Square.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Snow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Snow.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Sunny-Square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Sunny-Square.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Sunny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Sunny.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Thunderstorms-Square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Thunderstorms-Square.png -------------------------------------------------------------------------------- /AdaptiveCards/content/Thunderstorms.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/Thunderstorms.png -------------------------------------------------------------------------------- /AdaptiveCards/content/action_submit_behavior.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/action_submit_behavior.png -------------------------------------------------------------------------------- /AdaptiveCards/content/action_submit_behaviour.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/action_submit_behaviour.png -------------------------------------------------------------------------------- /AdaptiveCards/content/adaptive-card-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/adaptive-card-200.png -------------------------------------------------------------------------------- /AdaptiveCards/content/adaptive-card-50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/adaptive-card-50.png -------------------------------------------------------------------------------- /AdaptiveCards/content/adaptive-card.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | adaptive_cards 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /AdaptiveCards/content/adaptive-cards-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/adaptive-cards-100.png -------------------------------------------------------------------------------- /AdaptiveCards/content/bot-framework.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/bot-framework.png -------------------------------------------------------------------------------- /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/content/cards/AdaptiveCardsDiagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/cards/AdaptiveCardsDiagram.png -------------------------------------------------------------------------------- /AdaptiveCards/content/cards/card1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/cards/card1.png -------------------------------------------------------------------------------- /AdaptiveCards/content/cards/fb-airline-checkin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/cards/fb-airline-checkin.png -------------------------------------------------------------------------------- /AdaptiveCards/content/cards/flightupdate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/cards/flightupdate.png -------------------------------------------------------------------------------- /AdaptiveCards/content/cards/outlook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/cards/outlook.png -------------------------------------------------------------------------------- /AdaptiveCards/content/cards/skype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/cards/skype.png -------------------------------------------------------------------------------- /AdaptiveCards/content/cards/speech.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/cards/speech.png -------------------------------------------------------------------------------- /AdaptiveCards/content/cards/visualizer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/cards/visualizer.png -------------------------------------------------------------------------------- /AdaptiveCards/content/cards/weather.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/cards/weather.png -------------------------------------------------------------------------------- /AdaptiveCards/content/cards/windows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/cards/windows.png -------------------------------------------------------------------------------- /AdaptiveCards/content/cats/Cat_Sat_1_400x406.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/cats/Cat_Sat_1_400x406.png -------------------------------------------------------------------------------- /AdaptiveCards/content/cats/Cat_Sat_2-Glasses_400x297.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/cats/Cat_Sat_2-Glasses_400x297.png -------------------------------------------------------------------------------- /AdaptiveCards/content/cats/Cat_Sat_2_400x297.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/cats/Cat_Sat_2_400x297.png -------------------------------------------------------------------------------- /AdaptiveCards/content/column_width_image_width_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/column_width_image_width_2.png -------------------------------------------------------------------------------- /AdaptiveCards/content/connect/blog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/connect/blog.png -------------------------------------------------------------------------------- /AdaptiveCards/content/connect/friends.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/connect/friends.png -------------------------------------------------------------------------------- /AdaptiveCards/content/connect/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/connect/github.png -------------------------------------------------------------------------------- /AdaptiveCards/content/connect/stackoverflow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/connect/stackoverflow.png -------------------------------------------------------------------------------- /AdaptiveCards/content/connect/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/connect/twitter.png -------------------------------------------------------------------------------- /AdaptiveCards/content/cortana-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/cortana-logo.png -------------------------------------------------------------------------------- /AdaptiveCards/content/designer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/designer.png -------------------------------------------------------------------------------- /AdaptiveCards/content/downarrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/downarrow.png -------------------------------------------------------------------------------- /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/content/fonts/Glyphs/SegMDL2.1.56.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/Glyphs/SegMDL2.1.56.woff -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/Glyphs/WinJSSymMDL2.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/Glyphs/WinJSSymMDL2.eot -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/Glyphs/WinJSSymMDL2.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/Glyphs/WinJSSymMDL2.ttf -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/Glyphs/WinJSSymMDL2.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/Glyphs/WinJSSymMDL2.woff -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/Glyphs/WinJSSymMDL2.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/Glyphs/WinJSSymMDL2.woff2 -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/Glyphs/winjs-symbols.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/Glyphs/winjs-symbols.eot -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/Glyphs/winjs-symbols.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/Glyphs/winjs-symbols.ttf -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/Glyphs/winjs-symbols.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/Glyphs/winjs-symbols.woff -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/SegoeUI-Bold/latest.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/SegoeUI-Bold/latest.eot -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/SegoeUI-Bold/latest.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/SegoeUI-Bold/latest.ttf -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/SegoeUI-Bold/latest.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/SegoeUI-Bold/latest.woff -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/SegoeUI-Bold/latest.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/SegoeUI-Bold/latest.woff2 -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/SegoeUI-Normal/latest.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/SegoeUI-Normal/latest.eot -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/SegoeUI-Normal/latest.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/SegoeUI-Normal/latest.ttf -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/SegoeUI-Normal/latest.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/SegoeUI-Normal/latest.woff -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/SegoeUI-Normal/latest.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/SegoeUI-Normal/latest.woff2 -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/SegoeUI-Semibold/latest.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/SegoeUI-Semibold/latest.eot -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/SegoeUI-Semibold/latest.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/SegoeUI-Semibold/latest.ttf -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/SegoeUI-Semibold/latest.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/SegoeUI-Semibold/latest.woff -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/SegoeUI-Semibold/latest.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/SegoeUI-Semibold/latest.woff2 -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/SegoeUI-Semilight/latest.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/SegoeUI-Semilight/latest.eot -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/SegoeUI-Semilight/latest.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/SegoeUI-Semilight/latest.ttf -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/SegoeUI-Semilight/latest.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/SegoeUI-Semilight/latest.woff -------------------------------------------------------------------------------- /AdaptiveCards/content/fonts/SegoeUI-Semilight/latest.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/fonts/SegoeUI-Semilight/latest.woff2 -------------------------------------------------------------------------------- /AdaptiveCards/content/height1_text_wrap_off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/height1_text_wrap_off.png -------------------------------------------------------------------------------- /AdaptiveCards/content/height2_text_wrap_on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/height2_text_wrap_on.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /AdaptiveCards/content/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons/favicon-16x16.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons/favicon-32x32.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "icons": [ 4 | { 5 | "src": "/android-chrome-192x192.png", 6 | "sizes": "192x192", 7 | "type": "image/png" 8 | }, 9 | { 10 | "src": "/android-chrome-512x512.png", 11 | "sizes": "512x512", 12 | "type": "image/png" 13 | } 14 | ], 15 | "theme_color": "#ffffff", 16 | "background_color": "#ffffff", 17 | "display": "standalone" 18 | } -------------------------------------------------------------------------------- /AdaptiveCards/content/icons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons/mstile-150x150.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /AdaptiveCards/content/icons_blue/blue-144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons_blue/blue-144.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons_blue/blue-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons_blue/blue-192.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons_blue/blue-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons_blue/blue-48.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons_blue/blue-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons_blue/blue-512.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons_blue/blue-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons_blue/blue-72.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons_blue/blue-96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons_blue/blue-96.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons_transparent/white-144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons_transparent/white-144.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons_transparent/white-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons_transparent/white-192.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons_transparent/white-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons_transparent/white-48.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons_transparent/white-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons_transparent/white-512.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons_transparent/white-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons_transparent/white-72.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons_transparent/white-96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons_transparent/white-96.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons_white/white-144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons_white/white-144.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons_white/white-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons_white/white-192.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons_white/white-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons_white/white-48.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons_white/white-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons_white/white-512.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons_white/white-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons_white/white-72.png -------------------------------------------------------------------------------- /AdaptiveCards/content/icons_white/white-96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/icons_white/white-96.png -------------------------------------------------------------------------------- /AdaptiveCards/content/image_size_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/image_size_3.png -------------------------------------------------------------------------------- /AdaptiveCards/content/image_size_auto_stretch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/image_size_auto_stretch.png -------------------------------------------------------------------------------- /AdaptiveCards/content/imagesize2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/imagesize2.png -------------------------------------------------------------------------------- /AdaptiveCards/content/overview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/overview.jpg -------------------------------------------------------------------------------- /AdaptiveCards/content/shared.css: -------------------------------------------------------------------------------- 1 | /*body { 2 | font-family: 'Segoe UI', sans-serif; 3 | }*/ 4 | 5 | /*h1 { 6 | font-size: xx-large; 7 | cursor: pointer; 8 | } 9 | 10 | h2 { 11 | font-size: x-large; 12 | cursor: pointer; 13 | } 14 | 15 | h3 { 16 | font-size: medium; 17 | cursor: pointer; 18 | }*/ 19 | 20 | .content { 21 | margin-top: 40px; 22 | } 23 | 24 | .content-sidebar { 25 | margin-top: 40px; 26 | margin-left: 256px; 27 | } 28 | 29 | .w3-sidebar { 30 | width: 256px; 31 | font-family: "Segoe UI Semibold", sans-serif; 32 | font-size: 15px; 33 | } 34 | 35 | .logo { 36 | float:left; 37 | margin-top:-4px; 38 | margin-bottom:-4px; 39 | } 40 | 41 | img { 42 | margin-bottom: 0px; 43 | border-style: none; 44 | } 45 | h1, h2, h3, h4 { 46 | font-family: "Segoe UI Semibold", sans-serif; 47 | } 48 | 49 | body, p, th, div, span, input, button, select { 50 | font-family: "Segoe UI Semilight", sans-serif; 51 | } -------------------------------------------------------------------------------- /AdaptiveCards/content/spacing1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/spacing1.png -------------------------------------------------------------------------------- /AdaptiveCards/content/spacing2_not_affected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/spacing2_not_affected.png -------------------------------------------------------------------------------- /AdaptiveCards/content/spacing3_seperator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/spacing3_seperator.png -------------------------------------------------------------------------------- /AdaptiveCards/content/spacing4_with_seperator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/spacing4_with_seperator.png -------------------------------------------------------------------------------- /AdaptiveCards/content/spacing5_no_effect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/spacing5_no_effect.png -------------------------------------------------------------------------------- /AdaptiveCards/content/spacing_no_effect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/spacing_no_effect.png -------------------------------------------------------------------------------- /AdaptiveCards/content/style1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/style1.png -------------------------------------------------------------------------------- /AdaptiveCards/content/style2_withBleed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/style2_withBleed.png -------------------------------------------------------------------------------- /AdaptiveCards/content/uparrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/uparrow.png -------------------------------------------------------------------------------- /AdaptiveCards/content/videoposter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/videoposter.jpg -------------------------------------------------------------------------------- /AdaptiveCards/content/videoposter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/videoposter.png -------------------------------------------------------------------------------- /AdaptiveCards/content/width3_auto_stretch_auto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/width3_auto_stretch_auto.png -------------------------------------------------------------------------------- /AdaptiveCards/content/width5_w50_p100_w50_auto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/width5_w50_p100_w50_auto.png -------------------------------------------------------------------------------- /AdaptiveCards/content/width6_all_auto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/width6_all_auto.png -------------------------------------------------------------------------------- /AdaptiveCards/content/width_1_auto_stretch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/width_1_auto_stretch.png -------------------------------------------------------------------------------- /AdaptiveCards/content/width_2_stretch_stretch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/width_2_stretch_stretch.png -------------------------------------------------------------------------------- /AdaptiveCards/content/width_4_w50_p100_w50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/content/width_4_w50_p100_w50.png -------------------------------------------------------------------------------- /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/getting-started/bots.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Adaptive Cards for Bot Developers 3 | author: matthidinger 4 | ms.author: mahiding 5 | ms.date: 05/30/2018 6 | ms.topic: article 7 | --- 8 | 9 | # Adaptive Cards for Bot Developers 10 | 11 | Adaptive Cards are a great fit for Bots. They let you author a card once and have it render beautifully inside multiple apps, like Microsoft Teams, your own website, and more. 12 | 13 | > [!NOTE] 14 | > Skype is not supported in the current preview. See the [Partner Status](../resources/partners.md) page for the latest. 15 | 16 | ## Try it out 17 | 18 | Click the following link and [talk to our Scuba Bot](http://contososcubademo.azurewebsites.net/). Say `I'm looking for scuba` and it'll help you book the scuba trip of your dreams. 19 | 20 | All of the bot's responses are created with Adaptive Cards. 21 | 22 | [![Scuba chat screenshot](media/bots/scuba-chat.png)](http://contososcubademo.azurewebsites.net/) 23 | 24 | **Get the code**: the full [Contoso Scuba Bot source code](https://github.com/matthidinger/ContosoScubaBot 25 | ) can be found on GitHub. 26 | 27 | 28 | ## Bot Framework Integration 29 | 30 | With the [Bot Framework](https://dev.botframework.com/) you can write a single bot that is able to chat with users across multiple "channels", like Skype, Microsoft Teams, Facebook Messenger, etc. 31 | 32 | ## Walkthrough 33 | 34 | It's pretty straight forward to add an Adaptive Card to your bot. 35 | 36 | ### Step 0: Start with a basic message 37 | 38 | Here's a standard Bot Framework `message` payload that can be delivered to any channel and display text to the user. 39 | 40 | ```json 41 | { 42 | "type": "message", 43 | "text": "Plain text is ok, but sometimes I long for more..." 44 | } 45 | ``` 46 | 47 | ### Step 1: Add an Adaptive Card `attachment` 48 | 49 | To add some richness beyond just text, the Bot Framework has a concept of `attachments`. 50 | 51 | Let's attach an Adaptive Card that displays custom text. 52 | 53 | ![Basic adaptive card](media/bots/hello-adaptivecards.png) 54 | 55 | ```json 56 | { 57 | "type": "message", 58 | "text": "Plain text is ok, but sometimes I long for more...", 59 | "attachments": [ 60 | { 61 | "contentType": "application/vnd.microsoft.card.adaptive", 62 | "content": { 63 | "type": "AdaptiveCard", 64 | "version": "1.0", 65 | "body": [ 66 | { 67 | "type": "TextBlock", 68 | "text": "Hello World!", 69 | "size": "large" 70 | }, 71 | { 72 | "type": "TextBlock", 73 | "text": "*Sincerely yours,*" 74 | }, 75 | { 76 | "type": "TextBlock", 77 | "text": "Adaptive Cards", 78 | "separation": "none" 79 | } 80 | ], 81 | "actions": [ 82 | { 83 | "type": "Action.OpenUrl", 84 | "url": "http://adaptivecards.io", 85 | "title": "Learn More" 86 | } 87 | ] 88 | } 89 | } 90 | ] 91 | } 92 | ``` 93 | 94 | ### Step 2: Build even richer cards 95 | 96 | Adaptive Cards offer much more than just customizable text. 97 | 98 | You can: 99 | 100 | * Add `Images` to your card 101 | * Organize your content with `Containers` and `Columns` 102 | * Add multiple types of `Actions` 103 | * Collect `Input` from your users 104 | * Have one card `show another card` 105 | * [Check out the full schema explorer](https://adaptivecards.io/explorer/)! 106 | 107 | ## Platform SDKs 108 | 109 | If your bot is developed using .NET or NodeJS we have libraries to make building Adaptive Cards even easier. 110 | 111 | Platform|Install|Learn more 112 | --------|-------|---------- 113 | .NET | `Install-Package AdaptiveCards -IncludePrerelease` | [Bot Framework .NET Docs](/bot-framework/dotnet/bot-builder-dotnet-add-rich-card-attachments) 114 | NodeJS | `npm install adaptivecards` | [Bot Framework NodeJS Docs](/bot-framework/nodejs/bot-builder-nodejs-send-rich-cards) 115 | 116 | 117 | ## Channel status 118 | 119 | The Bot Framework lets you publish your bot to multiple channels. We're working with various channels to provide full support for Adaptive Cards. See the [Partner Status](../resources/partners.md) page for the latest. 120 | 121 | 122 | ## Dive in! 123 | 124 | We've just scratched the surface in this tutorial, so please take a look at the links below to explore more ways that Adaptive Cards can enhance your bot. 125 | 126 | * [Browse Sample cards](https://adaptivecards.io/samples/) for inspiration 127 | * Use the [Schema Explorer](https://adaptivecards.io/explorer) to learn the available elements 128 | * Build a card using the [Interactive Visualizer](https://vnext.adaptivecards.io/visualizer/) 129 | * [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 130 | -------------------------------------------------------------------------------- /AdaptiveCards/getting-started/flow.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Adaptive Cards in Flow 3 | author: matthidinger 4 | ms.author: mahiding 5 | ms.date: 8/15/2019 6 | ms.topic: article 7 | --- 8 | 9 | # Adaptive Cards for Microsoft Flow 10 | 11 | Coming soon! 12 | -------------------------------------------------------------------------------- /AdaptiveCards/getting-started/media/bots/hello-adaptivecards.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/getting-started/media/bots/hello-adaptivecards.png -------------------------------------------------------------------------------- /AdaptiveCards/getting-started/media/bots/scuba-chat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/getting-started/media/bots/scuba-chat.png -------------------------------------------------------------------------------- /AdaptiveCards/getting-started/media/outlook/GitHub.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/getting-started/media/outlook/GitHub.png -------------------------------------------------------------------------------- /AdaptiveCards/getting-started/media/outlook/Limeade.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/getting-started/media/outlook/Limeade.jpg -------------------------------------------------------------------------------- /AdaptiveCards/getting-started/media/windows/timeline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/getting-started/media/windows/timeline.png -------------------------------------------------------------------------------- /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 | ![GitHub Actionable Message](media/outlook/GitHub.png) 17 | 18 | ## Limeade 19 | ![GitHub Actionable Message](media/outlook/Limeade.jpg) 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.io/designer/) lets you create Adaptive Cards without writing a single line of JSON! 26 | -------------------------------------------------------------------------------- /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 | ![Timeline](media/windows/timeline.png) 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](https://adaptivecards.io/samples/) for inspiration 49 | * Use the [Schema Explorer](https://adaptivecards.io/explorer) to learn the available elements 50 | * Build a card using the [Interactive Visualizer](https://vnext.adaptivecards.io/visualizer/) 51 | * [Get in touch](https://github.com/Microsoft/AdaptiveCards/issues/new) with any feedback you have 52 | -------------------------------------------------------------------------------- /AdaptiveCards/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Adaptive Cards Overview 3 | author: matthidinger 4 | description: Provides an overview of the Adaptive Cards rendering platform 5 | ms.author: mahiding 6 | ms.date: 06/26/2017 7 | ms.topic: article 8 | --- 9 | 10 | # Adaptive Cards Overview 11 | 12 | Adaptive Cards are an open card exchange format enabling developers to exchange UI content in a common and consistent way. 13 | 14 | > [!VIDEO https://cdn.adaptivecards.io/assets/AdaptiveCardsOverviewVideo.mp4] 15 | 16 | ## How they work 17 | 18 | [**Card Authors**](authoring-cards/getting-started.md) describe their content as a simple JSON object. That content can then be rendered natively inside a [**Host Application**](rendering-cards/getting-started.md), automatically adapting to the look and feel of the Host. 19 | 20 | For example, Contoso Bot can author an Adaptive Card through the Bot Framework, and when delivered to Skype, it will look and feel like a Skype card. When that same payload is sent to Microsoft Teams, it will look and feel like Microsoft Teams. As more host apps start to support Adaptive Cards, that same payload will automatically light up inside these applications, yet still feel entirely native to the app. 21 | 22 | Users win because everything feels familiar. Host apps win because they control the user experience. And Card Authors win because their content gets broader reach without any additional work. 23 | 24 | ## Goals 25 | 26 | The goals for Adaptive Cards are: 27 | 28 | * **Portable** - To any app, device, and UI framework 29 | * **Open** - Libraries and schema are open source and shared 30 | * **Low cost** - Easy to define, easy to consume 31 | * **Expressive** - Targeted at the long tail of content that developers want to produce 32 | * **Purely declarative** - No code is needed or allowed 33 | * **Automatically styled** - To the Host application UX and brand guidelines 34 | 35 | ## For Card Authors 36 | Adaptive Cards are great for card authors: 37 | 38 | * **One schema** - You get a single format, minimizing the cost of creating a card and maximizing the number of places it can be used. 39 | * **Richer expression** - Your content can more closely align with what you want to say because you have a richer palette to paint with. 40 | * **Broad reach** - Your content will work across a broader set of applications without you having to learn new schemas. 41 | * **Input controls** - Your card can include input controls for gathering information from the user that is viewing the card. 42 | * **Better tooling** - An open card ecosystem means better tooling that is shared by everyone. 43 | 44 | ## For Experience Owners 45 | If you are an app developer who wants to tap into an ecosystem of third-party content you will love Adaptive Cards because: 46 | 47 | * **Consistent user experience** - You guarantee a consistent experience for your users, because you own the style of the rendered card. 48 | * **Native performance** - You get native performance as it targets your UI framework directly. 49 | * **Safe** - Content is delivered in safe payloads so you don't have to open up your UI framework to raw markup and scripting. 50 | * **Easy to implement** - You get off the shelf libraries to easily integrate on any platform you support 51 | * **Free documentation** - You save time because you don't have to invent, implement, and document a proprietary schema. 52 | * **Shared tooling** - You save time because you don't have to create custom tooling. 53 | 54 | ## Core Design Principles 55 | 56 | Adaptive Cards are driven by a set of [guiding principles](resources/principles.md) that have been useful for keeping the design on track. 57 | 58 | ### Semantic instead of pixel-perfect 59 | We have striven as much as possible for semantic values and concepts as opposed to pure pixel-perfect layout. 60 | Examples of semantic expression show up in colors, sizes, and in elements like FactSet and ImageSet. These all allow the host application to make better decisions about the actual look and feel. 61 | 62 | ### Card Authors own the content, Host App owns the look and feel 63 | The card authors own what they want to say, but the application displaying it owns the look and feel of the card in the context of their application. 64 | 65 | ### Keep it simple, but expressive 66 | We want Adaptive Cards to be expressive and general purpose, but we don't want to build a UI framework. The goal is to create an intermediate layer which is "expressive enough" in the same way Markdown is expressive enough for documents. 67 | 68 | By focusing on keeping it simple and expressive, Markdown created an easy and consistent description of document content. In the 69 | same way, we believe that Adaptive Cards can create a simple, expressive means of describing card content. 70 | 71 | ### When in doubt, keep it out 72 | It is easier to add later than it is to live with a mistake. If we found ourselves debating whether we should add something or not, we opted to leave it out. It is always easier to add a property than to live with a legacy we wish we didn't have to support. 73 | 74 | 75 | ## Build 2019 Session 76 | 77 | The following session at the Microsoft Build conference showcases Adaptive Cards in a variety of use cases. 78 | 79 | > [!VIDEO [https://www.youtube.com/embed/wT1yFr_j6IM] 80 | -------------------------------------------------------------------------------- /AdaptiveCards/rendering-cards/actions.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Actions 3 | author: matthidinger 4 | ms.author: mahiding 5 | ms.date: 06/26/2017 6 | ms.topic: article 7 | --- 8 | 9 | # Actions 10 | 11 | By default, the actions will render as buttons on the card, but it's up to your app to make them behave as you expect. Each SDK has the equivalent of an `OnAction` event that you must handle. 12 | 13 | * **Action.OpenUrl** - open the specified `url`. 14 | * **Action.Submit** - take the result of the submit and send it to the source. How you send it to the source of the card is entirely up to you. 15 | * **Action.ShowCard** - invokes a dialog and renders the sub-card into that dialog. Note that you only need to handle this if `ShowCardActionMode` is set to `popup`. 16 | * **Action.ToggleVisibility** - shows or hides one or more elements in the card. 17 | * **Action.Execute** - gathers input fields, merges with optional data field, and sends an event to the client. Learn more about Action.Execute in our [Universal Action Model](../authoring-cards/universal-action-model.md) section. -------------------------------------------------------------------------------- /AdaptiveCards/rendering-cards/extensibility.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Extensibility 3 | author: matthidinger 4 | ms.author: mahiding 5 | ms.date: 06/26/2017 6 | ms.topic: article 7 | --- 8 | 9 | # Extensibility 10 | 11 | Each SDK allows you to override the rendering of any element, or even add support for entirely new elements that you define. For example, you can change the `Input.Date` renderer to emit your own custom control while still retaining the rest of the output of the renderer. Or you can add support for a custom `Rating` element to you define. 12 | 13 | For example code, please expand the **SDK** node on the left -> **Rendering Cards** -> **the SDK you'd like to use** -> **Extensibility** 14 | -------------------------------------------------------------------------------- /AdaptiveCards/rendering-cards/getting-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Rendering cards inside your application 3 | author: matthidinger 4 | ms.author: mahiding 5 | ms.date: 06/26/2017 6 | ms.topic: article 7 | --- 8 | 9 | # Rendering cards inside your application 10 | 11 | It's easy to render Adaptive Cards inside your application. We provide SDKs for the all common platforms, as well as provide a [detailed specification](implement-a-renderer.md) for creating your own Adaptive Card renderer. 12 | 13 | 1. **Install a renderer SDK** - for your target platform. 14 | 2. **Create a renderer instance** - configured with your app's style, rules, and action event handlers. 15 | 3. **Render a card to native UI** - automatically styled to your app. 16 | 17 | ## Adaptive Cards SDKs 18 | 19 | |Platform|Install|Build|Docs|Status| 20 | |---|---|---|---|---| 21 | | JavaScript | [![npm install](https://img.shields.io/npm/v/adaptivecards.svg)](https://www.npmjs.com/package/adaptivecards) | [Source](https://github.com/Microsoft/AdaptiveCards/tree/main/source/nodejs)| [Docs](../sdk/rendering-cards/javascript/getting-started.md) | ![Build Status](https://img.shields.io/vso/build/Microsoft/56cf629e-8f3a-4412-acbc-bf69366c552c/20564.svg) | 22 | | .NET WPF | [![Nuget install](https://img.shields.io/nuget/vpre/AdaptiveCards.Rendering.Wpf.svg)](https://www.nuget.org/packages/AdaptiveCards.Rendering.Wpf) | [Source](https://github.com/Microsoft/AdaptiveCards/tree/main/source/dotnet)| [Docs](../sdk/rendering-cards/net-wpf/getting-started.md) | ![Build status](https://img.shields.io/vso/build/Microsoft/56cf629e-8f3a-4412-acbc-bf69366c552c/20596.svg) | 23 | | .NET HTML | [![Nuget install](https://img.shields.io/nuget/vpre/AdaptiveCards.Rendering.Html.svg)](https://www.nuget.org/packages/AdaptiveCards.Rendering.Html) | [Source](https://github.com/Microsoft/AdaptiveCards/tree/main/source/dotnet) | [Docs](../sdk/rendering-cards/net-html/getting-started.md) | ![Build status](https://img.shields.io/vso/build/Microsoft/56cf629e-8f3a-4412-acbc-bf69366c552c/20596.svg) | 24 | | Windows UWP | [![Nuget install](https://img.shields.io/nuget/vpre/AdaptiveCards.Rendering.Uwp.svg)](https://www.nuget.org/packages/AdaptiveCards.Rendering.Uwp) | [Source](https://github.com/Microsoft/AdaptiveCards/tree/main/source/uwp) | [Docs](../sdk/rendering-cards/uwp/getting-started.md) | ![Build Status](https://img.shields.io/vso/build/Microsoft/56cf629e-8f3a-4412-acbc-bf69366c552c/20583.svg) | 25 | | WinUI 3 | [![Nuget install](https://img.shields.io/nuget/vpre/AdaptiveCards.Rendering.winui3.svg)](https://www.nuget.org/packages/AdaptiveCards.Rendering.Winui3) | [Source](https://github.com/microsoft/AdaptiveCards/tree/main/source/uwp/winui3) | [Docs](../sdk/rendering-cards/winui-3/getting-started.md) | ![Build Status](https://img.shields.io/vso/build/Microsoft/56cf629e-8f3a-4412-acbc-bf69366c552c/20583.svg) | 26 | | Android | [![Maven Central](https://img.shields.io/maven-central/v/io.adaptivecards/adaptivecards-android.svg)](https://search.maven.org/#search%7Cga%7C1%7Ca%3A%22adaptivecards-android%22) | [Source](https://github.com/Microsoft/AdaptiveCards/tree/main/source/android) | [Docs](../sdk/rendering-cards/android/getting-started.md) | ![Build status](https://img.shields.io/vso/build/Microsoft/8d47e068-03c8-4cdc-aa9b-fc6929290322/17651.svg) 27 | | iOS | [![CocoaPods](https://img.shields.io/cocoapods/v/AdaptiveCards.svg)](https://cocoapods.org/pods/AdaptiveCards) | [Source](https://github.com/Microsoft/AdaptiveCards/tree/main/source/ios) | [Docs](../sdk/rendering-cards/ios/getting-started.md) | ![Build status](https://img.shields.io/vso/build/Microsoft/8d47e068-03c8-4cdc-aa9b-fc6929290322/16990.svg) | 28 | 29 | ## Create an instance of the renderer 30 | 31 | The next step is to create an instance of an `AdaptiveCardRenderer`. 32 | 33 | ### Hook up action events 34 | 35 | By default, the actions will render as buttons on the card, but it's up to your app to make them behave as you expect. Each SDK has the equivalent of an `OnAction` event that you must handle. 36 | 37 | * **Action.OpenUrl** - open the specified `url`. 38 | * **Action.Submit** - take the result of the submit and send it to the source. How you send it to the source of the card is entirely up to you. 39 | * **Action.ShowCard** - invokes a dialog and renders the sub-card into that dialog. Note that you only need to handle this if `ShowCardActionMode` is set to `popup`. 40 | 41 | ## Render a card 42 | 43 | After you acquire a card payload, simply call the renderer and pass in the card. You will get back a native UI object made up of the card contents. Now just put this UI somewhere in your app. 44 | 45 | ## Customization 46 | 47 | There are several ways you can customize what is rendered. 48 | 49 | ### HostConfig 50 | 51 | A [HostConfig](host-config.md) is a shared, cross-platform configuration object that controls the basic styling and behavior of cards inside your app. It defines things like font sizes, spacing between elements, colors, number of supported actions, etc. 52 | 53 | ### Native platform styling 54 | 55 | Most UI frameworks allow you to style the rendered card by using the native UI framework styling. For example, in HTML you can specify CSS classes for the HTML, or in XAML you can pass in a custom ResourceDictionary for fine-grained control of the output. 56 | 57 | ### Customize per-element rendering 58 | 59 | Each SDK allows you to override the rendering of any element, or even add support for entirely new elements that you define. For example, you can change the `Input.Date` renderer to emit your own custom control while still retaining the rest of the output of the renderer. Or you can add support for a custom `Rating` element that you define. 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /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: 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. -------------------------------------------------------------------------------- /AdaptiveCards/resources/future.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Adaptive Cards Roadmap 3 | author: matthidinger 4 | ms.author: mahiding 5 | ms.date: 05/16/2018 6 | ms.topic: article 7 | --- 8 | 9 | # Roadmap 10 | Check out our [current roadmap here](https://aka.ms/acroadmap). 11 | 12 | ## Future ideas 13 | Do you have something you would like to see implemented in future versions of AdaptiveCards or want to have your voice heard? 14 | Check out our [planned explorations](https://portal.productboard.com/adaptivecards/1-adaptive-cards-features/tabs/4-under-consideration) or otherwise [submit an idea](https://portal.productboard.com/adaptivecards/1-adaptive-cards-features/tabs/6-planned/submit-idea)! 15 | -------------------------------------------------------------------------------- /AdaptiveCards/resources/media.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Adaptive Cards Media 3 | description: Collected media links discussing Adaptive Cards 4 | author: matthidinger 5 | ms.author: mahiding 6 | ms.date: 5/14/2018 7 | ms.topic: article 8 | --- 9 | 10 | # Adaptive Cards Media 11 | 12 | 13 | ## Introduction Video 14 | 15 | > [!VIDEO https://cdn.adaptivecards.io/assets/AdaptiveCardsOverviewVideo.mp4] 16 | 17 | Video 2: 18 | 19 | > [!VIDEO https://cdn.adaptivecards.io/assets/AdaptiveCardsOverviewVideo.mp4] 20 | 21 | ## Build 2018 22 | 23 | > [!VIDEO https://medius.studios.ms/Embed/Video/BRK2401?SFYT=true] 24 | 25 | ## Windows Developer Day 26 | 27 | > [!VIDEO https://www.youtube.com/embed/7BfKcU-7UjA] 28 | 29 | ## Ignite 2017 30 | 31 | > [!VIDEO https://www.youtube.com/embed/v3pOg0EO2t4] 32 | -------------------------------------------------------------------------------- /AdaptiveCards/resources/media/tools/autocomplete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/resources/media/tools/autocomplete.png -------------------------------------------------------------------------------- /AdaptiveCards/resources/media/tools/designer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/resources/media/tools/designer.jpg -------------------------------------------------------------------------------- /AdaptiveCards/resources/media/tools/invalidjson1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/resources/media/tools/invalidjson1.png -------------------------------------------------------------------------------- /AdaptiveCards/resources/media/tools/vscode-extension-marketplace.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/resources/media/tools/vscode-extension-marketplace.png -------------------------------------------------------------------------------- /AdaptiveCards/resources/media/tools/vscode-extension.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/resources/media/tools/vscode-extension.png -------------------------------------------------------------------------------- /AdaptiveCards/resources/media/tools/wpfvisualizer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MicrosoftDocs/AdaptiveCards/bd0959c8ca19758bdba2635b159bc8d62c1665f6/AdaptiveCards/resources/media/tools/wpfvisualizer.png -------------------------------------------------------------------------------- /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/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.io/designer](https://adaptivecards.io/designer) 14 | 15 | [![designer screenshot](media/tools/designer.jpg)](https://adaptivecards.io/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 | ![bad](media/tools/invalidjson1.png) 32 | 33 | ![autocomplete](media/tools/autocomplete.png) 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 | ![marketplace](https://madewithcards.blob.core.windows.net/uploads/29bb3d02-2158-40b8-8420-4dd1f15da34c-acstudio.png) 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 | ![extension](media/tools/vscode-extension.png) 63 | 64 | To install, open Extensions Marketplace and search for **Adaptive Card Viewer**. 65 | 66 | ![marketplace](media/tools/vscode-extension-marketplace.png) 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 | ![wpf visualizer](media/tools/wpfvisualizer.png) 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/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/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 | [![Nuget install](https://img.shields.io/nuget/vpre/AdaptiveCards.svg)](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/sdk/authoring-cards/toc.yml: -------------------------------------------------------------------------------- 1 | - name: .NET 2 | href: net.md 3 | - name: JavaScript 4 | href: javascript.md -------------------------------------------------------------------------------- /AdaptiveCards/sdk/designer.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Adaptive Cards Designer SDK 3 | author: matthidinger 4 | ms.author: mahiding 5 | ms.date: 01/04/2021 6 | ms.topic: article 7 | --- 8 | 9 | # Adaptive Cards Designer SDK 10 | 11 | The Adaptive Card Designer provides a rich, interactive design-time experience for authoring adaptive cards. 12 | 13 | Try it out at [https://adaptivecards.io/designer](https://adaptivecards.io/designer) 14 | 15 | ![Designer screenshot](../content/designer.png) 16 | 17 | This SDK allows you to easily integrate the adaptive cards designer into your own experiences. 18 | 19 | ## Get Started 20 | 21 | ### Node 22 | 23 | ```console 24 | npm install adaptivecards-designer 25 | ``` 26 | 27 | ### CDN 28 | 29 | ```html 30 | 31 | ``` 32 | 33 | ## Documentation 34 | 35 | Read the [full documentation](https://www.npmjs.com/package/adaptivecards-designer) on npm 36 | -------------------------------------------------------------------------------- /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: article 7 | --- 8 | 9 | # Getting started - Android 10 | 11 | This is a renderer which targets Android native controls. 12 | 13 | ## Install Maven package 14 | 15 | [![Maven Central](https://img.shields.io/maven-central/v/io.adaptivecards/adaptivecards-android.svg)](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/rendering-cards/android/host-config.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Host config - Android SDK 3 | author: almedina-ms 4 | ms.author: almedina 5 | ms.date: 09/27/2017 6 | ms.topic: article 7 | --- 8 | 9 | # Host config for Android 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 | To Create a HostConfig object from a string, use the DeserializeFromString method 14 | 15 | ```java 16 | HostConfig hostConfig = HostConfig.DeserializeFromString(hostConfigText); 17 | ``` -------------------------------------------------------------------------------- /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/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: article 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/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/ios/getting-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: iOS SDK 3 | author: matthidinger 4 | ms.author: mahiding 5 | ms.date: 06/26/2017 6 | ms.topic: article 7 | --- 8 | 9 | # Getting started - iOS 10 | 11 | This renderer which targets iOS native controls. 12 | 13 | ## Install pod 14 | 15 | This is available as a pod. 16 | 17 | [![CocoaPods](https://img.shields.io/cocoapods/v/AdaptiveCards.svg)](https://cocoapods.org/pods/AdaptiveCards) 18 | 19 | ```console 20 | pod 'AdaptiveCards' 21 | ``` 22 | 23 | ## Add header 24 | 25 | ```objective-c 26 | #import "AdaptiveCards/ACFramework.h" 27 | ``` 28 | 29 | ## Next steps 30 | 31 | See [Render a card](render-a-card.md) for the next steps! -------------------------------------------------------------------------------- /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: article 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 | -------------------------------------------------------------------------------- /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/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: 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 | ``` -------------------------------------------------------------------------------- /AdaptiveCards/sdk/rendering-cards/javascript/fabric.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Fabric integration 3 | author: matthidinger 4 | ms.author: mahiding 5 | ms.date: 08/15/2019 6 | ms.topic: article 7 | --- 8 | 9 | # Adaptive Cards with Fabric UI 10 | 11 | The `adaptivecards-fabric` package "lights-up" the Adaptive Card renderer with [Microsoft Fabric UI](https://developer.microsoft.com/en-us/fabric#/controls/web) components. 12 | 13 | ![Fabric screenshot](https://raw.githubusercontent.com/microsoft/AdaptiveCards/master/source/nodejs/adaptivecards-fabric/adaptivecards-fabric.gif) 14 | 15 | ## Get Started 16 | 17 | ### Node 18 | 19 | ```console 20 | npm install adaptivecards-fabric 21 | ``` 22 | 23 | ## Documentation 24 | 25 | Read the [full documentation](https://www.npmjs.com/package/adaptivecards-fabric) on npm 26 | -------------------------------------------------------------------------------- /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: article 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 | [![npm install](https://img.shields.io/npm/v/adaptivecards.svg)](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/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: article 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 | ``` -------------------------------------------------------------------------------- /AdaptiveCards/sdk/rendering-cards/javascript/native-styling.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Native styling - JavaScript SDK 3 | author: matthidinger 4 | ms.author: mahiding 5 | ms.date: 11/28/2017 6 | ms.topic: article 7 | --- 8 | 9 | # Native styling - JavaScript 10 | 11 | Use CSS for fine-grained styling of the card HTML. 12 | 13 | The following CSS classes will be added to various elements. 14 | 15 | | CSS class | Usage | 16 | |---|---| 17 | | .ac-container | containers | 18 | | .ac-selectable | elements with `selectAction` | 19 | | .ac-image | image | 20 | | .ac-pushButton | actions rendered like buttons | 21 | | .ac-linkButton | actions rendered like links | 22 | | .ac-input | input controls| 23 | | .ac-textInput| text input | 24 | | .ac-multiline | multiline text input | 25 | | .ac-numberInput | number input| 26 | | .ac-dateInput | date input| 27 | | .ac-timeInput | time input | 28 | | .ac-multichoiceInput | multichoice input| -------------------------------------------------------------------------------- /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: article 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 | ``` -------------------------------------------------------------------------------- /AdaptiveCards/sdk/rendering-cards/net-html/actions.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Actions - .NET HTML SDK 3 | author: matthidinger 4 | ms.author: mahiding 5 | ms.date: 10/19/2017 6 | ms.topic: article 7 | --- 8 | 9 | # Actions - .NET HTML 10 | 11 | Top-level card `actions` will render as an HTML `