調適型卡片模板設計

我們很高興能分享新工具的預覽，以協助您建立、 重複使用及共用調適型卡片。

這很重要

2020 年 5 月發行候選版中的重大變更

範本化的版本候選版包含一些次要的破壞性變更，如果您一直在使用舊版套件，您應該注意這些變更。如需詳細資料，請參閱下文。

截至 2020 年 5 月的重大變更

系結語法已從 {...} 變更為 ${...}。
- 例如： "text": "Hello {name}" 變成 "text": "Hello ${name}"
JavaScript API 不再包含 EvaluationContext 物件。只要將數據傳遞至函式 expand 即可。如需完整詳細數據，請參閱 SDK 頁面。
.NET API 經過重新設計，以更緊密地符合 JavaScript API。如需完整詳細數據，請參閱 SDK 頁面。

模板技術如何能幫助您

範本化可讓數據與調適型卡片中的 版面配置 區隔。

它可協助設計卡片一次，然後填入實際數據

目前無法使用 Adaptive Card Designer 工具來建立卡片，並使用該 JSON 以 動態內容填入資料負載。若要達成此目的，您必須撰寫自定義程式代碼來建置 JSON 字串，或使用物件模型 SDK 來建置代表卡片的 OM，並將其串行化為 JSON。不論是哪一種情況，Designer 都是一次性的單向作業，一旦將卡片設計轉換成程式代碼之後，就難以調整卡片設計。

它使通過電線的資料傳輸更精簡

想像一下範本和數據可以直接在 用戶端上結合的世界。這表示如果您多次使用相同的範本，或想要以新的數據更新它，您只需要將新數據傳送至裝置，就可以重複使用相同的範本。

它可協助您從您提供的數據建立外觀絕佳的卡片

我們認為 Adaptive Cards 很棒，但如果您不必為想要展示給用戶的每一項內容撰寫 Adaptive Card，那會如何呢？透過範本服務（如下所述），我們可以建立一個世界，讓每個人都能參與、探索及共用任何類型的數據範本。

在您自己的專案、組織或整個因特網內共用。

AI 和其他服務可以改善用戶體驗

藉由將數據與內容分開，即可為 AI 和其他服務開啟一扇門，以「推理」我們所看到的卡片中的數據，並增強用戶生產力，或協助我們尋找事物。

什麼是自適應卡片模板？

其中包含 3 個主要元件：

範本語言是用來撰寫範本的語法。設計師甚至可讓您在設計時預覽您的範本，透過包含「範例數據」。
範本化 SDK 將會存在於所有支援的調適型卡片平臺上。這些 SDK 可讓您在後端或直接在用戶端上以實際數據填入範本。
範本服務是一項概念證明服務，可讓任何人尋找、參與及共用一組已知的範本。

範本語言

範本語言是用來撰寫調適型卡片範本的語法。

備註

開啟新的索引標籤以遵循下列範例

https://adaptivecards.io/designer

按兩下 [預覽模式 ] 按鈕，在設計模式和預覽模式之間切換。

設計工具螢幕快照

新更新的設計工具新增了撰寫範本的支援，並提供 範例數據 ，以在設計時間預覽卡片。

將下列範例貼到 [ 卡片承載編輯器] 窗格中：

EmployeeCardTemplate.json

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "ColumnSet",
            "style": "accent",
            "bleed": true,
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${photo}",
                            "altText": "Profile picture",
                            "size": "Small",
                            "style": "Person"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Hi ${name}!",
                            "size": "Medium"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Here's a bit about your org...",
                            "spacing": "None"
                        }
                    ]
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "Your manager is: **${manager.name}**"
        },
        {
            "type": "TextBlock",
            "text": "Your peers are:"
        },
        {
            "type": "FactSet",
            "facts": [
                {
                    "$data": "${peers}",
                    "title": "${name}",
                    "value": "${title}"
                }
            ]
        }
    ]
}

然後將下面的 JSON 數據貼到 範例數據編輯器中。

範例數據 可協助您在傳遞實際數據時，確切地查看卡片在運行時間顯示的方式。

EmployeeData

{
    "name": "Matt",
    "photo": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
    "manager": {
        "name": "Thomas",
        "title": "PM Lead"
    },
    "peers": [
        {
            "name": "Lei",
            "title": "Sr Program Manager"
        },
        {
            "name": "Andrew",
            "title": "Program Manager II"
        },
        {
            "name": "Mary Anne",
            "title": "Program Manager"
        }
    ]
}

按兩下 [預覽模式] 按鈕。您應該會看到卡片根據上述提供的範例數據呈現。您可以隨意調整範例數據，並即時監看卡片更新。

恭喜，您剛剛撰寫了第一個調適型卡片範本！接下來，讓我們瞭解如何使用實際數據填入範本。

深入瞭解範本語言

SDK 支援

範本化 SDK 可讓您使用實際數據填入範本。

備註

目前，範本化 SDK 適用於 .NET 和 NodeJS。經過一段時間，我們將針對所有剩餘的調適型卡片平臺發行範本化 SDK，例如 iOS、Android、UWP 等。

平台	套件/包裹	安裝	文件資料
JavaScript		`npm install adaptivecards-templating`	文件
.NET		`dotnet add package AdaptiveCards.Templating`	文件

JavaScript 範例

下列 JavaScript 顯示將用來填入數據範本的一般模式。

var template = new ACData.Template({ 
    // Card Template JSON
});

var card = template.expand({
    $root: {
        // Data Fields
    }
});

// Now you have an AdaptiveCard ready to render!

C# 範例

下列 C# 顯示將用來填入資料範本的一般模式。

var template = new AdaptiveCards.Templating.AdaptiveCardTemplate(cardJson);
   
var card = template.Expand(new {Key="Value"});

// Now you have an AdaptiveCard ready to render!

深入了解範本化 SDK

範本服務

調適型卡片範本服務是一項概念證明服務，可讓任何人尋找、參與及共用一組已知的範本。

如果您想要顯示某些數據，但不想為它撰寫自定義調適型卡片，這會很有用。

取得範本的 API 已足夠直接，但服務實際上提供更多功能，包括分析數據並尋找可能適合您的範本的能力。

HTTP GET https://templates.adaptivecards.io/graph.microsoft.com/Profile.json

所有範本都是儲存在 GitHub 存放庫中的一般 JSON 檔案，因此任何人都可以像任何其他開放原始碼一樣參與這些檔案。

深入瞭解卡片範本服務

下一步和傳送意見反應

範本化與數據分離，讓我們更接近我們的使命：「應用程式與服務之間的生態系統標準化內容交換」。。我們在此領域有很多內容要推出，因此敬請關注，並讓我們知道它在 GitHub 上的使用情況！

Last updated on 2025-07-03

共用方式為