在FB上以图像形式显示的自适应卡显示“标题”文本/元素

时间:2019-03-05 22:03:33

标签: botframework

我了解到,自适应卡在不支持自适应卡的通道上被向下渲染为图像。我只想知道如何删除或设置fb频道上显示的“ Title”元素:

enter image description here

不推荐使用AdaptiveCard.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"
}

2 个答案:

答案 0 :(得分:1)

不幸的是,当BotFramewrok将卡片渲染为Facebook Messenger的图像时,它在动作上方添加了标题,这很奇怪。摆脱它的唯一方法是从卡中删除操作,这在这种情况下会破坏其目的。另一种方法是,当用户在Facebook Messenger上时,在活动的频道数据中发送Facebook Button模板而不是自适应卡。有关更多详细信息,请查看Button Templates上的Facebook文档以及下面的代码段。

屏幕截图

enter image description here

批号-节点

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()], 
            });
        }
    }
}

希望这会有所帮助!

答案 1 :(得分:0)

我遇到了同样的问题,但是我找到了使用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;
}

您将获得以下内容:

example of how it looks in Facebook

(对不起,我必须删除文本)

也许这并不完美(我第一次使用卡片和附件),但我希望这对某人有帮助