Add Card attachment to message using Microsoft Bot Framework

Question

Problem:

• Attaching a card to a response dialog, the following code is mostly taken from the bot samples, but does not display a card in the response dialog in the key pieces of display logic I pulled used.

I am having trouble doing attachment within in a LUIS Intent task.

Goal

• Have a user ask a question that LUIS does not recognize and then respond with a help card once the code jumps into the LUIS intent task responsible for handling the unrecognized. Is there some other structure of a help window I could consider, that still utilizes cards?

Code

Where my card should be displayed from

[LuisIntent("None")]    
public async Task NoneHandler(IDialogContext context, LuisResult result) {
        string worriedFace = "\U0001F61F";
        string smilingFace = "\U0001F642";

        await context.PostAsync("I'm sorry, I didn't get that " + worriedFace + '.');
        await context.PostAsync("Here are some things I know how to talk about!" + smilingFace);

        var message = context.MakeMessage();

        var attachment = new CardDialog().ReceiptCard();
        message.Attachments.Add(attachment);

        await context.PostAsync(message);
    }

Card Class of the View object I'ved created that I am trying to display.

namespace LUISBankingBot.Views
{
    using System.Collections.Generic;
    using Microsoft.Bot.Connector;
    using Microsoft.Bot.Builder.Dialogs;
    using System;
    using System.Threading.Tasks;

    public class CardDialog : IDialog<object>
    {
        public Task StartAsync(IDialogContext context)
        {
            throw new NotImplementedException();
        }

        public Attachment ReceiptCard()
        {
            var receiptCard = new ReceiptCard
            {
                Title = "John Doe",
                Facts = new List<Fact> { new Fact("Order Number", "1234"), new Fact("Payment Method", "VISA 5555-****") },
                Items = new List<ReceiptItem>
                {
                    new ReceiptItem("Data Transfer", price: "$ 38.45", quantity: "368", image: new CardImage(url: "https://github.com/amido/azure-vector-icons/raw/master/renders/traffic-manager.png")),
                    new ReceiptItem("App Service", price: "$ 45.00", quantity: "720", image: new CardImage(url: "https://github.com/amido/azure-vector-icons/raw/master/renders/cloud-service.png")),
                },
                Tax = "$ 7.50",
                Total = "$ 90.95",
                Buttons = new List<CardAction>
                {
                    new CardAction(
                        ActionTypes.OpenUrl,
                        "More information",
                        "https://account.windowsazure.com/content/6.10.1.38-.8225.160809-1618/aux-pre/images/offer-icon-freetrial.png",
                        "https://azure.microsoft.com/en-us/pricing/")
                }
            };

            return receiptCard.ToAttachment();
        }        
    }
}

Answer 1

A couple things. First, you are probably getting a null ref exception when you are trying to add the attachment as the attachments array hasn't been initialized yet.

message.Attachments = new List<Attachment>();

Also, you don't need to create the CardDialog. Here's an example that works:

    [LuisIntent("None")]
    public async Task NoneHandler(IDialogContext context, LuisResult result)
    {
        string worriedFace = "\U0001F61F";
        string smilingFace = "\U0001F642";

        await context.PostAsync("I'm sorry, I didn't get that " + worriedFace + '.');
        await context.PostAsync("Here are some things I know how to talk about!" + smilingFace);

        var message = context.MakeMessage();

        var receiptCard = new ReceiptCard
        {
            Title = "John Doe",
            Facts = new List<Fact> { new Fact("Order Number", "1234"), new Fact("Payment Method", "VISA 5555-****") },
            Items = new List<ReceiptItem>
            {
                new ReceiptItem("Data Transfer", price: "$ 38.45", quantity: "368", image: new CardImage(url: "https://github.com/amido/azure-vector-icons/raw/master/renders/traffic-manager.png")),
                new ReceiptItem("App Service", price: "$ 45.00", quantity: "720", image: new CardImage(url: "https://github.com/amido/azure-vector-icons/raw/master/renders/cloud-service.png")),
            },
            Tax = "$ 7.50",
            Total = "$ 90.95",
            Buttons = new List<CardAction>
            {
                new CardAction(
                    ActionTypes.OpenUrl,
                    "More information",
                    "https://github.com/amido/azure-vector-icons/raw/master/renders/traffic-manager.png",
                    "https://azure.microsoft.com/en-us/pricing/")
            }
        };

        message.Attachments = new List<Attachment>();
        message.Attachments.Add(receiptCard.ToAttachment());

        await context.PostAsync(message);
    }