英文:
Adaptive Cards in MS Teams - Header and Notification
问题
以下是您提供的内容的翻译:
-
当我使用 Graph API 发送自适应卡到 Microsoft Teams 聊天时,我一直在遵循文档中的说明,但我已经在我的代码中将
application/vnd.microsoft.card.thumbnail
更改为application/vnd.microsoft.card.adaptive
,并且使用了我在 https://adaptivecards.io 上设计的卡片。 -
我有一些问题:
编辑: 这是自适应卡的代码(请注意,我在发送之前会在我的代码中替换 {VisitorNam}
和 {VisitorEmail}
):
{
"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"
}
编辑 2: 这是我在使用 .NET 的 Graph SDK 发送此卡片的方法。GenerateCardContent
方法返回上面列出的 JSON,但已进行替换:
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;
}
}
英文:
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;
}
}
答案1
得分: 1
- 工程团队已确认上述卡片是预期的。从 Graph 发送的卡片现在将具有应用图标的默认占位符。要修改它,您可以设置 teamsAppID 以显示应用详情,但请注意无法删除它。
- 不,您可以使用 feed APIs 来实现这一点。
英文:
- 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.
- No, you can use feed APIs for this.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论