自适应卡在MS Teams中 – 头部和通知

huangapple go评论58阅读模式
英文:

Adaptive Cards in MS Teams - Header and Notification

问题

以下是您提供的内容的翻译:

  1. 当我使用 Graph API 发送自适应卡到 Microsoft Teams 聊天时,我一直在遵循文档中的说明,但我已经在我的代码中将 application/vnd.microsoft.card.thumbnail 更改为 application/vnd.microsoft.card.adaptive,并且使用了我在 https://adaptivecards.io 上设计的卡片。

  2. 我有一些问题:

    1. 当我发布带有自适应卡的消息时,它看起来好像在另一个容器内,而不是整个消息只是卡片。这个标题是从哪里来的?我能够自定义它或删除它吗?
      自适应卡在MS Teams中 – 头部和通知

    2. 当我发送 HTML 消息时,消息的内容显示在弹出通知中。我能够在卡片中设置预览或通知内容吗?

编辑: 这是自适应卡的代码(请注意,我在发送之前会在我的代码中替换 {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:

  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?
    自适应卡在MS Teams中 – 头部和通知

  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):

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

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&lt;ConversationMember&gt;
                {
                    new ConversationMember
                    {
                        OdataType = &quot;#microsoft.graph.aadUserConversationMember&quot;,
                        Roles = new List&lt;string&gt;
                        {
                            &quot;owner&quot;,
                        },
                        AdditionalData = new Dictionary&lt;string, object&gt;
                        {
                            {
                                &quot;user@odata.bind&quot; , $&quot;https://graph.microsoft.com/v1.0/users(&#39;{_options.TeamsSenderId}&#39;)&quot;
                            },
                        },
                    },
                    new ConversationMember
                    {
                        OdataType = &quot;#microsoft.graph.aadUserConversationMember&quot;,
                        Roles = new List&lt;string&gt;
                        {
                            &quot;owner&quot;,
                        },
                        AdditionalData = new Dictionary&lt;string, object&gt;
                        {
                            {
                                &quot;user@odata.bind&quot; , $&quot;https://graph.microsoft.com/v1.0/users(&#39;{staffId}&#39;)&quot;
                            },
                        },
                    },
                }
            };

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

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

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

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

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

答案1

得分: 1

  1. 工程团队已确认上述卡片是预期的。从 Graph 发送的卡片现在将具有应用图标的默认占位符。要修改它,您可以设置 teamsAppID 以显示应用详情,但请注意无法删除它。 自适应卡在MS Teams中 – 头部和通知
  2. 不,您可以使用 feed APIs 来实现这一点。
英文:
  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. 自适应卡在MS Teams中 – 头部和通知
  2. No, you can use feed APIs for this.

huangapple
  • 本文由 发表于 2023年3月4日 09:44:44
  • 转载请务必保留本文链接:https://go.coder-hub.com/75633173.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定