C# bot framework Align checkboxes in adaptive card along a row

Question

We have an adaptive card which is displayed after getting an answer from QnA. Within the card, we have choiceset displayed to let the user select the category he is interested in. Upon clicking select, the second level of options are given. However, we are planning to have the suboptions in the same card at first level. Is it possible to have checkboxes side by side in an adaptive card?

Code:

    public List<Attachment> EmbedAdaptiveCategoryOptions()
    {
        #region populate choiceLists

        List<AdaptiveChoice> OGChoice = new List<AdaptiveChoice>();
        List<AdaptiveChoice> GeoChoice = new List<AdaptiveChoice>();
        List<AdaptiveChoice> TechChoice = new List<AdaptiveChoice>();
        List<AdaptiveChoice> ThemeChoice = new List<AdaptiveChoice>();
        List<AdaptiveChoice> OKChoice = new List<AdaptiveChoice>();

        List<string> OGids = new List<string>();
        List<string> Geoids = new List<string>();
        List<string> Techids = new List<string>();
        List<string> themeids = new List<string>();
        List<string> feedbackids = new List<string> { "I am good with the link already shared with me above!" };

        List<CardAction> OGButtons = CreateOGButtons(out OGids);

        foreach (var item in OGButtons)
        {
            OGChoice.Add(new AdaptiveChoice() { Title = item.Title, Value = item.Value.ToString() });
        }
        List<CardAction> GeoButtons = CreateGeoButtons(out Geoids);

        foreach (var item in GeoButtons)
        {
            GeoChoice.Add(new AdaptiveChoice() { Title = item.Title, Value = item.Value.ToString() });
        }
        List<CardAction> techcardButtons = CreateTechButtons(out Techids);

        foreach (var item in techcardButtons)
        {
            TechChoice.Add(new AdaptiveChoice() { Title = item.Title, Value = item.Value.ToString() });
        }
        List<CardAction> themecardButtons = CreateThemeButtons(out themeids);

        foreach (var item in themecardButtons)
        {
            ThemeChoice.Add(new AdaptiveChoice() { Title = item.Title, Value = item.Value.ToString() });
        }            

        List<CardAction> feedbackcardButtons = new List<CardAction>();

        CardAction feedbackButton = new CardAction()
        {
            Value = "feedback",
            Type = "imBack",
            Title = "I am good with the link already shared with me above!"
        };

        feedbackcardButtons.Add(feedbackButton);

        foreach (var item in feedbackcardButtons)
        {
            OKChoice.Add(new AdaptiveChoice() { Title = item.Title, Value = item.Value.ToString() });
        }

        #endregion

        AdaptiveCard card = new AdaptiveCard();
        List<Attachment> attachments = new List<Attachment>();


            AdaptiveColumnSet Title = new AdaptiveColumnSet();
            AdaptiveColumn titletext = new AdaptiveColumn();
            titletext.Width = AdaptiveColumnWidth.Auto;

            titletext.Items.Add(new AdaptiveTextBlock()
            {
                Weight = AdaptiveTextWeight.Bolder,
                Wrap = true,
                Text = "Are you interested in searching through the file? Please select the Category you would like to refine Credentials for:",
                Size = AdaptiveTextSize.Medium
            });
            Title.Columns.Add(titletext);
            card.Body.Add(Title);

                    AdaptiveColumnSet abc = new AdaptiveColumnSet();
                    AdaptiveColumn col1 = new AdaptiveColumn();
                    col1.Width = AdaptiveColumnWidth.Auto;
                    col1.Type = "TextBlock";
                    col1.Items.Add(new AdaptiveChoiceSetInput()
                    {
                        Choices = OGChoice,
                        Separator = true,
                        IsMultiSelect = true,
                        Type = "Input.ChoiceSet"                           
                    });
                    AdaptiveColumn col2 = new AdaptiveColumn();
                    col2.Width = AdaptiveColumnWidth.Auto;
                    col2.Type = "TextBlock";
                    //col2.Type = AdaptiveTextBlock.TYPE;
                    col2.Items.Add(new AdaptiveChoiceSetInput()
                    {
                        Choices = GeoChoice,
                        Separator = true,
                        IsMultiSelect = true,
                        Type = "Input.ChoiceSet"
                    });
                    AdaptiveColumn col3 = new AdaptiveColumn();
                    col3.Width = AdaptiveColumnWidth.Auto;
                    col3.Type = "TextBlock";
                    //col2.Type = AdaptiveTextBlock.TYPE;
                    col3.Items.Add(new AdaptiveChoiceSetInput()
                    {
                        Choices = TechChoice,
                        Separator = true,
                        IsMultiSelect = true,
                        Type = "Input.ChoiceSet"
                    });
                    AdaptiveColumn col4 = new AdaptiveColumn();
                    col4.Width = AdaptiveColumnWidth.Auto;
                    col4.Type = "TextBlock";
                    //col2.Type = AdaptiveTextBlock.TYPE;
                    col4.Items.Add(new AdaptiveChoiceSetInput()
                    {
                        Choices = ThemeChoice,
                        Separator = true,
                        IsMultiSelect = true,
                        Type = "Input.ChoiceSet"
                    });
                    AdaptiveColumn col5 = new AdaptiveColumn();
                    col5.Width = AdaptiveColumnWidth.Auto;
                    col5.Type = "TextBlock";
                    //col2.Type = AdaptiveTextBlock.TYPE;
                    col5.Items.Add(new AdaptiveChoiceSetInput()
                    {
                        Choices = OKChoice,
                        Separator = true,
                        IsMultiSelect = true,
                        Type = "Input.ChoiceSet"
                    });
                    abc.Columns.Add(col1);
                    abc.Columns.Add(col2);
                    abc.Columns.Add(col3);
                    abc.Columns.Add(col4);
                    abc.Columns.Add(col5);
                    card.Body.Add(abc);

            List<AdaptiveAction> Actions = new List<AdaptiveAction>()
            {
                new AdaptiveSubmitAction()
                {
                    Id = "selectBtn",
                    Title = "Select",
                    Speak = "<s>Search</s>",
                    DataJson = "{ \"Type\": \"SubmitQuestion\" }"
                }
            };
        card.Actions.Add(Actions[0]);
                    Attachment attachment = new Attachment()
                    {
                        ContentType = AdaptiveCard.ContentType,
                        Content = card
                    };
                    attachments.Add(attachment);

        return attachments;

    }

Answer 1

You can align check boxes side-by-side in an AdaptiveCard by placing them in columns. Take a look at the AdaptiveCards documentation on columns and see the example below.

Screenshot

AdaptiveCard JSON

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "horizontalAlignment": "Center",
            "size": "Medium",
            "text": "Horizontal Checkboxes",
            "maxLines": 3
        },
        {
            "type": "ColumnSet",
            "separator": true,
            "columns": [
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Input.Toggle",
                            "id": "option1",
                            "title": "Option 1",
                            "value": "true"
                        }
                    ],
                    "width": "auto"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Input.Toggle",
                            "id": "option2",
                            "title": "Option 2",
                            "value": "false"
                        }
                    ],
                    "width": "auto"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Input.Toggle",
                            "id": "option3",
                            "title": "Option 3",
                            "value": "true"
                        }
                    ],
                    "width": "auto"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Input.Toggle",
                            "id": "option4",
                            "title": "Option 4",
                            "value": "false"
                        }
                    ],
                    "width": "auto"
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

Also, I would recommend using the AdaptiveCard Designer to help format and create your cards.

Hope this helps!