Power Apps 教えてAkiraせんせー！⑬
@akira_365🐟さんの講習13回目が終了しました！
前回より Power Automate 編ということで進めていただいていますが
今回の内容は少し難しいようです。それでも楽しみ～🎵
12回目はこちら
Power Automate を使った「⽇報記述カード」
12回目の講習では、Teams に通知→Teams からアプリを起動→アプリで⽇報を作成、という⼿順を学びました。
しかし、トラブルでアプリが開けない🤯ということも想定されます💦
アプリを起動しなくても日報が書けるのでしょうか・・・
アダプティブカード
Teams に通知→Teams で⽇報を作成、という⼿順に変更します。
そこで登場するのが「アダプティブカード」です。
🐟アダプティブカードは 、ノーコードなカード型 UI 作成フォーマット
コードを書かない？！と言われても、この時点ではピンときていません🥲
入力画面が Teams に送られてくるというイメージをしてくださいとのこと。データソースを登録というフローを作成するために、まずカードから作成します。
アダプティブカードデザイナー
こちらのサイトへアクセスし、アダプティブカードのデザインを行います。
①カード要素
動作を現すアクションのセットが表示、ここから使いたい要素を選んで追加
② プレビュー画⾯
現在のカードの⾒た⽬が表⽰される画⾯。このプレビュー画⾯にカード要素ペインから部品をド ラッグ&ドロップで部品を付けたしながらカードを作成
③ カード構造
作成中のカードに使⽤しているカード要素が⼀覧される画⾯
④ 要素のプロパティ
この画⾯で現在選択中のカード要素のパラメータを調整
⑤ ペイロードエディタ
JSON が表⽰される画⾯ ※一番使う
⑥ データエディタ
サンプルデータを張り付ける画⾯
アダプティブカード･･･カードを作るためだけで保存などは考えない
Teams ⽤のカードを作成していきます。
Select host app から「Microsoft Teams」を選択し切り替えます。
次にバージョンを 1.3 へ変更します。
🐟現在 Flow bot から送信できるのは ver1.4 以下、User から送信できるのは ver1.3 以下 です
新しいカードを作成するので、左上のNew cardをクリックし、テンプレートの中から Blank Card を選択します。
🐟 Power Apps と同じような感じで情報を入力していきます
CARD ELEMENTS から TextBlock をドラッグアンドドロップで追加します。
選択した状態のまま要素プロパティでパラメータを調整します。
要素プロパティの Text 値へ「お疲れさまでした、⽇報を記⼊しましょう。」と入力画面します。
また Layout の設定を center にし、中央表⽰にします。
記入欄を設けて送信できるように進めていきます。
CARD ELEMENTS から Input.Text と Container もドラッグアンドドロップで追加します。
Input.Text は４つ、Container は間に３つ配置。
一番上の Input.Text の ELEMENT PROPERTIES で Placeholder のテキストを「Titleを入力」へ変更します。
残りの Placeholder も設定していきます。
上から次のように表示されればＯＫです。
・Titleを記入
・Companyを記入
・Categoryを記入
・日報を記入
では、カードの内容を送る『送信』ボタンを作成します。
CARD ELEMENTS から ActionSet を追加し、Add an action をクリック→Action Submit を選択します。
Action Submit というボタンが生成されるので、ELEMENT PROPERTIES で Title のテキストを 送信 へ変更します。
重要な設定がまだ残っています🔮
『送信』ボタンを押して、内容を Power Automate へ渡したときに、フローを引き継ぐために必要な Id の設定です。
上から次のように設定していきます。
・Titleを記入-Title
・Companyを記入-Company
・Categoryを記入-Category
・日報を記入-Report
日報を記入する欄は複数行テキストのように広げたいので、ELEMENT PROPERTIES で Multi-line にチェックを入れます。
以上でアダプティブカードは完成しました！
一旦このままの状態で置いておきます。
🐟アダプティブカードデザイナーは閉じると保存されない
Power Automate の編集
別タブで Power Automate を開きます。
前回作成した remind a report のフローを編集していきます。
ユーザーの@mentionトークンを取得する と チャットまたはチャネルでメッセージを投稿する のアクションは削除します。
アダプティブカードを投稿して応答を待機する と 項⽬の作成 のアクションを追加します。
「アダプティブカードを投稿して応答を待機する」Teams アクション
アダプティブカードを投稿して応答を待機する
投稿者：フローボット
更新メッセージ：日報を送信しました。おつかれさまでした。
Recipient：メールアドレス（名前で表示）
メッセージにはアダプティブカードの情報を貼り付けます。
別タブで開いたままにしている、アダプティブカードデザイナーの左上あたりにある Copy card payload をクリックすると ペイロードエディタ の内容がコピーされます。
フローに戻り、メッセージ欄にそのままペーストします。
とても長いですね～🥲ここでも保存しておきます！！！
「項目の作成」SharePointリスト アクション
Power Apps のデータソース（TblReport）へ入力内容を登録するというところまでの処理に進みます。
SharePoint → 項目の作成
サイトのアドレスからリスト名（データソース）を指定すると列名が読み込まれます。
こちらに前述の アダプティブカードを投稿して応答を待機する の返り値を設定していきます。
🐟返り値はアダプティブカードデザイナーで指定した Id となります
保存した後に、テストを行います。
まずは、Teamsにアダプティブカードが送信されますので、日報を記述してみます。
アプリへ登録されていることも確認できました🤗
アダプティブカードデザイナーが難しそうで手をつけれずでしたが、とても面白いので、講習内容に入れていただいて感謝です😊
Power Automate で何かUIを作りたいときに重要だったりするそうです！
power Automate も、もっと触らないとな～✊
みなさまお疲れさまでした✨
この記事が気に入ったらサポートをしてみませんか？