はじめに
Adaptive Cards を利用して Teams にメッセージを投稿する場合、完全に固定のカードを利用するケースはそれほど多くないかなと思います。
多くは、何らか別のデータソースがあって、その情報を加工してカードにし投稿するというシナリオになります。
少し難しいのはデータの個数が決まっていない、リスト形式のデータを基にする場合です。この時、あらかじめ作成しておいたカードのレイアウトはデータ数が変動するため直接的には利用できません。
今回は上記のような、リスト形式のデータに基づいて、カードを構成する場合の方法を1つ紹介します。
※ここに書く方法だけでなく、元のデータや表示したいカードによって手段は変わりますが、たいていの場合有効です。
概要・考え方
まずはリスト形式のデータとして簡単な SharePoint リストを用意します。 そこから、下図右側のような表示にすることを考えましょう。
考え方は以下の通りです。
- リスト全体を大きなContainerコントロールとする (親Container)
- 各リストアイテムをContainerコントロールで一纏めにする (子Container)
- アイテムの中のデータ (列) を 子Container 内のコントロールに割り当てる
全体を1つのContainerでくるむ理由は、このコントロールの Itemsプロパティが配列になっているためです。 もともとがリスト (配列) 形式のデータなので、表示側でもリスト形式のプロパティを受け取れるコントロールが必要になります。 単純にリストからできるカードだけを表示するのであれば、このContainerは不要ですが、前後に固定の文言を入れたい場合には、固定箇所と繰り返し箇所を分離するのにも非常に効果的です。
各リストアイテムをContainer内に押し込めるのは、繰り返しの最小単位を明確にするためです。 (または、表示上で言えばセパレータを入れるためでもあります)
以下では Power Automate を利用して、リストから2階層のContainerでデータを表現する方法を解説します。
リストデータ取得→選択アクション
あるリスト (配列) 形式から 別の配列の形式に変換する操作 (今回で言えばSharePointリストのデータからAdaptive Cardsの表示) には、『選択』アクションが有効 です。
この 『選択』 アクションには入力が2種類 - 開始, マップ - 必要です。
[開始] は 変換前のデータ、ここではSharePointリストのデータ取得結果を設定します。
一方の [マップ] には、変換後のデータ構造にどうやって対応させるか、つまり子Container以下の構造を指定します。
まずず マップ 右側のアイコンをクリックしてテキストモードに切り替えます。
次に Adaptive Cards デザイナーから、サンプルで作った （全部埋め込みの) カードのJSONのうち、子Container に対応する部分をコピー&ペーストします。
ペースト後、リストのデータによって可変になる箇所 (タイトルやステータスを使って表す部分 ) を動的なコンテンツで置き換えていきます。
ここでの注意は、もともと入っているダブルクォーテーションを消さないことです。 表示するデータが文字列型の場合には、ダブルクォーテーションを消してしまうとエラーになるので気をつけてください。
以上でデータの変換は完了です。この時点で一度フローを実行してみて、結果を Adaptive Cards デザイナーに戻して確認してみましょう。
仕上げ - Adaptive Cards の送信
最後は Teams への Adaptive Cards 送信です。
送信するメッセージ部分に、まず親Containerの中身を空にしたJSONをコピー＆ペーストします。
その後、Items プロパティに対して、『選択』アクションの結果を動的コンテンツから挿入すれば完成です。
おわり
一度ここで紹介した方法をとらずにリストデータを表示してみようとすると、結構大変なことになるはずです。例えば カードの body部分を配列変数にして、そこに要素を逐一挿入していくような処理になることが想像できます。
この場合にはデータ一件一件に対してApply to each で配列にデータを追加する操作なので、エラーが出たときに原因がわかりにくい・ループが終わるまで結果が見えないという問題があります。
Containerを入れ子にして、選択アクションを利用すると、うまく配列の構造を利用してすっきりしたフローになり、配列をいじるのが一ヵ所だけなのでエラーの検出もしやすくなります。
Adaptive Cards を利用した発展的な内容としてぜひ取り組んでみてください。
