CODEWITHSUNDEEP
c#botframeworkdirect-line-botframeworkazure-qna-maker
Jegan Baskaran
Jegan Baskaran

Reputation: 347

MS bot | QnAmaker- how to Display the answers in ordered /bulleted format

I'm using QnAMaker in the back end for my chat bot, which is running in direct line bot channel. I want to display some answers in bulleted / numbered format.

I tried some methods mentioned in some websites including this one.

like this

"Hi, Below is my list\n\n"+ "* Item 1\n\n"+ "* Item 2\n\n"+ "Item 1 ");

but nothing worked for me,
enter image description here

Also, I want to know if its possible to display table of data / or any HTML data as bot's reply.

If someone has any solution for this issue, please let me know

Upvotes: 1

Views: 600

Answers (2)

Md Farid Uddin Kiron
Md Farid Uddin Kiron

Reputation: 22429

Seems you are trying to format your text in Azure Bot Framework. After having look on your code, I got to know, you are almost there, but approach was not correct.

You could try following way

Unordered list :

await turnContext.SendActivityAsync(MessageFactory.Text("Hi, Below is my unordered list  " + Environment.NewLine+ " 1. Item 1\r2. **Bold Item 2**\r3. **" + YourDynamicObject + "**"), cancellationToken);

Ordered list :

await turnContext.SendActivityAsync(MessageFactory.Text("Hi, Below is my ordered list " + Environment.NewLine+ " - Item 1\r- **Bold Item 2**\r- [Hyperlink](https://stackoverflow.com/users/9663070/md-farid-uddin-kiron) 3"), cancellationToken);

See the screen shot below:

enter image description here

How Would You Do It:

I have already given you code example above, additionally keep in mind the space between the syntax for example when you would make hyperlink you have to follow it's structure like [title](URL) but if you put space after title angle bracket [] it won't work as expected, also for bold Bold it shouldn't contain any space before and after. Same things happened with your code.

Another issue is new line you could use \n\n even Environment.NewLine

I want to know if its possible to display table of data / or any HTML data as bot's reply?

The answer is NO unfortunately you cannot display table data on bot at this moment. But it support few HTML Tag hope you got your answer.

If you would like to know more about Azure Bot Card Formatting you could refer official document

Hope it would help and feel free to ask when you would encounter any question in mind.

Upvotes: 4

billoverton
billoverton

Reputation: 2875

It is actually possible to format a message in table format using markdown. I'm not sure it will work with QnA Maker, and I'm almost positive it won't work for every channel, but for standard webchat I have been able to send table-formatted messages as follows:

var ticketTable = `|Ticket# |Status |Summary|\n|:---|:---|:---|`;
for (var i = 0; i < ticketArray.length; i++) {
    ticketData = await RemedyServiceHelper.getTicketData(ticketArray[i]);
    ticketTable += `\n|${ticketData.ticketNumber}&nbsp;&nbsp;&nbsp;&nbsp;|${ticketData.status}&nbsp;&nbsp;&nbsp;&nbsp;|${ticketData.summary}|`;
}
await step.context.sendActivity(`Here is the current status of your requests:`);
await step.context.sendActivity(ticketTable);

I would probably not recommend this though because there is no guarantee it will appear properly through all channels. I've started using Carousels instead to display items in a similar way. For example:

                var lineData = [];
                for (var idx = 0; idx < lineItemDetails.lineDetail.length; idx++) {
                    var title = `${lineItemDetails.orderNumber}  \r\n Line ${lineItemDetails.lineDetail[idx].lineNumber}`;
                    var message = `Product ID: ${lineItemDetails.product}  \r\n Status: ${lineItemDetails.lineDetail[idx].lineStatus}  \r\n Quantity: ${lineItemDetails.lineDetail[idx].quantity}  \r\n Date: ${lineItemDetails.lineDetail[idx].nextDate}  \r\n Carrier: ${lineItemDetails.lineDetail[idx].scacCode}  \r\n Tracking: ${lineItemDetails.lineDetail[idx].trackingNumber}`;
                    var lineCard = CardFactory.heroCard(title, message);
                    lineData.push(lineCard);
                }
                await step.context.sendActivity(`I found multiple lines or releases. Please scroll through the cards below to see each result.`);
                await step.context.sendActivity(MessageFactory.carousel(lineData));

I used Hero Cards to build this, though you could format the cards however you wanted using Adaptive Cards. While these won't appear the same in all channels, they should work in all channels, so safer than using table markdown or HTML.

Upvotes: 1

Related Questions