diff --git a/AdaptiveCards/authoring-cards/media/universal-action-model/inconsistent-action-model-lifecycle.png b/AdaptiveCards/authoring-cards/media/universal-action-model/inconsistent-action-model-lifecycle.png new file mode 100644 index 000000000..eb6efffbe Binary files /dev/null and b/AdaptiveCards/authoring-cards/media/universal-action-model/inconsistent-action-model-lifecycle.png differ diff --git a/AdaptiveCards/authoring-cards/media/universal-action-model/inconsistent-action-model.png b/AdaptiveCards/authoring-cards/media/universal-action-model/inconsistent-action-model.png new file mode 100644 index 000000000..e2d4023ad Binary files /dev/null and b/AdaptiveCards/authoring-cards/media/universal-action-model/inconsistent-action-model.png differ diff --git a/AdaptiveCards/authoring-cards/media/universal-action-model/new-universal-action-model.jpg b/AdaptiveCards/authoring-cards/media/universal-action-model/new-universal-action-model.jpg new file mode 100644 index 000000000..a5c1cdfd6 Binary files /dev/null and b/AdaptiveCards/authoring-cards/media/universal-action-model/new-universal-action-model.jpg differ diff --git a/AdaptiveCards/authoring-cards/media/universal-action-model/universal-action-model-lifecycle.jpg b/AdaptiveCards/authoring-cards/media/universal-action-model/universal-action-model-lifecycle.jpg new file mode 100644 index 000000000..5681f774d Binary files /dev/null and b/AdaptiveCards/authoring-cards/media/universal-action-model/universal-action-model-lifecycle.jpg differ diff --git a/AdaptiveCards/authoring-cards/speech.md b/AdaptiveCards/authoring-cards/speech.md index 8aeb07fad..7b5e21e59 100644 --- a/AdaptiveCards/authoring-cards/speech.md +++ b/AdaptiveCards/authoring-cards/speech.md @@ -13,7 +13,7 @@ The `speak` tag enables the adaptive card to be delivered to an environment wher ## Speak property 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 -([SSML](https://msdn.microsoft.com/library/office/hh361578)). 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. +([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. There are two patterns for speak property usage by a host application: @@ -32,4 +32,4 @@ There are two patterns for speak property usage by a host application: ## Speech content design -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. +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. \ No newline at end of file diff --git a/AdaptiveCards/authoring-cards/universal-action-model.md b/AdaptiveCards/authoring-cards/universal-action-model.md new file mode 100644 index 000000000..40e7b93ab --- /dev/null +++ b/AdaptiveCards/authoring-cards/universal-action-model.md @@ -0,0 +1,325 @@ +--- +title: Universal Bot action model +author: sowrabh-msft +ms.author: sonrs +ms.date: 02/10/2021 +ms.topic: article +--- +# Universal Bot action model + +## Context + +Adaptive Cards are platform-agnostic snippets of UI, authored using a lightweight JSON format, that apps and services can share. Adaptive Cards not only adapt to the look-and-feel of the host, but also provide rich interaction capabilities. For more information about Adaptive Cards, please visit [adaptivecards.io](http://adaptivecards.io). + +As Adaptive Cards grew in popularity, different hosts started supporting different action models and this led to fragmentation. To solve this problem, the Teams, Outlook and Adaptive Cards teams worked on creating a new universal Bot action model compatible across hosts. This effort lead to the following: +- The generalization of Bots and the Bot Framework as the way to implement Adaptive Card-based scenarios for both Teams (Bots) and Outlook (Actionable Message) +- `Action.Execute` as a replacement for both `Action.Submit` (currently used by Bots) and `Action.Http` (currently used by Actionable Messages) +- Popular features only supported by Actionable Messages made available to Bots, namely: + - The ability for a card to be refreshed at the time it is displayed + - The ability for `Action.Execute` actions to return an updated card to be immediately displayed in the client + +For more information about Actionable Messages in Outlook, please refer to the [Actionable Message documentation](https://docs.microsoft.com/outlook/actionable-messages/send-via-email) + +Before `Action.Execute` | With `Action.Execute` +:-------------------------:|:-------------------------: +![An image depicting the current inconsistent model in Teams and Outlook](media/universal-action-model/inconsistent-action-model-lifecycle.png) | ![An image depicting the consistent model that is enabled with Action.Execute in Teams and Outlook](media/universal-action-model/universal-action-model-lifecycle.jpg) +![An image showing how Adaptive Card JSONs look like with current inconsistent model](media/universal-action-model/inconsistent-action-model.png) | ![An image showing how Adaptive Card JSONs would look the same with new Action.Execute based model](media/universal-action-model/new-universal-action-model.jpg) + +Source: [Adaptive Cards @ Microsoft Build 2020](https://youtu.be/hEBhwB72Qn4?t=1393) + +The rest of this document focuses on documenting the universal Bot action model in the context of Teams & Outlook. If you are already using Adaptive cards on Teams with Bot, you can use the same Bot with a few changes to support `Action.Execute`. If you are using Actionable Messages on Outlook, you will need to develop a Bot that supports `Action.Execute`. Currently the support on Outlook clients for Universal Bot action model is under active development. + +## Schema + +> ### IMPORTANT +> +> The universal Bot action model is introduced in the **Adaptive Cards schema version 1.4**. In order to use these new capabilities, the `version` property of your Adaptive Card must be set to **1.4** or greater, as shown in the below examples. Note that this will make your Adaptive Card incompatible with older clients (Outlook or Teams) that do not support the universal Bot action model. +> +> If you use the `refresh` property and/or `Action.Execute` and specify a card version < 1.4, the following will happen: +> +> | Client | Behavior | +> | --- | --- | +> | Outlook | Your card **WILL NOT** work. `refresh` will not be honored and `Action.Execute` will not render. Your card may even be rejected entirely. | +> | Teams | Your card **MAY NOT** work (the `refresh` may not be honored, and the `Action.Execute` actions may not render) depending on the version of the Teams client.

