Customizing Adaptive Card appearance using RenderedAdaptiveCards inside bot framework SDK

Question

I am developing a Bot using Microsoft Bot Framework. I am using Adaptive Cards for displaying flights to users but they have a lot of limitations on their appearance. I am trying to render the adaptive card from one of the dialogs within my bot framework by creating a adaptive card renderer using my own hostconfig.json and then attaching the Html of my adaptive card back to the chat window. But its not working :(

    public static Attachment CreateFlight(Flight flight)
    {
        var renderedAdaptiveCard = AdaptiveCardRenderer
            .RenderCard(new AdaptiveCard
            {
                Body = new List<AdaptiveElement>
                {
                    new AdaptiveContainer {Items = CreateFlightAdaptiveElements(flight)}
                },
                Actions = new List<AdaptiveAction>
                {
                    new AdaptiveShowCardAction
                    {
                        Card = new AdaptiveCard
                        {
                            Body = new List<AdaptiveElement>
                            {   

                            },
                            Actions = new List<AdaptiveAction>
                            {
                                new AdaptiveSubmitAction
                                {
                                    Title = "Select",
                                    Data = flight.Segments.Select(x => $"{x.Airline} {x.FlightNo}")
                                        .Aggregate((i, j) => i + "/" + j),

                                }
                            },
                            BackgroundImage = new Uri($"{DomainUrl}/Images/ac_background.jpg")
                        },
                        Title = "Select"
                    },

                },
                BackgroundImage = new Uri($"{DomainUrl}/Images/ECEFF1.png")
            });

        var attachment = new Attachment
        {   
            ContentType = "application/html",
            Content = renderedAdaptiveCard.Html
        };

        return attachment;
    }

Am I trying something that is impossible here ? How to change the default grey looks of my bot ? My primary channels would be Skype, Slack etc so I don't have plans to integrate this to a Web Chat. Kindly help me with this regard.

Kyle Delaney Kyle Delaney · Accepted Answer · 2018-09-24T21:46:03

The idea behind Adaptive Cards is to allow each channel to render the cards in a way that's specific to that channel. A card "adapts" to any environment that might support it. While Adaptive Cards offer a lot of flexibility, the bot can only do so much because it's ultimately the channel that's in charge of rendering the card.

Card Authors describe their content as a simple JSON object. That content can then be rendered natively inside a Host Application, automatically adapting to the look and feel of the Host.

For example, Contoso Bot can author an Adaptive Card through the Bot Framework, and when delivered to Skype, it will look and feel like a Skype card. When that same payload is sent to Microsoft Teams, it will look and feel like Microsoft Teams. As more host apps start to support Adaptive Cards, that same payload will automatically light up inside these applications, yet still feel entirely native to the app.

Users win because everything feels familiar. Host apps win because they control the user experience. And Card Authors win because their content gets broader reach without any additional work.

As you probably know, the RenderedAdaptiveCard type is meant to be used in client-side code. That means it can help you if you want to make your own channel for example, but it's not really meant to be used in a bot. Your code isn't working because there is no HTML attachment type and most channels don't support HTML at all. You can find more information in this question and this GitHub issue.

Hopefully you can achieve the appearance you're looking for using the tools available to you, such as images and links.

Customizing Adaptive Card appearance using RenderedAdaptiveCards inside bot framework SDK

1 Answers