CODEWITHSUNDEEP
c#botsbotframework
Bruno Klein
Bruno Klein

Reputation: 3367

How to use cards within `Dialog`

I am trying to use the fluent API to create a simple flow. But instead of using plain text I want to use rich visual components. Here is an example.

    public async Task<HttpResponseMessage> Post([FromBody]Activity activity)
    {
        var yn = Chain
            .PostToChain()
            .Select(m => CreateYesNoPrompt(activity)) //This is a dialog which should provide some buttons to the user
            .PostToUser()
            .WaitToBot()
            .Select(x => x.Text)
            .Switch
            (
                Chain.Case
                (
                    s => s == "S",
                    new ContextualSelector<string, IDialog<string>>((context, item) => Chain.Return("Yes"))
                ),
                Chain.Default<string, IDialog<string>>((context, text) => Chain.Return("No"))
            )
            .Unwrap()
            .PostToUser();

        await Conversation.SendAsync(activity, () => yn);

        return Request.CreateResponse(HttpStatusCode.OK);
    }


    private static Activity CreateYesNoPrompt(Activity activity)
    {
        var reply = activity.CreateReply();

        var ybutton = new CardAction(type: "postBack", title: "Yes", value: "S");
        var nbutton = new CardAction(type: "postBack", title: "No", value: "N");

        var buttons = new List<CardAction>() { ybutton, nbutton };

        var card = new HeroCard("Would you like to start an order?", "Subtitle", buttons: buttons);

        reply.Attachments = new List<Attachment> { card.ToAttachment() };

        return reply;
    }

Instead of the expected output, the bot is outputting Microsoft.Bot.Connector.Activity, which is the ToString() return of the Activity object.

How to I use cards within dialogs?

Upvotes: 1

Views: 563

Answers (1)

Michael Washington
Michael Washington

Reputation: 3085

This shows a card when passed a DialogContext:

    private static Activity ShowButtons(IDialogContext context, string strText)
{
    // Create a reply Activity
    Activity replyToConversation = (Activity)context.MakeMessage();
    replyToConversation.Text = strText;
    replyToConversation.Recipient = replyToConversation.Recipient;
    replyToConversation.Type = "message";
    // Call the CreateButtons utility method 
    // that will create 5 buttons to put on the Here Card
    List<CardAction> cardButtons = CreateButtons();
    // Create a Hero Card and add the buttons 
    HeroCard plCard = new HeroCard()
    {
        Buttons = cardButtons
    };
    // Create an Attachment
    // set the AttachmentLayout as 'list'
    Attachment plAttachment = plCard.ToAttachment();
    replyToConversation.Attachments.Add(plAttachment);
    replyToConversation.AttachmentLayout = "list";
    // Return the reply to the calling method
    return replyToConversation;
}

See: Using Images, Cards, Carousels, and Buttons In The Microsoft Bot Framework

Upvotes: 1

Related Questions