CODEWITHSUNDEEP
c#jsonadaptive-cards
azriebakri
azriebakri

Reputation: 1151

Adaptive Cards - Nested scheme

Is it possible to include action inside columnSet/column in the adaptive cards ?

For example I want something like this :-

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

I did try it with visualiser but the action.url doesn't show despite the visualiser did not show any error.

Thank you for your help.

Upvotes: 2

Views: 1843

Answers (3)

Tapshire
Tapshire

Reputation: 11

I appreciate this is an old question but figured could be useful to share...

Yes you can. Programatically in 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 schema:

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

Upvotes: 1

mborger
mborger

Reputation: 31

If you don't have control over the card rendering, then I don't think so.

Per the documentation: "actions - Many cards have a set of actions a user may take on it. This property describes those actions which typically get rendered in an "action bar" at the bottom."

It says typically, but it seems they are always rendered at the bottom of the card. Unless you are displaying adaptive cards within your own application, I don't think it's possible to make changes to the way they are rendered.

A potential workaround would be to use a selectaction on an image, and then make your own button for the image. It should work the same way as an action at that point, but will be able to placed anywhere you can place an image. There is the downside of needing to create and host an image for your button though.

Upvotes: 0

Matt Hidinger
Matt Hidinger

Reputation: 1753

Column has a selectAction property that can turn the column into a hit target.

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

See here for a working example:

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

Upvotes: 1

Related Questions