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:
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?
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;
}
}