To ensure maximum compatibility in Teams, consider defining your `Action.Execute` actions with an `Action.Submit` action in the `fallback` property. | +> +> Refer to the **Backward compatibility** section below for more information. + + +### Action.Execute + +When authoring Adaptive Cards, use `Action.Execute` in place of both `Action.Submit` & `Action.Http`. The schema for `Action.Execute` is quite similar to that of `Action.Submit`. + +**Example JSON** +```json +{ + "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", + "type": "AdaptiveCard", + "version": "1.4", + "body": [ + { + "type": "TextBlock", + "text": "Present a form and submit it back to the originator" + }, + { + "type": "Input.Text", + "id": "firstName", + "placeholder": "What is your first name?" + }, + { + "type": "Input.Text", + "id": "lastName", + "placeholder": "What is your last name?" + }, + { + "type": "ActionSet", + "actions": [ + { + "type": "Action.Execute", + "title": "Submit", + "verb": "personalDetailsFormSubmit", + "fallback": "Action.Submit" + } + ] + } + ] +} +``` + +**Properties** + +| Property | Type | Required | Description +| -------- | ---- | -------- | ----------- +| **type** | `"Action.Execute"` | Yes | Must be `"Action.Execute"`. | +| **verb** | string | No | A convenience string that can be used by developer to identify the action | +| **data** | `string`, `object` | No | Initial data that input fields will be combined with. These are essentially ‘hidden’ properties. | +| **title** | `string` | No | Label for button or link that represents this action. | +| **iconUrl** | `uri` | No | Optional icon to be shown on the action in conjunction with the title. Supports data URI in Adaptive Cards version 1.2+ | +| **style** | `ActionStyle` | No | Controls the style of an Action, which influences how the action is displayed, spoken, etc. | +| **fallback** | ``, `"drop"` | No | Describes what to do when Action.Execute is unsupported by the client displaying the card. | +| **requires** | `Dictionary` | No | A series of key/value pairs indicating features that the item requires with corresponding minimum version. When a feature is missing or of insufficient version, fallback is triggered. | + + +### Refresh mechanism + +Alongside `Action.Execute`, a new refresh mechanism is now supported, making it possible to create Adaptive Cards that automatically update at the time they are displayed. This ensures that users always see up to date data. A typical refresh use case is an approval request: once approved, it is best that users are not presented with a card prompting them to approve when it's already been done, but instead provides information on the time the request was approved and by whom. + +To allow an Adaptiver Card to automatically refresh, define its `refresh` property, which embeds an `action` of type `Action.Execute` as well as a `userIds` array. + +| Property | Type | Required | Description +| -------- | ---- | -------- | ----------- +| **action** | `"Action.Execute"` | Yes | Must be an action instance of type `"Action.Execute"`. | +| **userIds** | `Array` | Yes | An array of `MRI`s of users for whom Auto Refresh must be enabled.

**IMPORTANT:** If the `userIds` list property isn't included in the `refresh` section of the card, the card will NOT be automatically refresh on display. Instead, a button will be presented to the user to allow them to manually refresh. The reason for this is Channels in Teams can include a large number of members; if many members are all viewing the channel at the same time, and unconditional automatic refresh would results in many concurrent calls to the Bot, which would not scale. To alleviate the potential scale problem, the `userIds` property should always be included to identify which users should get an automatic refresh, with a maximum of **5** user IDs currently being allowed.

