Microsoft社が提供するローコード開発ツール「Power Platform」のアプリ機能(Power Apps)を使用した、Microsoft Entra IDのユーザー情報反映機能付きメンバー情報管理アプリの作成例を紹介します。
- 操作環境：
- OS：Windows 11
- Webブラウザー：Edge
- 使用プラン：Microsoft 365 Business Premium
アプリ実装:一覧画面
検索条件項目の設定
検索条件に部署を追加します。
上メニューの[挿入]から、テキストラベルとコンボボックスを各1個追加します。
マウス操作で一覧データ表示部分(左側[ツリービュー]の[BrowserGallery1])を下にずらし、検索条件に関する部品の位置やサイズを整えます。
部署ラベルについて、以下の通り設定します。
- 名前：lblDeptBrowse
- Textプロパティ："部署:"
部署コンボボックスについて、以下の通り設定します。
- 名前：cmbDeptBrowse
- InputTextPlaceholderプロパティ："複数選択可, 未選択時は全件抽出"
- Itemsプロパティ：Distinct(Filter([@メンバー一覧],account_enabled = true),department)
*[Items]プロパティの式の意味：前の記事の工程3で作成したSharePointリストの有効なアカウントのデータを取得し、重複を除きます
検索結果一覧の設定
左側[ツリービュー]の[BrowserGallery1]を選択し、[Items]プロパティを以下の通り設定します。
Sort(
Filter(
[@メンバー一覧],
account_enabled = true,
IsBlank(cmbDeptBrowse.SelectedItems)
|| IsEmpty(cmbDeptBrowse.SelectedItems)
|| department in cmbDeptBrowse.SelectedItems,
TextSearchBox1.Text in display_name
),
display_name,
If(SortDescending1, SortOrder.Descending, SortOrder.Ascending)
)
- アカウントが有効
- 部署コンボボックスで選択した部署(未選択:BlankやEmptyの場合は全件抽出)
- テキストボックスに入力したキーワードを含む表示名(未入力の場合は全件抽出)
左側[ツリービュー]の[BrowserGallery1]を選択し、以下の通り設定します。
- TemplateFillプロパティ：If(ThisItem.upn=User().Email,RGBA(153,217,234,1),RGBA(0, 0, 0, 0))
*[TemplateFill]プロパティの式の意味：アプリユーザーの本人データの場合(一覧データとアプリユーザーのUPNが一致)は背景色を青色にします
検索結果一覧の表示項目設定
各部品の[Text]プロパティを以下の通り設定します。
- Title1： "氏名 : " & ThisItem.display_name
- SubTitle1： "部署 : " & ThisItem.department & " / 役職 : " & ThisItem.job_title & " / 勤務先 : " & ThisItem.office_location
- Body： "TEL : " & ThisItem.mobile_phone & " / Mail : " & ThisItem.mail
また、上記項目の値が途中で見切れる場合は、幅を広げる、複数行表示できるようにするなど、適宜調整します。
アプリ実装:詳細画面
必要項目の追加
取扱い項目が多いと画面に必要が項目の一部が表示されていないことがありますので、追加します。
左側[ツリービュー]の [DetailScreen1>DetailForm1]を選択し、右側[プロパティ]の[ディスプレイ>フィールド]の[8件選択済み]を選択し、[フィールドの追加]を選択します。
詳細画面に表示されていない必要項目すべてにチェックをつけ、[追加]を選択します(この例ではaccount_enabledとmemo) 。
項目のレイアウト調整
少々扱いに癖がありますが、各項目の全体領域を選択し、右側[プロパティ]の[詳細設定]の下の方にある、[Height]、[Width]、[X]、[Y]に値設定すると意図したレイアウトになります。
- 0行目：upn(幅640)
- 1行目：display_name(幅640)
- 2行目：department(幅640)
- 3行目：job_title(幅640)
- 4行目：office_location(幅640)
- 5行目：mobile_phone(幅640)
- 6行目：mail(幅640)
- 7行目：image(幅320),account_enabled(幅320)
- 8行目：memo(幅640)
アプリ実装:編集画面
必要項目の追加(詳細画面と同じ)、コントロールの種類変更
左側[ツリービュー]の [EditScreen1>EditForm1]を選択し、右側[プロパティ]の[ディスプレイ>フィールド]の[8件選択済み]を選択し、[フィールドの追加]を選択します。
編集画面に表示されていない必要項目すべてにチェックをつけ、[追加]を選択します(この例ではaccount_enabledとmemo)。
memoについて、コントロールの種類を[複数行テキストの編集]に変更します。
なお、upnについて、許可値を選択すると、コンボボックスではなくドロップダウンリストになってしまうため、ここでは変更しません。
項目のレイアウト調整(詳細画面と同じ)
少々扱いに癖がありますが、各項目の全体領域を選択し、右側[プロパティ]の[詳細設定]の下の方にある、[Height]、[Width]、[X]、[Y]に値設定すると意図したレイアウトになります。
- 0行目：upn(幅640)
- 1行目：display_name(幅640)
- 2行目：department(幅640)
- 3行目：job_title(幅640)
- 4行目：office_location(幅640)
- 5行目：mobile_phone(幅640)
- 6行目：mail(幅640)
- 7行目：image(幅320),account_enabled(幅320)
- 8行目：memo(幅640)
編集画面表示時のデータ取得(コレクション変数等の操作)
編集画面表示時に以下データを取得し、変数に格納します。
- UPNのコンボボックスの選択肢データ取得(Microsoft Entra IDユーザー情報+SharePointリスト)
- 選択されたUPNに関するMS Entra IDのユーザー情報の取得
左側[ツリービュー]の[EditScreen1]を選択し、左上[OnVisible]プロパティを選択し、以下の通り設定します。
/* upnの選択肢を取得 */
Collect(col_cmb_entra,
Filter(
Office365ユーザー.SearchUserV2( {searchTerm:"", isSearchTermRequired:false} ).value,
JobTitle <> "リソース", "@xxxxxx.com" in Mail, AccountEnabled = true
)
);//MS Entra IDのユーザー情報をコレクション変数に格納⇒【A】
Collect(col_cmb_spl, [@メンバー一覧]);//SharePointリストの情報をコレクション変数に格納⇒【B】
ClearCollect(col_cmb_all,
ForAll(col_cmb_entra, {upn_cmb:UserPrincipalName} ),
ForAll(col_cmb_spl, {upn_cmb:upn} )
);//【A】+【B】のupnを新たなコレクション変数に格納
/* 選択されたupnのEntraユーザー情報を取得 */
UpdateContext({
loc_select_entra:If(EditForm1.Mode=FormMode.New,Blank(),
LookUp(col_cmb_entra, UserPrincipalName=cmbUpn.Selected.Value))
});//新規登録時はブランク、変更時は【A】から選択されたupnの情報をコンテキスト変数に格納⇒【C】
UpdateContext({
loc_init_upn:loc_select_entra.UserPrincipalName,
loc_init_name:loc_select_entra.DisplayName,
loc_init_dept:loc_select_entra.Department,
loc_init_title:loc_select_entra.JobTitle,
loc_init_office:loc_select_entra.OfficeLocation,
loc_init_mobile:loc_select_entra.mobilePhone,
loc_init_mail:loc_select_entra.Mail,
loc_init_image:IfError(Office365ユーザー.UserPhotoV2(loc_select_entra.Mail), Blank())
});//【C】の各要素について個々のコンテキスト変数に格納
UPNの各種設定(コンボボックス追加、手入力値の登録等)
左側[ツリービュー]でUPNの全体領域を選択し、上メニューの[挿入]からコンボボックスを選択します。
この例のように、設定中にロック解除が必要な旨のメッセージが表示された場合は、ロック解除を行います。
追加したUPN用コンボボックスについて、元々用意されていたテキストボックスと同じ位置に重ねるように移動し、以下の通り設定します。
- 名前：cmbUpn
- DefaultSelectedItemsプロパティ：[DataCardValuexx.Text]
*DataCardValueXXのXX部分は左側[ツリービュー]のUPNの値を確認します
- Itemsプロパティ：Distinct(Sort(col_cmb_all,upn_cmb,SortOrder.Ascending),upn_cmb)
- SelectMultipleプロパティ：false
- Visibleプロパティ： If(EditForm1.Mode=FormMode.New,true,false)
また、OnChangeプロパティを以下の通り設定します。これにより、[EditScreen1.OnVisible]の後半部分のコンテキスト変数の値を、UPNコンボボックスの選択値を元に更新しています。
/* 選択されたupnのEntraユーザー情報を取得 */
UpdateContext({
loc_select_entra:LookUp(col_cmb_entra, UserPrincipalName=cmbUpn.Selected.Value)
});//【A】から選択されたupnの情報をコンテキスト変数に格納⇒【C】
UpdateContext({
loc_init_upn:loc_select_entra.UserPrincipalName,
loc_init_name:loc_select_entra.DisplayName,
loc_init_dept:loc_select_entra.Department,
loc_init_title:loc_select_entra.JobTitle,
loc_init_office:loc_select_entra.OfficeLocation,
loc_init_mobile:loc_select_entra.mobilePhone,
loc_init_mail:loc_select_entra.Mail,
loc_init_image:IfError(Office365ユーザー.UserPhotoV2(loc_select_entra.Mail), Blank())
});//【C】の各要素について個々のコンテキスト変数に格納
UPN用コンボボックスで手入力した値を登録できるようにするため、UPNの全体領域にて以下の通り設定します。
- Updateプロパティ：If(IsBlank(cmbUpn.Selected.Value), cmbUpn.SearchText, cmbUpn.Selected.Value)
元々用意されていたUPNテキストボックスも以下の通り設定します。
- Defaultプロパティ：If(EditForm1.Mode=FormMode.New, loc_init_upn, Parent.Default)
- DisplayModeプロパティ：DisplayMode.View
- Fillプロパティ：RGBA(202, 202, 202, 1)
- Visibleプロパティ：If(EditForm1.Mode=FormMode.New,false,true)
表示名(氏名)(display_name)からメール(mail)の設定
表示名(氏名)(display_name)からメール(mail)の各テキストボックス(テータ領域)について、以下の通り設定します。
- Colorプロパティ：If(loc_init_xxxx<>DataCardValueXXText, RGBA(255, 0, 0, 1), RGBA(0, 0, 0, 1))
- Defaultプロパティ： If(EditForm1.Mode=FormMode.New,loc_init_xxxx,Parent.Default)
- Tooltipプロパティ： loc_init_xxxx
[Color]プロパティはMicrosoft Entra IDのユーザー情報と相違がある場合赤文字にする、[Default]プロパティは新規登録時にMicrosoft Entra IDのユーザー情報を引用する、[Tooltip]プロパティはMicrosoft Entra IDのユーザー情報をポップアップ表示するといった内容になります。
ユーザー画像(image)の設定
左側[ツリービュー]の[Image2]を選択し、左上[Image]プロパティを以下の通り設定します。
If(EditForm1.Mode=FormMode.New, loc_init_image,
If(IsBlank(AddPicture1.Media), Parent.Default, AddPicture1.Media)
)
有効なアカウント(account_enabled)の変更制御の設定
有効なアカウント(account_enabled)のトグルボタン(データ領域)を選択し、以下の通り設定します。
- DisplayModeプロパティ：If(glb_is_admin=true, DisplayMode.Edit, DisplayMode.View)
*[DisplayMode]プロパティの式の意味：システム管理者の場合は編集モード、それ以外は閲覧モードとします
編集画面の変数の取扱いがやや煩雑だったため、改めて纏めておきます。すべて前の記事の冒頭の要件の編集画面に関する内容(以下4点再掲)に関するものです。
- UPNは手入力と、Microsoft Entra IDおよびSharePointリストからの選択の両方を可能とする(コンボボックス使用)。
- 新規登録時は入力補助のため、UPNの値を元にMicrosoft Entra IDのユーザー情報から項目値を引用する。
- 上記項目値はツールチップで値を確認できるようにする。
- Microsoft Entra IDのユーザー情報と入力内容に相違がある場合、入力内容を赤文字で表記する。
| イベント | 機能 | UPN選択肢 | EntraID取得 | イベントでの処理内容 |
|---|---|---|---|---|
| 画面表示時 | 新規登録/変更 | データ取得 | データ取得 | ・Entraユーザー情報を取得しcol_cmb_entraに格納【A】 ・SharePointリストのデータを取得しcol_cmb_splに格納【B】 ・【A】+【B】のupnをcol_cmb_allに格納(⇒UPN選択肢で使用) ・選択したUPNに合致するEntraユーザー情報を【A】から取得し、loc_select_entraに格納【C】 ・【C】の各要素をloc_init_xxxxに格納 |
| UPN選択変更時 | 新規登録 | 上記を使用 | データ取得 | ・選択したUPNに合致するEntraユーザー情報を【A】から取得し、loc_select_entraに格納【C】 ・【C】の各要素をloc_init_xxxxに格納 |
| 表示名(氏名)～メールの表示 | 新規登録/変更 | - | 上記を使用 | ・loc_init_xxxxとテキストボックスの値に相違があれば赤文字で表記する |
| 表示名(氏名)～メールにカーソルを当てた時 | 新規登録/変更 | - | 上記を使用 | ・loc_init_xxxxの値をツールチップでポップアップ表示する |
おわりに(設定要素まとめ)
このアプリの作成において、特にポイントになりそうな設定要素を挙げておきます(以前の記事で紹介したPowerAppsアプリと重複あり)。何かアプリを作成する時の参考になれば幸いです。
当ブログ内の連載記事
