Блог

Я понимаю, что адаптивные карты отображаются в виде изображения на каналах, которые их не поддерживают. Я просто хочу знать, как удалить или установить элемент «Title», как показано на канале fb:

Адаптивная карточка.Элемент Title устарел, и я пытался установить это, это не дало никакого эффекта.

Вот мой пример json:

 {
"type": "AdaptiveCard",
"body": [
    {
        "type": "TextBlock",
        "id": "Title",
        "horizontalAlignment": "Center",
        "size": "Large",
        "weight": "Bolder",
        "text": "See results on our website!"
    },
    {
        "type": "Image",
        "horizontalAlignment": "Center",
        "url": "mylogo.png",
        "size": "Stretch"
    },
    {
        "type": "TextBlock",
        "id": "Subtitle",
        "horizontalAlignment": "Center",
        "size": "ExtraLarge",
        "text": "This channel does not allow us to display your results. Click the button to view it on our website.",
        "wrap": true
    }
],
"actions": [
  {
    "type": "Action.OpenUrl",
    "id": "OpenUrl",
    "title": "Take me there!"
  }
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
  

К сожалению, когда BotFramewrok преобразует карточку в изображение для Facebook Messenger, он добавляет заголовок над действиями, что странно. Единственный способ избавиться от этого — удалить действие с карточки, которое в данном случае противоречит его цели. Альтернативой является отправка шаблона кнопки Facebook в данных канала активности вместо адаптивной карточки, когда пользователь находится в Facebook Messenger. Для получения более подробной информации ознакомьтесь с документацией Facebook по шаблонам кнопок и фрагментом кода ниже.

Скриншот

Код бота — узел

 async onTurn(turnContext) {
    if (turnContext.activity.type === ActivityTypes.Message) {
        if (turnContext.activity.channelId === 'facebook') {
            await turnContext.sendActivity({
                channelData: {
                      "attachment": {
                          "type": "template",
                          "payload": {
                              "template_type":"button",
                              "text":"This channel does not allow us to display your results. Click the button to view it on our website.",
                              "buttons":[{
                                  "type":"web_url",
                                  "url":"https://www.microsoft.com",
                                  "title":"Take me there!"
                              }]
                          }
                      }
                  }
              });
        } else {
            await turnContext.sendActivity({
                attachments: [this.createAdaptiveCard()], 
            });
        }
    }
}
  

Надеюсь, это поможет!

У меня была та же проблема, но я нахожу альтернативу, используя HeroCard.

Если вы разрабатываете ее с помощью C #, вот и весь код:

 // first of all check if it is Facebook channel
// note that Channels is from Microsoft.Bot.Connector, the old one is deprecated.
if (turnContext.Activity.ChannelId == Channels.Facebook)
{
      Activity replyToConversation = _flowService.ConvertMarkdownUrlToFacebookUrl(turnContext.Activity, response.Answer);
      await turnContext.SendActivityAsync(replyToConversation, cancellationToken: cancellationToken);
}


public Activity ConvertMarkdownUrlToFacebookUrl(Activity message, string queryResponse)
{
    var buttons = getButtons(queryResponse, out string result);

    Activity replyToConversation = message.CreateReply();
    replyToConversation.Attachments = new List<Attachment>();

    List<CardAction> actions = new List<CardAction>();

    foreach (var button in buttons)
    {
        actions.Add(new CardAction()
        {
            Title = button.Key, // text hyperlink
            Type = ActionTypes.OpenUrl,
            Value = button.Value // url
        });
    }

    Attachment attachment = new HeroCard
    {
        Text = result, // your text
        Buttons = actions
    }.ToAttachment();
    replyToConversation.Attachments.Add(attachment);

    return replyToConversation;
}
  

Вы получите что-то вроде этого:

(извините, мне пришлось удалить текст)

Возможно, это не идеально (мой первый раз с карточками и вложениями), но я надеюсь, что это кому-то поможет 🙂