Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Workaround to Hero Card as attachment markdown formatting?

Tags:

botframework

I know that markdown is supported on the HeroCard "text" field value, even though I couldn't make it work(Tested on MSTeams):

enter image description here

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

enter image description here

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:
enter image description here

Bold and code example:
enter image description here

like image 753
assisrMatheus Avatar asked Dec 01 '17 14:12

assisrMatheus


2 Answers

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: enter image description here

like image 146
Gary Liu Avatar answered Oct 31 '22 07:10

Gary Liu


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

like image 27
Savageman Avatar answered Oct 31 '22 05:10

Savageman