あなたのPowerAppsアプリ、使いにくいと感じたことはありませんか？
選択肢の入力ミスや手間が増えることで、ユーザーの負担になっているかもしれません。
そこで活用したいのが「ドロップダウン（Dropdown）」です。
ドロップダウンを使えば、選択肢をリスト形式で提供できるため、入力の正確性が向上し、操作もスムーズになります。
さらに、データソースと連携することで、自動更新される動的なリストを作成することも可能です。
この記事では、PowerAppsのドロップダウンを活用して、より快適で効率的なアプリを作成するための基本を解説します。
PowerAppsをもっと効率的に学びたいと考えている方には、Udemyのオンライン講座がおすすめです。
初心者向けのコースが充実しており、動画で実践的に学べるため、独学よりもスムーズにスキルを習得できます。
特に、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を活用して、使いやすいドロップダウンを実装しましょう！
PowerAppsはUdemyで学べる！
| 学習スタイル | オンライン講座 ・動画 ・スライド |
|---|---|
| 運営会社 | 株式会社ベネッセコーポレーション |
| 期間 | 購入した講座は無期限で視聴可能 |
| 料金 | 1,500円〜29,000円(税込) |
| サポート | 年間通してセール多数開催 購入前に無料視聴可能 30日間返金保証 など |
Udemyは、オンラインで幅広い分野のスキルを手軽に学べる、世界最大級のオンライン学習プラットフォームです。
PowerAppsだけでなく、PowerAutomateを含むPowerPlatform系以外にも以下のような講座があります。
- ビジネス
- プログラミング
- デザイン
- 語学
- 趣味 など
20万以上のコースから、動画講座で自分のペースで学習できます。
Udemyは不定期ですが頻繁にセールを開催します。
95％以上割引かれて1,500円で購入できる講座もありますよ！
キャリアアップや趣味の充実にも最適。
最大95％OFFで講座が手に入るセール多数！
