【Power Apps】マネージャー確認機能付き 執務日報アプリ2

前の記事の続きになります。
Microsoft社が提供するローコード開発ツール「Power Platform」のアプリ機能(Power Apps)を使用した、マネージャー確認機能付き(Teamsアダプティブカードによる通知・応答を含む)執務日報アプリの作成例を紹介します。

• 操作環境：
• OS：Windows 11
• Webブラウザー：Edge
• 使用プラン：Microsoft 365 Business Premium

アプリ実装:編集画面

必要項目の追加、コントロールの種類変更

左側[ツリービュー]の [EditScreen1>EditForm1]を選択し、右側[プロパティ]の[ディスプレイ>フィールド]の[フィールドの編集](環境によっては[8件選択済み])を選択し、[フィールドの追加]を選択します。
[ID]にチェックをつけ、[追加]を選択します。

図表7-1 編集画面の必要項目の追加

tasks、good_points、improvement_point、manager_commentについて、コントロールの種類を[テキストの編集]から[複数行テキストの編集]に変更します。

図表7-2 編集画面のコントロールの種類変更

画面タイトル変更、非表示項目の設定

項目IDのDataCardValueXXの番号部分(この例では17)を確認の上、画面タイトルを選択し、以下の通り設定します。

• Textプロパティ："執務日報 (ID:" & DataCardValue17.Text & ")"

これにより、画面タイトルにIDの値が表示されるようになります。
なお、この後も項目の値により表示や色などを制御する式を多く設定します。DataCardValueの番号部分は左ツリーで確認してください。

図表7-3 編集画面のタイトル変更

項目IDの全体領域を選択し、右側プロパティの[ディスプレイ>表示]をオフにしておきます。
これにより、項目IDが編集エリアで非表示になります。

図表7-4 編集画面の非表示項目の設定

項目のレイアウト調整

少々扱いに癖がありますが、各項目の全体領域を選択し、右側[プロパティ]の[詳細設定]の下の方にある、[Height]、[Width]、[X]、[Y]に値設定すると意図したレイアウトになります。

• 0行目：working_day(幅320),status(幅320,X320)
• 1行目：reporter(幅320),manager(幅320,X320)
• 2行目：tasks(幅640)
• 3行目：good_points(幅640)
• 4行目：improvement_points(幅640)
• 5行目：manager_comment(幅640)

図表7-5 編集画面の項目レイアウト変更

各項目の設定(表示モード、入力必須、初期値)

この例では、データのステータスやアプリユーザーの役割に応じて表示モード・入力必須を切り替えます。また、報告日からマネージャーまでは初期値を設定します。

まずは報告日(working_day)を設定します。
全体領域を選択し、右クリックで[ロック解除]を選択の上、以下の通り設定します。

• DisplayModeプロパティ：If(DataCardValue10.Text=User().FullName && DataCardValue11.Selected.Value="下書き", DisplayMode.Edit, DisplayMode.View)
  *報告者がアプリユーザーかつステータスが下書きの場合は編集モード、それ以外は閲覧モードとします
• Requiredプロパティ：If(DataCardValue10.Text=User().FullName && DataCardValue11.Selected.Value="下書き", true, false)
  *報告者がアプリユーザーかつステータスが下書きの場合は入力必須、それ以外は任意とします

続けてデータ領域を選択し、以下の通り設定します。

• DefaultDateプロパティ： If(EditForm1.Mode = FormMode.New,Today(),ThisItem.working_day)
  *新規登録時は今日の日付を設定し、それ以外は既存の値を設定します
• Fillプロパティ：If(DataCardValue10.Text=User().FullName && DataCardValue11.Selected.Value="下書き", RGBA(255, 255, 255, 1), RGBA(166, 166, 166, 1))
  *報告者がアプリユーザーかつステータスが下書きの場合は背景色を白色、それ以外は灰色にします
• Sizeプロパティ：21

図表7-6 編集画面の報告日の設定

次はステータス(status)を設定します。
全体領域を選択し、右クリックで[ロック解除]を選択の上、以下の通り設定します。

