【Power Automate】残業申請フローを作る方法｜アダプティブカード

今回は、Power Automateのみで簡易的な残業申請フローを実装する方法をお伝えします。
ライセンスの関係などでPower Appsが使えない場合でも、アダプティブカードの技術を利用するとリッチな入力画面を用意できます。

実現したいこと
フローの実装
トリガー用URLの取得
まとめ
1. この記事は役に立ちましたか？

実現したいこと

完成イメージは次の通りです。

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": "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"
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "[Designed by Power365Medium](https://power365medium.com/adaptivecard-application-flow/)",
      "size": "Small",
      "color": "Accent",
      "horizontalAlignment": "Right",
      "wrap": true,
      "spacing": "Large"
    }
  ],
  "id": "残業申請カード"
}

ご自身でアダプティブカードを作成したい場合は、下記のリンクを参考にしてください。
直感的な操作でJSONを作成することができます。