Adaptive Card

With this type of card, application developers can visualize and reuse cards that are created using the Microsoft Adaptive Cards specification and manifest. Default and Numeric card headers can be optionally used in order to provide a title and general information about the Adaptive Card. The content of the card consist of a JSON object, which defines the card structure, content, and actions. For more information of all properties of Adaptive Card, see https://adaptivecards.io.

Usage

• Loading - The JSON-serialized card object model of a MS Adaptive Card could be added inline or dynamically, requested as a JSON file in the content area of an Integration Card.


• Templating - Templating enables the separation of data from the layout in an MS Adaptive Card. To provide data directly within the card content, simply add a $data attribute to your Adaptive Card JSON card model, as shown in the Templating example. Data could be provided also by using the data feature of the Integration Card on both card and content level. This way the data could also be included directly in the manifest, or loaded dynamically from a separated JSON file. As this is a feature of the MS Adaptive Card the templating syntax may differ from UI5 binding syntax. For more information, see Adaptive Cards Templating.
  
  Note: As of version 1.98 the Integration Cards of type adaptive, support the new binding syntax of the Templating feature. For reference, check Adaptive Cards Templating Language. Keep in mind that Microsoft Templating for Adaptive Cards is evolving and might be a subject of incompatible changes in future as well.


• Markdown - To support inline markup, MS Adaptive Card supports a subset of Commonmark Markdown syntax. In order to enable this feature, set the enableMarkdown boolean property to true and add it in the configuration object under sap.card of the manifest. See the Markdown example.


• Actions - The Action.OpenUrl and Action.Submit are dispatched by the card as Navigation and Submit. Their event parameters could be accessed when attached to the action event of the Integration Card. The following parameters will be received: Action.OpenUrl

  The developers of the Adaptive Card are able to add button(s) with an URL link to navigate to. For more information see the OpenURL action example.

  Property	Value	Since
  type	"Navigation"	1.74
  parameters	url (property of the Action.OpenUrl)	1.74

  Action.Submit

  The developers of the Adaptive Card manifest are able to specify the target endpoint for each request by defining the URL property of the Submit action handler in the 'configuration/actionHandlers' section of the card. Тhe request type can be defined using the "method" property in the same configuration section. This allows them to configure where the data from the card will be sent. It is essential, as this information is not always available for the host environment developers. For more information see the Submit action example.

  Property	Value	Since
  type	"Submit"	1.74
  parameters	data (property of the Action.Submit)	1.74

Example

Define the type of the card:

{
	"sap.card": {
		"type": "AdaptiveCard",
		"content": {}
	}
}

Define the content of the card by including the JSON-serialized card object model inline:

"content": {
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [
		{
			"type": "TextBlock",
			"text": "Publish Adaptive Card schema",
			"weight": "Bolder",
			"size": "Medium"
		},
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"width": "auto",
					"items": [
						{
							"type": "Image",
							"url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
							"size": "Small",
							"style": "Person"
						}
					]
				},
				{
					"type": "Column",
					"width": "auto",
					"items": [
						{
							"type": "TextBlock",
							"text": "Matt Hidinger",
							"weight": "Bolder",
							"wrap": true
						}
					]
				}
			]
		},
		{
			"type": "TextBlock",
			"text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
			"wrap": true
		},
		{
			"type": "FactSet",
			"facts": [
				{
					"title": "Board:",
					"value": "Adaptive Card"
				},
				{
					"title": "List:",
					"value": "Backlog"
				}
			]
		}
	],
	"actions": [
		{
			"type": "Action.ShowCard",
			"title": "Set due date",
			"card": {
				"type": "AdaptiveCard",
				"body": [
					{
						"type": "Input.Date",
						"id": "dueDate"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "OK"
					}
				]
			}
		}
	]
}

Or load it from a JSON file:

"content": {
	"request": {
		"url": "./adaptiveCard.json"
	}
}

You could also include configuration for the Action.Submit:

{
	"sap.card": {
		"configuration": {
			"actionHandlers": {
				"submit": {
					"url": "./NorthwindSvc/formData",
					"method": "POST"
				}
			}
		},
		"type": "AdaptiveCard",
		"content": {}
	}
}

Create the view to display the card:

<mvc:View xmlns:w="sap.ui.integration.widgets">
	<w:Card manifest="./manifest.json" width="400px" height="auto"/>
</mvc:View>

Try it Out

UI5 Web Components Version

Adaptive Cards make use of customized bundle of UI5 Web Components version 1.7.0.