• DisplayModeプロパティ：DisplayMode.View
  *ステータスはユーザーが値を指定するのではなく、保存⇒確認依頼⇒確認処理に応じて自動更新するため、閲覧モードとします

続けてデータ領域を選択し、以下の通り設定します。

• DefaultSelectedItemsプロパティ：If(EditForm1.Mode = FormMode.New,Choices([@執務日報].status,"下書き"),ThisItem.status)
  *新規登録時は”下書き”を設定し、それ以外は既存の値を設定します
• Fillプロパティ：RGBA(166, 166, 166, 1)
  *背景色を灰色にします

図表7-7 編集画面のステータスの設定

報告者(reporter)を設定します。
全体領域を選択し、右クリックで[ロック解除]を選択の上、以下の通り設定します。

• DisplayModeプロパティ：DisplayMode.View
  *報告者は自動取得するため、閲覧モードとします

続けてデータ領域を選択し、以下の通り設定します。

• Defaultプロパティ： If(EditForm1.Mode = FormMode.New,User().FullName,ThisItem.reporter)
  *新規登録時はアプリユーザーの表示名を設定し、それ以外は既存の値を設定します
• Fillプロパティ：RGBA(166, 166, 166, 1)
  *背景色を灰色にします

図表7-8 編集画面の報告者の設定

マネージャー(manager)を設定します。
全体領域を選択し、右クリックで[ロック解除]を選択の上、以下の通り設定します。

• DisplayModeプロパティ：DisplayMode.View
  *マネージャーは自動取得するため、閲覧モードとします

続けてデータ領域を選択し、以下の通り設定します。

• Defaultプロパティ： If(EditForm1.Mode = FormMode.New,glb_manager,ThisItem.manager)
  *新規登録時は前の記事の工程5で定義したグローバル変数(アプリユーザーのマネージャーの表示名、マネージャー不在の場合は本人の表示名)を設定し、それ以外は既存の値を設定します

• Fillプロパティ：RGBA(166, 166, 166, 1)
  *背景色を灰色にします

図表7-9 編集画面のマネージャーの設定

業務内容(tasks)を設定します。
全体領域を選択し、右クリックで[ロック解除]を選択の上、以下の通り設定します。

• DisplayModeプロパティ：If(DataCardValue10.Text=User().FullName && DataCardValue11.Selected.Value="下書き", DisplayMode.Edit, DisplayMode.View)
  *報告者がアプリユーザーかつステータスが下書きの場合は編集モード、それ以外は閲覧モードとします
• Requiredプロパティ：If(DataCardValue10.Text=User().FullName && DataCardValue11.Selected.Value="下書き", true, false)
  *報告者がアプリユーザーかつステータスが下書きの場合は入力必須、それ以外は任意とします

続けてデータ領域を選択し、以下の通り設定します。

• Fillプロパティ：If(DataCardValue10.Text=User().FullName && DataCardValue11.Selected.Value="下書き", RGBA(255, 255, 255, 1), RGBA(166, 166, 166, 1))
  *報告者がアプリユーザーかつステータスが下書きの場合は背景色を白色、それ以外は灰色にします

図表7-10 編集画面の業務内容の設定

良かった点(good_points)を設定します。
全体領域を選択し、右クリックで[ロック解除]を選択の上、以下の通り設定します。

• DisplayModeプロパティ：If(DataCardValue10.Text=User().FullName && DataCardValue11.Selected.Value="下書き", DisplayMode.Edit, DisplayMode.View)
  *報告者がアプリユーザーかつステータスが下書きの場合は編集モード、それ以外は閲覧モードとします

続けてデータ領域を選択し、以下の通り設定します。

• Fillプロパティ：If(DataCardValue10.Text=User().FullName && DataCardValue11.Selected.Value="下書き", RGBA(255, 255, 255, 1), RGBA(166, 166, 166, 1))
  *報告者がアプリユーザーかつステータスが下書きの場合は背景色を白色、それ以外は灰色にします

図表7-11 編集画面の良かった点の設定