Note that the `userIds` property is ignored in Outlook, and the `refresh` property is always automatically honored. There is no scale issue in Outlook because users will typically view the card at different times. | + +**Sample JSON** +```JSON +{ + "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", + "type": "AdaptiveCard", + "originator":"c9b4352b-a76b-43b9-88ff-80edddaa243b", + "version": "1.4", + "refresh": { + "action": { + "type": "Action.Execute", + "title": "Submit", + "verb": "personalDetailsCardRefresh" + }, + "userIds": [] + }, + "body": [ + { + "type": "TextBlock", + "text": "Present a form and submit it back to the originator" + }, + { + "type": "Input.Text", + "id": "firstName", + "placeholder": "What is your first name?" + }, + { + "type": "Input.Text", + "id": "lastName", + "placeholder": "What is your last name?" + }, + { + "type": "ActionSet", + "actions": [ + { + "type": "Action.Execute", + "title": "Submit", + "verb": "personalDetailsFormSubmit", + "fallback": "Action.Submit" + } + ] + } + ] +} +``` + +#### Important note for Outlook Actionable Message developers + +When developing Outlook Actionable Message scenarios, the Adaptive Card's `originator` property must be specified. `originator` is a Globally Unique Identified (GUID) generated at the time a Bot subscribes to the Outlook channel. It is used by Outlook to validate that the Adaptive Card was sent by an authorized Bot. The Adaptive Card will not be rendered in Outlook if `originator` is absent. `originator` is ignored in Teams. + +### `adaptiveCard/action` Invoke activity + +When an `Action.Execute` is executed in the client (whether it's the refresh action or an action explicitly taken by a user by clicking a button), a new type of Invoke activity - `adaptiveCard/action` - is made to your Bot. A typical `adaptiveCard/action` Invoke activity request will look like the following: + +#### Request format + +``` +{ + "type": "invoke", +  "name": "adaptiveCard/action", + + // ... other properties omitted for brevity + +  "value": { +    "action": { +      "type": "Action.Execute", +      "id": "abc", + "verb": "def", +     "data": { ... } +    }, + "trigger": "automatic | manual" +  } +} +``` + +| Field | Description | +| -------- | ----------- | +| **value.action** | A copy of the action as defined in the Adaptive Card. Like with `Action.Submit`, the `data` property of the action includes the values of the various inputs in the card, if there are any | +| **value.trigger** | Indicates if the action was triggered explicitly (by the user clicking a button) or implicitly (via automatic refresh) | + +#### Response format + +If the Bot did process an incoming `adaptiveCard/action` Invoke activity (i.e. if the Bot's code was involved at all in processing the request), the HTTP response's status code returned by the Bot must be equal to 200 and the body of the HTTP response must be formatted as follows: + +```JSON +{ + "statusCode": , + "type": "", + "value": "" +} +``` + +| Field | Description | +| -------- | ----------- | +| **statusCode** | An HTTP response status code of 200 does NOT necessarily mean the Bot was able to _successfully_ process the request. A client application MUST always look at the `statucCode` property in the response's body to know how the Bot processed the request. `statusCode` is a number ranging from 200-599 that mirrors HTTP status code values and is meant to be a sub-status for the result of the bot processing the Invoke. A missing, null, or undefined value for `statusCode` implies a 200 (Success). | +| **type** | A set of well-known string constants that describe the expected shape of the value property | +| **value** | An object that is specific to the type of response body | + +**Supported status codes** + +The following table lists the allowed values for `statusCode`, `type`, and `value` in the Bot's response body: + +| Status Code | Type | Value Schema | Notes | +| --- | --- | --- | --- | +| 200 | `application/vnd.microsoft.adaptive.card` | `Adaptive Card` | The request was successfully processed, and the response includes an Adaptive Card that the client should display in place of the current one. | +| 200 | `application/vnd.microsoft.activity.message` | `string` | The request was successfully processed, and the response includes a message that the client should display. | +| 400 | `application/vnd.microsoft.error` | Error Object (TODO: needs link) | The incoming request was invalid. | +| 401 | `application/vnd.microsoft.activity.loginRequest` | OAuthCard (TODO: needs link) | The client needs to prompt the user to authenticate. | +| 401 | `application/vnd.microsoft.error.inccorectAuthCode` | null | The authentication state passed by the client was incorrect and authentication failed. | +| 412 | `application/vnd.microsoft.error.preconditionFailed` | Error Object (TODO: needs link) | The SSO authentication flow failed. | +| 500 | `application/vnd.microsoft.error` | Error Object (TODO: needs link) | An unexpected error occurred. | + +## Summary: how to leverage the universal Bot action model + +1. Use `Action.Execute` instead of `Action.Submit`. To update an existing scenario on teams, replace all instances of `Action.Submit` with `Action.Execute`. For upgrading an existing scenario on Outlook please refer the backward compatibility section below. +2. For cards to surface on outlook add the `originator` field. Refer the Sample JSON above. +3. Add a `refresh` clause to your Adaptive Card if you want to leverage the automatic refresh mechanism or if your scenario requires contextual views. Be sure to specify the `userIds` property to identify which users (maximum 5) will get automatic updates. +4. Handle `adaptiveCard/action` Invoke requests in your Bot +5. Whenever your Bot needs to return a new card as a result of processing an `Action.Execute`, you can use the Invoke request's context to generate cards that are specifically crafted for a given user. Make sure the response conforms to the response schema defined above. + +## Backward compatibility + +### Outlook + +The new `Action.Execute` universal action model is a departure from the `Action.Http` action model currently used by Outlook Actionable Messages, where actions are encoded in the Adaptive Card as explicit HTTP calls. The `Action.Execute` model makes it possible for developers to implement scenarios that "just work" in both Outlook and Teams. Actionable Message scenarios can either use the `Action.Http` model or the new `Action.Execute` model, but not both. Scenarios that use the universal `Action.Execute` model must be implemented as Bots and subscribe to `Outlook Actionable Messages` channel. + +> #### Important notes +> - Scenarios implemented using the universal `Action.Execute` model will not be compatible with older versions of Outlook +> - Work is in progress to allow existing Actionable Message scenarios to seamlessly migrate to the universal `Action.Execute` model + +### Teams + +In order for your cards to be backward compatible and work for users on older versions of Teams, your `Action.Execute` actions should include a `fallback` property defined as an `Action.Submit`. Your Bot should be coded in such a way that it can process both `Action.Execute` and `Action.Submit`. Note that it is not possible for your Bot to return a new card when processing an `Action.Submit`, so fallback behavior via `Action.Submit` will provide a degraded experience for the end user. + +> #### Important note +> Some older Teams clients do not support fallback property when not wrapped in an `ActionSet`. In order to not break on such clients, it is **strongly recommended** that you wrap _all_ your `Action.Execute` in `ActionSet`. See example below on how to wrap `Action.Execute` in `ActionSet`. + +In the below example, note the `version` property of the card is set to `1.2` and the `Action.Execute` is defined with an `Action.Submit` as its `fallback`. When rendered in a Teams client that supports Adaptive Cards 1.4, the `Action.Execute` will render and work as expected. In Teams clients that do not support Adaptive Cards 1.4, the `Action.Submit` will be rendered in place of the `Action.Execute`. + +```JSON +{ + "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", + "type": "AdaptiveCard", + "version": "1.2", + "body": [ + { + "type": "TextBlock", + "text": "Present a form and submit it back to the originator" + }, + { + "type": "Input.Text", + "id": "firstName", + "placeholder": "What is your first name?" + }, + { + "type": "Input.Text", + "id": "lastName", + "placeholder": "What is your last name?" + }, + { + "type": "ActionSet", + "actions": [ + { + "type": "Action.Execute", + "title": "Submit", + "verb": "personalDetailsFormSubmit", + "fallback": { + "type": "Action.Submit", + "title": "Submit" + } + } + ] + } + ] +} +``` + +## References +- [Adaptive Cards @ Microsoft Build 2020](https://youtu.be/hEBhwB72Qn4?t=1393) +- [Adaptive Cards @ Ignite 2020](https://techcommunity.microsoft.com/t5/video-hub/elevate-user-experiences-with-teams-and-adaptive-cards/m-p/1689460) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/AdaptiveCards/content/action_submit_behaviour.png b/AdaptiveCards/content/action_submit_behaviour.png new file mode 100644 index 000000000..487c1ef03 Binary files /dev/null and b/AdaptiveCards/content/action_submit_behaviour.png differ diff --git a/AdaptiveCards/content/column_width_image_width_2.png b/AdaptiveCards/content/column_width_image_width_2.png new file mode 100644 index 000000000..c8d8a50f9 Binary files /dev/null and b/AdaptiveCards/content/column_width_image_width_2.png differ diff --git a/AdaptiveCards/content/height1_text_wrap_off.png b/AdaptiveCards/content/height1_text_wrap_off.png new file mode 100644 index 000000000..83b4f7106 Binary files /dev/null and b/AdaptiveCards/content/height1_text_wrap_off.png differ diff --git a/AdaptiveCards/content/height2_text_wrap_on.png b/AdaptiveCards/content/height2_text_wrap_on.png new file mode 100644 index 000000000..97a00d42b Binary files /dev/null and b/AdaptiveCards/content/height2_text_wrap_on.png differ diff --git a/AdaptiveCards/content/image_size_3.png b/AdaptiveCards/content/image_size_3.png new file mode 100644 index 000000000..b149269ae Binary files /dev/null and b/AdaptiveCards/content/image_size_3.png differ diff --git a/AdaptiveCards/content/image_size_auto_stretch.png b/AdaptiveCards/content/image_size_auto_stretch.png new file mode 100644 index 000000000..6a6c5ae7f Binary files /dev/null and b/AdaptiveCards/content/image_size_auto_stretch.png differ diff --git a/AdaptiveCards/content/imagesize2.png b/AdaptiveCards/content/imagesize2.png new file mode 100644 index 000000000..35a7713a8 Binary files /dev/null and b/AdaptiveCards/content/imagesize2.png differ diff --git a/AdaptiveCards/content/spacing1.png b/AdaptiveCards/content/spacing1.png new file mode 100644 index 000000000..ef51b5155 Binary files /dev/null and b/AdaptiveCards/content/spacing1.png differ diff --git a/AdaptiveCards/content/spacing2_not_affected.png b/AdaptiveCards/content/spacing2_not_affected.png new file mode 100644 index 000000000..4968ea4bd Binary files /dev/null and b/AdaptiveCards/content/spacing2_not_affected.png differ diff --git a/AdaptiveCards/content/spacing3_seperator.png b/AdaptiveCards/content/spacing3_seperator.png new file mode 100644 index 000000000..fb6304be4 Binary files /dev/null and b/AdaptiveCards/content/spacing3_seperator.png differ diff --git a/AdaptiveCards/content/spacing4_with_seperator.png b/AdaptiveCards/content/spacing4_with_seperator.png new file mode 100644 index 000000000..4d118facc Binary files /dev/null and b/AdaptiveCards/content/spacing4_with_seperator.png differ diff --git a/AdaptiveCards/content/spacing5_no_effect.png b/AdaptiveCards/content/spacing5_no_effect.png new file mode 100644 index 000000000..8f00d1c94 Binary files /dev/null and b/AdaptiveCards/content/spacing5_no_effect.png differ diff --git a/AdaptiveCards/content/spacing_no_effect.png b/AdaptiveCards/content/spacing_no_effect.png new file mode 100644 index 000000000..091b14700 Binary files /dev/null and b/AdaptiveCards/content/spacing_no_effect.png differ diff --git a/AdaptiveCards/content/style1.png b/AdaptiveCards/content/style1.png new file mode 100644 index 000000000..bfedc26c4 Binary files /dev/null and b/AdaptiveCards/content/style1.png differ diff --git a/AdaptiveCards/content/style2_withBleed.png b/AdaptiveCards/content/style2_withBleed.png new file mode 100644 index 000000000..e66036c53 Binary files /dev/null and b/AdaptiveCards/content/style2_withBleed.png differ diff --git a/AdaptiveCards/content/width3_auto_stretch_auto.png b/AdaptiveCards/content/width3_auto_stretch_auto.png new file mode 100644 index 000000000..3674e75fe Binary files /dev/null and b/AdaptiveCards/content/width3_auto_stretch_auto.png differ diff --git a/AdaptiveCards/content/width5_w50_p100_w50_auto.png b/AdaptiveCards/content/width5_w50_p100_w50_auto.png new file mode 100644 index 000000000..3135b21e3 Binary files /dev/null and b/AdaptiveCards/content/width5_w50_p100_w50_auto.png differ diff --git a/AdaptiveCards/content/width6_all_auto.png b/AdaptiveCards/content/width6_all_auto.png new file mode 100644 index 000000000..7ce9be3db Binary files /dev/null and b/AdaptiveCards/content/width6_all_auto.png differ diff --git a/AdaptiveCards/content/width_1_auto_stretch.png b/AdaptiveCards/content/width_1_auto_stretch.png new file mode 100644 index 000000000..28d4733c0 Binary files /dev/null and b/AdaptiveCards/content/width_1_auto_stretch.png differ diff --git a/AdaptiveCards/content/width_2_stretch_stretch.png b/AdaptiveCards/content/width_2_stretch_stretch.png new file mode 100644 index 000000000..56ed76a02 Binary files /dev/null and b/AdaptiveCards/content/width_2_stretch_stretch.png differ diff --git a/AdaptiveCards/content/width_4_w50_p100_w50.png b/AdaptiveCards/content/width_4_w50_p100_w50.png new file mode 100644 index 000000000..9f4baba81 Binary files /dev/null and b/AdaptiveCards/content/width_4_w50_p100_w50.png differ diff --git a/AdaptiveCards/getting-started/bots.md b/AdaptiveCards/getting-started/bots.md index a0d1ee5a4..e30ab9c95 100644 --- a/AdaptiveCards/getting-started/bots.md +++ b/AdaptiveCards/getting-started/bots.md @@ -110,8 +110,8 @@ If your bot is developed using .NET or NodeJS we have libraries to make building Platform|Install|Learn more --------|-------|---------- -.NET | `Install-Package AdaptiveCards -IncludePrerelease` | [Bot Framework .NET Docs](https://docs.microsoft.com/bot-framework/dotnet/bot-builder-dotnet-add-rich-card-attachments) -NodeJS | `npm install adaptivecards` | [Bot Framework NodeJS Docs](https://docs.microsoft.com/bot-framework/nodejs/bot-builder-nodejs-send-rich-cards) +.NET | `Install-Package AdaptiveCards -IncludePrerelease` | [Bot Framework .NET Docs](/bot-framework/dotnet/bot-builder-dotnet-add-rich-card-attachments) +NodeJS | `npm install adaptivecards` | [Bot Framework NodeJS Docs](/bot-framework/nodejs/bot-builder-nodejs-send-rich-cards) ## Channel status @@ -126,4 +126,4 @@ We've just scratched the surface in this tutorial, so please take a look at the * [Browse Sample cards](https://adaptivecards.io/samples/) for inspiration * Use the [Schema Explorer](https://adaptivecards.io/explorer) to learn the available elements * Build a card using the [Interactive Visualizer](https://adaptivecards.io/visualizer/index.html?hostApp=Skype) -* [Get in touch](https://adaptivecards.io/connect) with any feedback you have +* [Get in touch](https://adaptivecards.io/connect) with any feedback you have \ No newline at end of file diff --git a/AdaptiveCards/getting-started/windows.md b/AdaptiveCards/getting-started/windows.md index 89b481b3f..e7299c5d5 100644 --- a/AdaptiveCards/getting-started/windows.md +++ b/AdaptiveCards/getting-started/windows.md @@ -16,7 +16,7 @@ The first Windows experience to supports Adaptive Cards is Timeline, a brand new ### UserActivity API -The [`Windows.ApplicationModel.UserActivities.UserActivity`](https://docs.microsoft.com/uwp/api/windows.applicationmodel.useractivities.useractivity) API is what populates an Activity into Timeline. +The [`Windows.ApplicationModel.UserActivities.UserActivity`](/uwp/api/windows.applicationmodel.useractivities.useractivity) API is what populates an Activity into Timeline. The Adaptive Card will be supplied via the `Content` property of `VisualElement`, as seen below: @@ -32,7 +32,7 @@ await userActivity.SaveAsync(); There is a great 45-min learn module that covers these steps end-to-end. -[Integrate adaptive cards into Windows 10 Timeline](https://docs.microsoft.com/learn/modules/integrate-app-into-windows-10-timeline/) +[Integrate adaptive cards into Windows 10 Timeline](/learn/modules/integrate-app-into-windows-10-timeline/) ### Learn more @@ -50,4 +50,4 @@ We've barely scratched the surface in this tutorial, so check back soon and brow * [Browse Sample cards](https://adaptivecards.io/samples/) for inspiration * Use the [Schema Explorer](https://adaptivecards.io/explorer) to learn the available elements * Build a card using the [Interactive Visualizer](https://adaptivecards.io/visualizer/index.html?hostApp=Skype) -* [Get in touch](https://adaptivecards.io/connect) with any feedback you have +* [Get in touch](https://adaptivecards.io/connect) with any feedback you have \ No newline at end of file diff --git a/AdaptiveCards/rendering-cards/actions.md b/AdaptiveCards/rendering-cards/actions.md index 163849119..18374ff80 100644 --- a/AdaptiveCards/rendering-cards/actions.md +++ b/AdaptiveCards/rendering-cards/actions.md @@ -12,4 +12,5 @@ By default, the actions will render as buttons on the card, but it's up to your * **Action.OpenUrl** - open the specified `url`. * **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. -* **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`. \ No newline at end of file +* **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`. +* **Action.ToggleVisibility** - shows or hides one or more elements in the card. \ No newline at end of file diff --git a/AdaptiveCards/rendering-cards/renderer-behaviour.md b/AdaptiveCards/rendering-cards/renderer-behaviour.md new file mode 100644 index 000000000..de4da8e09 --- /dev/null +++ b/AdaptiveCards/rendering-cards/renderer-behaviour.md @@ -0,0 +1,212 @@ +--- +title: Renderer Behaviour Guideline +author: manujai +--- + + +# Adaptive Card Renderer Behaviour Guideline + +The following specification describes the design guideline to be followed when implementing the behaviour of a renderer with respect to parsing the relationship between the card elements. +> [!IMPORTANT] +> +> This content is not finished yet. Check back shortly. + + +## Behaviours + +The Renderer **MUST** take care to the following behaviours when rendering card elements with respect to the attributes mentioned in this doc. + +1. **Constraints** +2. **Image Size** +3. **Action.Submit** + +## Constraints + +The renderer should manage **Constraints** taking into account the various factors such as margin, padding, height and width etc configuration of the card elements and its children. + +## Width + +1. Allowed values - `auto`, `stretch` and fixed values in terms of `pixels` and `weight` +2. `auto` provides sufficient space for expansion of width (supports min expansion) +3. `stretch` takes up the remaining width (supports max expansion) + +Below below scenarios describes how the constraints are affected with different width combinations for columns + +### `auto` vs `stretch` +1. Columns with `auto` and `stretch` width. + +![Column with auto and stretch width](https://github.com/manujai/AdaptiveCards/blob/doc_renderer_behaviour/AdaptiveCards/content/width_1_auto_stretch.png) + +* The first column with `auto` width takes sufficient space to display the content and the second column with `stretch` width takes up the entire space. + +2. Columns with only `stretch` width + +![Column with only stretch width](https://github.com/manujai/AdaptiveCards/blob/doc_renderer_behaviour/AdaptiveCards/content/width_2_stretch_stretch.png) + +* Columns with only stretch width takes up the remaining spaces after dividing it equally. + +3. `auto`,`stretch` and `auto` + +![Column with auto and stretch combination width](https://github.com/manujai/AdaptiveCards/blob/doc_renderer_behaviour/AdaptiveCards/content/width3_auto_stretch_auto.png) + +The **first** and **third** columns width is adjusted first to accommodate the elements sufficiently and the **second** column with stretched width takes up the remaining space. + +4. Order of displaying elements with `auto` width columns + +![Columns with auto width](https://github.com/manujai/AdaptiveCards/blob/doc_renderer_behaviour/AdaptiveCards/content/width6_all_auto.png) + +* Columns with `auto` will position themselves to provide ample space for the content to render. +* In case of **Image views**, images will downscale to fit the remaining width. +* **Note:** Images will downscale only for `stretch` and `auto` image size, but not for fixed width and height in pixels. + +### `weights` vs `pixels` + +1. Columns with `weight` and `pixel` width combination + +![Columns with weightage and pixel width combination](https://github.com/manujai/AdaptiveCards/blob/doc_renderer_behaviour/AdaptiveCards/content/width_4_w50_p100_w50.png) + +* The above card has three columns with the following width configuration - +* `Column1: Weight 50`, `Column2: 100px`, `Column3: Weight 50` +* The width of Column 2 is determined by the `pixel value` +* The width of Column 1 and 3 is adjusted based on the `weights` and the calculated `weight ratio`. + +2. Columns with `weight`, `pixel width` and `auto` attributes + +![Columns with wight, pixel width and auto combination](https://github.com/manujai/AdaptiveCards/blob/doc_renderer_behaviour/AdaptiveCards/content/width5_w50_p100_w50_auto.png) + +* The above card has four columns with the following width configuration - +* `Column1: Weight 50`, `Column2: 100px`, `Column3: Weight 50`, and `Column4: auto` +* **Note:** Image view with `auto` width column downscales to adjust to the remaining space. + +### Precedence order of displaying elements with the width attribute +`px` > `weight` > `auto` > `stretch` + + +## Height + + Allowed values - `auto` and `stretch` + +Below scenarios describes how the constraints are affected with different height combinations for card elements + +1. Elements expand freely vertically when card is not of fixed height + +![Columns with auto and stretch height](https://github.com/manujai/AdaptiveCards/blob/doc_renderer_behaviour/AdaptiveCards/content/height1_text_wrap_off.png) + +* Both the columns can expand sufficiently vertically irrespective of `auto` and `stretch` values +* This is with the `wrap` property disabled for the text block. + +2. The card below has the `wrap` property enabled for the text block. + +![Column with wrap property for text block](https://github.com/manujai/AdaptiveCards/blob/doc_renderer_behaviour/AdaptiveCards/content/height2_text_wrap_on.png) + + +## Spacing and Separator + + 1. **Spacing** - Allowed values `none`, `small`, `default`, `medium`, `large`, `extra large` and `padding` + +* Spacing attribute adds spacing between this element and the preceding element. + +![Elements with different spacing combination](https://github.com/manujai/AdaptiveCards/blob/doc_renderer_behaviour/AdaptiveCards/content/spacing1.png) + +* Spacing attribute does not have any effect when its the first element in the view container. + +![Element where spacing has no effect](https://github.com/manujai/AdaptiveCards/blob/doc_renderer_behaviour/AdaptiveCards/content/spacing_no_effect.png) + +* The elements marked with arrow are the first elements among its siblings, so spacing has no effect. + + 2. **Separator** - Possible values (on/off toggle) + +* Draws a seperating line at the top of the element. + +![Elements with seperator attribute](https://github.com/manujai/AdaptiveCards/blob/doc_renderer_behaviour/AdaptiveCards/content/spacing3_seperator.png) + +3. **Spacing and Seperator combination** + +* The constraints of the spacing and the seperator combination are illustrated below. + +![Spacing and seperator combination](https://github.com/manujai/AdaptiveCards/blob/doc_renderer_behaviour/AdaptiveCards/content/spacing4_with_seperator.png) + +* The overall spacing distance is maintained with respect to the values provided. +* The seperator is added halfway in the middle of the spaced distance. + +[Note. Need to confirm the distance where the seperator is inserted in the spacing area. Seems like the middle] + +## Container Styles + +* Provides styling hints for containers such as columns and columnset +* Allowed values `none`, `default`, `emphasis`, `good`, `attention`, `warning` and `accent` +* These predefined style options provides padding for the elements within the container and background color + + +![Columns and ColumnSet Style Combination](https://github.com/manujai/AdaptiveCards/blob/doc_renderer_behaviour/AdaptiveCards/content/style1.png) + +1. Card A illustrates columns and columnset with no style options +2. Card B illustrates columnset with **Attention** style. Notice the padding within the columnset container and the change in background color. +3. Card C illustrates columns with styling only. Similar to the previous one, column includes padding and background change. +4. Card D illustrates columns and columnset both with style options. + +[Note. Need to check how the padding amount is determined. Is it determined by the host? ] + +## Bleed + +* This property allows the container such as columns and columnset to bleed through its parent. +* Possible values `on` and `off`. + + +![Column with bleed property](https://github.com/manujai/AdaptiveCards/blob/doc_renderer_behaviour/AdaptiveCards/content/style2_withBleed.png) + +1. Card A illustrates columns and columnset with regular styling. +2. Card B illustrates the first column with bleed option. The content just bleeds through its boundaries to its parent's. + +## Image Size + +### `Size` attribute +* Allowed values - `auto`, `stretch`, `small`, `medium`, `large` +* `auto` : Images will scale down to fit if needed, but will not scale up to fill the area. +* `stretch` : Image with both scale down and up to fit as needed. +* `small`, `medium` and `large`: Image is displayed with a fixed width, where the width is determined by the host. + +1. `auto` vs `stretch` + +![Image with auto and stretch behaviour](https://github.com/manujai/AdaptiveCards/blob/doc_renderer_behaviour/AdaptiveCards/content/image_size_auto_stretch.png) + +2. Column width and Image Size combination + +![Column width and image size combination](https://github.com/manujai/AdaptiveCards/blob/doc_renderer_behaviour/AdaptiveCards/content/imagesize2.png) + +* Generally, Columns with `stretch` width allow images to upscale freely with `stretch` size. +* Columns with `auto` width allows image to occupy exact space irrespective of `auto` and `stretch` size of image. +* Column width takes more precedence in determining the image size in this arrangement. + +### Image `Width (in pixels)` attribute +* This provides the desired on-screen width of the image. +* `size` property is overriden when a value is specified + +![Column width and image width in pixels combination](https://github.com/manujai/AdaptiveCards/blob/doc_renderer_behaviour/AdaptiveCards/content/image_size_3.png) +* The column with `auto` width will have more precedence than `stretch` in providing room for image content in this arrangement. + +### Column Width (weight and pixel) and Image size (auto and stretch) Combination + +![Column width and image size combination](https://github.com/manujai/AdaptiveCards/blob/doc_renderer_behaviour/AdaptiveCards/content/column_width_image_width_2.png) +* Images with `auto` size takes sufficient space for expansion (or downscales) within the column constraints of `weight` and `pixel` width. +* Images with `stretch` size can expand to fill the remaining space within the constraints of column `weight` and `pixel` width. + +## Action.Submit +* `Action.Submit` element gathers input fields, merges with optional data field, and sends an event to the client. +* A significant difference in the element behaviour is present between 1.x and 2.x version of the ACL renderer. + +![Column width and image width combination](https://github.com/manujai/AdaptiveCards/blob/doc_renderer_behaviour/AdaptiveCards/content/action_submit_behaviour.png) + +* `1.x Renderer` - The inputs are collected from all fields irrespective of the where in the hierarchy the input field is present. +* `2.x Renderer` - The inputs are collected from fields present in parent container or as a sibling of the `Action.Submit` element. + +## Summary +* Column width takes more precedence in determining the size of the image than its image size (auto, stretch, min width etc). +* The precedence of the column width taken to display its content sufficiently - `px` > `weight` > `auto` > `stretch` +* Image `size` (auto, stretch) is **ignored** when Image `width` and `height` in px is provided. +* Image `stretch` size attribute will upscale the image only when there is remaining space and column auto is **not** `auto`. +* An image stretches itself to the limit where it maintain its aspect ratio in the space available in the column. In turn, the height expands freely. +* `Spacing` attribute will not have any effect when its the first or the only element among its sibling. + + + diff --git a/AdaptiveCards/rendering-cards/speech.md b/AdaptiveCards/rendering-cards/speech.md index bb8746efc..62b5dc059 100644 --- a/AdaptiveCards/rendering-cards/speech.md +++ b/AdaptiveCards/rendering-cards/speech.md @@ -10,12 +10,11 @@ ms.topic: article To support speech adaptive Cards has the `speak` property which contains information on how a card should be read aloud to a user. -The speech tag can be annotated using [SSML markup](https://msdn.microsoft.com/library/office/hh361578(v=office.14).aspx). +The speech tag can be annotated using [SSML markup](/previous-versions/office/developer/speech-technologies/hh361578(v=office.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 from your own service, giving you a great deal of customization. There are 2 patterns for speak property usage by a host application: * **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. * **on demand** - In order to support a richer accessibility model the schema supports a speak tag per element. -This allows for clients to read each element to recipients with accessibility requirements. - +This allows for clients to read each element to recipients with accessibility requirements. \ No newline at end of file diff --git a/AdaptiveCards/resources/partners.md b/AdaptiveCards/resources/partners.md index 1f3f91eb1..d1f5f9a92 100644 --- a/AdaptiveCards/resources/partners.md +++ b/AdaptiveCards/resources/partners.md @@ -2,7 +2,7 @@ title: Adaptive Cards Partners author: matthidinger ms.author: mahiding -ms.date: 9/24/2018 +ms.date: 2/15/2021 ms.topic: article --- @@ -16,9 +16,9 @@ If you are interested in joining the Adaptive Cards ecosystem, please [reach out Platform | Description | Documentation | Version ---------|-------------|---------------|--------- -[Bot Framework Web Chat](https://github.com/Microsoft/BotFramework-WebChat) | Embeddable web chat control for the Microsoft Bot Framework | [Get Started](https://docs.microsoft.com/adaptive-cards/get-started/bots) | 1.2.6 (Web Chat 4.11.0) -[Outlook Actionable Messages](https://docs.microsoft.com/outlook/actionable-messages/) | Attach an actionable message to email | [Get Started](https://docs.microsoft.com/outlook/actionable-messages/) | 1.0 -[Microsoft Teams](https://products.office.com/microsoft-teams/group-chat-software) | Platform that combines workplace chat, meetings, and notes | [Get Started](https://docs.microsoft.com/microsoftteams/platform/concepts/cards/cards-reference#adaptive-card) | 1.2 -[Cortana Skills](https://docs.microsoft.com/cortana/skills/adaptive-cards) | A virtual assistant for Windows 10 | [Get Started](https://docs.microsoft.com/adaptive-cards/get-started/bots) | 1.0 -[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](https://docs.microsoft.com/adaptive-cards/get-started/windows) | 1.0 +[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.2.6 (Web Chat 4.11.0) +[Outlook Actionable Messages](/outlook/actionable-messages/) | Attach an actionable message to email | [Get Started](/outlook/actionable-messages/) | 1.0 +[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.2 +[Cortana Skills](/cortana/skills/adaptive-cards) | A virtual assistant for Windows 10 | [Get Started](../getting-started/bots.md) | 1.0 +[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 [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 diff --git a/AdaptiveCards/sdk/rendering-cards/javascript/actions.md b/AdaptiveCards/sdk/rendering-cards/javascript/actions.md index 2200f1225..f03098f0b 100644 --- a/AdaptiveCards/sdk/rendering-cards/javascript/actions.md +++ b/AdaptiveCards/sdk/rendering-cards/javascript/actions.md @@ -1,15 +1,71 @@ --- -title: Actions - JavaScript SDK +title: Handling actions - JavaScript SDK author: matthidinger ms.author: mahiding ms.date: 11/28/2017 ms.topic: article --- -# Actions - JavaScript +# Handling actions - JavaScript -```js -// Set the adaptive card's event handlers. onExecuteAction is invoked -// whenever an action is clicked in the card -adaptiveCard.onExecuteAction = function(action) { alert("Ow!"); } +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: +| Schema type name | JavaScript class | +| --- | --- | +| [Action.OpenUrl](https://adaptivecards.io/explorer/Action.OpenUrl.html) | `OpenUrlAction` | +| [Action.ShowCard](https://adaptivecards.io/explorer/Action.ShowCard.html) | `ShowCardAction` | +| [Action.ToggleVisibility](https://adaptivecards.io/explorer/Action.ToggleVisibility.html) | `ToggleVisibilityAction` | +| [Action.Submit](https://adaptivecards.io/explorer/Action.Submit.html) | `SubmitAction` | + +## Handling actions when users click action buttons +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. + +### Example + +```typescript +// Create an AdaptiveCard instance +let adaptiveCard = new AdaptiveCard(); + +// Parse a card payload - this is just a very simple example +adaptiveCard.parse( + { + "type": "AdaptiveCard", + "version": "1.0", + "actions": [ + { + "type": "Action.Submit", + "id": "clickMe", + "title": "Click me!" + } + ] + } +) + +// Provide an onExecuteAction handler to handle the Action.Submit +adaptiveCard.onExecuteAction = (action: Action) => { + if (action instanceof SubmitAction) { + // If you copy this code sample, remove the alert statement + // and provide your own custom handling code + alert("You clicked " + action.title); + } +} + +document.body.appendChild(adaptiveCard.render()); +``` + +## Executing actions in code + +The JavaScript SDK allows you to execute actions in code if necessary via the `Action.execute()` method. + +### Example + +```typescript +function triggerAction(card: AdaptiveCard, actionId: string) { + let action = card.getActionById(actionId); + + if (action !== undefined) { + // Executing an action in code will trigger the + // onExecuteAction event + action.execute(); + } +} ``` \ No newline at end of file diff --git a/AdaptiveCards/sdk/rendering-cards/net-html/getting-started.md b/AdaptiveCards/sdk/rendering-cards/net-html/getting-started.md index ec9e5b5da..398f99581 100644 --- a/AdaptiveCards/sdk/rendering-cards/net-html/getting-started.md +++ b/AdaptiveCards/sdk/rendering-cards/net-html/getting-started.md @@ -2,7 +2,7 @@ title: .NET HTML SDK author: matthidinger ms.author: mahiding -ms.date: 10/19/2017 +ms.date: 01/04/2021 ms.topic: article --- @@ -10,6 +10,10 @@ ms.topic: article As we described in [Getting Started](../../../authoring-cards/getting-started.md) page, an Adaptive Card is a JSON-serialized card object model. This is a .NET library for generating HTML markup, typically from a server. +> [!IMPORTANT] +> +> **As of 12/31/2020 this package is in Maintenance mode and no longer in active development**. It will only receive critical bugs and security fixes. Please see our [Support policy](https://github.com/microsoft/AdaptiveCards/blob/main/SUPPORT.MD) for more details. If you are interested in maintaining this project we would be happy to provide support where possible -- please reach out on GitHub and let us know. + ## NuGet install [![Nuget install](https://img.shields.io/nuget/vpre/AdaptiveCards.Rendering.Html.svg)](https://www.nuget.org/packages/AdaptiveCards.Rendering.Html) @@ -20,4 +24,4 @@ Install-Package AdaptiveCards.Rendering.Html -IncludePrerelease ## Next steps -See [Render a card](render-a-card.md) for the next steps! \ No newline at end of file +See [Render a card](render-a-card.md) for the next steps! diff --git a/AdaptiveCards/templating/index.md b/AdaptiveCards/templating/index.md index 46f513177..41d71ce08 100644 --- a/AdaptiveCards/templating/index.md +++ b/AdaptiveCards/templating/index.md @@ -185,7 +185,7 @@ The Templating SDKs make it possible to populate a template with real-data. Platform | Package | Install | Documentation --- | --- | --- | --- JavaScript | [![npm install](https://img.shields.io/npm/v/adaptivecards-templating.svg)](https://www.npmjs.com/package/adaptivecards-templating) | `npm install adaptivecards-templating` | [Documentation](https://www.npmjs.com/package/adaptivecards-templating) -.NET | [![Nuget install](https://img.shields.io/nuget/vpre/AdaptiveCards.Templating.svg)](https://www.nuget.org/packages/AdaptiveCards.Templating) | `dotnet add package AdaptiveCards.Templating` | [Documentation](https://docs.microsoft.com/adaptive-cards/templating/sdk#net) +.NET | [![Nuget install](https://img.shields.io/nuget/vpre/AdaptiveCards.Templating.svg)](https://www.nuget.org/packages/AdaptiveCards.Templating) | `dotnet add package AdaptiveCards.Templating` | [Documentation](./sdk.md#net) ### JavaScript Example @@ -235,4 +235,4 @@ All templates are flat JSON files stored in a GitHub repo so anyone can contribu ## What's next and sending feedback -Templating and the separation of presentation from data takes us a whole lot closer toward our mission: "an ecosystem standardized content exchange between apps and services". We've got plenty to deliver in this area, so stay tuned and let us know how it's working for you on [GitHub](https://github.com/Microsoft/AdaptiveCards/issues)! +Templating and the separation of presentation from data takes us a whole lot closer toward our mission: "an ecosystem standardized content exchange between apps and services". We've got plenty to deliver in this area, so stay tuned and let us know how it's working for you on [GitHub](https://github.com/Microsoft/AdaptiveCards/issues)! \ No newline at end of file diff --git a/AdaptiveCards/templating/language.md b/AdaptiveCards/templating/language.md index 54ef36195..f4fedef02 100644 --- a/AdaptiveCards/templating/language.md +++ b/AdaptiveCards/templating/language.md @@ -251,11 +251,11 @@ For example, the `TextBlock` below will be repeated 3 times since it's `$data` i ## Built-in functions -No templating language is complete without a rich suite of helper functions. Adaptive Card Templating is built on top of the [Adaptive Expression Language](https://aka.ms/adaptive-expressions) (AEL), which is an open standard for declaring expressions that can be evaluated on many different platforms. And it's a proper superset of "Logic Apps", so you can use similar syntax as Power Automate, etc. +No templating language is complete without a rich suite of helper functions. Adaptive Card Templating is built on top of the [Adaptive Expression Language](/azure/bot-service/bot-builder-concept-adaptive-expressions) (AEL), which is an open standard for declaring expressions that can be evaluated on many different platforms. And it's a proper superset of "Logic Apps", so you can use similar syntax as Power Automate, etc. **This is just a small sampling of the built-in functions.** -Check out the full list of [Adaptive Expression Language Pre-built functions](https://docs.microsoft.com/azure/bot-service/bot-builder-concept-adaptive-expressions?view=azure-bot-service-4.0). +Check out the full list of [Adaptive Expression Language Pre-built functions](/azure/bot-service/bot-builder-concept-adaptive-expressions?view=azure-bot-service-4.0). ### Conditional evaluation @@ -346,4 +346,4 @@ Currently there is no support for composing template "parts" together. But we ar ## Examples -Browse the updated [Samples page](https://adaptivecards.io/samples) to explore all sorts of new templated cards. +Browse the updated [Samples page](https://adaptivecards.io/samples) to explore all sorts of new templated cards. \ No newline at end of file diff --git a/AdaptiveCards/templating/sdk.md b/AdaptiveCards/templating/sdk.md index dda0bba14..5a31d4b68 100644 --- a/AdaptiveCards/templating/sdk.md +++ b/AdaptiveCards/templating/sdk.md @@ -194,4 +194,4 @@ A. If your error message looks like" **Check if parent data context is set, or p It indicates that there doesn't exist data context for the requested data binding. Please ensure that root data context is set, if exists, ensure that any data context is available for current binding as indicated by the line number. Q. Why date/time in RFC 3389 format e.g "2017-02-14T06:08:00Z" when used with template doesn't works with TIME/DATE functions? -A. .NET sdk nuget version 1.0.0-rc.0 exhibits this behavior. this behavior is corrected in the subsequent releases. json.Net deserilizer's default behavior changes date/time format string, and it's disabled for the subsequent releases. Please use formatDateTime() function to format the date/time string to RFC 3389 as seen in [this example](https://github.com/microsoft/AdaptiveCards/blob/db99ee07dadf317fe45e114a508e3de6e4325d0f/samples/Templates/Elements/Template.Functions.DateFunctions.json#L28), or you can bypass TIME/DATE functions, and just use formatDateTime(). For more information on formatDateTime(), please go [here](https://docs.microsoft.com/azure/bot-service/adaptive-expressions/adaptive-expressions-prebuilt-functions?view=azure-bot-service-4.0#date-and-time-functions). +A. .NET sdk nuget version 1.0.0-rc.0 exhibits this behavior. this behavior is corrected in the subsequent releases. json.Net deserilizer's default behavior changes date/time format string, and it's disabled for the subsequent releases. Please use formatDateTime() function to format the date/time string to RFC 3389 as seen in [this example](https://github.com/microsoft/AdaptiveCards/blob/db99ee07dadf317fe45e114a508e3de6e4325d0f/samples/Templates/Elements/Template.Functions.DateFunctions.json#L28), or you can bypass TIME/DATE functions, and just use formatDateTime(). For more information on formatDateTime(), please go [here](/azure/bot-service/adaptive-expressions/adaptive-expressions-prebuilt-functions?view=azure-bot-service-4.0#date-and-time-functions). \ No newline at end of file diff --git a/AdaptiveCards/toc.yml b/AdaptiveCards/toc.yml index 2bb069953..c617deaf2 100644 --- a/AdaptiveCards/toc.yml +++ b/AdaptiveCards/toc.yml @@ -20,6 +20,9 @@ href: authoring-cards/text-features.md - name: Input Validation href: authoring-cards/input-validation.md + - name: Universal Bot Action Model + href: authoring-cards/universal-action-model.md + - name: Rendering Cards items: - name: Getting Started