Plantillas de tarjetas adaptables

Nos complace compartir una vista previa de las nuevas herramientas que le ayudarán a crear, reutilizar y compartir tarjetas adaptables.

Cambios importantes a partir de mayo de 2020

1. La sintaxis de enlace ha cambiado de {...} a ${...}.
   • Por ejemplo: "text": "Hello {name}" se convierte en "text": "Hello ${name}"
2. La API de JavaScript ya no contiene un EvaluationContext objeto . Simplemente pase los datos a la expand función. Consulte la página del SDK para obtener más información.
3. La API de .NET se ha rediseñado para que coincida más estrechamente con la API de JavaScript. Consulte la página del SDK para obtener más información.

¿Cómo puede ayudarle la creación de plantillas?

La creación de plantillas permite separar los datos del diseño en una tarjeta adaptable.

Ayuda a diseñar una tarjeta una vez y, a continuación, rellenarla con datos reales

Hoy en día es imposible crear una tarjeta mediante el Diseñador de tarjetas adaptables y usar ese JSON para rellenar la carga con contenido dinámico. Para lograr esto, debe escribir código personalizado para compilar una cadena JSON o usar los SDK del modelo de objetos para compilar un OM que represente la tarjeta y serializarlo en JSON. En cualquier caso, el Diseñador es una operación unidireccional única y no facilita el ajuste del diseño de la tarjeta más adelante una vez que lo haya convertido en código.

Hace que las transmisiones a través del cable sean más pequeñas

Imagine un mundo en el que una plantilla y los datos se pueden combinar directamente en el cliente. Esto significa que si usa la misma plantilla varias veces o desea actualizarla con nuevos datos, simplemente necesita enviar los nuevos datos al dispositivo y puede reutilizar la misma plantilla una y otra vez.

Le ayuda a crear una tarjeta de aspecto excelente a partir de solo los datos que proporcione.

Creemos que las tarjetas adaptables son excelentes, pero ¿qué ocurre si no tienes que escribir una tarjeta adaptable para todo lo que quieras mostrar a un usuario? Con un servicio de plantilla (descrito a continuación), podemos crear un mundo en el que todos los usuarios puedan contribuir, descubrir y compartir plantillas en cualquier tipo de datos.

Comparta dentro de sus propios proyectos, su organización o con toda Internet.

La inteligencia artificial y otros servicios podrían mejorar las experiencias del usuario

Al separar los datos del contenido, abre una puerta para la inteligencia artificial y otros servicios para "razonar" sobre los datos de las tarjetas que vemos y mejorar la productividad del usuario o ayudarnos a encontrar cosas.

¿Qué es plantillas de tarjetas adaptables?

Consta de 3 componentes principales:

1. El lenguaje de plantilla es la sintaxis utilizada para crear una plantilla. El Diseñador incluso le permite obtener una vista previa de las plantillas en tiempo de diseño mediante la inclusión de "datos de ejemplo".
2. El SDK de plantillas existirá en todas las plataformas de tarjetas adaptables compatibles. Estos SDK permiten rellenar una plantilla con datos reales, en el back-end o directamente en el cliente.
3. El servicio de plantillas es un servicio de prueba de concepto que permite a cualquier persona encontrar, contribuir y compartir un conjunto de plantillas conocidas.

Lenguaje de plantilla

El lenguaje de plantilla es la sintaxis utilizada para crear una plantilla de tarjeta adaptable.

El diseñador recién actualizado agrega compatibilidad para la creación de plantillas y proporciona Datos de ejemplo para obtener una vista previa de la tarjeta en momento de diseño.

Pegue el ejemplo siguiente en el panel Editor de carga de tarjeta :

EmployeeCardTemplate.json

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "ColumnSet",
            "style": "accent",
            "bleed": true,
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${photo}",
                            "altText": "Profile picture",
                            "size": "Small",
                            "style": "Person"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Hi ${name}!",
                            "size": "Medium"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Here's a bit about your org...",
                            "spacing": "None"
                        }
                    ]
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "Your manager is: **${manager.name}**"
        },
        {
            "type": "TextBlock",
            "text": "Your peers are:"
        },
        {
            "type": "FactSet",
            "facts": [
                {
                    "$data": "${peers}",
                    "title": "${name}",
                    "value": "${title}"
                }
            ]
        }
    ]
}

Después, pegue los datos JSON siguientes en el Editor de Datos de Ejemplo.

Datos de Ejemplo le ayudan a ver exactamente cómo aparecerá su tarjeta en el tiempo de ejecución cuando se pasa datos reales.

EmployeeData

{
    "name": "Matt",
    "photo": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
    "manager": {
        "name": "Thomas",
        "title": "PM Lead"
    },
    "peers": [
        {
            "name": "Lei",
            "title": "Sr Program Manager"
        },
        {
            "name": "Andrew",
            "title": "Program Manager II"
        },
        {
            "name": "Mary Anne",
            "title": "Program Manager"
        }
    ]
}

Haga clic en el botón Modo de vista previa . Debería ver que la tarjeta se muestra según los datos de ejemplo proporcionados anteriormente. No dude en realizar ajustes en los datos de ejemplo y ver la actualización de la tarjeta en tiempo real.

Enhorabuena, acaba de crear su primera plantilla de tarjeta adaptable. A continuación, vamos a aprender a rellenar la plantilla con datos reales.

Más información sobre el lenguaje de plantilla

Compatibilidad con SDK

Los SDK de plantillas permiten rellenar una plantilla con datos reales.

Plataforma	Paquete	Instalar	Documentación
JavaScript		npm install adaptivecards-templating	Documentación
.NET		dotnet add package AdaptiveCards.Templating	Documentación

Ejemplo de JavaScript

En javaScript siguiente se muestra el patrón general que se usará para rellenar una plantilla con datos.

var template = new ACData.Template({ 
    // Card Template JSON
});

var card = template.expand({
    $root: {
        // Data Fields
    }
});

// Now you have an AdaptiveCard ready to render!

Ejemplo de C#

A continuación, en C# se muestra el patrón general que se usará para rellenar una plantilla con datos.

var template = new AdaptiveCards.Templating.AdaptiveCardTemplate(cardJson);
   
var card = template.Expand(new {Key="Value"});

// Now you have an AdaptiveCard ready to render!

Más información sobre los SDK de plantillas

Servicio de plantilla

El servicio de plantillas de tarjetas adaptables es un servicio de prueba de concepto que permite a cualquier persona encontrar, contribuir y compartir un conjunto de plantillas conocidas.

Es útil si desea mostrar algunos datos, pero no desea molestarse en escribir una tarjeta adaptable personalizada para ello.

La API para obtener una plantilla es lo suficientemente sencilla, pero el servicio realmente ofrece mucho más, incluida la capacidad de analizar los datos y encontrar una plantilla que pueda funcionar para usted.

HTTP GET https://templates.adaptivecards.io/graph.microsoft.com/Profile.json

Todas las plantillas son archivos JSON planos almacenados en un repositorio de GitHub para que cualquier usuario pueda contribuir a ellas como cualquier otro código fuente abierto.

Más información sobre el servicio de plantilla de tarjeta

Próximos pasos y enviar comentarios

La creación de plantillas y la separación de la presentación de los datos nos lleva mucho más cerca de nuestra misión: "un intercambio de contenido estandarizado por el ecosistema entre aplicaciones y servicios". Tenemos mucho que ofrecer en esta área, así que manténgase atento y háganos saber cómo funciona para usted en GitHub.