Tengo un bot de Microsoft Teams que envía tarjetas adaptables. Quiero llenarlos dinámicamente con datos (por ejemplo, imágenes). Para hacerlo, tengo 2 archivos JSON diferentes. Uno con el diseño de la tarjeta y otro con los datos. ¿Cómo puedo vincular esos 2 archivos? ¿Cómo sabe el archivo de diseño de dónde obtener los datos? Soy nuevo en esto y un poco perdido ^^'
Este es el código de diseño:
{ "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "text": "Hello ${name}!" } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.4" }Este es mi código para los datos JSON:
{ "name": "Cute Name" }Así es como renderizo la tarjeta:
const rawDynamicGalleryCard = require("./adaptiveCards/dynamicGallery.json"); //show dynamic gallery card switch (txt) { case "dynamic": { const card = cardTools.AdaptiveCards.declare(rawDynamicGalleryCard).render(); await context.sendActivity({ attachments: [CardFactory.adaptiveCard(card)], }); }Si ejecuto el bot y escribo la palabra clave, obtengo esto: Respuesta del bot
La documentación sugiere el paquete adaptivecards-templating :
const ACData = require("adaptivecards-templating"); const dynamicGalleryTemplate = require("./adaptiveCards/dynamicGallery.json"); const dynamicGalleryData = require("./adaptiveCards/data.json"); const template = new ACData.Template(dynamicGalleryTemplate); const card = template.expand({ $root: dynamicGalleryData }); // Now you have an AdaptiveCard ready to render! (Esto supone que dynamicGallery.json es su "código de diseño" anterior, e hice una suposición total de dónde están sus datos json).