あなたのPowerAppsアプリ、使いにくいと感じたことはありませんか？
選択肢の入力ミスや手間が増えることで、ユーザーの負担になっているかもしれません。
そこで活用したいのが「ドロップダウン（Dropdown）」です。
ドロップダウンを使えば、選択肢をリスト形式で提供できるため、入力の正確性が向上し、操作もスムーズになります。
さらに、データソースと連携することで、自動更新される動的なリストを作成することも可能です。
この記事では、PowerAppsのドロップダウンを活用して、より快適で効率的なアプリを作成するための基本を解説します。
PowerAppsのドロップダウンとは？
PowerAppsのドロップダウン（Dropdown）コントロールは、アプリの中で選択式の入力を提供する便利なツールです。
これにより、ユーザーはあらかじめ設定されたリストから一つの選択肢を選ぶことができ、手入力の手間を省くことができます。
ドロップダウンは、ユーザーが簡単に選択できる直感的なUIを提供するだけでなく、入力ミスの削減にも貢献します。また、データソースと連携させることで、動的なリストを作成し、アプリの柔軟性を高めることが可能です。
例えば、SharePointリストやDataverseなどのデータソースと連携し、最新の情報をリアルタイムで反映するドロップダウンを作ることができます。
このコントロールを適切に活用することで、ユーザーの操作性を向上させ、より効率的なアプリ開発が実現できます。
PowerAppsのドロップダウンのプロパティ
PowerAppsのドロップダウン（Dropdown）は、アプリにおいて選択肢を効率的に管理できる便利なコントロールです。
ユーザーはリストから簡単に値を選択できるため、手入力の手間が省け、入力ミスを防ぐことができます。
以下はドロップダウンで使えるプロパティの一覧です。
| プロパティ | 説明 |
|---|---|
| AccessibleLabel | スクリーンリーダーが読み上げるためのラベル。 |
| BorderColor | 境界線の色を指定するプロパティ。 |
| BorderStyle | 境界線の種類（実線、破線、点線、なし）を決定する。 |
| BorderThickness | 境界線の太さを設定。 |
| ChevronBackground | ドロップダウンの矢印部分の背景色。 |
| ChevronFill | ドロップダウンの矢印の色を指定。 |
| Color | コントロール内のテキストの色を設定。 |
| DefaultSelectedItems | 他の値を指定する前のコントロールの初期値。 |
| DisplayMode | 編集、表示、または無効のどのモードで動作するかを決定。 |
| DisabledBorderColor | 無効化された際の境界線の色。 |
| DisabledColor | 無効化された際のテキストの色。 |
| DisabledFill | 無効化された際の背景色。 |
| Fill | コントロールの背景色を設定。 |
| FocusedBorderColor | フォーカス時の境界線の色。 |
| FocusedBorderThickness | フォーカス時の境界線の太さを決定。 |
| Font | 使用するフォントの種類を指定。 |
| FontWeight | テキストの太さを設定（太字、中太、標準など）。 |
| Height | コントロールの高さ。 |
| HoverBorderColor | マウスホバー時の境界線の色。 |
| HoverColor | マウスホバー時のテキストの色。 |
| HoverFill | マウスホバー時の背景色。 |
| Italic | テキストを斜体にするかを決定。 |
| OnChange | 値が変更された際に実行するアクション。 |
| OnSelect | コントロールが選択されたときに実行するアクション。 |
| PaddingBottom | テキストと下端の間の距離を設定。 |
| PaddingLeft | テキストと左端の間の距離を設定。 |
| PaddingRight | テキストと右端の間の距離を設定。 |
| PaddingTop | テキストと上端の間の距離を設定。 |
| PressedBorderColor | クリック時の境界線の色。 |
| PressedColor | クリック時のテキストの色。 |
| PressedFill | クリック時の背景色。 |
| Reset | コントロールを初期状態に戻すかどうかを指定。 |
| SelectionColor | 選択した項目のテキストの色。 |
| SelectionFill | 選択した項目の背景色。 |
| Size | フォントサイズを設定。 |
| Strikethrough | テキストに取り消し線をつけるかを決定。 |
| TabIndex | キーボード操作時のフォーカス順序を指定。 |
| Tooltip | ユーザーがカーソルを当てた際に表示される説明文。 |
| Underline | テキストに下線をつけるかを決定。 |
| Visible | コントロールの表示・非表示を切り替え。 |
| Width | コントロールの幅を指定。 |
| X | 左端の位置を決定。 |
| Y | 上端の位置を決定。 |
PowerAppsのドロップダウンの基本的な使い方
PowerAppsの「挿入」メニューから「入力」→「ドロップダウン」を選択します。
Items プロパティに選択肢を設定します。
初期値は以下のようになっているので、選択肢にしたいデータソースを接続しましょう。
["Item 1", "Item 2", "Item 3"]
DefaultSelectedItemsプロパティを設定すると、初期表示を指定できます。
"Item 1"
Dropdown1.Selected.Value を使って、ユーザーが選択した値を取得できます。
例えば、以下のようにテキストコントロールで表示したり、変数に定義したりもできます。
Dropdown1.Selected.Value //テキストコントロールで表示したい場合
Set(selectedValue, Dropdown1.Selected.Value) //ドロップダウンのOnChangeで変数に定義
PowerAppsのドロップダウンを使う際の注意点
1. データソースと連携する
PowerAppsのドロップダウンは、静的なリストだけでなく、SharePointリストやDataverseなどのデータソースとも連携できます。
例えば、SharePointリストの「カテゴリ」列の値を取得してドロップダウンに表示する場合、以下のように設定できます。
Dropdown1.Items = Choices(SharePointList.Category)2. 選択肢のソート
選択肢を昇順または降順にソートしたい場合は、Sort関数を使用します。
Sort(["Items 1", "Items 3", "Items 2"], Text, Ascending)3. ユーザーの選択に応じた処理
OnChange プロパティを活用すると、ユーザーの選択に応じたアクションを実行できます。
If(Dropdown1.Selected.Value = "選択肢1", Notify("選択肢1が選ばれました"))
まとめ
PowerAppsのドロップダウンを適切に活用することで、ユーザーの選択肢を管理し、直感的なインターフェースを作成できます。
データソースとの連携や選択時のアクションを工夫することで、より高度なアプリを構築することも可能です。
PowerAppsを活用して、使いやすいドロップダウンを実装しましょう！
