I know that markdown is supported on the HeroCard "text" field value, even though I couldn't make it work(Tested on MSTeams):
Code
this.bot.dialog("sendCard", (session, args, next) => {
session.sendTyping();
const card = new builder.HeroCard(session);
card.title("Title");
card.subtitle("Subtitle");
card.text("This is some *mardown* text! \n\n - one \n\n - two");
const msg = new builder.Message(session);
msg.textFormat("markdown");
msg.attachments([
card,
]);
session.endDialog(msg);
});
I am wondering how can I achieve this formatting(From mailclark bot in MSTeams):
As you can see, it is a carousel of what I think it might be HeroCards, but they are formatted with bold, code and unordered lists on new paragraphs.
It seems to be a known issue that message attachments do not receive formatting, but how could the mailclark guys achieve it?
Edit:
Unordered list example:
Bold and code example:
As Hero Cards eventually will be convert to Rich Card send to user from bot, and from MS Teams documents at https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/bots/bots-conversations#formatting-text-content:
Microsoft Teams supports a subset of Markdown and XML (HTML) formatting tags.
Rich cards do not support Markdown or table formatting
So in MS Teams channel, markdown formatting is only supported in text only message, however, we can leverage HTML
tags in Rich Card.
Please consider following code snippet:
bot.dialog('/', function (session) {
const card = new builder.HeroCard(session);
card.title("Type your question to our support team here");
card.subtitle("Or, click the ◀▶ arrows for a series of how-tos");
card.images([builder.CardImage.create(session,"<image url>")])
card.text("<p>This is some <i>mardown</i> <b>text</b>!</p> <ul><li><b>one</b></li><li><code>two</code></li></ul>")
const msg = new builder.Message(session);
msg.attachmentLayout(builder.AttachmentLayout.carousel);
msg.attachments([
card,card,card
]).toMessage();
session.send(msg);
session.endDialog("This is some *mardown* **text**! \n\n - **one** \n\n - `two`");
});
This shows in MS Teams as following:
MailClark here. You're right: it's a carousel of Hero Cards.
As Gary said, it's mostly simple HTML with a few <code>
and <strong>
tags.
But this is the real secret: the list is not HTML it's just regular text and the 3 lines are starting with a good old bullet character: •
(we didn't like the style produced by <ul><li>
).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With