Is it possible to align Actions verticaly in Adaptive card in C#?

Question

I am trying to align my Actions vertically in my Adaptive card. So the buttons would be one on top of the other. Here is my code:

var card = new AdaptiveCard("1.0") { Height = AdaptiveHeight.Auto };
            var body = new List<AdaptiveElement>();
            var actionSet = new AdaptiveActionSet() { Type = AdaptiveActionSet.TypeName, Separator = true};
            var title = new AdaptiveTextBlock()
            {
                Text = ConfusedStrings.TITLE,
                Size = AdaptiveTextSize.Medium
            };

            body.Add(title);
            body.Add(actionSet);
            card.Body = body;

            foreach(var intent in intentCurrentList)
            {
                actionSet.Actions.Add(new AdaptiveSubmitAction()
                {    
                    Title = intent.Value.ToString(),
                    Data = intent.Value.ToString()
                });
            }



        var attachment = new Attachment()
        {
            ContentType = AdaptiveCard.ContentType,
            Content = card,
        };

        return MessageFactory.Attachment(attachment, inputHint: InputHints.AcceptingInput);

UPDATE:

Adaptive Cards 1.2 are available to Teams now. The AdaptiveSubmitAction with a string doesn't work when you put a value in. You have to pass it the complete Json Object like in this doc using the ImBack type to https://docs.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-actions#adaptive-cards-with-imback-action :

public static IMessageActivity BuildIntentSelectionCardJustin(ITurnContext turnContext, dynamic data)
        {

            var intentRefList = GetIntentRefList();
            var intentCurrentList = intentRefList.Where(kv => ((IList<DispatchLuis.Intent>)data).Any(di => di.ToString().Equals(kv.Key)) || (kv.Key == Intent.None.ToString()));

            var adaptiveCard = new AdaptiveCard("1.2");


            var body = new List<AdaptiveElement>();

            foreach (var intent in intentCurrentList)
            {
                var actionSet = new AdaptiveActionSet();
                dynamic dataObject = new JObject();
                dataObject.msteams = new JObject();
                dataObject.msteams.type = "imBack";
                dataObject.msteams.value = intent.Value;
                var actionSubmit = new AdaptiveSubmitAction()
                {
                    Title = intent.Value,
                    Data = turnContext.Activity.ChannelId != "emulator" ?  dataObject : intent.Value
                };
                actionSet.Actions.Add(actionSubmit);
                body.Add(actionSet);
            }

            adaptiveCard.Body = body;


            var attachment = new Attachment()
            {
                ContentType = AdaptiveCard.ContentType,
                Content = adaptiveCard,
            };
            return MessageFactory.Attachment(attachment, inputHint: InputHints.AcceptingInput);
        }

Answer 1

that really depends on where you display the card.

The "Host" of a card, eg MS Teams or Webchat etc defines how the cards look. Part of that is the definition if actions are vertically aligned or not.

See here on what the host config is about: https://docs.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/javascript/host-config

If you are hosting (showing) the card yourself, you can change it. Otherwise you can't.

The only option you have is using stacked action sets like here:

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "Action.Submit"
                }
            ]
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.ShowCard",
                    "title": "Action.ShowCard",
                    "card": {
                        "type": "AdaptiveCard",
                        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
                    }
                }
            ]
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.ShowCard",
                    "title": "Action.ShowCard",
                    "card": {
                        "type": "AdaptiveCard",
                        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
                    }
                }
            ]
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}

Tim

Answer 2

Adaptive Cards 1.2 features are working in Teams for me. Teams supports 1.2 according to this page: https://docs.microsoft.com/en-us/adaptive-cards/resources/partners

If your problem was that Teams doesn't support Adaptive Cards 1.2 then you shouldn't see your card render at all. The fact that the buttons render but don't respond implies that you've formatted your card incorrectly. I can see that you're trying to use string submit action data, which doesn't work in Teams. The submit action data should be convertible to a JSON object.

If you're trying to simulate an imBack, Teams does provide a way to do that:

{
  "type": "Action.Submit",
  "title": "Click me for imBack",
  "data": {
    "msteams": {
        "type": "imBack",
        "value": "Text to reply in chat"
    }
  }
}

Please refer to my blog post for more information: https://blog.botframework.com/2019/07/02/using-adaptive-cards-with-the-microsoft-bot-framework/