反省点(improvement_points)も上記と同じ要領で設定します(画面イメージは割愛します)。

最後に、マネージャーコメント(manager_comment)を設定します。
全体領域を選択し、右クリックで[ロック解除]を選択の上、以下の通り設定します。

• DisplayModeプロパティ：If(DataCardValue15.Text=User().FullName && DataCardValue11.Selected.Value="確認待", DisplayMode.Edit, DisplayMode.View)
  *マネージャーがアプリユーザーかつステータスが確認待の場合は編集モード、それ以外は閲覧モードとします

続けてデータ領域を選択し、以下の通り設定します。

• Fillプロパティ：If(DataCardValue15.Text=User().FullName && DataCardValue11.Selected.Value="確認待", RGBA(255, 255, 255, 1), RGBA(166, 166, 166, 1))
  *マネージャーがアプリユーザーかつステータスが確認待の場合は背景色を白色、それ以外は灰色にします

図表7-12 編集画面のマネージャーコメントの設定

保存アイコンの設定変更

右上の保存アイコンが確認処理と間違えそうなのでイメージを変更します。
右上のアイコンを選択し、右側プロパティの[ディスプレイ>アイコン]のリストを選択し、[保存]を検索してこれを選択します。
さらに、このアイコンのVisibleプロパティを以下の通り設定します。

If(DataCardValue10.Text=User().FullName && DataCardValue11.Selected.Value="下書き", true, 
  If(DataCardValue15.Text=User().FullName && DataCardValue11.Selected.Value="確認待",true,false)
)

*報告者がアプリユーザーかつステータスが下書きの場合か、マネージャーがアプリユーザーかつステータスが確認待の場合は表示し、その他の場合は非表示とします

図表7-13 編集画面の保存アイコンの設定

アプリ実装:詳細画面

必要項目の追加

左側[ツリービュー]の [DetailScreen1>DetailForm1]を選択し、右側[プロパティ]の[ディスプレイ>フィールド]の[8件選択済み]を選択し、[フィールドの追加]を選択します。
[ID]にチェックをつけ、[追加]を選択します。

図表8-1 詳細画面の必要項目の追加

画面タイトル変更、非表示項目の設定

項目IDのDataCardValueXXの番号部分(この例では14)を確認の上、画面タイトルを選択し、以下の通り設定します。

• Textプロパティ："執務日報 (ID:" & DataCardValue14.Text & ")"

図表8-2 詳細画面のタイトル変更

項目IDの全体領域を選択し、右側プロパティの[ディスプレイ>表示]をオフにしておきます。
これにより、項目IDが編集エリアで非表示になります。

図表8-3 詳細画面の非表示項目の設定

項目のレイアウト調整

少々扱いに癖がありますが、各項目の全体領域を選択し、右側[プロパティ]の[詳細設定]の下の方にある、[Height]、[Width]、[X]、[Y]に値設定すると意図したレイアウトになります。

• 0行目：working_day(幅320),status(幅320,X320)
• 1行目：reporter(幅320),manager(幅320,X320)
• 2行目：tasks(幅640)
• 3行目：good_points(幅640)
• 4行目：improvement_points(幅640)
• 5行目：manager_comment(幅640)

図表8-4 詳細画面の項目レイアウト調整

コンテキスト変数の定義(Office365ユーザー情報による条件検索)

マネージャーのEmailアドレスをコンテキスト変数に格納します。この値は確認依頼時にTeamsの通知先として使用します。
左側[ツリービュー]の [DetailScreen1]を選択し、OnVisibleプロパティを以下の通り設定します。

//マネージャーのEmailアドレスを取得(確認依頼フローで使用)
UpdateContext({
  loc_manager_email:LookUp(
    Office365ユーザー.SearchUserV2( {searchTerm:"",
      isSearchTermRequired:false} ).value,
    DisplayName = DataCardValue7.Text
  ).Mail
});

*式の意味：マネージャーの表示名を元にマネージャーのEmailアドレスを取得します

図表8-5 詳細画面のコンテキスト変数の定義

