PowerAutomate: Adaptive Card で Teams の「詳細表示／簡易表示」のような折り畳み機能 ( Collapse / Expand ) を実現する

# 背景
Adaptive Card で表などを投稿してると、自動では以下のような折り畳み機能がなかったので
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/8a5b47ae-d2f4-8c77-980d-0da888d495d7.png)


# 概要
- [トグルアクション](https://www.adaptivecards.io/explorer/Action.ToggleVisibility.html) を使って実施

以下の二種類をまとめたサンプルを用意
1. ある要素（TextBlock とかそういうの）を選択したら表示を反転（トグル）⇒　詳細(Expand) ⇔ 簡易(Collapse)
1. アクション釦を押すことで、反転（トグル）や、表示／非表示　を行う。

## 動作イメージ
こんな感じで、以下動作

- 「詳細表示／簡易表示」部分で、反転（トグル）表示
- 下部のアクション釦で、それぞれ「反転」「表示」「非表示」

:::note info
アクション釦は比較用に用意した物で、用途に合わせてどの操作にするか？を決める感じ
:::

![Expand動作.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/25e0ce17-cd74-f409-5553-cb6508338796.gif)

## Adaptive Card 全景
![Card 全景](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1645569/b4ae3281-7d99-22ea-5227-0c1a796e394f.png)


# 詳細
## 反転の起動部分
選択すると「詳細表示」「簡易表示」が切り替わるようにするための要素として、TextBlockを二つ追加
反転させる必要があるので、以下とする
- 「詳細表示」は 表示
- 「簡易表示」は 非表示

ついでに、トグルアイコンを右側に追加
でもって、それっぽくするために、Color や Width なんかも調整したのが以下

![選択したらトグル](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1645569/e3a92709-5551-b1af-2774-e939468e7fdd.png)

:::note info
isVisible の Default は true なので、初期が表示の場合は省略でも OK
![初期が表示の場合は省略でも OK](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1645569/43fb81e0-5245-57cd-6023-b0e16c9f5458.png)
:::

### 反転アクション追加
反転の起動部分が出来たら、動作部分を追加

選択要素群の最後に、"selectAction" を追加して、
"targetElements" に反転（トグル）させたい要素の "id" を羅列

![反転アクション追加](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1645569/687bce79-9293-34cc-0791-01f520945c58.png)

:::note info
ここで反転させたい要素に "id" を追加しつつ
"Action" に反映していくのが名称統一もし易くてよさげ
:::
![ここで反転させたい要素に対して、"id" を追加](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1645569/c37fd0ab-8d70-f524-146c-63954385ac2b.png)

:::note info
一個ずつつけると面倒なので、複数ある場合は、"type": "Container" で囲んで ID 付けると楽
:::
!["type": "Container" で囲んで "id" 付けると楽](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1645569/082cd615-3738-703e-4c1a-cedbef5a400b.png)

### 反転させる表示部分
基本は、"Container" に突っ込んで、それを反転対象とする為に "id" 設定してやるだけ
![反転させる表示部分](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1645569/39f05c8e-ee14-f60b-2e14-8d2e282f1260.png)


### アクション釦（"selectAction" との対比用）
Designerでポチポチで突っ込めるので、便利な釦です
![アクション釦](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1645569/8201dd18-c8e4-eb89-a34b-75d5b119b56b.png)

実際の設定は・・
#### トグル（反転）動作の場合
要素選択のアクションと同じく、単純に "id" 突っ込むだけ。
![トグル（反転）動作の場合](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1645569/957d751d-43f3-4f6e-99b5-9e49120084a8.png)

#### 固定の表示・非表示動作の場合
"id" と対にして、true/false を設定するだけ
![2022-04-08_14h00_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1645569/20121aee-ee67-1033-cc49-9fa24aaf9449.png)

# 全体の JSON 
動作を見たい時は、[Adaptive Card Designer](https://www.adaptivecards.io/designer/) にて、以下を CARD PAYLOAD EDITOR にコピペして、Preview Mode で試せばOK

```json:card
{
    "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"

}
```
![Expand動作.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/d66c8490-3c99-e9bc-4876-671595de45de.gif)

# まとめ
既存の表示への対応をする場合は、以下を行うだけ
1. 切り替えたい表示を、"Container" で囲って、"id" 追加
1. 切り替え方法として、以下どちらかを追加
    1. [要素選択での切替](#反転の起動部分)
    1. [アクション釦](#アクション釦selectaction-との対比用)

# keyword
how to collapse or expand in Adaptive card.