How to display HTML table inside a chat window with options & buttons in it using Microsoft BOT Framework V4 template using C#?

Question

How to display HTML table inside a chat window with options and buttons inside it in a web chat bot created through Microsoft BOT Framework using C#?

I am developing a Chat Bot using waterfall dialog having multiple dialog classes where each class does a specific task based upon the option selected in the web chat Window.

What i need is to display a table in web chat bot window such that is displays a a HTML table with TH's,TD's and TR's and each row with specific button in one of its columns in each row such that the button when clicked dies the specific action?

Is this can be done? or is it a wrong expectation?

If this can be done, is using Adaptive Cards is only the Option or we can actually display a HTML table created inside the C# program inside a stream writer displayed directly into the web Chat Bot?

Please help in this issue as detailed as possible in a step by step detailed guide manner as i am new to C# coding and BOT.

The bot is build using: Language: C# SDK : V4 template Framework: Microsoft Bot Framework

When searched got the answer as to do using Adaptive cards using column set options wanted to know if we can do it by actually directly constructing a HTML content inside a stream and display the table in the WebChat Bot.

tdurnford tdurnford · Accepted Answer · 2019-09-05T21:59:44

By default, Web Chat uses the markdown-it npm package to render incoming activities. The default renderer isn't configured to handle HTML so you won't be able to send an HTML table in activity out of the box; however, you can implement your own markdown renderer that supports HTML and pass it as a prop to Web Chat.

const markdownIt = new MarkdownIt({ html: true, linkify: true, typographer: true });
const renderMarkdown = text => markdownIt.render(text);

 ...

window.WebChat.renderWebChat({
  directLine: window.WebChat.createDirectLine({ token }),
  renderMarkdown
}, document.getElementById('webchat'));

For more details, take a look at this issue on GitHub in the Web Chat Repo.

How to display HTML table inside a chat window with options & buttons in it using Microsoft BOT Framework V4 template using C#?

1 Answers