PowerAutomate: Adaptive Card で動的な表を作る

# 背景
Update Adaptive Card のアクションが出てきたので、Teams 内でデジタルサイネージモドキが捗るかな、ということで、表を作る場合の例を記録

https://qiita.com/baku2san/items/78264b8e3d5abf1f67f8

# 実行イメージ
SharePoint 上のリストを、Adaptive Card の表として表示する例

フィルターしたりして特定の条件下の最新情報などをこんな感じで定期更新しておく、とかいうのもありかな？と

> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/22587a6b-fb14-4df3-8d41-e76065a26f0e.png)

::: note info
焦点は動的な表生成にあるので、上の例で HTML 要素をそのままにしてます。
:::

# 概要
1. [デザイナーで表を作成](#デザイナー-で表を作成)
1. [表のデータ部分のみを Select で生成](#表のデータ部分のみを-select-で生成)
1. [あとは投稿する Card を合成して、更新するだけ](#あとは投稿する-card-を合成して更新するだけ)


## [デザイナー](https://www.adaptivecards.io/designer/) で表を作成
こんな感じで JSON の雛形を用意してみる

> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/6a40a4b0-d575-201d-1c15-25a5fb379d37.png)

```json:sample
{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.3",
    "msteams": {
        "width": "full"
    },
    "body": [
        {
            "type": "TextBlock",
            "text": "動的リストを作ろう",
            "wrap": true
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "列１",
                                    "wrap": true
                                }
                            ]
                        },
                        {
                            "type": "Column",
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "列２",
                                    "wrap": true
                                }
                            ]
                        },
                        {
                            "type": "Column",
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "列３",
                                    "wrap": true
                                }
                            ]
                        }
                    ]
                }
            ],
            "style": "accent",
            "bleed": true
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "New TextBlock",
                                    "wrap": true
                                }
                            ]
                        },
                        {
                            "type": "Column",
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "New TextBlock",
                                    "wrap": true
                                }
                            ]
                        },
                        {
                            "type": "Column",
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "New TextBlock",
                                    "wrap": true
                                }
                            ]
                        }
                    ],
                    "spacing": "None"
                }
            ],
            "spacing": "None"
        }
    ]
}
```

## 表のデータ部分のみを Select で生成
データ部分の Container 内のデータを、Advanced Mode で生成
といっても、単純に Designer で作った、Container の [] 内の部分を貼り付けて、text を修正する程度。

::: note info
- Select の結果が配列なので、[] は付加される。
- Link や Image は、色々あるので省略
:::

> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/6ac714a9-da5a-8c77-867f-82cf59f6c104.png)

```json:dataSample
                {
                    "type": "ColumnSet",
                    "bleed": true,
                    "columns": [
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "@{item()?['Title']}"
                                }
                            ]
                        },
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "@{item()?['Description']}"
                                }
                            ]
                        },
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "@{item()?['OData__x6295__x7a3f__x8005_/DisplayName']}"
                                }
                            ]
                        }
                    ],
                    "spacing": "None"
                }
```

::: note warn
Adaptive Card のサイズ限界があるので、行列の数はあまり大きくしないように注意
以下によると、当時で 25kb
:::

https://techcommunity.microsoft.com/t5/microsoft-365-pnp-blog/display-images-in-adaptive-cards/ba-p/3036435

## あとは投稿する Card を合成して、更新するだけ
データ部分の Container に Select の出力を渡してやるだけ。更新は Update で同様に。

> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/2cc05cf9-c40c-783e-4500-5d6e6db60d1d.png)

```json: Select 追加部分のみ
        {
            "type": "Container",
            "items": 
@{body('Select')}
        }
```

# あとがき
Teams 上の UI をもっと編集出来ると便利なんですけどね。
とはいえ、Teams 上に色々な通知を集められるのはやっぱり便利ですね。

# keyword
How to create dynamic chart in Adaptive Card