microsoft-teamsadaptive-cards

Adaptive Cards in MS Teams - Header and Notification


I am sending an adaptive card to a Microsoft Teams chat using the Graph API. I have been following this in the documentation, but I've changed application/vnd.microsoft.card.thumbnail to application/vnd.microsoft.card.adaptive in my code, and am using a card I designed using https://adaptivecards.io.

I have a couple of questions:

  1. When I post a message with an adaptive card, it looks like its inside another container rather than the whole message just being the card. Where does this header come from? Can I customize it or remove it? Adaptive card in a Teams chat. The card appears to be inside another container that has a thumbnail.

  2. When I send an HTML message, the content of the message shows up in the toast notification. Can I set preview or notification content in a card?

Edit: here is the code for the adaptive card (note that I replace {VisitorNam} and {VisitorEmail} in my code before sending this):

{
    "type": "AdaptiveCard",
    "backgroundImage": {
        "url": "https://raw.githubusercontent.com/matt-goldman/matt-goldman/main/assets/synth.jpg",
        "fillMode": "Cover",
        "verticalAlignment": "Center",
        "horizontalAlignment": "Center"
    },
    "minHeight": "200px",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "G'day, you have a visitor!",
                            "wrap": true,
                            "size": "ExtraLarge",
                            "color": "Light",
                            "weight": "Bolder"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "Image",
                            "horizontalAlignment": "Right",
                            "url": "https://github.com/matt-goldman/matt-goldman/raw/main/assets/synth_logo_thumb.png"
                        }
                    ]
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "**{visitorName}**",
            "wrap": true,
            "color": "Light",
            "size": "ExtraLarge"
        },
        {
            "type": "TextBlock",
            "text": "\n({visitorEmail})\nis here to see you and is waiting in the lobby.",
            "wrap": true,
            "color": "Light",
            "size": "Large"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.4"
}

Edit 2: Here is the method where I am sending this using the Graph SDK for .NET. The GenerateCardContent method returns the JSON listed above, but with the substitutions made.

public async Task SendNotification(string staffId, string visitorName, string visitorEmail)
    {
        
        try
        {
            var chat = new Chat
            {
                ChatType = ChatType.OneOnOne,
                Members = new List<ConversationMember>
                {
                    new ConversationMember
                    {
                        OdataType = "#microsoft.graph.aadUserConversationMember",
                        Roles = new List<string>
                        {
                            "owner",
                        },
                        AdditionalData = new Dictionary<string, object>
                        {
                            {
                                "user@odata.bind" , $"https://graph.microsoft.com/v1.0/users('{_options.TeamsSenderId}')"
                            },
                        },
                    },
                    new ConversationMember
                    {
                        OdataType = "#microsoft.graph.aadUserConversationMember",
                        Roles = new List<string>
                        {
                            "owner",
                        },
                        AdditionalData = new Dictionary<string, object>
                        {
                            {
                                "user@odata.bind" , $"https://graph.microsoft.com/v1.0/users('{staffId}')"
                            },
                        },
                    },
                }
            };

            var teamsChat = await _graphClient.Chats.PostAsync(chat);

            var attachmentGuid = Guid.NewGuid().ToString();

            var message = new ChatMessage
            {
                Body = new ItemBody
                {
                    Content = $"<attachment id=\"{attachmentGuid}\"></attachment>",
                    ContentType = BodyType.Html,
                },
                Importance = ChatMessageImportance.Normal,
                MessageType = ChatMessageType.Message,
                Locale = "en/AU",
                Attachments = new List<ChatMessageAttachment>
                {
                    new ChatMessageAttachment
                    {
                        Id = attachmentGuid,
                        ContentType = "application/vnd.microsoft.card.adaptive",
                        ContentUrl = null,
                        Content = GenerateCardContent(visitorName, visitorEmail),
                        Name = null,
                        ThumbnailUrl = null,
                    },
                }
            };

            var msg = await _teamsSenderClient.Chats[teamsChat.Id].Messages.PostAsync(message);

            Console.WriteLine($"[GraphService] Sent message: {msg.Id}");
        }
        catch (Exception ex)
        {
            _logger.LogError("Error sending visitor notification", ex);
            throw;
        }
    }

Solution

    1. Engineering team has confirmed that the above card is expected. Cards sent from Graph will now have a default placeholder for app icon. To modify it you can set teamsAppID to show the app details, but please note that it cannot be removed. enter image description here
    2. No, you can use feed APIs for this.