確認依頼・確認処理アイコンの追加・設定

削除アイコンを二回コピー&ペーストして、確認依頼アイコンと確認処理アイコンとして流用します。

図表8-6 詳細画面の確認依頼・確認処理アイコンの追加

追加したアイコンの左側ツリーと右側プロパティの詳細タブにて、下表の通り設定します。

用途	部品名	アイコン	Tooltip	Height	Weight	X	Y
確認依頼	IconSubmit1	送信	"確認依頼"	88	88	376	0
確認処理	IconConfirm1	チェック(バッジ)	"確認済"	88	88	464	0

図表8-7 詳細画面の確認依頼・確認処理アイコンのレイアウト設定

一通り調整すると、以下のようになります。
なお、確認処理アイコンと削除アイコンの位置が重なっていますが、この後、ステータスと役割に応じた表示制御を設定しますので、問題ありません。

図表8-8 詳細画面の確認処理・削除アイコンの重複は後で対応

左側ツリーにて確認処理アイコン(IconConfirm1)を選択し、[OnSelect]プロパティを以下の通り設定します。

//確認処理(ステータス更新)
Patch(執務日報,
  LookUp(執務日報,ID=Value(DataCardValue14.Text)),
  { status:{Value:“確認済”} }
)

*式の意味：IDをキーにこのデータのステータスを確認済に更新します

図表8-9 詳細画面の確認処理アイコンの設定

左側ツリーにて確認依頼アイコン(IconSubmit1)を選択し、[OnSelect]プロパティを以下の通り設定します。

//確認依頼の処理(ステータス更新、上司へのTeams確認依頼(フロー呼出し))
Patch(執務日報,
  LookUp(執務日報,ID=Value(DataCardValue14.Text)),
  { status:{Value:"確認待"}}
);
UpdateContext({localResponse:執務日報_確認依頼通知.Run(
  loc_manager_email /* manager's email */, DataCardValue1.Text /* working_day */,
  DataCardValue2.Text /* reporter */, DataCardValue4.Text /* tasks */,
  If(IsBlank(DataCardValue5.Text)," ",DataCardValue5.Text) /* good_points */,
  If(IsBlank(DataCardValue6.Text)," ",DataCardValue6.Text) /* improvement_points */,
  DataCardValue14.Text /* ID */
)});

*式の意味：IDをキーにこのデータのステータスを確認待に更新し、確認依頼通知フローを実行します。なお、入力必須でない良かった点・改善点がブランクの場合、フローが正常に実行されませんので、その場合は半角スペースを入れた文字を渡しています

なお、この段階ではフローが未作成のためエラーが出ますが、フローについては次の工程で紹介します。

図表8-10 詳細画面の確認依頼アイコンの設定

各アイコンの表示制御

最後に、各アイコンのVisibleプロパティにて以下の通り、表示制御を設定します。

• 確認処理アイコン(IconConfirm1)：If(DataCardValue7.Text=User().FullName && DataCardValue3.Selected.Value="確認待", true, false)
• 確認依頼アイコン(IconSubmit1)：If(DataCardValue2.Text=User().FullName && DataCardValue3.Selected.Value="下書き", true, false)
• 削除アイコン(IconDelete1)：If(DataCardValue2.Text=User().FullName && DataCardValue3.Selected.Value="下書き", true, false)
• 編集アイコン(IconEdit1)：If(DataCardValue2.Text=User().FullName && DataCardValue3.Selected.Value="下書き", true,
      If(DataCardValue7.Text=User().FullName && DataCardValue3.Selected.Value="確認待",true,false)
  )

*各式の意味：報告者がアプリユーザーかつステータスが下書きの場合は確認依頼・削除・編集アイコンを表示し、マネージャーがアプリユーザーかつステータスが確認待の場合は確認処理・編集アイコンを表示します

アプリ実装:確認依頼通知フロー

左端の[・・・]アイコンを選択し、[Power Automate]を選択し、[フローを新規作成する]を選択します。
[+ 最初から作成]を選択します。

図表9-1 PowerAutomateフローの追加

