Tenjin Icon

How-To Display More Than 6 Actions in an Adaptive Card Within Microsoft Teams

Problem

Microsoft Teams has a hard limitation of only displaying 6 suggested action buttons; if you try to display more than 6, they will be hidden behind an ellipses button that must be clicked to show them, as demonstrated below.


{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "size": "Medium",
      "weight": "Bolder",
      "text": "Suggested Actions In Adaptive Cards (more than 9)"
    },
    {
      "type": "TextBlock",
      "text": "Demonstration of suggested actions in Microsoft Teams.",
      "wrap": true
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet3-1of9",
          "url": "${viewUrl}"
        },
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet3-2of9",
          "url": "${viewUrl}"
        },
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet3-3of9",
          "url": "${viewUrl}"
        },
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet3-4of9",
          "url": "${viewUrl}"
        },
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet3-5of9",
          "url": "${viewUrl}"
        },
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet3-6of9",
          "url": "${viewUrl}"
        },
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet3-7of9",
          "url": "${viewUrl}"
        },
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet3-8of9",
          "url": "${viewUrl}"
        },
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet3-9of9",
          "url": "${viewUrl}"
        }
      ],
    },
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.5"
}

Solution

If you would like to display more than 6 suggested action buttons within Microsoft Teams, you must use multiple ActionSet containers, with each one containing no more than 6 suggested actions. There is a sample of this below including the resulting output.


{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "size": "Medium",
      "weight": "Bolder",
      "text": "Suggested Actions In Adaptive Cards (max 6)"
    },
    {
      "type": "TextBlock",
      "text": "Demonstration of suggested actions in Microsoft Teams.",
      "wrap": true
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet1-1of6",
          "url": "${viewUrl}"
        },
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet1-2of6",
          "url": "${viewUrl}"
        },
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet1-3of6",
          "url": "${viewUrl}"
        },
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet1-4of6",
          "url": "${viewUrl}"
        },
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet1-5of6",
          "url": "${viewUrl}"
        },
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet1-6of6",
          "url": "${viewUrl}"
        }
      ]
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet2-1of6",
          "url": "${viewUrl}"
        },
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet2-2of6",
          "url": "${viewUrl}"
        },
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet2-3of6",
          "url": "${viewUrl}"
        },
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet2-4of6",
          "url": "${viewUrl}"
        },
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet2-5of6",
          "url": "${viewUrl}"
        },
        {
          "type": "Action.OpenUrl",
          "title": "ActionSet2-6of6",
          "url": "${viewUrl}"
        }
      ]
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.5"
}

Share this article

Comments

0 comments

Article is closed for comments.