Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Nota:
¿Está creando escenarios de Copilot, Teams o Outlook con tecnología de tarjetas adaptables? Visite el Centro de documentación de tarjetas adaptables, la nueva tienda única para todas sus necesidades de tarjeta adaptable. Tiene todos los recursos que busca, incluida la documentación completa para muchas características nuevas, como diseño dinámico, icono, distintivo, carrusel, gráficos, etc.
Estas muestras son solo un teaser del tipo de tarjetas que puede crear. ¡Continúe y retoquelos para hacer posible cualquier escenario!
Nota importante sobre la accesibilidad: En la versión 1.3 del esquema se introdujo una propiedad label en Entradas para mejorar la accesibilidad. Si la aplicación anfitriona a la que está orientando admite la versión 1.3, debe usar etiqueta en lugar de TextBlock, como se muestra en algunos ejemplos a continuación. Una vez que la mayoría de las aplicaciones host se hayan actualizado a la versión más reciente, actualizaremos los ejemplos según corresponda.
Ejemplo de actualización de actividad
En la sección siguiente se muestra el código JSON de un ejemplo de tarjeta adaptable "Actualización de actividad", que se muestra con y sin plantillas.
Código JSON (sin plantillas)
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"
}
]
}
}
]
}
Código JSON (con plantillas)
JSON de datos
{
"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" }
]
}
JSON de plantilla
{
"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"
}