MS Teams Bot App - How to display main menu with buttons?

Question

I'm developing a one-on-one Bot App (Azure Bot Framework) for MS Teams. A use case is simple: a user installs the Bot and Bot sends him with a welcome message plus a bunch of available functions (a menu).

My questions:

What is the best practice to display the main menu for the Bot if we speak about MS Teams?
Is it possible to have the main menu for Bot with buttons? And how to create it?

As I found Microsoft suggests using a dropdown menu (https://docs.microsoft.com/en-us/microsoftteams/platform/resources/bot-v3/bots-menus) for this purpose. But it doesn't work on mobile devices and a user has to write the command to the Bot manually - it is not the best option from UX point of view.

When I try to use buttons then I struggle with another problem: in the Adaptive Card buttons show in one line. If I separate buttons in the different column sets then:

In the desktop app everything is fine (but anyway buttons have different width).
In the iOS app everything is fine (but anyway buttons have different width).
In the Android app buttons are displayed glued to each other (without any vertical margin between them)

JSON for main menu that I used:

{
"type": "AdaptiveCard",
"version": "1.2",
"id": "main_menu",
"body": [
    {
        "type": "TextBlock",
        "wrap": true,
        "text": "%%0"
    },
    {
        "type": "ActionSet",
        "actions": [
            {
        "type": "Action.Submit",
        "title": "Use enhanced password policy",
        "style": "positive",
        "data": {
            "id": "services/pw_policy"
        }
    }
        ],
    "spacing" : "Medium"
    },
    {
        "type": "ActionSet",
        "actions": [
          {
        "type": "Action.Submit",
        "title": "Reset HPA password",
        "style": "positive",
        "data": {
            "id": "services/hpa_reset_pswd"
        }
    }
        ],
    "spacing" : "Medium"
    }
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"

}

-Bug is Resolved now, we have tested this at our end, could you please also check and confirm? — Nikitha-MSFT

Sudhir smart Sudhir smart · Accepted Answer · 2020-07-27T12:00:10

Use Colmn Set

{
"type": "AdaptiveCard",
"version": "1.2",
"id": "main_menu",
"body": [
    {
        "type": "TextBlock",
        "wrap": true,
        "text": "%%0"
    },
    {
        "type": "ColumnSet",
        "columns": [
            {
                "type": "Column",
                "width": "stretch",
                "items": [
                    {
                        "type": "ActionSet",
                        "actions": [
                            {
                                "type": "Action.Submit",
                                "title": "Use enhanced password policy",
                                "style": "positive",
                                "data": {
                                    "id": "services/pw_policy"
                                }
                            }
                        ],
                        "spacing": "Medium"
                    }
                ]
            },
            {
                "type": "Column",
                "width": "stretch",
                "items": [
                    {
                        "type": "ActionSet",
                        "actions": [
                            {
                                "type": "Action.Submit",
                                "title": "Reset HPA password",
                                "style": "positive",
                                "data": {
                                    "id": "services/hpa_reset_pswd"
                                }
                            }
                        ],
                        "spacing": "Medium"
                    }
                ]
            }
        ]
    }
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}

MS Teams Bot App - How to display main menu with buttons?

1 Answers