How do I attach RenderedAdaptiveCard to WebChat channel context

[CalvinFengDatacom]

I would like to attach RenderedAdaptiveCard to WebChat channel. Here is my code, think I got problem of defining the ContentType to AdaptiveCard.ContentType. Any ideas of how to attach the rendered adaptive card as HTML content type?

RenderedAdaptiveCard renderedAdaptiveCard = renderer.RenderCard(adaptiveCard); HtmlTag htmlTag = renderedAdaptiveCard.Html;

        Attachment plAttachment = new Attachment()
        {
            ContentType = AdaptiveCard.ContentType,
            Content = htmlTag,
            Name = "ShowTenancyBondRequestForm"
        };

[EricDahlvang]

Hi @CalvinFengDatacom

If you are using the Bot Builder's .net sdk, it is not necessary to render the card on the server before adding it as an attachment. The Bot Builder will convert the card attachment to .json, and the WebChat control will convert the .json to html when displaying it.

Attachment attachment = new Attachment()
{
    ContentType = AdaptiveCard.ContentType,
    Content = adaptiveCard
};
replyMessage.Attachments.Add(attachment);

Is this approach not working for you?

[CalvinFengDatacom]

Hi @EricDahlvang Thank you for your reply. I was using AdaptiveCard class to assemble a card and using the same way as your suggested. However, in WebChat channel, I see there are many limitations of the rendering, so I found another class, called RenderedAdaptiveCard, which contains many properties that looks I can render the card more flexible, like Spacing.

So, I assembled my adaptive card following the steps from https://docs.microsoft.com/en-us/adaptive-cards/display/libraries/net-html However, after I attached the card in Attachment, I can't find any different with using AdaptiveCard class. So, I just wondering, is there any other way of attaching the RenderedAdaptiveCard?

Thanks, and merry Xmas.

[dclaux]

Hi @CalvinFengDatacom what rendering imitations are you referring to in the WebChat control? There shouldn't be any.

[CalvinFengDatacom]

@dclaux I'm assembling an adaptive card with C# class of AdaptiveCard and deployed into WebChat channel. Then I realized I can't control the spaces between each elements, like AdaptiveTextBox and AdaptiveTextInput. I have tried to add few spaces with the code like this but still not rendering as space:

new AdaptiveTextBlock()
{
       Text = " ",
       Spacing = AdaptiveSpacing.Medium,
}

Currently, I'm rendering the AdaptiveCard object with the following code:

RenderedAdaptiveCard renderedAdaptiveCard = renderer.RenderCard(adaptiveCard);
HtmlTag htmlTag = renderedAdaptiveCard.Html;
Attachment plAttachment = new Attachment()
{
       ContentType = AdaptiveCard.ContentType,
       Content = renderedAdaptiveCard.OriginatingCard
};
reply.Attachments.Add(plAttachment);

My question here is how to render this AdaptiveCard appropriately, which method should I use to attach it? I can't see the spaces in adaptive card with using the rendering method above, seems the spaces are not being rendered.

[dclaux]

@CalvinFengDatacom what I can tell you is that with Adaptive Cards you control spacing on a per-element basis in terms of "how much space should there be between the element in question and the previous one". So this:

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
                        "text": "First text block"
                },
        {
            "type": "TextBlock",
                        "text": "Second text block",
                        "spacing": "extraLarge"
                }
        ]
}

Results in this:

E.g. there is an "extra large" amount of space above the second text block to separate it from whatever element comes before it, in this case the first text block.

If you follow this principle, things should work nicely. You do not need empty text blocks.

If things still don't work the way you want after that, then there might be some bug with the library you use server-side to craft your card.

[CalvinFengDatacom]

@dclaux Thanks, but I'm currently using C# SDK for assembling the adaptive card, not node JS. But, it seems not rendered exactly like Node JS. There will be a line between each elements if I set Spacing = AdaptiveSpacing.ExtraLarge. So, I'm concern, whether the adaptive card being rendered card with C# SDK will be different with using Node JS?

I also realised, the adaptive card I created is available on WebChat control, but unavailable in Facebook Message. Is it because I assembled the adaptive card with using C# SDK? (The adaptive card I created mainly has Input, Textbox, Choice elements)

[dclaux]

@CalvinFengDatacom then as I said above there might be a bug in the C# SDK. @matthidinger can you chime in?

[yogiderek]

I had the same problem with the separator being added and raised an issue on the emulator repo thinking that was where the problem was

https://github.com/Microsoft/BotFramework-Emulator/issues/379

Problem happened on Spacing = AdaptiveSpacing.Large and above.

[CalvinFengDatacom]

Yes, same with me. And, I realize the format of adaptive card running in Emulator is different with WebChat channel. Is there any way that I can adjust the format exactly same with Emulator's?

[dclaux]

@CalvinFengDatacom it should be the other way around - the emulator should align with WebChat which is more up to date.

[CalvinFengDatacom]

@dclaux Can you share a snippet of your code that you create the adaptive card? I'm using C# SDK. Do you have any code samples of using C# SDK?

[dclaux]

I don't have such code, sorry. I don't write Bots. However, I am the author of the HTML Adaptive renderer as used in the WebChat control and am on top of the latest Adaptive spec. WebChat seems to be more up to date than the emulator.

As far as I can tell, your C# code that creates the card is correct and should show in the emulator the same as it does in WebChat.

[CalvinFengDatacom]

@dclaux Cool! Thank you for your explanation, I think for now its acceptable. Do you have any idea why my adaptive card does not appear in Facebook Messenger channel? Does it because Facebook Messenger is not supporting TextInput or Choice yet?

[dclaux]

I don't know, sorry. Hopefully someone more familiar with the Bot framework than me can chime in and help you out.

[CalvinFengDatacom]

No worries, I will go do more research. Thank you @dclaux

[andrewleader]

Closing as inactive. Let us know if you still need help!