microsoft bot for teams to render a carousel of hero cards

Question

I am having below code to render multiple hero cards

 const hcard = CardFactory.heroCard(
            'Neeti Sharma',
            'CEO, Moblize.it LLC',
            null,
            [
                {
                    type: ActionTypes.MessageBack,
                    title: 'Call',
                    value: null,
                    text: 'UpdateCardAction'
                },
                {
                    type: ActionTypes.MessageBack,
                    title: 'Email',
                    value: null,
                    text: 'email'
                }
            ]);
        await context.sendActivity({ attachments: [hcard, hcard] });

This renders one card after another. how do i convert it to a carousel?

score 2 · Answer 1 · answered Dec 04 '19 at 10:02

2

You need to get all the attachments, attach them to the reply you want to send and set the Attachment layout as Carousel. Here is how you could achieve this:

var reply=activity.CreateReply();

reply.attachment=GetAttachments();

reply.AttachmentLayout = AttachmentLayoutTypes.Carousel;

answered Dec 04 '19 at 10:02

Gousia Begum

2,076
1
5
9

ms documentation is a mess. sorry to say that. what is createReply() above? i dont see any documented method like that on the activity object in v4 sdk this is where i am looking for https://learn.microsoft.com/en-us/javascript/api/botbuilder-core/activityhandler?view=botbuilder-ts-latest – Moblize IT Dec 04 '19 at 19:27

score 2 · Accepted Answer · answered Dec 05 '19 at 04:42

just for others benefit this is how i am doing it now

 const hcard = CardFactory.heroCard(
                card._firstName + ' ' + card._lastName,
                card._jobTitle + ', ' + card._dept,
                null,
                [
                    {
                        type: ActionTypes.MessageBack,
                        title: 'Call',
                        value: null,
                        text: 'UpdateCardAction'
                    },
                    {
                        type: ActionTypes.MessageBack,
                        title: 'Email',
                        value: null,
                        text: 'email'
                    }
                ]);

                cardArr.push(hcard)
         }

         console.log("all the cards are::::" + JSON.stringify(rspVal))
         const reply = {
             "attachments" : cardArr,
             "attachmentLayout" : AttachmentLayoutTypes.Carousel
         }

        await context.sendActivity(reply);

microsoft bot for teams to render a carousel of hero cards

2 Answers2