是否可以在自适应卡的主体数组内添加action.open url?

时间:2019-03-02 07:27:52

标签: botframework adaptive-cards cortana-intelligence adaptive-design cortana-skills-kit

在我的机器人应用程序中,我需要在文本之间显示一个action.open Url按钮。我需要在日期末尾在json的body标签内添加Action.Open url,如图所示,并且需要单击url链接以执行一些操作。

Adaptive Card Design Image

是否可以在body标签内的文本之间或文本顶部添加按钮?

{
    "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"
}

1 个答案:

答案 0 :(得分:0)

不幸的是,AdaptiveCards中按钮的默认位置在卡的底部,您无法更改它。但是,您可以使用selectAction属性向卡添加样式为您想要的图像,该属性将在用户单击图像时提交与操作关联的数据。有关更多详细信息,请参见下面的示例AdaptiveCard JSON以及ImagesSelect Actions的AdaptiveCard文档。

屏幕截图

enter image description here

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

希望这会有所帮助!