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

背景

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

実行イメージ

SharePoint 上のリストを、Adaptive Card の表として表示する例

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

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

概要

1. デザイナーで表を作成
2. 表のデータ部分のみを Select で生成
3. あとは投稿する Card を合成して、更新するだけ

デザイナー で表を作成

こんな感じで 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 を修正する程度。

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

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"
                }

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

あとは投稿する Card を合成して、更新するだけ

データ部分の Container に Select の出力を渡してやるだけ。更新は Update で同様に。

Select 追加部分のみ

        {
            "type": "Container",
            "items": 
@{body('Select')}
        }

あとがき

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

keyword

How to create dynamic chart in Adaptive Card