Адаптивные карты не рендерится на Spfx, когда карта имеет более 5 действий - PullRequest
0 голосов
/ 24 апреля 2018

Проблема : не выполняется более пяти действий

Справочная информация:

Я делал интеграцию BotFramework-WebChat с SharePoint Framework, и все работает нормально. Но когда я пытаюсь отобразить адаптивную карту с более чем 5 действиями внутри WebChat, чат показывает мне карту с текстом «Can't render card», но если тестируется в BotFramework-Emulator или Console Directline работает нормально.

Для тестирования я написал метод C #, в котором вы передаете количество действий, которые вы хотите показать в чате.

Тест с адаптивной картой

Выпуск : Визуализация карты с сообщением «Не удается отрисовать карту», ​​если имеется более пяти действий

Ожидается : визуализация адаптивной карты с более чем пятью действиями частная асинхронная задача MessageReceivedAsync (контекст IDialogContext, аргумент IAwaitable) { var message = ожидание аргумента; var reply = context.MakeMessage ();

    if (message.Text.Equals("3 btn"))
    {
        reply.Attachments.Add(GetAdaptativeCard(3));
        reply.Value = " { nombre : 'BTN'}";
    }
    else if (message.Text.Equals("5 btn"))
    {
        reply.Attachments.Add(GetAdaptativeCard(5));
        reply.Value = " { nombre : 'BTN'}";
    } 
    else if (message.Text.Equals("7 btn"))
    {
        reply.Attachments.Add(GetAdaptativeCard(7));
        reply.Value = " { nombre : 'BTN'}";
    }
    else if (message.Text.Equals("18 btn"))
    {
        reply.Attachments.Add(GetAdaptativeCard(18));
        reply.Value = " { nombre : 'BTN'}";
    }
    else
    if (message.Text.Equals("gif"))
    {
        reply.Attachments.Add(GetAnimationCard());
    await context.PostAsync(reply);
}

private Attachment GetAdaptativeCard(int numberOfButtons) {

    var actions = new List<ActionBase>();
    for (int i = 0; i < numberOfButtons; i++)
    {
        actions.Add(new SubmitAction()
        {
            Title = i.ToString(),
            Speak = "<s>Search</s>",
            DataJson = "{ \"Type\": \"HotelSearch\" }"
        });
    }

    AdaptiveCard card = new AdaptiveCard()
    {
        Body = new List<CardElement>()
        {
            new Container()
            {
                Speak = "<s>Hello!</s><s>How many buttons are in the chat?(18)</s>",
                Items = new List<CardElement>()
                {
                    new ColumnSet()
                    {
                        Columns = new List<Column>()
                        {
                            new Column()
                            {
                                Size = ColumnSize.Auto,
                                Items = new List<CardElement>()
                                {
                                    new Image()
                                    {
                                        Url = "https://placeholdit.imgix.net/~text?txtsize=65&txt=Adaptive+Cards&w=300&h=300",
                                        Size = ImageSize.Medium,
                                        Style = ImageStyle.Person
                                    }
                                }
                            },
                            new Column()
                            {
                                Size = ColumnSize.Stretch,
                                Items = new List<CardElement>()
                                {
                                    new TextBlock()
                                    {
                                        Text =  "Hello!",
                                        Weight = TextWeight.Bolder,
                                        IsSubtle = true
                                    }
                                }
                            }
                        }
                    }
                }
        }
    },
        // Buttons
        Actions = actions
    };
    return new Attachment()
    {
        ContentType = AdaptiveCard.ContentType,
        Content = card
    };

}

Скриншоты:

Тест с HeroCard:

Я просто пытаюсь использовать HeroCard вместо AdaptiveCard. И в этом случае, когда более 5 кнопок, отображаются только первые 5 кнопок. Может быть, это ограничение?

Выпуск : карта выполняет только первые пять действий

Ожидается : визуализация карты героя с более чем 5 действиями

private Attachment GetHeroCard(int numbersOfButtons)
{
    var actions = new List<CardAction>();
    for (int i = 0; i < numbersOfButtons; i++)
    {
        actions.Add(new CardAction(ActionTypes.OpenUrl, $"Get Started {i}", value: "https://docs.microsoft.com/bot-framework"));
    }
    HeroCard card = new HeroCard()
    {
        Title = "BotFramework Hero Card",
        Subtitle = "Your bots — wherever your users are talking",
        Text = "Build and connect intelligent bots to interact with your users naturally wherever they are, from text/sms to Skype, Slack, Office 365 mail and other popular services.",
        Images = new List<CardImage> { new CardImage("https://sec.ch9.ms/ch9/7ff5/e07cfef0-aa3b-40bb-9baa-7c9ef8ff7ff5/buildreactionbotframework_960.jpg") },
        Buttons = actions
    };
    return card.ToAttachment();
}

1 Ответ

0 голосов
/ 25 апреля 2018

Это ограничение адаптивных карт в веб-чате. К счастью, есть обходной путь.

Без внесения каких-либо изменений вы увидите ограничение в 5 Actions. Это можно увидеть, перейдя в визуализатор и добавив более 5 действий, таких как

.
{
    "type": "Action.OpenUrl",
    "title": "View",
    "url": "http://adaptivecards.io"
},
{
    "type": "Action.OpenUrl",
    "title": "View",
    "url": "http://adaptivecards.io"
},
{
    "type": "Action.OpenUrl",
    "title": "View",
    "url": "http://adaptivecards.io"
},
{
    "type": "Action.OpenUrl",
    "title": "View",
    "url": "http://adaptivecards.io"
},
{
    "type": "Action.OpenUrl",
    "title": "View",
    "url": "http://adaptivecards.io"
},
{
    "type": "Action.OpenUrl",
    "title": "View",
    "url": "http://adaptivecards.io"
}

вы получите эту ошибку:

enter image description here

Однако вы можете изменить это. Этого можно достичь, отредактировав файл конфигурации хоста в визуализаторе В частности, в поле maxactions. webchat также включает в себя конфигурационный файл хоста, поэтому теоретически вы можете просто отредактировать этот файл, и он должен работать.

"actions": {
    "maxActions": 20,
    "spacing": "default",
    "buttonSpacing": 8,
    "showCard": {
      "actionMode": "inline",
      "inlineTopMargin": 8
    },
    "actionsOrientation": "vertical",
    "actionAlignment": "stretch"
  },
...