简体   繁体   English

是否可以在 Microsoft Teams 的轮播中使用全宽自适应卡片?

[英]Is it possible to use full width adaptive cards in a carousel on Microsoft Teams?

I'm using我正在使用

  • Microsoft Teams微软团队
  • Adaptive Cards 1.4自适应卡片 1.4
  • Node.js Bot Framework SDK 4.14.1 Node.js 机器人框架 SDK 4.14.1

I tried the following URL sample with the full-width property.我尝试了以下带有全角属性的 URL 示例。

https://docs.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-reference#example-of-a-carousel-collection https://docs.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-reference#example-of-a-carousel-collection

But, the property doesn't work.但是,该属性不起作用。

Is this possible?这可能吗?

My code:我的代码:

await context.sendActivity({
      attachmentLayout: "carousel",
      attachments: [
        {
          "contentType": "application/vnd.microsoft.card.adaptive",
          "content": {
            "type": "AdaptiveCard",
            "version": "1.4",
            "msteams": {
              "width": "Full"
            },
            "body": [
              {
                "type": "Container",
                "items": [
                  {
                    "type": "TextBlock",
                    "size": "extraLarge",
                    "weight": "bolder",
                    "text": "Welcome to Employee Connect",
                    "height": "stretch"
                  },
                  {
                    "type": "TextBlock",
                    "size": "medium",
                    "weight": "bolder",
                    "text": "Add events to your calendar",
                    "height": "stretch"
                  },
                  {
                    "type": "TextBlock",
                    "weight": "bolder",
                    "text": "The bot can send \r\rnotification to remind \r\ryou about the latest \r\revents and trainings.",
                    "wrap": true,
                    "height": "stretch"
                  },
                  {
                    "type": "ColumnSet",
                    "columns": [
                      {
                        "type": "Column",
                        "items": [],
                        "height": "stretch"
                      }
                    ]
                  },
                  {
                    "type": "ColumnSet",
                    "columns": [
                      {
                        "type": "Column",
                        "items": [],
                        "height": "stretch"
                      }
                    ]
                  }
                ]
              }
            ],
            "actions": [
              {
                "type": "Action.Submit",
                "title": "Let's get started"
              }
            ]
          }
        },
        {
          "contentType": "application/vnd.microsoft.card.adaptive",
          "content": {
            "type": "AdaptiveCard",
            "version": "1.4",
            "msteams": {
              "width": "Full"
            },
            "body": [
              {
                "type": "Container",
                "items": [
                  {
                    "type": "TextBlock",
                    "size": "large",
                    "weight": "bolder",
                    "text": "Employee connect"
                  },
                  {
                    "type": "TextBlock",
                    "text": "The bot can send notifications \r\rto remind you about the latest \r\r events and training",
                    "wrap": true,
                    "maxWidth": 2
                  },
                  {
                    "type": "ColumnSet",
                    "columns": [
                      {
                        "type": "Column",
                        "items": [],
                        "height": "stretch"
                      }
                    ]
                  },
                  {
                    "type": "ColumnSet",
                    "columns": [
                      {
                        "type": "Column",
                        "items": [],
                        "height": "stretch"
                      }
                    ]
                  }
                ]
              }
            ],
            "actions": [
              {
                "type": "Action.Submit",
                "title": "Let's get started"
              }
            ]
          }
        },
        {
          "contentType": "application/vnd.microsoft.card.adaptive",
          "content": {
            "type": "AdaptiveCard",
            "version": "1.4",
            "msteams": {
              "width": "Full"
            },
            "body": [
              {
                "type": "Container",
                "items": [
                  {
                    "type": "TextBlock",
                    "size": "large",
                    "weight": "bolder",
                    "text": "Employee Connect final"
                  },
                  {
                    "type": "TextBlock",
                    "weight": "bolder",
                    "text": "Create and manage your tasks",
                    "wrap": true
                  },
                  {
                    "type": "TextBlock",
                    "text": "The app identifies all your pending tasks \r\r and helps you manage everything at \r\r one place.",
                    "wrap": true
                  },
                  {
                    "type": "TextBlock",
                    "weight": "bolder",
                    "text": "Try these commands \r\r- Pending Submissions \r\r- Pending Approvals- My Tools",
                    "wrap": true,
                    "height": "stretch"
                  }
                ]
              }
            ],
            "actions": [
              {
                "type": "Action.Submit",
                "title": "Let's get started"
              }
            ]
          }
        }
      ],
    });

Result:结果: 在此处输入图像描述

We tried to repro this at our end on web client and we were able to use full width adaptive cards in a carousel.我们尝试在 Web 客户端上重现这一点,并且我们能够在轮播中使用全宽自适应卡片

However we see the above issue is repro'ing on desktop, adaptive card is not shown in full width.但是我们看到上述问题在桌面上重现,自适应卡未全宽显示。 We have raised it internally.我们已经在内部提出了它。

Desktop :桌面 : 在此处输入图片说明 Web client:网络客户端: 在此处输入图片说明

I've reported this issue a while ago to Microsoft , something about the same time this topic was created.不久前我已经向 Microsoft报告了这个问题,大约在同一时间创建了这个主题。 They've done a hotfix to have it aligned with an older version (?) but will fix the actual issue later on.他们已经完成了一个修补程序以使其与旧版本(?)保持一致,但稍后会修复实际问题。 You can track it on the following URL where they keep us updated:您可以在以下 URL 上跟踪它,他们会向我们提供最新信息:

https://github.com/MicrosoftDocs/msteams-docs/issues/4394 https://github.com/MicrosoftDocs/msteams-docs/issues/4394

(I couldn't just add a reply because my reputation is not high enough yet.) (我不能只添加回复,因为我的声誉还不够高。)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 微软团队机器人自适应卡片轮播删除卡片 - Microsoft teams bot adaptive card carousel deleting a card [Teams][botbuilder] Adaptive Cards TextBlock 中的空行 - [Teams][botbuilder] Empty lines in Adaptive Cards TextBlock 使用自适应卡片在团队中构建是/否表格 - Build a yes/no form in teams with adaptive cards 自适应卡上的 Action.Submit 不会调用下一步(仅在 Microsoft Teams 中有效,在 web 聊天中有效):Bot Framework V4 - Action.Submit on Adaptive cards is not calling the next step (not working only in Microsoft Teams works in web chat) : Bot Framework V4 Carousel布局FB Messenger Node.js中的自适应卡? - Adaptive Cards in Carousel Layout FB Messenger Node.js? 如何在 Microsoft Teams bot 上检索自适应卡片数据? - How to retrieve Adaptive Card data on Microsoft Teams bot? Microsoft Teams 自适应卡 - 暗模式颜色问题 - Microsoft Teams Adaptive Card - Dark Mode Color Issue 自适应卡在Microsoft Teams中返回undefined,但在bot模拟器中运行良好 - Adaptive Card returns undefined in Microsoft Teams but works well in bot emulator Microsoft 团队使用活动 ID 删除自适应卡片 - Microsoft teams delete an adaptive card using activity id Adaptive Cards 和 Microsoft Bot Framework:仅允许“openUrl”操作? - Adaptive Cards and Microsoft Bot Framework: will only permit 'openUrl' action?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM