BotBuilder-Samples/Node/cards-CarouselCards

Carousel of Cards Bot Sample

A sample bot that sends multiple rich card attachments in a single message using the Carousel layout.

Prerequisites

The minimum prerequisites to run this sample are:

• Latest Node.js with NPM. Download it from here.
• The Bot Framework Emulator. To install the Bot Framework Emulator, download it from here. Please refer to this documentation article to know more about the Bot Framework Emulator.
• [Recommended] Visual Studio Code for IntelliSense and debugging, download it from here for free.

Code Highlights

You can send multiple rich card attachments in a single message. On most channels they will be sent as a list of rich cards, but some channels (like Skype and Facebook) can render them as a carousel of rich cards. The Message.attachmentLayout() method allows you to control how the rich cards will be rendered. Check out the key code located in app.js class where the attachments layout is changed to the Carousel mode.

Note: Only the Hero and Thumbnail Cards are supported for the Carousel AttachmentLayout mode.

function (session) {
    var cards = getCardsAttachments();

    // create reply with Carousel AttachmentLayout
    var reply = new builder.Message(session)
        .attachmentLayout(builder.AttachmentLayout.carousel)
        .attachments(cards);

    session.send(reply);
}

Outcome

You will see the following result in the Bot Framework Emulator when opening and running the sample. Note that an horizontal scrollbar appears, allowing you to move through the different cards.

You will see the following in your Facebook Messenger.

On the other hand, you will see the following in Skype.

Note: At the time of writing this sample, there is a limit on the amount of cards that can be stacked in a carousel. For Facebook, attachments carousel is mapped to the Generic Template which has a limit of 10 elements. For Skype, there's also a limit of 10 elements in the carousel.

More Information

To get more information about how to get started in Bot Builder for Node and Attachments please review the following resources:

• Bot Builder for Node.js Reference
• Message.attachments
• Message.attachmentLayout
• AttachmentLayout
• Send and receive attachments
• Carousel Layout in Microsoft Teams
• RichCards sample

LimitationsThe functionality provided by the Bot Framework Activity can be used across many channels. Moreover, some special channel features can be unleashed using the Message.sourceEvent method.

The Bot Framework does its best to support the reuse of your Bot in as many channels as you want. However, due to the very nature of some of these channels, some features are not fully portable.

The features used in this sample are fully supported in the following channels:

• Skype
• Facebook
• Microsoft Teams

They are also supported, with some limitations, in the following channels:

• Telegram
• DirectLine
• WebChat
• Slack
• Kik
• Email
• GroupMe

On the other hand, they are not supported and the sample won't work as expected in the following channels:

• SMS