先にフロー全体を示します。
PowerAppsアプリから通知に必要なデータを受け取り、それらに基づきTeamsにアダプティブカードを投稿します。アダプティブカードの応答を受け取り、JSONの解析によりマネージャーコメントを取り出し、SharePointリストのマネージャーコメントに反映しています。
また、フロー名は[執務日報_確認依頼通知]としました。

図表9-2 PowerAutomateフローの概観

ここから各ステップの設定内容を紹介します

[Power Apps (V2)]ステップでは、[入力の追加]より前の工程の[確認依頼]アイコンでフロー呼出しを行ったときの引数を定義します。

• 電子メール：email
• テキスト：working_day
• テキスト：reporter
• テキスト：tasks
• テキスト：good_points
• テキスト：improvement_points
• 数：id

図表9-3 PowerAutomateフロー設定(PowerAppsからの引数)

次のステップを追加する前に、 Webブラウザーの別タブからPowerAppsのアプリ一覧画面を開き、執務日報アプリのURLを確認しておきます。
PowerAppsのアプリ一覧画面で対象アプリの三点マークを選択し、[詳細]を選択します。
Webリンクに表示される値が執務日報アプリのURLですので、これをメモ帳等にコピー&ペーストして控えておきます。

図表9-4 PowerAppsアプリのURL確認

[変数を初期化する-power-apps-url]ステップの設定は以下の通りです。

• ステップの種類：[組み込み>変数>変数を初期化する]
• 名前：power-apps-url
• 種類：文字列
• 値：(図表9-4で控えた執務日報アプリのURLをペーストする)

図表9-5 PowerAutomateフロー設定(変数初期化power-apps-url)

[変数を初期化する-adaptive-card]ステップの設定は以下の通りです。

• ステップの種類：[組み込み>変数>変数を初期化する]
• 名前：adaptive-card
• 種類：文字列
• 値： (AdaptiveCardのJsonデータ。後述します)

図表9-6 PowerAutomateフロー設定(変数初期化adaptive-card)

AdaptiveCardの値(Jsonデータ)となるコードを改めて掲載します。

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "執務日報の確認依頼が届きました",
      "id": "Subject",
      "spacing": "Medium",
      "size": "ExtraLarge",
      "weight": "Bolder",
      "color": "Accent"
    },
    {
      "type": "Container",
      "items": [
        {
          "type": "TextBlock",
          "text": "報告者:@{triggerBody()['text_1']}, 稼働日:@{triggerBody()['text']}",
          "wrap": true
        },
        {
          "type": "TextBlock",
          "text": "■業務内容\n\n@{triggerBody()['text_2']}",
          "wrap": true
        },
        {
          "type": "TextBlock",
          "text": "■良かった点\n\n@{triggerBody()['text_3']}",
          "wrap": true
        },
        {
          "type": "TextBlock",
          "text": "■改善点\n\n@{triggerBody()['text_4']}",
          "wrap": true
        }
      ]
    },
    {
      "type": "Input.Text",
      "placeholder": "報告内容についてコメントがあれば入力",
      "style": "text",
      "isMultiline": true,
      "maxLength": 200,
      "id": "manager-comment"
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "確認済",
      "id": "submit-button"
    },
    {
      "type": "Action.OpenUrl",
      "title": "アプリを開く",
      "url": "@{variables('power-apps-url')}"
    }
  ]
}

• AdaptiveCardの作成例：Microsoft Teams にアダプティブ カードを投稿するフローを作成する - Power Automate | Microsoft Learn

以下は補足事項です。

• 業務内容、良かった点、改善点のテキスト内の\n\nは改行です。\nや\r\nは機能しません。
• [組み込み>データ操作>作成]ステップを使って設定する場合、値の中に改行があるとエラーが発生します。改行せずに記述するか、この例のように[組み込み>変数>変数を初期化する]ステップを使用してください。

[アダプティブカードを投稿して応答を待機する]ステップは以下の通りです。

