今回は、Power Automateのみで簡易的な残業申請フローを実装する方法をお伝えします。
ライセンスの関係などでPower Appsが使えない場合でも、アダプティブカードの技術を利用するとリッチな入力画面を用意できます。
実現したいこと
完成イメージは次の通りです。
1. （申請者画面）申請フロー実行ボタンを押す
2. （申請者画面）Teamsチャットに届いたフォームに申請内容を入力する
(日付・開始時刻・終了時刻は仮の値が入っている)
3. （承認者画面）入力された申請内容が承認者に届くため、承認・却下を選択する
4. （申請者画面）承認・却下の内容が申請者のTeamsチャットに届く
※ 今回はデータソース (SharePointリストやExcel) へのデータ保存は実装しません。必要に応じて追加してください。
フローの実装
フローの全体像は以下の通りです。
トリガーの作成
トリガーは「手動でフローをトリガーします」を選択します。
（入力には特に何も追加しません）
アダプティブカード送信アクションの設定
トリガーの次は、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": "large",
"weight": "bolder"
},
{
"type": "Input.Date",
"label": "日付",
"isRequired": true,
"id": "日付",
"errorMessage": "適切な日付を入力してください",
"value": "@{convertFromUtc(utcNow(),'Tokyo Standard Time','yyyy-MM-dd')}"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.Time",
"label": "残業開始時刻",
"isRequired": true,
"id": "残業開始時刻",
"errorMessage": "適切な時刻を入力してください",
"value": "@{convertFromUtc(utcNow(),'Tokyo Standard Time','HH:mm')}"
}
],
"id": "残業開始時刻列"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.Time",
"label": "残業終了時刻",
"isRequired": true,
"id": "残業終了時刻",
"errorMessage": "適切な時刻を入力してください",
"value": "@{addHours(convertFromUtc(utcNow(),'Tokyo Standard Time'),1,'HH:mm')}"
}
],
"id": "残業終了時刻列"
}
],
"id": "残業日時列"
},
{
"type": "Input.Text",
"placeholder": "半角数字で入力",
"label": "残業時間 (h)",
"isRequired": true,
"id": "残業時間",
"errorMessage": "単位なしの半角数字で入力してください",
"regex": "^[0-9]+(\\.[0-9]+)?$"
},
{
"type": "Input.ChoiceSet",
"id": "承認者",
"label": "承認者",
"choices.data": {
"type": "Data.Query",
"dataset": "graph.microsoft.com/users"
},
"isRequired": true,
"errorMessage": "ユーザーを選択してください",
"placeholder": "名前・メールアドレスで検索"
},
{
"type": "Input.Text",
"placeholder": "残業理由を入力",
"label": "残業理由",
"isMultiline": true,
"isRequired": true,
"id": "残業理由",
"errorMessage": "残業理由を入力してください"
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "申請",
"id": "申請ボタン",
"style": "positive"
}
]
},
{
"type": "TextBlock",
"text": "[Designed by Power365Medium](https://power365medium.com/adaptivecard-application-flow/)",
"size": "Small",
"color": "Accent",
"horizontalAlignment": "Right",
"wrap": true,
"spacing": "Large"
}
],
"id": "残業申請カード"
}ご自身でアダプティブカードを作成したい場合は、下記のリンクを参考にしてください。
直感的な操作でJSONを作成することができます。
ユーザープロフィール取得アクションの設定
アダプティブカード送信アクションの設定ができたら、「ユーザー プロフィールの取得 (V2)」アクションを配置します。
これによって、アダプティブカードで選択された承認者の詳細を取得することができます。
ユーザー (UPN)には、ユーザープロフィールの取得アクションの動的なコンテンツから、「body/data/承認者」を選択してください。
もし動的なコンテンツが表示されない場合は、以下のコードをそのまま貼り付けてください。
@{outputs('アダプティブ_カードを投稿して応答を待機する')?['body/data/承認者']}承認アクションの設定
ユーザープロフィール取得アクションの設定が完了したら、「開始して承認」アクションを追加します。
さらに、承認の種類・タイトル・担当者・詳細を設定します。
詳細には、「アダプティブ カードを投稿して応答を待機する」アクションの動的なコンテンツからお好きな値を設定してください。
もし動的なコンテンツが表示されない場合は、以下のコードを貼り付けてください。
| 日付 | |
| 残業開始時刻 | |
| 残業終了時刻 | |
| 残業時間 | |
| 残業理由 | |
条件分岐の設定
最後に条件分岐を追加し、承認結果（承認／却下）によって送信されるメッセージが変わるよう設定していきます。
条件式の左辺には、動的なコンテンツから「結果」を指定します。右辺には「Approve」と入力することで、承認／却下によって分岐が発生します。
「はいの場合」「いいえの場合」には、それぞれTeamsコネクタの「チャットまたはチャネルでメッセージを投稿する」アクションを追加します。（動的なコンテンツを設定すると、必要に応じて自動でApply to eachで囲まれます）
トリガー用URLの取得
最後に、フローをトリガーするためのURLを取得しておきます。
今回作成したフローの詳細画面に入り、URLバーに表示されている「/details」以降のURLを「/run」に置き換えます。
このURLにアクセスすると、実行用のページが表示されます。
頻繁に使うフローであれば、このURLをブックマークやTeamsのタブに入れておくとよいでしょう。
まとめ
今回の記事では、Power Appsなしで残業申請フローを作成する方法をお伝えしました。
アダプティブカードを使うことで、自由度・デザイン性の高い入力画面を用意することができます。途中で紹介したアダプティブカードのJSONをカスタマイズいただき、デザインの幅を広げていただければと思います。
