自适应卡 - 嵌套方案

时间:2017-07-19 05:38:43

标签: c# json adaptive-cards

是否可以在自适应卡中的columnSet /列中包含操作?

例如我想要这样的东西: -

----- Body
       |___ columnSet
                |___ column1
                |       |___textblock
                |       |___image
                |       |___action.url
                |
                |___ column2
                |       |___textblock
                |       |___image
                |       |___action.url

我确实尝试过使用visualiser,但是尽管visualiser没有显示任何错误,但action.url仍未显示。

感谢您的帮助。

3 个答案:

答案 0 :(得分:1)

列具有selectAction属性,可以将列转换为命中目标。

            {
                "type": "Column",
                "items": [
                    {
                        "type": "TextBlock",
                        "text": "Column 1"
                    },
                    {
                        "type": "Image",
                        "url": "http://adaptivecards.io/api/cat"
                    }
                ],
                "selectAction": {
                    "type": "Action.OpenUrl",
                    "title": "cool link",
                    "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
                }

请参阅此处查看工作示例:

http://adaptivecards.io/visualizer/?card=/explorer/cards/Column.SelectAction.json

答案 1 :(得分:1)

我很高兴这是一个古老的问题,但认为可以分享...

可以。用C#编程:

AdaptiveCard adaptiveCard = new AdaptiveCard(new AdaptiveSchemaVersion(1, 0));

adaptiveCard.Body.Add(new AdaptiveContainer()
        {
            Items =
            {
                new AdaptiveColumnSet()
                {
                    Columns =
                    {
                        new AdaptiveColumn()
                        {
                            Width = AdaptiveColumnWidth.Stretch,
                            Items =
                            {
                                new AdaptiveActionSet()
                                {
                                    Actions =
                                    {
                                        new AdaptiveOpenUrlAction()
                                        {
                                            Title = "open url",
                                            Url = new System.Uri("https://www.blah.com")
                                        }
                                        
                                    }
                                }
                            }
                        }
                        
                    }
                }
            }
        });

JSON模式:

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", //or wherever your schema is held
    "version": "1.2",
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "ActionSet",
                                    "actions": [
                                        {
                                            "type": "Action.OpenUrl",
                                            "title": "open url",
                                            "url": "https://www.blah.com"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

答案 2 :(得分:0)

如果您无法控制卡片渲染,那么我认为不是。

根据documentation:“操作-许多卡片都有用户可以执行的一组操作。此属性描述了通常在底部的“操作栏”中呈现的那些操作。”

通常说,但似乎总是在卡的底部渲染。除非您在自己的应用程序中显示自适应卡,否则我认为无法更改它们的呈现方式。

可能的解决方法是对图像使用selectaction,然后为图像创建自己的按钮。此时,它的工作方式应与动作相同,但可以将其放置在可以放置图像的任何位置。缺点是需要为按钮创建和托管图像。