在 Copilot Studio 中显示自适应卡片

项目
11/20/2024

备注

本文仅适用于经典聊天机器人。要扩展 在中创建 的代理 Copilot Studio，您无需使用 Bot Framework Composer。本文中描述的所有功能都可供代理直接使用 Copilot Studio。

通过使用 Bot Framework Composer 开发自定义对话然后将它们添加到您的 Microsoft Copilot Studio 机器人来增强您的机器人。

在此示例中，您将了解如何使用 Composer 在 Microsoft Copilot Studio 中显示自适应卡。

重要提示

Composer 集成对只有 Teams Microsoft Copilot Studio 许可证的用户不可用。您必须有试用或完整的 Microsoft Copilot Studio 许可证。

先决条件

创建新主题

在 Microsoft Copilot Studio 中，创建一个名为 Contoso Meal Delivery Service 的新机器人。
返回到主题页面，创建名为 Meal delivery options 的新主题。

复制并粘贴以下触发短语：

what meals can I order
what meal options do you have
what dishes do you deliver
entrees available for delivery

在创作画布中，选择默认消息节点。选择三个垂直点，然后选择删除。
在触发短语节点下，选择添加节点 (+)，然后选择提出问题。然后在问题节点中：
1. 对于提出问题，输入 What city are you in?。
2. 对于标识，选择城市。
在将响应另存为中，选择自动创建的变量。然后在变量属性窗格中：
1. 为名称输入 user_city。
2. 对于使用，选择机器人(任何主题都可以访问)。
选择保存。

Microsoft Copilot Studio 变量。

创建自适应卡

然后，您将使用 Composer 显示用户所在城市可用的用餐选择图像。

在 Composer 中打开您的机器人。有关如何执行的说明，请参阅 Bot Framework Composer 入门。
转到创建页面。在您的机器人中，选择更多选项 (...)，然后选择 + 添加对话。
对于名称，输入 Meals，然后选择确定。
转到机器人响应页面。在机器人浏览器中，选择订餐，然后选择显示代码。

在代码视图中，复制并粘贴以下机器人响应。然后将这三个示例图像 URL 替换为您自己的 URL。

# Chicken()
-Chicken

# Steak()
-Steak

# Tofu()
-Tofu

# SteakImageURL()
-https://www.example.com/steak.jpg

# ChickenImageURL()
-https://www.example.com/chicken.jpg

# TofuImageURL()
-https://www.example.com/tofu.jpg

带字符串的 Composer 机器人响应选项卡。

将以下代码复制并粘贴到同一代码视图中，添加显示三个图像的自适应卡。

# adaptivecardjson_meals(location)
- ```
{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.1",
    "body": [
            {
            "type": "TextBlock",
            "text": "Meal delivery options for ${location}:",
            "size": "Medium",
            "weight": "Bolder"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${SteakImageURL()}",
                            "size": "Stretch",
                            "spacing": "Medium",
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${ChickenImageURL()}",
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${TofuImageURL()}",
                            "horizontalAlignment": "Center"
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Steak()}",
                            "wrap": true,
                            "horizontalAlignment": "Center"                            
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Chicken()}",
                            "wrap": true,
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Tofu()}",
                            "wrap": true,
                            "horizontalAlignment": "Center"
                        }
                    ]
                }
            ]
        }
    ]
}
```

Composer 机器人响应选项卡 - 自适应卡 JSON。

将以下代码复制并粘贴到同一代码视图中，添加将显示自适应卡的活动。

# AdaptiveCardMeals(location)
[Activity
    Attachments = ${json(adaptivecardjson_meals(location))}
]

Composer 机器人响应选项卡 - 活动。

显示自适应卡

转到创建页面。在机器人浏览器中，选择订餐对话，然后选择 BeginDialog 触发器。
在创作画布上，选择添加 (+)，然后选择发送响应。
选择新的发送响应节点打开属性窗格。在机器人响应下，选择显示代码切换到代码编辑器。

警告

将下一步中的表达式添加到响应编辑器而不是代码编辑器，会让机器人使用原始 JSON 而不是自适应卡进行响应。
将以下表达式复制并粘贴到代码编辑器中。
```
- ${AdaptiveCardMeals(virtualagent.user_city)}
```
通过使用 virtualagent 范围在 Composer 中访问 Microsoft Copilot Studio 全局变量。此范围不会出现在 Composer 的属性引用菜单中，但您可以通过直接输入表达式来访问它。

在本例中，${virtualagent.user_city} 引用在 Microsoft Copilot Studio 机器人中创建的 user_city 全局变量。

发布内容

发布您的 Composer 内容，使其在 Microsoft Copilot Studio 机器人中可用。

重要提示

在 Composer 中选择发布可让更改进行测试，但不会自动发布您的机器人。

在 Microsoft Copilot Studio 中发布您的机器人，以在其连接的所有渠道上更新机器人。
转到 Microsoft Copilot Studio 主题页面，查看您的新用餐主题。
打开送餐选项主题。
在问题节点下选择添加节点 (+)。选择重定向到其他主题，然后选择用餐。
选择保存保存对主题的更改。