时间戳

首页 > 解决方案 > 是否可以在自适应卡的 body 数组中添加 action.open url？

botframework - 是否可以在自适应卡的 body 数组中添加 action.open url？

问题描述

在我的机器人应用程序中，我需要在文本之间显示一个 action.open Url 按钮。我需要在日期结束时在 json 的 body 标记内添加 Action.Open url，如图所示，并且需要单击url 链接做一些动作。

自适应卡片设计形象

是否可以在文本之间或正文标记内的文本顶部添加按钮。？

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "color": "Warning",
            "text": "Company Name"
        },
        {
            "type": "TextBlock",
            "text": "Meeting Details",
            "wrap": true
        },
        {
            "type": "FactSet",
            "facts": [
                {
                    "title": "Description",
                    "value": "xxx"
                },
                {
                    "title": "Key Note Speaker",
                    "value": "yyy"
                },
                {
                    "title": "Date :",
                    "value": "03/25/2019 12:30:00 PM"
                }
            ]
        },
       
        {
            "type": "TextBlock",
            "horizontalAlignment": "Center",
            "size": "ExtraLarge",
            "weight": "Bolder",
            "color": "Accent",
            "text": "**************"
        },
        {
            "type": "TextBlock",
            "text": "Meeting Details",
            "wrap": true
        },
        {
            "type": "FactSet",
            "facts": [
                 {
                    "title": "Description",
                    "value": "xxx"
                },
                {
                    "title": "Key Note Speaker",
                    "value": "yyy"
                },
                {
                    "title": "Date :",
                    "value": "03/25/2019 12:30:00 PM"
                }
            ]
        },
        {
            "type": "TextBlock",
            "horizontalAlignment": "Center",
            "size": "ExtraLarge",
            "weight": "Bolder",
            "color": "Accent",
            "text": "**************"
        }
    ],

     "actions": [
          {
            "type": "Action.OpenUrl",
            "title": "Add to Calender",
            "url": "http://adaptivecards.io"
            },
             {
            "type": "Action.OpenUrl",
            "title": " Click here to add more Info ",
            "url": "http://adaptivecards.io"
            }
     ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

标签： botframeworkadaptive-cardscortana-intelligenceadaptive-designcortana-skills-kit

解决方案

不幸的是，AdaptiveCards 中按钮的默认位置位于卡片的底部，您无法更改它。但是，您可以使用 selectAction 属性将图像添加到卡片中，该属性将在用户单击图像时提交与操作关联的数据。有关更多详细信息，请参阅下面的示例 AdaptiveCard JSON 以及图像和选择操作的 AdaptiveCard 文档。

截屏

在此处输入图像描述

JSON

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Large",
            "weight": "Bolder",
            "color": "Accent",
            "text": "Company Name"
        },
        {
            "type": "TextBlock",
            "separator": true,
            "size": "Medium",
            "text": "Meeting Details"
        },
        {
            "type": "TextBlock",
            "text": "Description:"
        },
        {
            "type": "TextBlock",
            "text": "Keynote Speaker:"
        },
        {
            "type": "TextBlock",
            "text": "Date:"
        },
        {
            "type": "Image",
            "selectAction": {
                "type": "Action.Submit",
                "data": "Meeting 1"
            },
            "url": "C:\\Users\\v-thdurn\\Developer\\Node\\Azure\\thdurn-all-channels-src\\resources\\button.png"
        },
        {
            "type": "TextBlock",
            "separator": true,
            "size": "Medium",
            "text": "Meeting Details"
        },
        {
            "type": "TextBlock",
            "text": "Description:"
        },
        {
            "type": "TextBlock",
            "text": "Keynote Speaker:"
        },
        {
            "type": "TextBlock",
            "text": "Date:"
        },
        {
            "type": "Image",
            "selectAction": {
                "type": "Action.Submit",
                "data": "Meeting 2"
            },
            "url": "C:\\Users\\v-thdurn\\Developer\\Node\\Azure\\thdurn-all-channels-src\\resources\\button.png"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

希望这可以帮助！

推荐阅读