Rendering issues with Adaptive Cards in Channels 2.0

[srikanth2042]

With the introduction of Channels 2.0, the rending of Adaptive Cards is going for a toss. We observed the following major issues:

• We see weird image/object even though we don't have any image specified in our input JSON(please see below screen shot)
• Adaptive Cards are getting collapsed. The reason we chose adaptive cards over normal cards is they won't get collapsed in Channels 1.0, which now defeats the purpose.
  

Please fix these bugs

[ghost]

Hi srikanth2042! Thank you for bringing this issue to our attention. We will investigate and if we require further information we will reach out in one business day. Please use this link to escalate if you don't get replies.

Best regards, Teams Platform

[Nivedipa-MSFT]

@srikanth2042 - Thanks for reporting your issue. Could you please share your adaptive card Json to test at our end?

[srikanth2042]

@Nivedipa-MSFT here is the json input:

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.3",
    "msTeams": {
        "width": "full"
    },
    "body": [
        {
            "type": "TextBlock",
            "wrap": true,
            "text": "Cardscanhaveactionsetsinthemiddleoftheirbody."
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.ShowCard",
                    "title": "ShowCard",
                    "card": {
                        "type": "AdaptiveCard",
                        "body": [
                            {
                                "type": "TextBlock",
                                "text": "Thisisashowcard"
                            }
                        ]
                    }
                },
                {
                    "type": "Action.OpenUrl",
                    "title": "OpenUrl",
                    "url": "https://adaptivecards.io"
                }
            ]
        },
        {
            "type": "TextBlock",
            "wrap": true,
            "text": "Therearealsostill\"actions\"atthebottomofthecard"
        }
    ],
    "actions": [
        {
            "type": "Action.ShowCard",
            "title": "ShowCard",
            "card": {
                "type": "AdaptiveCard",
                "body": [
                    {
                        "type": "TextBlock",
                        "text": "Thisisashowcard"
                    }
                ]
            }
        },
        {
            "type": "Action.OpenUrl",
            "title": "OpenUrl",
            "url": "https://adaptivecards.io"
        }
    ]
}

And rendered adaptive card in Channels 2.0 mode:

VS

Normal Teams(Channels 1.0) mode:

[Nivedipa-MSFT]

@srikanth2042 - We have tested this in Channel 2.0. We are getting collapsed adaptive card but the image is not showing at our end.

And how you have changed it to Channel 1.0?
We are getting only Channel 2.0 option like below.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 3 days. It will be closed if no further activity occurs within 3 days of this comment.

[srikanth2042]

@Nivedipa-MSFT though you can't reproduce the weird image issue, I still feel cards getting collapsed automatically is an issue. The reason we chose Adaptive Cards over normal cards is that they won't be collapsed even though they have a huge amount of data to be displayed. Can this issue be fixed to make the look and feel is consistent across Channels 1.0 & 2.0?

[Nivedipa-MSFT]

@srikanth2042 - We have raised a bug for the collapsed adaptive card. We will let you know once we get any updates on it.

[srikanth2042]

@Nivedipa-MSFT any update here?

[Nivedipa-MSFT]

@srikanth2042 - We are checking the status of the bug with engineering team. We will update you soon.

[z3019494]

Yeah i still see it on both the web version and in my clients. I check for updates daily.

Teams WEB:

MAC Client:

Has your tenant received Loop Components in Channels yet?

Mine was fixed the minute that some users were able to use loop components in channels.

[havedill]

Yes, we have loop components in channels

[ChetanSharma-msft]

Hello Everyone,
We have just now tested the above provided JSON with Developer Portal quickly and Adaptive Card is displaying properly in Teams Web clients (Classic/New/Channel2.0).

So, we are not able to repro your issue.
Could you please verify it once again and let us know.

[havedill]

Yes this is still an issue on all my platforms, for all my users

