アダプティブカードテンプレートの言語

テンプレートを使用すると、アダプティブカードのレイアウトからデータを分離できます。テンプレート言語は、テンプレートの作成に使用される構文です。

アダプティブカードテンプレートの概要については、こちらをご覧ください

Important

2020 年 5 月リリース候補の破壊的変更

テンプレートのリリース作業に熱心に取り組んできましたが、ついに最終段階に入っています。リリースが近づくにつれて、いくつかの小さな破壊的な変更を加える必要がありました。

2020 年 5 月時点の破壊的変更

バインド構文が {...} から ${...}
- 例: "text": "Hello {name}" は次のようになります。 "text": "Hello ${name}"

データへのバインド

テンプレートの記述は、カードの "非静的" コンテンツを "バインド式" に置き換えるのと同じくらい簡単です。

静的カードのペイロード

{
   "type": "TextBlock",
   "text": "Matt"
}

テンプレートのペイロード

{
   "type": "TextBlock",
   "text": "${firstName}"
}

バインド式は、静的コンテンツを配置できる任意の場所に配置できます。
バインド構文は ${ で始まり、 }で終わります。例: ${myProperty}
オブジェクト階層のサブオブジェクトにアクセスするには、 ドット表記 を使用します。例: ${myParent.myChild}
正常な null 処理により、オブジェクトグラフ内の null プロパティにアクセスした場合に例外が発生しないようにします。
インデクサー構文を使用して、配列内のキーまたは項目によってプロパティを取得します。例: ${myArray[0]}

データの提供

これでテンプレートが作成されたので、それを完成させるデータを提供する必要があります。これを行うには、次の 2 つのオプションがあります。

オプション A: テンプレートペイロード内のインライン。 AdaptiveCard テンプレートペイロード内でデータをインラインで指定できます。これを行うには、ルート $data オブジェクトにAdaptiveCard属性を追加するだけです。
オプション B: 別のデータオブジェクトとして。このオプションでは、実行時に Templating SDK に 2 つの個別のオブジェクト ( template と data) を指定します。通常はテンプレートを作成し、後で動的データを提供する必要があるため、これはより一般的なアプローチになります。

オプション A: インラインデータ

{
    "type": "AdaptiveCard",
    "$data": {
        "employee": {
            "name": "Matt",
            "manager": { "name": "Thomas" },
            "peers": [{
                "name": "Andrew" 
            }, { 
                "name": "Lei"
            }, { 
                "name": "Mary Anne"
            }, { 
                "name": "Adam"
            }]
        }
    },
    "body": [
        {
            "type": "TextBlock",
            "text": "Hi ${employee.name}! Here's a bit about your org..."
        },
        {
            "type": "TextBlock",
            "text": "Your manager is: ${employee.manager.name}"
        },
        {
            "type": "TextBlock",
            "text": "3 of your peers are: ${employee.peers[0].name}, ${employee.peers[1].name}, ${employee.peers[2].name}"
        }
    ]
}

オプション B: テンプレートをデータから分離する

または、データを含めずに再利用可能なカードテンプレートを作成します (より可能性が高くなります)。このテンプレートはファイルとして格納し、ソース管理に追加できます。

EmployeeCardTemplate.json

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "text": "Hi ${employee.name}! Here's a bit about your org..."
        },
        {
            "type": "TextBlock",
            "text": "Your manager is: ${employee.manager.name}"
        },
        {
            "type": "TextBlock",
            "text": "3 of your peers are: ${employee.peers[0].name}, ${employee.peers[1].name}, ${employee.peers[2].name}"
        }
    ]
}

次に、それを読み込み、テンプレート SDK を使用して実行時にデータを提供します。

JavaScript の例

adaptivecards-templating パッケージの使用。

var template = new ACData.Template({ 
    // EmployeeCardTemplate goes here
});

// Specify data at runtime
var card = template.expand({
    $root: {
        "employee": {
            "name": "Matt",
            "manager": { "name": "Thomas" },
            "peers": [{
                "name": "Andrew" 
            }, { 
                "name": "Lei"
            }, { 
                "name": "Mary Anne"
            }, { 
                "name": "Adam"
            }]
        }
    }
});

// Now you have an AdaptiveCard ready to render!

デザイナーのサポート

アダプティブカードデザイナーが、テンプレートをサポートするように更新されました。

次の方法で試してみてください。 https://adaptivecards.microsoft.com/designer

サンプルデータエディター - [プレビューモード] でデータバインドカードを表示するには、ここでサンプルデータを指定します。このペインには、既存のサンプルデータからデータ構造を設定するための小さなボタンがあります。
プレビューモード - ツールバーボタンを押して、編集エクスペリエンスとサンプルデータプレビューエクスペリエンスを切り替えます
サンプルを開く - このボタンをクリックすると、さまざまなサンプルペイロードが開きます

