Search code examples
pythonjsonbotframeworkmicrosoft-teamsadaptive-cards

I would like to know how to set the host config of the adaptive card using Bot framework SDK for python

If you use a Hero Card with a large number of buttons, the button actions will be scrolled horizontally on Teams. Therefore, we are considering the use of adaptive cards because we want to display the buttons as messages arranged vertically. I want to change the value of actionsOrientation of ActionsConfig of HostConfig to adapt to Adaptive Card, but I do not know how. With Bot framework SDK for python, you can create an AdaptiveCard attachment with CardFactory.adaptive_card(card_data: dict), but I don't know how to set HostConfig.

Solution

  • A host config can only be specified by an Adaptive Cards renderer, not an Adaptive Cards author. If you want to set your own host config then you need to build your own application. The idea behind Adaptive Cards is that the author is meant to have very limited control so that the renderer gets to decide how the card looks and therefore fit it into the appearance of its surroundings. Teams is such a renderer, and its host config make Adaptive Cards look like the other components within Teams. You can learn more about this in my blog post: https://blog.botframework.com/2019/07/02/using-adaptive-cards-with-the-microsoft-bot-framework/

    While that answers the question you asked, I can also answer the question you meant to ask. I think you meant to ask how to arrange buttons vertically in an Adaptive Card. Microsoft Teams now supports Adaptive Cards 1.2, which means action sets are available to you. If you put each action in its own action set in the card's body, they will be arranged vertically:

    {
    "$schema": "https://adaptivecards.io/schemas/1.2.0/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.2",
    "body": [
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "1",
                }
            ]
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "2",
                }
            ]
        }
    ]
}

    Adaptive Card