Sin bien es cierto que el Microsoft Bot Framework viene con un buen número de opciones para mostrar información a los usuarios de nuestro bot existen algunos escenarios en los que necesitaremos personalizar aún más nuestras cards y experimentar con nuevas formas de presentar información a nuestros usuarios, para esos escenarios tenemos la opción de utilizar Adaptive Cards.

Las Adaptive Cards son el formato de intercambio de tarjeta abierta que permite a los desarrolladores intercambiar el contenido de la interfaz de usuario de una manera habitual y coherente.
Fuente https://docs.microsoft.com/es-es/adaptive-cards/

Con Adaptive Cards nosotros somos los encargados de crear nuestro contenido dentro de un objeto JSON, el cual se representará dentro de una aplicación cliente adaptándose a la implementación dentro del contexto del cliente.

En mi experiencia existe consistencia en los clientes de las aplicaciones en los diferentes entornos al mostrar las Adaptive Cards, sin embargo, deberías probar tus implementaciones en cada una de las aplicaciones para evitar inconvenientes.

Adaptive Cards ofrecen documentación, además de un diseñador que te permitirá estructurar tus vistas y visualizarlas en tiempo real, puedes visitar la página del proyecto en el siguiente link https://adaptivecards.io/.

Para comenzar a utilizar Adaptive Cards debes agregar el paquete Nuget AdaptiveCards y enviar tu card como un “Attachment” en tu Activity de respuesta.

Creando Adaptive Card desde JSON

Una vez que diseñes y pruebes tu Adaptive Card en el portal puedes comenzar a utilizarla, solo debes descargar tu diseño y posteriormente cargarlo modificar los datos necesarios y enviarlo a la conversación por medio del Bot Framework tal como lo muestra el siguiente código.

private async Task<Attachment> CreateAdaptiveCardAsync()
        {
            HttpClient client = new HttpClient();
            HttpResponseMessage response = await client.GetAsync("https://adaptivecards.io/payloads/Weatherlarge.json");
            string json = await response.Content.ReadAsStringAsync();

            AdaptiveCardParseResult result = AdaptiveCard.FromJson(json);
            AdaptiveCard adaptiveCard = result.Card;
            Attachment attachment = new Attachment()
            {
                ContentType = AdaptiveCard.ContentType,
                Content = adaptiveCard
            };
            return attachment;
        }

Con lo que obtendremos el siguiente resultado.

Adaptive Cards también nos permite crear nuestros diseños desde c# tal como lo muestra el siguiente código.

private Attachment CreateAdaptiveCardByCode()
        {
            AdaptiveCard adaptiveCard = new AdaptiveCard("1.0");

            adaptiveCard.Body.Add(new AdaptiveTextBlock
            {
                Text= "Más personalización utilizando AdaptiveCards",
                Weight=AdaptiveTextWeight.Bolder,
                Size=AdaptiveTextSize.Medium
            });

            adaptiveCard.Body.Add(new AdaptiveColumnSet
            {
                Columns=new List<AdaptiveColumn>
                {
                    new AdaptiveColumn
                    {
                        Width="auto",
                        Items=new List<AdaptiveElement>
                        {
                            new AdaptiveImage()
                            {
                                Url=new Uri("/images/2019/05/profile-2.jpg"),
                                Size=AdaptiveImageSize.Small,
                                Style=AdaptiveImageStyle.Person
                            }
                        }
                    },
                    new AdaptiveColumn
                    {
                        Width="stretch",
                        Items=new List<AdaptiveElement>
                        {
                            new AdaptiveTextBlock
                            {
                                Text="Saturnino Pimentel",
                                Weight=AdaptiveTextWeight.Bolder,
                                Wrap=true
                            }
                        }
                    }
                }
            });
            adaptiveCard.Body.Add(new AdaptiveTextBlock()
            {
                Text = "Sin bien es cierto que el **Microsoft Bot Framework** viene con un buen número de opciones para mostrar información a los usuarios de nuestro bot existen algunos escenarios en los que necesitaremos personalizar aún más nuestras cards y experimentar con nuevas formas de presentar información a nuestros usuarios, para esos escenarios tenemos la opción de utilizar Adaptive Cards.",
                Wrap = true
            });

            Attachment attachment = new Attachment()
            {
                ContentType = AdaptiveCard.ContentType,
                Content = adaptiveCard
            };
            return attachment;
        }

El resultado del código anterior será el siguiente y como podrás darte cuenta la card a seguido el diseño que le hemos asignado por código.

Conclusiones

Adaptive Cards nos permiten incrementar nuestras opciones al trabajar con el Bot Framework y ofrecer a los usuarios de nuestro Bot una mejor experiencia. Solo recuerda probar tus diseños antes en las diferentes aplicaciones del canal para comprobar que todo funciona y no tener contratiempos inesperados.

@SaturPimentel
¡Saludos!