Getting Started With Receipt Card Design Using Microsoft Bot Framework

Introduction

The Bot Framework supports different types of rich cards and provides a richer interaction experience to the user. In this article, I will show how to integrate Receipt Card UI design in a Bot application. If you are developing a Shopping Cart Bot chat application, Receipt Card is a very important one.

Receipt card class has the properties like list of items, total, tax, vat, title, and image. We can reuse all the Receipt Card properties and add a tab action event for navigating to the original invoice website.

Microsoft Bot Framework

Prerequisite

I have explained about Bot framework installation, deployment, and implementation in the below articles.

Create New Bot Application

Let's create a new bot application using Visual Studio 2017. Open Visual Studio, select File > New Project (Ctrl + Shift +N) and select Bot application.

Microsoft Bot Framework

The Bot application template gets created with all the components and all required NuGet references installed in the solution.

Create New ReceiptCardCardDialog Class

Step 1

You can create a new ReceiptCardDialog class to show the receiptCard dialog. Right click on project > select Add New Item > create a class that is marked with the [Serializable] attribute (so the dialog can be serialized to state)>> and implement the IDialog interface.

using Microsoft.Bot.Builder.Dialogs;
using Microsoft.Bot.Connector;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace BotReceiptCard.Dialogs
{
[Serializable]
public class ReceiptCardDialog : IDialog<object>
{

Step 2

IDialog interface has only StartAsync() method. StartAsync() is called when the dialog becomes active. The method passes the IDialogContext object which is used to manage the conversation.

public async Task StartAsync(IDialogContext context)
{
context.Wait(this.MessageReceivedAsync);
}

Step 3

Create a MessageReceivedAsync method and write the following code for the welcome message and show the list of demo options dialog.

/// <summary>
/// MessageReceivedAsync
/// </summary>
/// <param name="context"></param>
/// <param name="result"></param>
/// <returns></returns>
public async virtual Task MessageReceivedAsync(IDialogContext context, IAwaitable<IMessageActivity> result)
{
var message = await result;
var welcomeMessage = context.MakeMessage();
welcomeMessage.Text = "Your Invoice Details below , if you requred detail click on 'Request Email' Options ";
await context.PostAsync(welcomeMessage);
await this.DisplayThumbnailCard(context);
}
/// <summary>
/// DisplayReceiptCard
/// </summary>
/// <param name="context"></param>
/// <returns></returns>
public async Task DisplayReceiptCard(IDialogContext context)
{
var replyMessage = context.MakeMessage();
Attachment attachment = getBotReceiptCard(); ;
replyMessage.Attachments = new List<Attachment> { attachment };
await context.PostAsync(replyMessage);
}

After a user enters the first message, the bot will reply with a welcome message like below.

Microsoft Bot Framework

Step 4 Design Receipt Card

The Receipt Card enables a bot to provide a receipt to the user. It typically contains the list of items to include the receipt, tax and total, VAT and title text.

Title - Title text of the card
Facts – Fact is a set of key-value pairs rendered with default style so developers have no need to specify the style
Receipt Items –Receipt Items has the list of item title, image, prize, quantity, subtitle, text and tab navigation for every single item.
Tab – tab enables users to navigate to different screens or actions
Tax – assign tax amount into tax property.
Vat – assign vat amount into vat property.
Total – calculate and assign total amount into total property
Card Actions – adds a list of actions in the Receipt Card. Action card has image, title, type, and value property.

The following code is showing the design code of the online shopping Receipt Card, with image, text, Facts, tab, vat, total and action button.

/// <summary>
/// getBotReceiptCard
/// </summary>
/// <returns></returns>
private static Attachment getBotReceiptCard()
{
var receiptCard = new ReceiptCard
{
Title = "Online Shopping",
Facts = new List<Fact> { new Fact("Name:","Nikhil"),
new Fact("Address:","Bangalore"),
new Fact("------------------------",""),
new Fact("Phone :97420XXXX2",""),
new Fact("Email:[email protected]",""),
new Fact("Order Number:97421",""),
new Fact("Payment Method : Master 5555-****", ""),
new Fact("------------------------","")
},
Items = new List<ReceiptItem>
{
new ReceiptItem("Hit Refresh",subtitle:"by Satya Nadella (Author)",text:"Kindle Edition", price: "278.31", quantity: "1", image: new CardImage(url: "https://images-eu.ssl-images-amazon.com/images/I/41eAfVuUzeL.jpg"),tap: new CardAction("Read More")),
new ReceiptItem("XamarinQA",subtitle:"by Suthahar J (Author)",text:"Kindle Edition", price: "116.82", quantity: "1", image: new CardImage(url: "https://images-eu.ssl-images-amazon.com/images/I/51z6GXy3FSL.jpg"),tap: new CardAction("Read More")),
new ReceiptItem("Surface Pro 4",subtitle:"Core i5 - 6th Gen/4GB/128GB/Windows 10 Pro/Integrated Graphics/31.242 Centimeter Full HD Display", price: "66,500", quantity: "1", image: new CardImage(url: "https://images-na.ssl-images-amazon.com/images/I/41egJVu%2Bc0L.jpg"),tap: new CardAction("Read More")),
new ReceiptItem("Windows 10 pro",subtitle:"by Microsoft", price: "13,846", quantity: "1", image: new CardImage(url: "https://images-na.ssl-images-amazon.com/images/I/7176wliQYsL._SL1500_.jpg"),tap: new CardAction("Read More"))
},
Tax = "2000",
Total = "82,741.13",
Tap =new CardAction(ActionTypes.OpenUrl,value: "https://www.microsoft.com/en-in/store/b/home?SilentAuth=1&wa=wsignin1.0"),
Buttons = new List<CardAction>
{
new CardAction(
ActionTypes.OpenUrl,
"Request Email",
"https://assets.onestore.ms/cdnfiles/external/uhf/long/9a49a7e9d8e881327e81b9eb43dabc01de70a9bb/images/microsoft-gray.png",
"mailto:[email protected]?subject=Order%20Number:97421&body=Hi%team,%20I%need%20Invoice")
}
};
return receiptCard.ToAttachment();
}

The above code will generate the Receipt Card and reply to the user like below.

Microsoft Bot Framework

Run Bot Application

The emulator is a desktop application that lets us test & debug our bot on the localhost. Now, you can click on "Run the application" in Visual Studio and execute it in the browser.

Test Application on Bot Emulator

You can follow the below steps to test your bot application.

Open Bot Emulator.
Copy the localhost URL and paste it in emulator e.g. - http://localHost:3979
You can append the /api/messages in the above URL; e.g. - http://localHost:3979/api/messages.
You won't need to specify Microsoft App ID and Microsoft App Password for localhost testing. Just click on "Connect".

Summary

In this article, you learned how to create a Bot application using Visual Studio 2017 and create Receipt Card design using Bot Framework. If you have any questions/feedback/ issues, please write in the comment box.