背景
Adaptive Card で表などを投稿してると、自動では以下のような折り畳み機能がなかったので
概要
- トグルアクション を使って実施
以下の二種類をまとめたサンプルを用意
- ある要素（TextBlock とかそういうの）を選択したら表示を反転（トグル）⇒ 詳細(Expand) ⇔ 簡易(Collapse)
- アクション釦を押すことで、反転（トグル）や、表示／非表示 を行う。
動作イメージ
こんな感じで、以下動作
- 「詳細表示／簡易表示」部分で、反転（トグル）表示
- 下部のアクション釦で、それぞれ「反転」「表示」「非表示」
アクション釦は比較用に用意した物で、用途に合わせてどの操作にするか？を決める感じ
Adaptive Card 全景
詳細
反転の起動部分
選択すると「詳細表示」「簡易表示」が切り替わるようにするための要素として、TextBlockを二つ追加
反転させる必要があるので、以下とする
- 「詳細表示」は 表示
- 「簡易表示」は 非表示
ついでに、トグルアイコンを右側に追加
でもって、それっぽくするために、Color や Width なんかも調整したのが以下
isVisible の Default は true なので、初期が表示の場合は省略でも OK
反転アクション追加
反転の起動部分が出来たら、動作部分を追加
選択要素群の最後に、"selectAction" を追加して、
"targetElements" に反転（トグル）させたい要素の "id" を羅列
ここで反転させたい要素に "id" を追加しつつ
"Action" に反映していくのが名称統一もし易くてよさげ
一個ずつつけると面倒なので、複数ある場合は、"type": "Container" で囲んで ID 付けると楽
反転させる表示部分
基本は、"Container" に突っ込んで、それを反転対象とする為に "id" 設定してやるだけ
アクション釦（"selectAction" との対比用）
Designerでポチポチで突っ込めるので、便利な釦です
実際の設定は・・
トグル（反転）動作の場合
要素選択のアクションと同じく、単純に "id" 突っ込むだけ。
固定の表示・非表示動作の場合
"id" と対にして、true/false を設定するだけ
全体の JSON
動作を見たい時は、Adaptive Card Designer にて、以下を CARD PAYLOAD EDITOR にコピペして、Preview Mode で試せばOK
{
"type": "AdaptiveCard",
"version": "1.3",
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "簡易表示",
"isVisible": false,
"id": "collapse",
"wrap": true,
"color": "Accent"
},
{
"type": "TextBlock",
"text": "詳細表示",
"id": "expand",
"wrap": true,
"color": "Accent"
}
]
},
{
"type": "Column",
"width": "auto",
"id": "collapseImage",
"isVisible": false,
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/down.png",
"width": "20px",
"altText": "collapsed"
}
]
},
{
"type": "Column",
"width": "auto",
"id": "expandImage",
"isVisible": true,
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/up.png",
"width": "20px",
"altText": "expanded"
}
]
}
],
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"collapse",
"expand",
"collapseImage",
"expandImage",
"collapsedItems",
"expandedItems"
]
}
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "概要",
"isVisible": false,
"id": "collapsedItems"
},
{
"type": "Container",
"id": "expandedItems",
"items": [
{
"type": "TextBlock",
"text": "タイトルとか"
},
{
"type": "TextBlock",
"text": "追加の説明とか"
}
]
}
]
}
]
}
],
"actions": [
{
"type": "Action.ToggleVisibility",
"title": "詳細/簡易 切替",
"targetElements": [
"collapse",
"expand",
"collapsedItems",
"expandedItems"
]
},
{
"type": "Action.ToggleVisibility",
"title": "詳細表示",
"targetElements": [
{
"elementId": "collapse",
"isVisible": false
},
{
"elementId": "expand",
"isVisible": true
},
{
"elementId": "collapsedItems",
"isVisible": false
},
{
"elementId": "expandedItems",
"isVisible": true
}
]
},
{
"type": "Action.ToggleVisibility",
"title": "簡易表示",
"targetElements": [
{
"elementId": "collapse",
"isVisible": true
},
{
"elementId": "expand",
"isVisible": false
},
{
"elementId": "collapsedItems",
"isVisible": true
},
{
"elementId": "expandedItems",
"isVisible": false
}
]
}
],
"msteams": {
"width": "Full"
},
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
まとめ
既存の表示への対応をする場合は、以下を行うだけ
keyword
how to collapse or expand in Adaptive card.