CODEWITHSUNDEEP
c#botframeworkmicrosoft-teamschatbotadaptive-cards
Rajeesh Menoth
Rajeesh Menoth

Reputation: 1750

Adaptive card action button text & UI trimmed inside the MS Team Channel

I'm having an issue where buttons and actions in ms teams adaptive cards won’t wrap text inside the action button. The button UI is completely broken even if we are applied " full: width" in MS Team. I know the "Wrap: true || false" we can add inside the adaptive card body or title of the textblock, Is there any other way to handle this type of scenario in the action button title in MS Team channel.

enter image description here

The following code we are using for the adaptive card implementation.

public static Attachment ChoiceMenu(string channelType, string text, List buttons, string subCategory = null)
{
    var menuCard = new AdaptiveCard("1.2");

    if(!string.IsNullOrEmpty(subCategory))
    {
        menuCard.Body.Add(new AdaptiveTextBlock()
        {
            Text = subCategory,
            Size = AdaptiveTextSize.Large,
            Wrap = true,
        });
    }

    menuCard.Body.Add(new AdaptiveTextBlock()
    {
        Text = text,
        Wrap = true,
    });

    foreach (var button in buttons)
    {
        var columns = new AdaptiveColumnSet();
        menuCard.Body.Add(columns);

        var userCategory = new AdaptiveColumn();
        columns.Columns.Add(userCategory);

        var actionType = new AdaptiveActionSet();
        userCategory.Items.Add(actionType);

        var submitAction = new AdaptiveSubmitAction()
        {
            Title = button,
            Id = button
        };

        if (channelType == Channels.Msteams)
        {
            submitAction.Data = new AdaptiveCardDataObjectForTeams()
            {
                MsTeams = new MsTeamsObject()
                {
                    Type = ActionTypes.MessageBack,
                    DisplayText = button,
                    Text = button
                }
            };
        }
        else
        {
            submitAction.Data = button;
        }

        actionType.Actions.Add(submitAction);
    }

    return new Attachment()
    {
        ContentType = AdaptiveCard.ContentType,
        Content = menuCard
    };
}

Platform

Adaptive Card Version

Upvotes: 1

Views: 1216

Answers (2)

Rajeesh Menoth
Rajeesh Menoth

Reputation: 1750

As per the Format cards in Microsoft Teams docs,

Cards support formatting in the text property only, not in the title or subtitle properties.

Note: The Action Button text is in the title property, This is the reason we cannot do any formatting for it. So there is no way to wrap text in the Action Button.

Alternate Solution:

We have changed the MS Team title of the button using the substring concatenation, hereafter the particular character will display "...", So this way we can alternatively fix this issue.

submitAction.Title = button.Length > 50 ? string.Concat(button.Substring(0, 50), "...") : button;

Output:

enter image description here

Reference:

Upvotes: 1

Prasad-MSFT
Prasad-MSFT

Reputation: 1029

Apart from using full width property in Adaptive card, there doesn't seem to be any way to increase the size of actionable buttons in adaptive card in order to fit the text/title properly.

"msteams": {
    "width": "Full"
}

Upvotes: -1

Related Questions