今回は、Power Automateのみで簡易的な申請アプリを実装する方法をお伝えします。
ライセンスの関係などでPower Appsが使えない場合でも、アダプティブカードの技術を利用するとリッチな入力画面を用意できます。
実現したいこと
完成イメージは次の通りです。
1. （申請者画面）申請フロー実行ボタンを押す
2. （申請者画面）Teamsチャットに届いたフォームに申請内容を入力する
3. （承認者画面）入力された申請内容が承認者に届くため、承認・却下を選択する
4. （申請者画面）承認・却下の内容が申請者のTeamsチャットに届く
フローの実装
フローの全体像は以下の通りです。
トリガーの作成
トリガーは「手動でフローをトリガーします」を選択します。
（入力には特に何も追加しません）
アダプティブカード送信アクションの設定
トリガーの次は、Teamsコネクタの「アダプティブ カードを投稿して応答を待機する」アクションを追加します。
まずは「メッセージ」以外のパラメータを下記の通り設定しました。Recipientには動的なコンテンツから「ユーザーの電子メール」を選択します。
「メッセージ」パラメータにはアダプティブカードのJSONを設定します。今回は下記のようなJSONを入力しました。
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.4",
"body": [
{
"type": "TextBlock",
"text": "残業申請",
"wrap": true,
"id": "残業申請",
"size": "medium",
"weight": "bolder"
},
{
"type": "Input.Text",
"placeholder": "承認者のメールアドレスを入力してください",
"label": "承認者Email",
"isRequired": true,
"id": "承認者Email",
"errorMessage": "適切なメールアドレスを入力してください"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.Date",
"label": "残業日",
"isRequired": true,
"id": "残業日",
"errorMessage": "適切な残業日を入力してください"
}
],
"id": "残業日列"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.Time",
"label": "終業予定時刻",
"isRequired": true,
"id": "終業予定時刻",
"errorMessage": "適切な終業予定時刻を入力してください"
}
],
"id": "終業予定時刻列"
}
],
"id": "残業日時列"
},
{
"type": "Input.Text",
"placeholder": "残業予定時間を入力してください",
"label": "残業予定時間(h)",
"isRequired": true,
"id": "残業予定時間(h)",
"errorMessage": "適切な残業予定時間を時間単位で入力してください"
},
{
"type": "Input.Text",
"placeholder": "残業理由を入力してください",
"label": "残業理由",
"isMultiline": true,
"isRequired": true,
"id": "残業理由",
"errorMessage": "適切な残業理由を入力してください"
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "承認申請",
"id": "承認申請",
"style": "positive"
}
]
}
],
"id": "残業申請カード"
}ご自身でアダプティブカードを作成したい場合は、下記のリンクを参考にしてください。
直感的な操作でJSONを作成することができます。
承認アクションの設定
アダプティブカードの設定が完了したら、「開始して承認」アクションを追加します。
承認者に送信する内容をお好みで設定してください。
条件分岐の設定
最後に条件分岐を追加し、承認結果（承認／却下）によって送信されるメッセージが変わるよう設定していきます。
条件式の左辺には、動的なコンテンツから「結果」を指定します。右辺には「Approve」と入力することで、承認／却下によって分岐が発生します。
「はいの場合」「いいえの場合」には、それぞれTeamsコネクタの「チャットまたはチャネルでメッセージを投稿する」アクションを追加します。（動的なコンテンツを設定すると、必要に応じて自動でApply to eachで囲まれます）
トリガー用URLの取得
最後に、フローをトリガーするためのURLを取得しておきます。
今回作成したフローの詳細画面に入り、URLバーに表示されている「/details」以降のURLを「/run」に置き換えます。
このURLにアクセスすると、実行用のページが表示されます。
頻繁に使うフローであれば、このURLをブックマークやTeamsのタブに入れておくとよいでしょう。
まとめ
今回の記事では、Power Appsなしで簡易的な申請アプリを作成する方法をお伝えしました。
アダプティブカードを使うことで、自由度・デザイン性の高い入力画面を用意することができます。途中で紹介したアダプティブカードのJSONをカスタマイズいただき、デザインの幅を広げていただければと思います。
