- 操作環境：
- OS：Windows 11
- Webブラウザー：Edge
- 使用プラン：Microsoft 365 Business Premium
要件・処理の流れ・項目の整理
この例では、以下のような要件にもとづき、アプリを実装します。
- 組織内メンバーは自身の執務日報を登録・変更・削除できる。ただし、マネージャーに確認依頼をしたら、これらの操作は行えなくなる。
- マネージャーはTeamsの確認依頼を受信し、そのメッセージ内で確認処理やコメント入力を行える。また、アプリ上からも操作できる。
- 組織内メンバーのマネージャーはMS Entra IDのユーザー情報内のマネージャーより自動取得する。マネージャーが未設定(マネージャーが不在)の場合は、メンバー自身がマネージャーを兼務しているとみなす。
- アプリでアクセスできる執務日報データは、自身が報告者かマネージャーに該当するデータに限る。
- 執務日報データはSharePointリストに格納する。
- アプリは上記SharePointリストを元に作成できる、モバイル向けのギャラリーアプリ(一覧・詳細・編集の三画面構成)を使用する。
処理の流れは以下の通りです。
このアプリで扱う項目は以下の通りとします。
| 項目名(説明) | データ種類 | 必須 | 一意 | 初期値 | 特記事項 |
|---|---|---|---|---|---|
| ID(ID) | 数値 | ○ | ○ | 詳細&編集画面の見出しにラベル表示し、項目自体は非表示とする | |
| working_day(稼働日) | 日付 | (*) | *報告者編集時は必須 | ||
| reporter(報告者) | 一行テキスト | (自動) | 新規登録時:アプリユーザー | ||
| status(ステータス) | 選択肢 | ○ | (自動) | 下書き、確認待、確認済 | |
| tasks(業務内容) | 複数行テキスト | * | *報告者編集時は必須 | ||
| good_points (良かった点) | 複数行テキスト | ||||
| improvement_points(改善点) | 複数行テキスト | ||||
| manager(マネージャー) | 一行テキスト | (自動) | 新規登録時:アプリユーザーのマネージャー(未設定の場合はアプリユーザー) | ||
| manager_comment(マネージャーコメント) | 複数行テキスト |
アプリの完成イメージ
先にアプリの完成イメージを紹介します。
アプリにアクセスすると、一覧画面に既存の執務日報データが表示されます。一覧画面の詳細説明は画面イメージの点線箇所の吹き出しの通りです。
まずは報告者による執務日報の新規登録を行ってみます。右上の[新規登録]アイコンから新規登録に進みます。
編集画面(新規登録)の画面イメージです。
報告日、業務内容、良かった点、改善点(入力領域が白色の項目)を入力できます。
入力したら、右上の[保存]アイコンを選択します。
続けて報告者による確認依頼を行ってみます。
- 右：新規登録が完了すると再び一覧画面に遷移し、今登録したデータが表示されますので、これを選択します。
- 中：画面上部の[確認依頼]アイコンを選択します。
- 左：ステータスが[下書き]から[確認待]に変わり、右上のアイコンが消えました。
マネージャーによる確認処理を行ってみます。
マネージャー[User Aaa]さんでTeamsを開くと、確認依頼のメッセージが届いていました。
コメントを適宜入力して[確認済]と選択すると、メッセージが応答がアプリに送信された旨に変わりました。
報告者のアプリ画面に戻り、確認処理されたデータを照会してみます。
- 右：報告者の一覧画面に戻り、[更新]アイコンを選択すると、ステータスが[確認済]に変わっている筈です。
- 左：詳細画面を開くと、マネージャーからコメントがある場合はこれも表示されます。
なお、マネージャーはTeams通知からではなく、アプリの画面からも確認処理を行えます。
- 右：マネージャーとして確認処理が必要なデータは一覧画面上水色になっています。これを選択します。
- 中：詳細画面で内容を確認し、コメントしたければ右上の[編集]アイコンを選択します。
- 左：コメントを入力したら、右上の[保存]アイコンを選択します。
- 右：再び詳細画面に戻り、[確認]アイコンを選択します。
- 左：ステータスが[確認済]に変わり、右上のアイコンが消えました。
SharePointリスト用意
SharePointの任意のサイト(*)にアクセスし、左メニューの[サイトコンテンツ]を選択し、[新規>リスト]を選択します。
[空白のリスト]を選択します。
リストの[名前]を適宜入力し、[作成]を選択します。
[列の追加]を選択し、この記事の最初の方の表で整理した取扱い項目に従い、ID列以外の列を追加します。
一通り列を追加したら、[列の追加>値の表示と非表示を切り替える]を選択します。
[ID]列のチェックをつけ、[タイトル]列のチェックを外し、[適用]を選択します。
右上の設定アイコンを選択し、[リストの設定]を選択します。
[列の順序]を選択します。
タイトル列が一番最後になるよう並び順を変更し、[OK]を選択します。
対応必須ではありませんが、[新しいアイテムを追加]から何件かデータを登録しておきます。
参考まで、この例で追加した列のうち、報告日・報告者・ステータス・業務内容の設定画面を掲載します。
なお、マネージャーは報告者と名前以外は同じ設定、良かった点・反省点・マネージャーコメントは業務内容と名前以外は同じ設定になります。
ギャラリーアプリ作成
Power Appsの画面にアクセスし、左メニューの[アプリ]を選択し、[新しいアプリ>アプリテンプレートで開始する]を選択します。
[データ中心のモバイルアプリ]の[SharePointから]を選択します。
工程3で作成したSharePointリストがあるサイトを選択し(表示されない場合はURL指定)、対象のSharePointリストを選択し、[アプリを作成する]を選択します。
アプリの編集画面が表示されたら、上メニューの[・・・>設定]を選択します。
左メニューの[全般]設定において、アプリの名前、アイコン、自動保存のオフ/オン等を適宜調整します。
なお、[データ行の制限]は、上限値の2000に変更することをお奨めします。
アプリ実装:基本部分
データソースの追加
Microsoft Entra IDのユーザー情報を取得するため、データソースにOffice365ユーザーを追加します。
左端の[データ]アイコンを選択し、 [Office 365]で検索し、 [Office 365 ユーザー]が表示されたらこれを選択します。
さらに、接続ユーザーを選択します。
グローバル変数の定義(Office365ユーザー情報によるマネージャーの特定)
アプリユーザーのマネージャーを特定するためのグローバル変数を定義します。
左側[ツリービュー]の[App]を選択し、左上[Formulas]プロパティを以下の通り設定します。
//アプリユーザーのマネージャーの取得(マネージャーが未設定の場合はアプリユーザー自身とする)
glb_manager = If(IsError(Office365ユーザー.Manager(User().Email).DisplayName),
User().FullName,Office365ユーザー.Manager(User().Email).DisplayName);
アプリ実装:一覧画面
検索項目の追加
検索項目に報告日(開始・終了)、ステータス、報告者を追加します。
左の[ツリービュー] の[BrowserScreen1]を選択し、上メニューの[挿入]より以下部品を追加します。
- 入力>日付の選択(2個)
- テキストラベル
- 入力>ドロップダウン
- 入力>コンボボックス
また、元々用意されていた検索用のアイコンとテキスト入力は削除します(エラーが出ますが後で対応します)。
検索結果領域[BrowserGallery1]の位置を少し下にずらします。マウス操作がしにくい場合は、右側プロパティの[ディスプレイ]の[Y]や[高さ]への値入力でも対応できます(この例ではY=264、高さ=870)。
さらに、検索項目の部品名、配置、各種設定を調整します。
| 部品名 | Width | X | Y | その他の設定項目 |
|---|---|---|---|---|
| dateStart | 280 | 13 | 99 | Size:21、DefaultDate:Today()-Weekday(Today(),StartOfWeek.Monday)+1 |
| dateEnd | 280 | 352 | 99 | Size:21、DefaultDate:Today() |
| lblDateRange | 59 | 293 | 99 | Align:Align.Center、Text:"～" |
| drpStatus | 280 | 13 | 181 | AllowEmptySelection:true、Items:["下書き","確認待","確認済"]、Tooltip:"単数選択/再選択で解除" |
| cmbReporter | 328 | 303 | 181 | Items:Distinct(Sort(執務日報, reporter, SortOrder.Ascending),reporter)、Tooltip:"報告者(複数選択可/未選択時は全て)" |
一通り調整すると、以下のようになります。
図表6-1でエラーが発生していた設定を修正します。
エラーアイコンを選択し、[数式バーで編集]を選択すると、該当箇所の設定式が表示されます。
元々用意されていた検索項目を起点に、境界線の縦位置(Y)を定義していたようで、検索項目を削除した影響でエラーが発生していました。この設定を適切な位置の値(この例では264)に変更しすることで、エラーを解消させます。
検索ロジックの変更
図表6-1で追加した検索項目を踏まえた検索ロジックに変更します。
ソースが長くなるので、右側のプロパティではなく上のプロパティ領域を広げて設定します。
左側の[ツリービュー]の[BrowseGallery1]を選択し、左上のリストから[Items]を選択し、以下の通り変更します。
Sort(
Filter(
[@執務日報],
User().FullName = reporter || User().FullName = manager,
dateStart.SelectedDate <= working_day && working_day <= dateEnd.SelectedDate,
IsBlank(drpStatus.SelectedText.Value) || status.Value = drpStatus.SelectedText.Value,
IsBlank(cmbReporter.SelectedItems) || IsEmpty(cmbReporter.SelectedItems) || reporter in cmbReporter.SelectedItems
),
reporter,
If(SortDescending1, SortOrder.Ascending, SortOrder.Descending)
)
検索結果のレイアウト変更
左側の[ツリービュー]の[BrowseGallery1]を選択し、[ディスプレイ>レイアウト]を選択し、[タイトルとサブタイトル]を選択します。
検索結果の項目変更
左側の[ツリービュー]の[BrowseGallery1>Title1]を選択し、[詳細設定>Text]を以下の通り変更します。
" 【 " & ThisItem.status.Value & " 】 " & ThisItem.working_day & " : " & ThisItem.reporter & " ⇒ " & ThisItem.manager
さらに、位置や幅も調整します。
左側の[ツリービュー]の[BrowseGallery1>Subtitle1]を選択し、[詳細設定>Text]を以下の通り変更します。
ThisItem.tasks
さらに、位置や幅も調整します。
検索結果の背景色変更
ステータスとアプリユーザーの役割(報告者・マネージャー)に応じて背景色が変わるようにします。
左側の[ツリービュー]の[BrowseGallery1]を選択し、[詳細設定>TemplateFill]を以下の通り変更します。
If(ThisItem.status.Value= "下書き" && ThisItem.reporter=User().FullName, RGBA(253,252,219,1),
If(ThisItem.status.Value= "確認待" && ThisItem.manager=User().FullName, RGBA(153,217,234,1), RGBA(0, 0, 0, 0)))
次の記事に続きます。
当ブログ内の連載記事