高度なバインド

バインドスコープ

さまざまなバインドスコープにアクセスするための予約済みキーワードがいくつかあります。

{
    "${<property>}": "Implicitly binds to `$data.<property>`",
    "$data": "The current data object",
    "$root": "The root data object. Useful when iterating to escape to parent object",
    "$index": "The current index when iterating"
}

要素へのデータコンテキストの割り当て

任意の要素に "データコンテキスト" を割り当てるには、要素に $data 属性を追加します。

{
    "type": "Container",
    "$data": "${mySubObject}",
    "items": [
        {
            "type": "TextBlock",
            "text": "This TextBlock is now scoped directly to 'mySubObject': ${mySubObjectProperty}"
        },
        {
            "type": "TextBlock",
            "text": "To break-out and access the root data, use: ${$root}"
        }
    ]
}

配列内の項目の繰り返し

アダプティブカード要素の $data プロパティが配列にバインドされている場合、 要素自体は配列内の各項目に対して繰り返されます。
プロパティ値で使用されるバインド式 (${myProperty}) は、配列内の 個々の項目 にスコープが設定されます。
文字列の配列にバインドする場合は、 ${$data} を使用して個々の文字列要素にアクセスします。例: "text": "${$data}"

たとえば、次の TextBlock は配列であるため、 $data 3 回繰り返されます。 text プロパティが配列内の個々のオブジェクトのname プロパティにどのようにバインドされているかに注目してください。

{
    "type": "Container",
    "items": [
        {
            "type": "TextBlock",
            "$data": [
                { "name": "Matt" }, 
                { "name": "David" }, 
                { "name": "Thomas" }
            ],
            "text": "${name}"
        }
    ]
}

結果は次のようになります。

{
    "type": "Container",
    "items": [ 
        {
            "type": "TextBlock",
            "text": "Matt"
        },
        {
            "type": "TextBlock",
            "text": "David"
        }
        {
            "type": "TextBlock",
            "text": "Thomas"
        }
    ]
}

組み込み関数

豊富なヘルパー関数がなければ、テンプレート言語は完成しません。アダプティブカードテンプレートは、アダプティブ式言語 (AEL) に基づいて構築されています。これは、さまざまなプラットフォームで評価できる式を宣言するためのオープン標準です。また、これは "Logic Apps" の適切なスーパーセットであるため、Power Automate などと同様の構文を使用できます。

これは、組み込み関数の小さなサンプリングにすぎません。

アダプティブ式言語の事前構築済み関数の完全な一覧を確認してください。

条件付き評価

if(expression, trueValue, falseValue)

if 例

{
    "type": "TextBlock",
    "color": "${if(priceChange >= 0, 'good', 'attention')}"
}

JSON の解析

json(jsonString) - JSON 文字列を解析する

json 例

これは、 message プロパティが JSON でシリアル化された文字列である Azure DevOps 応答です。文字列内の値にアクセスするには、テンプレートで json 関数を使用する必要があります。

データ

{
    "id": "1291525457129548",
    "status": 4,
    "author": "Matt Hidinger",
    "message": "{\"type\":\"Deployment\",\"buildId\":\"9542982\",\"releaseId\":\"129\",\"buildNumber\":\"20180504.3\",\"releaseName\":\"Release-104\",\"repoProvider\":\"GitHub\"}",
    "start_time": "2018-05-04T18:05:33.3087147Z",
    "end_time": "2018-05-04T18:05:33.3087147Z"
}

使用方法

{
    "type": "TextBlock",
    "text": "${json(message).releaseName}"
}

その結果、次の結果が得

{
    "type": "TextBlock",
    "text": "Release-104"
}

カスタム関数

カスタム関数は、テンプレート SDK の API を介してサポートされます。

条件付きレイアウト `$when`

条件が満たされた場合に要素全体を削除するには、 $when プロパティを使用します。 $whenがfalseに評価された場合、要素はユーザーには表示されません。

{
    "type": "AdaptiveCard",
    "$data": {
        "price": "35"
    },
    "body": [
        {
            "type": "TextBlock",
            "$when": "${price > 30}",
            "text": "This thing is pricy!",
            "color": "attention",
        },
         {
            "type": "TextBlock",
            "$when": "${price <= 30}",
            "text": "Dang, this thing is cheap!",
            "color": "good"
        }
    ]
}

テンプレートの作成

現在、テンプレート "パーツ" の作成はサポートされません。しかし、私たちは選択肢を模索しており、もっと早く共有したいと考えています。ご意見をお待ちしております！

例示

更新されたサンプルページを参照して、あらゆる種類の新しいテンプレートカードを探索します。

Last updated on 2025-12-18