如何在Bot Framework v4中形成英雄卡轮播

debugcn 发表于 Dev

阿鲁韦卢

这是我的下方数据，我需要对其进行解析并将其显示在卡轮播中。在bot框架v3中，我能够轻松做到这一点。但是在v4中，我很挣扎。

数据：

[ { 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' } ] }

我需要从每个对象中解析数字，short_Description和State并将其显示在botframework v4中的英雄卡轮播中。

任何人都可以给我结构来构成这个旋转木马。

更新：

我自己找到了解决方案：

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);

输出：

马克·阿斯玛

我将您的数据格式化为有效的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" } ]

然后，我们可以将这些json转换为如下所示的类：

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; }
}

之后，您将需要遍历以下数据，并动态创建英雄卡，请在下面查看如何执行此操作的示例：

   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);

}