How to Form Carousel of hero cards in bot framework v4

Question

This is my Below Data which i need to parse and show it in carousel of cards. In bot framework v3 i was able to do it easily. However in v4 I am quite struggling .

DATA :

[ { number: 'INC0010798',
       short_description: 'laptop not working',
       sys_created_on: '2019-11-27 09:43:42',
       state: 'Assigned',
       category: null,
       subcategory: null,
       priority: '4 - Low' },
     { number: 'INC0010797',
       short_description: 'testing email',
       sys_created_on: '2019-11-27 09:13:55',
       state: 'Assigned',
       category: null,
       subcategory: null,
       priority: '5 - Planning' },
     { number: 'INC0010788',
       short_description: 'my laptop not working',
       sys_created_on: '2019-11-25 01:45:03',
       state: 'Assigned',
       category: null,
       subcategory: null,
       priority: '4 - Low' },
     { number: 'INC0010787',
       short_description: 'Destiny dental',
       sys_created_on: '2019-11-25 01:28:34',
       state: 'Assigned',
       category: null,
       subcategory: null,
       priority: '4 - Low' },
     { number: 'INC0010785',
       short_description: 'Testing it from console',
       sys_created_on: '2019-11-25 01:20:02',
       state: 'Assigned',
       category: null,
       subcategory: null,
       priority: '4 - Low' } ] }

I need to parse number,short_Description and State from each object and show it in carousel of hero cards in botframework v4.

Could anyone please give me the structure to form this carousel.

update :

Found Solution on my own :

const incData = [];

            for (var i = 0; i < getLastFiveIncidents.length; i++) {
                var incNumber = getLastFiveIncidents[i].number;
                console.log(getLastFiveIncidents[i].short_description);
                var message = 'Short_Description : ' + getLastFiveIncidents[i].short_description + '\r\n' + 'State: ' + getLastFiveIncidents[i].state + '\r\n' + 'Priority :' + getLastFiveIncidents[i].priority + '\r\n' + 'Created Date: ' + getLastFiveIncidents[i].sys_created_on;

                var dataToPush = CardFactory.heroCard(incNumber, message, ['https://www.usnews.com/dims4/USNEWS/65f1856/2147483647/thumbnail/970x647/quality/85/?url=http%3A%2F%2Fcom-usnews-beam-media.s3.amazonaws.com%2Fbe%2Fdd%2F8f25b4174b6398285139452fb7d5%2F190313-collegeapplication-stock.jpg']);
                incData.push(dataToPush);
            }
            const lastFiveINCMessage = MessageFactory.carousel(incData);
            return await stepContext.context.sendActivity(lastFiveINCMessage);

Output :

Answer 1

I formatted your data into a valid json:

[ {    "number": "INC0010798",
   "short_description": "laptop not working",
   "sys_created_on": "2019-11-27 09:43:42",
   "state": "Assigned",
   "category": null,
   "subcategory": null,
   "priority": "4 - Low" },
 { "number": "INC0010797",
   "short_description": "testing email",
   "sys_created_on": "2019-11-27 09:13:55",
   "state": "Assigned",
   "category": null,
   "subcategory": null,
   "priority": "5 - Planning" },
 { "number": "INC0010788",
   "short_description": "my laptop not working",
   "sys_created_on": "2019-11-25 01:45:03",
   "state": "Assigned",
   "category": null,
   "subcategory": null,
   "priority": "4 - Low" },
 { "number": "INC0010787",
   "short_description": "Destiny dental",
   "sys_created_on": "2019-11-25 01:28:34",
   "state": "Assigned",
   "category": null,
   "subcategory": null,
   "priority": "4 - Low" },
 { "number": "INC0010785",
   "short_description": "Testing it from console",
   "sys_created_on": "2019-11-25 01:20:02",
   "state": "Assigned",
   "category": null,
   "subcategory": null,
   "priority": "4 - Low" } ] 

Then we can translate those json into a class like below:

public class DataClass
{
    public Item[] Items { get; set; }
}

public class Item
{
    public string number { get; set; }
    public string short_description { get; set; }
    public string sys_created_on { get; set; }
    public string state { get; set; }
    public object category { get; set; }
    public object subcategory { get; set; }
    public string priority { get; set; }
}

After that you will have to iterate through your data like below, and dynamically create your hero cards, check below an example of how you might do this:

   protected override async Task<DialogTurnResult> OnContinueDialogAsync(DialogContext innerDc, CancellationToken cancellationToken = default)
{

    DataClass requiredData = new DataClass();
    Activity replyToConversation = innerDc.Context.Activity.CreateReply();
    replyToConversation.AttachmentLayout = AttachmentLayoutTypes.Carousel;
    replyToConversation.Attachments = new List<Microsoft.Bot.Schema.Attachment>();
    foreach (var item in requiredData.Items)
    {
        List<CardAction> cardButtons = new List<CardAction>();
       // THIS IS AN EXAMPLE IF HOW YOU CAN ADD BUTTONS,
       // YOU CAN ALSO DYNAMICALLY CREATE THEM AND ADD THEM 
       CardAction button = new CardAction
        {
            Type = ActionTypes.OpenUrl,
            Value = "YOUR WEB URL",
            Title = "TITLE",
            Text = "TEXT",
            DisplayText = "DISPLAY TEXT"
        };
        cardButtons.Add(button); 

        List<CardImage> cardImages = new List<CardImage>
        {
            new CardImage(url: "YOUR IMAGE URL")
        };
        HeroCard heroCard = new HeroCard
        {
            //Buttons = cardButtons, // UNCOMMENT IF YOU WANT TO ADD BUTTONS 
            Title = item.number,
            Subtitle = item.short_description + item.state,
            //Images = cardImages, // UNCOMMENT IF YOU WANT TO ADD IMAGE
        };
        Microsoft.Bot.Schema.Attachment Attachment = heroCard.ToAttachment();
        replyToConversation.Attachments.Add(Attachment);
    }
    await innerDc.Context.SendActivityAsync(replyToConversation);

}