Potentially this will help. Here is the exact javascript that Zabbix runs for the Teams media type, (keep in mind this is impacting other applications using webhooks like Jira as well.

https://git.zabbix.com/projects/ZBX/repos/zabbix/browse/templates/media/msteams?at=release/5.0

var SEVERITY_COLORS = [
    '#97AAB3', // Not classified.
    '#7499FF', // Information.
    '#FFC859', // Warning.
    '#FFA059', // Average.
    '#E97659', // High.
    '#E45959', // Disaster.
    '#009900', // Resolved.
    '#000000'  // Default.
];

try {
    var params = JSON.parse(value);

    if (!params.teams_endpoint) {
        throw 'Cannot get teams_endpoint';
    }
    else if (!params.teams_endpoint.includes('office.com/webhook')) {
        throw 'Invalid MS Teams webhook URL: ' + params.teams_endpoint;
    }

    params.zabbix_url = (params.zabbix_url.endsWith('/'))
        ? params.zabbix_url.slice(0, -1) : params.zabbix_url;

    if ([0, 1, 2, 3].indexOf(parseInt(params.event_source)) === -1) {
        throw 'Incorrect "event_source" parameter given: "' + params.event_source + '".\nMust be 0-3.';
    }

    // Set "use_default_message" to true for non trigger-based events.
    if (params.event_source !== '0') {
        params.use_default_message = 'true';
    }

    // Check {EVENT.VALUE} for trigger-based and internal events.
    if (params.event_value !== '0' && params.event_value !== '1'
        && (params.event_source === '0' || params.event_source === '3')) {
        throw 'Incorrect "event_value" parameter given: "' + params.event_value + '".\nMust be 0 or 1.';
    }

    // Check {EVENT.UPDATE.STATUS} only for trigger-based events.
    if (params.event_update_status !== '0' && params.event_update_status !== '1' && params.event_source === '0') {
        throw 'Incorrect "event_update_status" parameter given: "' + params.event_update_status + '".\nMust be 0 or 1.';
    }

    if (params.event_value == 0) {
        params.event_nseverity = '6';
    }

    if (!SEVERITY_COLORS[params.event_nseverity]) {
        params.event_nseverity = '7';
    }

    var request = new CurlHttpRequest(),
        facts = [],
        body = {
            themeColor: SEVERITY_COLORS[params.event_nseverity].replace('#', ''),
            summary: 'Zabbix',
            sections: [
                {
                    markdown: 'false',
                    activityTitle: params.alert_subject,
                    activitySubtitle: 'On ' + params.host_name + ' [' + params.host_ip + ']',
                    text: (params.use_default_message.toLowerCase() == 'true')
                        ? params.alert_message
                        : params.trigger_description
                }
            ],
            potentialAction: [
                {
                    '@type': 'OpenUri',
                    name: (params.event_source === '0' && params.event_recovery_value !== '0')
                        ? 'Acknowledge'
                        : 'View Event History',
                    targets: [
                        {
                            os: 'default',
                            uri: (params.event_source === '0' && params.event_recovery_value !== '0')
                                ? params.zabbix_url + '/zabbix.php?action=popup&popup_action=acknowledge.edit&eventids%5B%5D=' +
                                  params.event_id
                                : params.zabbix_url + '/tr_events.php?triggerid=' + params.trigger_id + '&eventid=' + params.event_id
                        }
                    ]
                }
            ]
        };

    if (params.use_default_message.toLowerCase() !== 'true') {
        // Problem message.
        if (params.event_value === '1' && params.event_update_status === '0') {
            facts.push({
                name: 'Event time',
                value: params.event_time + ' ' + params.event_date
            });
        }
        // Update message.
        else if (params.event_update_status === '1') {
            body.sections[0].text = params.event_update_user + ' ' + params.event_update_action + '.';

            if (params.event_update_message) {
                body.sections[0].text += '<br>Message:<br>' + params.event_update_message;
            }

            facts.push({
                name: 'Event update time',
                value: params.event_update_time + ' ' + params.event_update_date
            });
        }
        // Resolved message.
        else {
            facts.push({
                name: 'Recovery time',
                value: params.event_recovery_time + ' ' + params.event_recovery_date
            });
        }

        if (params.event_severity && params.event_severity !== '{EVENT.SEVERITY}') {
            facts.push({
                name: 'Severity',
                value: params.event_severity
            });
        }


        if (params.event_opdata && params.event_opdata !== '{EVENT.OPDATA}') {
            facts.push({
                name: 'Operational data',
                value: params.event_opdata.replace(/(?:\r\n|\r|\n)/g, '<br>')
            });
        }

        if (params.event_tags && params.event_tags !== '{EVENT.TAGS}') {
            facts.push({
                name: 'Event tags',
                value: params.event_tags
            });
        }

        Object.keys(params)
            .forEach(function (key) {
                if (key.startsWith('fact_') && params[key] !== '') {
                    facts.push({
                        name: key.substring(5),
                        value: params[key]
                    });
                }
                else if (key.startsWith('openUri_') && params[key] !== '' && !params[key].startsWith('{')) {
                    body.potentialAction.push({
                        '@type': 'OpenUri',
                        name: key.substring(8),
                        targets: [
                            {
                                os: 'default',
                                uri: params[key]
                            }
                        ]
                    });
                }
            });
        body.sections[0].facts = facts;
    }

    body.sections[0].text = body.sections[0].text.replace(/(?:\r\n|\r|\n)/g, '<br>');

    request.AddHeader('Content-Type: application/json');

    if (typeof params.HTTPProxy === 'string' && params.HTTPProxy !== '') {
        request.SetProxy(params.HTTPProxy);
    }

    Zabbix.Log(4, '[ MS Teams Webhook ] JSON: ' + JSON.stringify(body));

    var response = request.Post(params.teams_endpoint, JSON.stringify(body));

    Zabbix.Log(4, '[ MS Teams Webhook ] Response: ' + response);

    if (response === '1') {
        return 'OK';
    }
    else {
        Zabbix.Log(4, '[ MS Teams Webhook ] FAILED with response: ' + response);
        throw response;
    }
}
catch (error) {
    Zabbix.Log(3, '[ MS Teams Webhook ] ERROR: ' + error);
    throw 'Sending failed: ' + error;
}

[havedill]

I can reproduce with this simple bash as well to my webhook connector.

JSON="{\"title\": \"${env^^} Incoming Server Updates\", \"themeColor\": \"Red\", \"text\": \"<br>
$MESSAGE
\" }"

curl -k -H "Content-Type: application/json" -d "${JSON}" "${TEAMS_URL}"

[Prasad-MSFT]

Hi @havedill - We tried below using simple bash to our webhook connector and observed below behaviour in Teams classic and New Teams as well:
curl.exe -H "Content-Type:application/json" -d "{ '@type': 'MessageCard', '@context': 'https://schema.org/extensions', 'summary':'\uD83D\uDCAC <b>Summary test</b> on', 'themeColor': '#00FF00', 'title': '\uD83D\uDCAC <b>Sebastian commented</b> on', 'sections':[{'text': 'The actionable messages include six visible buttons on the card. Each button is defined in the potentialAction property of the message by using ActionCard actions, each with an input type, a text field, a date picker, or a multiple-choice list. Each ActionCard has an associated action, for example HttpPOST.For the HttpPOST action, the bearer token is included with the requests. This token includes the Microsoft Entra identity of the Microsoft 365 user who took the action.You can also use this JSON to create cards containing rich inputs, such as text entry, multiselect, or selecting date and time. The code that generates the card and posts it to the webhook URL can run on any hosted service. These cards are defined as part of actionable messages and are also supported in cards used in Teams bots and message extensions.'}]}" $WEBHOOKURL

Could you please confirm if you are observing the same or not?

[havedill]

Slightly better looking, but no still cuts off after like 2 lines. Keep in mind alerts can be quite large on purpose. I would like to see the entirely of the output, or maybe have a setting to set like 20 or 30 lines before being truncated or something

Using my original example JSON structure

JSON="{\"title\": \" Incoming Server Updates\", \"themeColor\": \"Red\", \"text\": \"<br>
hello<br><br>world<br><br>superlong
\" }"
curl -k -H "Content-Type: application/json" -d "$JSON" $WEBHOOKURL

Copying your JSON structure

JSON='{"@type":"MessageCard","@context":"https://schema.org/extensions","summary":"Test 2 Using MS JSon","themeColor":"#00FF00","title":"Test","sections":[{"text":"hello<br><br>world<br><br>superlong"}]}'
 curl -k -H "Content-Type: application/json" -d "$JSON" $WEBHOOKURL 

It seems replacing the HTML
with \n seems to help slightly. Although it requires two \n characters to create a single new line

$JSON='{"@type":"MessageCard","@context":"https://schema.org/extensions","summary":"Test 2 Using MS JSon","themeColor":"#00FF00","title":"Test","sections":[{"text":"hello\n\nworld\n\nsuperlong"}]}'
curl -k -H "Content-Type: application/json" -d "$JSON" $WEBHOOKURL                                                     

Using <p> does not help either

$JSON='{"@type":"MessageCard","@context":"https://schema.org/extensions","summary":"Test 2 Using MS JSon","themeColor":"#00FF00","title":"Test","sections":[{"text":"hello<p>world<p>superlong<p>boom<p>bang<p>boom"}]}'
curl -k -H "Content-Type: application/json" -d "$JSON" $WEBHOOKUR

[Prasad-MSFT]

Thanks for confirming, we have reopened the bug which was already raised and made engineering team aware about the reoccurrence of the issue. Once we get further update, we will inform in this thread.

Thanks again!

[havedill]

I've added some more details, hopefully it helps. Thank you

[Prasad-MSFT]

The issue seems to be fixed. Please do verify.

Tested with Microsoft Teams version 24183.2200.2972.8859.
The client version is 49/24053101421.

[Prasad-MSFT]

We are closing this issue for now. Please feel free to reopen if required. Thanks!

[microsoft-github-policy-service]

Tell us about your experience!

Hi srikanth2042! This issue is closed in our system. We would like your feedback on your experience with our support team and Platform.

Best regards,
Teams Platform