Carousel in adaptive card

问题

Please guide me to create carousel adaptive card in MS bot framework. I am using .Net sdk.I tried using adaptive card designer to design but couldn't do it.

回答1:

Well, Adaptive card designer helps you to create template for one single card. In you case, based on your list create attachment from the created template in a loop and add each of the generated attachments to Activity.Attachments.

if(listOfReservationCardsData.Any())
        {
            foreach (var checkInStatusCardData in listOfReservationCardsData.OrderBy(l => Convert.ToDateTime(l.StartDate)))
            {
                listOfAttachments.Add(CreateAdaptiveCardAttachment(filePath, data));
            }
        }

        if (listOfAttachments.Any())
        {
            turnContext.Activity.AttachmentLayout = AttachmentLayoutTypes.Carousel;
            turnContext.Activity.Attachments = listOfAttachments.Take(5).ToList();
            await turnContext.SendActivityAsync(turnContext.Activity, cancellationToken);
        }


private static Attachment CreateAdaptiveCardAttachment(string filePath, object data)
    {
        var adaptiveCardJson = File.ReadAllText(filePath);
        // Create a Template instance from the template payload
        AdaptiveCardTemplate template = new AdaptiveCardTemplate(adaptiveCardJson);

        string cardJson = template.Expand(data);

        var adaptiveCardAttachment = new Attachment()
        {
            ContentType = "application/vnd.microsoft.card.adaptive",
            Content = JsonConvert.DeserializeObject(cardJson),
        };
        return adaptiveCardAttachment;
    }

回答2:

Your question isn't really specific enough for me to understand where you are having trouble, but I can give you a basic outline of creating a card carousel. My code is nodejs but it should be similar enough to give you an idea.

You will need CardFactory and MessageFactory to generate first the cards and then the Carousel (which takes an array of cards as the input).

// First create an empty array for your carousel
var cardArray = [];

// Populate the array with your cards (can use any method, I used a for loop)
for (var idx = 0; idx < dataForCards.length; idx++) {
   // Create the adaptive card
   var adaptiveCard = CardFactory.adaptiveCard({

   // YOUR CARD DEFINITION HERE

   });
   // Push the card to the array for the carousel
   cardArray.push(adaptiveCard);
}
// Send the array as a carousel
await step.context.sendActivity(MessageFactory.carousel(cardArray));

回答3:

that can be an example:

IEnumerable<AdaptiveCard> cards;    
await context.Context.SendActivityAsync((Activity)MessageFactory.Carousel(cards.Select(c => new Attachment
                    {
                        ContentType = AdaptiveCard.ContentType,
                        Content = c,
                    })));

来源：https://stackoverflow.com/questions/59684839/carousel-in-adaptive-card

标签

botframework

chatbot