はじめに
Power Appsでテンプレートを使うことはありますか？
私はキャンバス アプリを作成する中で 「+ 新しい画面」の電子メールがとても気に入っています。
下記のような画面が出てきます。終了日はおそらく誤訳ですね。
この中の赤枠の検索ボックスが特に気に入っている機能です。
構成
クラシック コントロールで基本的に構成されています。
+-- PeopleBrowseGallery1 ユーザー検索結果を表示する垂直ギャラリー
| |
| +-- Separator1 各ユーザーアイテムの間に表示される区切り線
| |
| +-- Subtitle1 検索されたユーザーのメールアドレスを表示
| |
| +-- Title2 検索されたユーザーの名前
| |
| +-- Rectangle2 選択されたユーザーを枠線で囲む
|
+-- EmailPeopleGallery1 選択したレコードを表示するギャラリー
| |
| +-- iconRemove1 リストからレコードを削除するためのアイコン
| |
| +-- Title1 選択されたユーザーの名前
| |
| +-- Rectangle1 選択されたユーザーの背景
|
+-- SearchIcon1 検索アイコン
|
+-- TextSearchBox1 テキスト入力
全てクラシック コントロールで構成されています。
この画面はユーザー検索からメールを送信する機能を目的としていますが、
- 検索結果をコレクションに格納し、ギャラリーで表示する
- コレクションに格納されたレコードをギャラリーで一覧化する
上記の機能を持っています。テキスト入力と🔍アイコンの組み合わせで、何を意図したものなのか、ユーザーフレンドリーであることが好みです。
なぜこれが好きなのか
こちらが好きな理由は、コントロール単体で検索と複数選択をサポートするコンボボックスが個人的に扱いづらいな、という課題感を持っているからです。
-
DefaultプロパティとDefaultSelectedItemsが入り混じっていること -
SelectMultiple、SearchFieldsの設定がリセットされがちなこと - 境界半径をコントロールできないこと
上記が個人的にうーむ🧐です。
既定値を設定するDefaultSelectedItemsについても、「あれ、これ何入れれば上手く反映されるんだったかな」と沼にハマることが良くあります。
クラシック コントロールを前提として記載しています。
モダンは確かに見た目が良く使いたいです。しかしあくまでプレビュー機能です。2024/12/25 現在
実稼働を鑑みた際に、（私は）モダン コントロールの活用を避けてます。
各パーツの数式がテクニカル
紹介したパーツの数式も解説させてください。
/*Only use Office 365 Users operation if user has started searching*/
If(
!IsBlank(Trim(TextSearchBox1.Text)),
'Office365ユーザー'.SearchUser(
{
searchTerm: Trim(TextSearchBox1.Text),
top: 15
}
)
)
Office365ユーザー.SearchUserが若干古い記法ですが、検索の書き方ってこうするのかと非常に勉強になります。
Visibleは、テキスト入力が空白でないとき映るように設定されています。
!IsBlank(Trim(TextSearchBox1.Text))
またこのギャラリー内に位置するテキストラベルTitle2には
/*Select user, clear search contents and if this user hasn't been added to MyPeople collection, add them*/
Concurrent(
Set(
_selectedUser,
ThisItem
),
Reset(TextSearchBox1),
If(
Not(ThisItem.UserPrincipalName in MyPeople.UserPrincipalName),
Collect(
MyPeople,
ThisItem
)
)
)
並列処理を実行するConcurrent 関数を使い
上記を実行しています。非常に美しいです。
選択されたレコードは、折り返しの数が4に設定されたギャラリー コントロールで見やすく整理されています。
この折り返しの数に合わせてCountRows 関数と組み合わせた高さ設定も推しのポイントです。
/*Height adjusts to number of items in gallery*/
Min(
(Self.TemplateHeight + Self.TemplatePadding * 2) * RoundUp(
CountRows(Self.AllItems) / 4,
0
),
182
)
アイテムを削除するicoRemove1のOnSelectではコレクションの操作のツボであるRemove 関数も含まれています。
Remove(
MyPeople,
LookUp(
MyPeople,
UserPrincipalName = ThisItem.UserPrincipalName
)
)
全体的にコントロールの線を補足し、枠線・アイコンカラーをrgba(105,105,105,1) Color.DimGray、境界半径を8で統一することが私の好みです。
この修正だけで、安定的な検索機能をサクっと作れます。
■ 検索
■ 結果
私はコンポーネント化して何度も使っていたりします。(なんども一から作った記憶がありますが)
おわりに
今回は衝動的に小ネタを記載しました。
テンプレートを観察していると、Microsoftの猛者がこだわって作ったのかなという妄想も膨らんで楽しいですね。
使いやすいヒントは意外と身近に転がっていたりします。
興味があるときに見てみてください。