4
votes

I'm trying to use a Adaptive Card json in a message that i'm sending to the Bot Framework Channel Emulator. However the emulator gives the message "Can't render card".

Im using the standard sample card from the visualizer. http://adaptivecards.io/visualizer/

To send the adaptive card im using the following code: using an example from: https://github.com/Microsoft/AdaptiveCards/issues/411

using System;
using System.Threading.Tasks;
using Microsoft.Bot.Builder.Dialogs;
using Microsoft.Bot.Connector;
using AdaptiveCards;
using System.IO;
using System.Diagnostics;
using System.Web.Hosting;

namespace Chatbot_Proberen.Dialogs
{
    [Serializable]
    public class RootDialog : IDialog<object>
    {
    public Task StartAsync(IDialogContext context)
    {
        context.Wait(MessageReceivedAsync);

        return Task.CompletedTask;
    }

    private async Task MessageReceivedAsync(IDialogContext context, IAwaitable<object> result)
    {
        var activity = await result as Activity;

        var returnMessage = context.MakeMessage();

        returnMessage.Attachments.Add(new Attachment()
        {
            Content = await GetCardText("ParkMogelijkheden"),
            ContentType = AdaptiveCard.ContentType,
            Name = "Card"
        });

        Debug.WriteLine(returnMessage.Attachments[0].Content);
        await context.PostAsync(returnMessage);
    }

    public async Task<string> GetCardText(string cardName)
    {
        var path = HostingEnvironment.MapPath($"/{cardName}.json");
        if (!File.Exists(path))
            return string.Empty;

        using (var f = File.OpenText(path))
        {
            return await f.ReadToEndAsync();
        }
    }
}
}

Im using:

Adaptive Card 0.5.1.0

Channel Emulator v3.5.31

Edit:

Json adaptive card:

{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
    {
        "type": "Container",
        "items": [
            {
                "type": "TextBlock",
                "text": "Publish Adaptive Card schema",
                "weight": "bolder",
                "size": "medium"
            },
            {
                "type": "ColumnSet",
                "columns": [
                    {
                        "type": "Column",
                        "width": "auto",
                        "items": [
                            {
                                "type": "Image",
                                "url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
                                "size": "small",
                                "style": "person"
                            }
                        ]
                    },
                    {
                        "type": "Column",
                        "width": "stretch",
                        "items": [
                            {
                                "type": "TextBlock",
                                "text": "Matt Hidinger",
                                "weight": "bolder",
                                "wrap": true
                            },
                            {
                                "type": "TextBlock",
                                "spacing": "none",
                                "text": "Created {{DATE(2017-02-14T06:08:39Z,Short)}}",
                                "isSubtle": true,
                                "wrap": true
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        "type": "Container",
        "items": [
            {
                "type": "TextBlock",
                "text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
                "wrap": true
            },
            {
                "type": "FactSet",
                "facts": [
                    {
                        "title": "Board:",
                        "value": "Adaptive Card"
                    },
                    {
                        "title": "List:",
                        "value": "Backlog"
                    },
                    {
                        "title": "Assigned to:",
                        "value": "Matt Hidinger"
                    },
                    {
                        "title": "Due date:",
                        "value": "Not set"
                    }
                ]
            }
        ]
    }
],
"actions": [
    {
        "type": "Action.ShowCard",
        "title": "Set due date",
        "card": {
            "type": "AdaptiveCard",
            "body": [
                {
                    "type": "Input.Date",
                    "id": "dueDate",
                    "title": "Select due date"
                }
            ],
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "OK"
                }
            ]
        }
    },
    {
        "type": "Action.ShowCard",
        "title": "Comment",
        "card": {
            "type": "AdaptiveCard",
            "body": [
                {
                    "type": "Input.Text",
                    "id": "comment",
                    "isMultiline": true,
                    "placeholder": "Enter your comment"
                }
            ],
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "OK"
                }
            ]
        }
    },
    {
        "type": "Action.OpenUrl",
        "title": "View",
        "url": "http://adaptivecards.io"
    }
]
}

I've tried changing the json, to get a simpler card:

{
 "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
 "type": "AdaptiveCard",
 "body": [
 {
   "type": "Container",
   "items": [
     {
       "type": "TextBlock",
       "text": "Publish Adaptive Card schema",
       "weight": "bolder",
       "size": "medium"
     }
   ]
 }
 ]
}

I made this same card as a C# AdaptiveCard object.

        AdaptiveCard ac = new AdaptiveCard()
        {
            Body =
            {
                new Container()
                {
                    Items =
                    {
                        new TextBlock()
                        {
                            Text = "Publish Adaptive Card schema",
                            Weight = TextWeight.Bolder,
                            Size = TextSize.Medium
                        }
                    }
                }
            }
        };

And when I post that object to the Channel Emulator it does show correctly.

When I serialize the C# object it generates the following json:

{
"type": "AdaptiveCard",
"body": [{
    "type": "Container",
    "items": [{
        "type": "TextBlock",
        "size": "medium",
        "weight": "bolder",
        "text": "Publish Adaptive Card schema"
    }],
    "style": null
}]
}

This json doesnt work when I post it to the Channel Emulator.

1
Please post the card JSONEzequiel Jadib
I've added the adaptive card json.user8689373
The emulator does not currently support "version": "1.0" of Adaptive Cards. Please try removing that line.Eric Dahlvang
I removed that line but still the emulator doesnt show the card correctly.user8689373
I made some changes to the card im trying to show in the emulator, so its a bit simpler.user8689373

1 Answers

5
votes

Use the AdaptiveCard.FromJson() method to set the attachment's Content property.

var json = await GetCardText("ParkMogelijkheden");
var results = AdaptiveCard.FromJson(json);
var card = results.Card;
returnMessage.Attachments.Add(new Attachment()
{
    Content = card,
    ContentType = AdaptiveCard.ContentType,
    Name = "Card"
});