Getting Started with Receipt Card Design Using Microsoft Bot Framework

Introduction:

The Bot Framework has supports different type 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 as shopping card Bot chat application; receipt card is very important one. Receipt card class having property as list of items, total, tax, vat, title and image. We can re-use all receipt card property and add tab action event for navigating to original invoice website.

Prerequisite:

I have explained about Bot framework Installation, deployment and implementation in the below article

1. Getting Started with Chatbot Using Azure Bot Service
2. Getting Started with Bots Using Visual Studio 2017
3. Deploying A Bot to Azure Using Visual Studio 2017
4. How to Create ChatBot In Xamarin
5. Getting Started with Dialog Using Microsoft Bot Framework
6. Getting Started with Prompt Dialog Using Microsoft Bot Framework
7. Getting Started With Conversational Forms And FormFlow Using Microsoft Bot Framework
8. Getting Started With Customizing A FormFlow Using Microsoft Bot Framework
9. Sending Bot Reply Message With Attachment Using Bot Framework
10. Getting Started With Hero Card Design Using Microsoft Bot Framework
11. Getting Started With Thumbnail Card Design Using Microsoft Bot Framework
12. Getting Started With Adaptive Card Design Using Microsoft Bot Framework

Create New Bot Application:

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

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

Create New ReceiptCardCardDialog Class:

Step 1:

You can Create new ReceiptCardDialog class for a 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 is passes the IDialogContext object, used to manage the conversation.

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

Step 3:

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

///        /// MessageReceivedAsync        ///

       /// context">

       /// result">

       ///

       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);

       }

       ///

       /// DisplayReceiptCard

       ///

       /// context">

       ///

       public async Task DisplayReceiptCard(IDialogContext context)

       {

           var replyMessage = context.MakeMessage();

           Attachment attachment = getBotReceiptCard(); ;

           replyMessage.Attachments = new List<Attachment> { attachment };

           await context.PostAsync(replyMessage);

       }

After user enter the first message, bot will reply welcome message like below

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 on the receipt, tax and total ,vat and title text.

1. Title - Title text of the card
2. Facts – Fact is set of key-value pairs and rendered with default style so developer no need to specify style
3. ReceiptItems –Receipt Items has list of item title, image, prize, Quantity, subtitle, text and tab navigation for every single item.
4. Tab – tab provide navigate to different screen or actions
5. Tax – assign tax amount into tax property.
6. Vat – assign vat amount into vat property.
7. Total – calculate and assign total amount into total property
8. Card Actions – add list of actions in the receipt card and also action card has image, title, type and value property.

The following code showing design the online shopping receipt card design with image, text, Facts, tab,vat,total and action button. .

///        /// getBotReceiptCard        ///

       ///

       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:jssXXXXX@gmail.com",""),

                   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:jssuthahar@gmail.com?subject=Order%20Number:97421&body=Hi%team,%20I%need%20Invoice")

       }

           };

           return receiptCard.ToAttachment();

       }

The above code will generate receipt card and reply to the user like below

Run Bot Application

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

Test Application on Bot Emulator

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

1. Open Bot Emulator.
2. Copy the above localhost url and paste it in emulator e.g. - http://localHost:3979
3. You can append the /api/messages in the above url; e.g. - http://localHost:3979/api/messages.
4. You won't need to specify Microsoft App ID and Microsoft App Password for localhost testing, so 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.