在 Copilot Studio 中顯示調適型卡片

文章
09/27/2024

注意

本文僅適用於經典聊天機器人。要擴展 在中創建 的 Copilot StudioCopilot，您無需使用 Bot Framework Composer。本文中描述的所有功能都可供 Copilot 直接使用 Copilot Studio。

透過使用 Bot Framework Composer 開發自訂對話方塊，然後將它們新增到您的 Microsoft Copilot Studio 機器人來增強您的機器人。

在此範例中，您將瞭解如何使用編輯器在 Microsoft Copilot Studio 中顯示調適型卡片。

重要

Composer 整合不適用於僅擁有 Teams Microsoft Copilot Studio 授權的使用者。您必須具備試用版或完整 Microsoft Copilot Studio 授權。

先決條件

建立新主題

在 Microsoft Copilot Studio 中，建立名為 Contoso Meal Delivery Service 的新 Bot。
移至主題頁面，並建立名為 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. 對於使用方式，選取 Bot (任何主題皆可存取)。
選取儲存。

Microsoft Copilot Studio 變數。

建立調適型卡片

接下來，您會使用 Composer 來顯示使用者市/鎮中可用的餐點選項影像。

在 Composer 中開啟您的 Bot。有關如何執行此操作的說明，請參閱開始使用 Bot Framework Composer。
移至建立頁面。在 Bot 中，選取其他選項 (...)，然後選取 + 新增對話方塊。
對於名稱，輸入 Meals，然後選取確定。
移至 Bot 回覆頁面。在 Bot Explorer 中，選取餐點，然後選取顯示程式碼。

在程式碼檢視中，複製並貼上以下 Bot 回覆。然後以您自己的案例取代三個範例影像 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 Bot 回覆索引標籤。

在同一個程式碼檢視中複製並貼上以下程式碼，以新增顯示三個影像的調適型卡片。

# 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"
                        }
                    ]
                }
            ]
        }
    ]
}
```

編輯器機器人回覆索引標籤 - 調適型卡片 JSON。

在同一個程式碼檢視中複製並貼上以下程式碼，以新增顯示調適型卡片的活動。
```
# AdaptiveCardMeals(location)
[Activity
    Attachments = ${json(adaptivecardjson_meals(location))}
]
```

顯示調適型卡片

移至建立頁面。在 Bot Explorer 中，選取餐點對話方塊，然後選取 BeginDialog 觸發程序。
在製作畫布上，選取新增 (+)，然後選取傳送回覆。
選取新的傳送回覆節點以開啟屬性窗格。在機器人回應底下，選取顯示程式碼以切換至程式碼編輯器。

警告

將下一個步驟中的運算式新增至回覆編輯器，而不是程式碼編輯器，將會導致 Bot 使用原始 JSON 而不使用調適型卡片來回應。
在程式碼編輯器中複製並貼上以下運算式。
```
- ${AdaptiveCardMeals(virtualagent.user_city)}
```
Microsoft Copilot Studio 全域變數是使用 virtualagent 範圍在 Composer 中進行存取。此範圍不會出現在 Composer 的屬性參考功能表中，但是您可以直接輸入運算式來存取。

在此範例中，${virtualagent.user_city} 會參考 Microsoft Copilot Studio Bot 中已建立的 user_city 全域變數。

發佈內容

發佈您的 Composer 內容以使其在您的 Microsoft Copilot Studio 機器人.

重要

在 Composer 中選取發佈會讓變更可用於測試，但不會自動發佈您的機器人。

發佈您的機器人 Microsoft Copilot Studio 以更新它所連接的所有管道的機器人。
移至 Microsoft Copilot Studio 主題頁面，以查看新的餐點主題。
開啟送餐選項主題。
在問題節點底下，選取新增節點 (+)。選取重新導向至其他主題，然後選擇餐點。
選取儲存以儲存對主題的變更。