Partager via

Mise à jour de l’activité

Note

Créez-vous des scénarios Copilot, Teams ou Outlook optimisés par des cartes adaptatives ? Visitez le Hub de documentation sur la carte adaptative, le nouveau magasin unique pour tous vos besoins en carte adaptative ! Il dispose de toutes les ressources que vous recherchez, y compris la documentation complète pour de nombreuses nouvelles fonctionnalités, telles que la disposition réactive, l’icône, le badge, le carrouel, les graphiques, etc.

Ces exemples sont juste un teaser du type de cartes que vous pouvez créer. Allez-y et ajustez-les pour rendre tout scénario possible !

Remarque importante sur l’accessibilité : Dans la version 1.3 du schéma, nous avons introduit une propriété d’étiquette sur les entrées pour améliorer l’accessibilité. Si l’application hôte que vous ciblez prend en charge la version 1.3, vous devez utiliser l’étiquette au lieu d’un TextBlock comme indiqué dans certains exemples ci-dessous. Une fois que la plupart des applications hôtes ont été mises à jour vers la dernière version, nous allons mettre à jour les exemples en conséquence.

Exemple de mise à jour d’activité

La section suivante affiche le code JSON d’un exemple de carte adaptative « Mise à jour d’activité », présentée avec ou sans modélisation.

Code JSON (sans création de modèles)

JSON

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"body": [
		{
			"type": "TextBlock",
			"text": "Publish Adaptive Card schema",
			"weight": "bolder",
			"size": "medium",
			"wrap": true,
			"style": "heading"
		},
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"width": "auto",
					"items": [
						{
							"type": "Image",
							"url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
							"altText": "Matt Hidinger",
							"size": "small",
							"style": "person"
						}
					]
				},
				{
					"type": "Column",
					"width": "stretch",
					"items": [
						{
							"type": "TextBlock",
							"text": "Matt Hidinger",
							"weight": "bolder",
							"wrap": true
						},
						{
							"type": "TextBlock",
							"spacing": "none",
							"text": "Created {{DATE(2017-02-14T06:08:39Z, SHORT)}}",
							"isSubtle": true,
							"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"
				},
				{
					"title": "Assigned to:",
					"value": "Matt Hidinger"
				},
				{
					"title": "Due date:",
					"value": "Not set"
				}
			]
		}
	],
	"actions": [
		{
			"type": "Action.ShowCard",
			"title": "Set due date",
			"card": {
				"type": "AdaptiveCard",
				"body": [
					{
						"type": "Input.Date",
						"label": "Enter the due date",
						"id": "dueDate"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "Send"
					}
				]
			}
		},
		{
			"type": "Action.ShowCard",
			"title": "Comment",
			"card": {
				"type": "AdaptiveCard",
				"body": [
					{
						"type": "Input.Text",
						"id": "comment",
						"isMultiline": true,
						"label": "Add a comment"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "OK"
					}
				]
			}
		}
	]
}

Code JSON (avec création de modèles)

JSON de données

{
	"title": "Publish Adaptive Card Schema",
	"description": "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.",
	"creator": {
		"name": "Matt Hidinger",
		"profileImage": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg"
	},
	"createdUtc": "2017-02-14T06:08:39Z",
	"viewUrl": "https://adaptivecards.io",
	"properties": [
		{ "key": "Board", "value": "Adaptive Cards" },
		{ "key": "List", "value": "Backlog" },
		{ "key": "Assigned to", "value": "Matt Hidinger" },
		{ "key": "Due date", "value": "Not set" }
	]
}

Modèle JSON

{
	"type": "AdaptiveCard",
	"body": [
		{
			"type": "TextBlock",
			"size": "medium",
			"weight": "bolder",
			"text": "${title}",
			"style": "heading",
			"wrap": true
		},
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"items": [
						{
							"type": "Image",
							"style": "person",
							"url": "${creator.profileImage}",
							"altText": "${creator.name}",
							"size": "small"
						}
					],
					"width": "auto"
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"weight": "bolder",
							"text": "${creator.name}",
							"wrap": true
						},
						{
							"type": "TextBlock",
							"spacing": "none",
							"text": "Created {{DATE(${string(createdUtc)}, SHORT)}}",
							"isSubtle": true,
							"wrap": true
						}
					],
					"width": "stretch"
				}
			]
		},
		{
			"type": "TextBlock",
			"text": "${description}",
			"wrap": true
		},
		{
			"type": "FactSet",
			"facts": [
				{
					"$data": "${properties}",
					"title": "${key}:",
					"value": "${value}"
				}
			]
		}
	],
	"actions": [
		{
			"type": "Action.ShowCard",
			"title": "Set due date",
			"card": {
				"type": "AdaptiveCard",
				"body": [
					{
						"type": "Input.Date",
						"label": "Enter the due date",
						"id": "dueDate"
					},
					{
						"type": "Input.Text",
						"id": "comment",
						"isMultiline": true,
						"label": "Add a comment"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "OK"
					}
				],
				"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
			}
		},
		{
			"type": "Action.OpenUrl",
			"title": "View",
			"url": "${viewUrl}",
			"role": "button"
		}
	],
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"version": "1.5"
}
  • Last updated on