Carousel in adaptive card

元气小坏坏 提交于 2021-02-08 15:16:35

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!