• ステップの種類：[標準>Microsoft Teams>アダプティブ カードを投稿して応答を待機する]
• 投稿者：フローボット
• 投稿先：フローボットとチャットする
• メッセージ(変数)：adaptive-card
• Recipient(変数)：email
• IsAlert：はい

また、ステップ名のアダプティブとカードの間に半角スペースがありますが、これを忘れずに削除しておきます(後続の[JSON の解析]ステップの式内でこのステップを指定する際、ステップ名に半角スペースが含まれると正しく動作しないため)。

図表9-7 PowerAutomateフロー設定(Teamsアダプティブカード応答)

次のステップでJSONの解析を追加する際、フローの実行結果を使うと、コンテンツとスキーマを簡単に設定できます。
フローを実行するため、まずは右上のアイコンからフローを保存しておきます。

図表9-8 PowerAutomateフロー設定(JSON解析のため一旦保存)

Webブラウザーの別タブからPowerAppsのフロー一覧画面を開き、対象フローの実行アイコンを選択します。
右側にポップアップしたパラメーター(フローの一番最初のステップで指定した入力項目)を適宜入力し、[フローの実行]を選択します。
指定したemailのユーザーのTeamsに通知が届いたら、コメントを入力して[確認済]を選択します。

図表9-9 PowerAutomateフロー設定(JSON解析のためフロー実行)

PowerAppsのフロー一覧画面の対象フローを選択し、直近の実行履歴を選択します。

図表9-10 PowerAutomateフロー設定(JSON解析のためフロー実行結果確認)

[アダプティブカードを投稿して応答を待機する]ステップの[出力>body]の値をコピーします。

図表9-11 PowerAutomateフロー設定(JSON解析のためフロー実行結果コピー)

フローの作成画面に戻り、[JSON の解析]ステップを設定します。

• ステップの種類： [組み込み>データ操作>JSON の解析]
• コンテンツ(式)： body('アダプティブカードを投稿して応答を待機する')
• スキーマ：([サンプルから生成]を選択し、図表9-11のフローの実行履歴からコピーした値をペーストする)

図表9-12 PowerAutomateフロー設定(JSON解析)

[項目の更新]ステップは以下の通りです。

• ステップの種類：[標準>SharePoint>項目の更新]
• サイトのアドレス：(執務日報データの格納先であるSharePointリストのあるサイト)
• リスト名：執務日報
• ID(変数)：id
• status Value：確認済
• manager-comment(変数)：manager-comment

図表9-13 PowerAutomateフロー設定(SharePointリスト項目の更新)

右上のアイコンからフローを保存して閉じ、アプリの編集画面に戻ります。

図表9-14 PowerAutomateフロー設定(保存して閉じる)

アプリ編集画面右上の[保存]アイコンを選択し、[公開]アイコンを選択します。
[このバージョンの公開]を選択します。
左上の[戻る]を選択し、アプリの編集を終了します。

図表9-15 アプリ公開

おわりに(設定要素まとめ)

このアプリの作成において、特にポイントになりそうな設定要素を挙げておきます。何かアプリを作成する時の参考になれば幸いです。

• Office365ユーザー情報によるマネージャーの特定
  (一覧画面:AppのFormulaプロパティ)
• Office365ユーザー情報による条件検索
  (詳細画面: DetailScreen1のOnVisibleプロパティ)
• フロー呼出し時のブランクパラメータの渡し方
  (詳細画面:確認依頼アイコンのOnSelectプロパティ)
• アダプティブカードの投稿および応答結果に基づくデータ更新
  (確認依頼通知フロー)

また、この例では応答を待つアダプティブカードを使用しましたが、報告者が多くいるマネージャーですと煩わしく感じるかもしれません。確認済ボタンを無くした応答を待たないアダプティブカードに変更する、一覧画面に一括確認の機能(別の記事で紹介)を設ける(マネージャーが確認する意味がなくなりそうですが)など、運用しながら使いやすい形に改善していけると良いでしょう。

当ブログ内の連載記事

elmgrn.hatenablog.com

elmgrn.hatenablog.com

当ブログ内の関連記事

elmgrn.hatenablog.com