DXコラム

cloud column microsoft powerplatform cover 8 2

Power Apps アプリにドロップダウンで選択肢を追加する(三島 正裕の Microsoft Power Platform 業務効率化コラム 第8回)

Print Friendly, PDF & Email
cloud column microsoft powerplatform cover 8 2

はじめに

Microsoft Power Platform 業務効率化コラムを書かせていただいている三島です。今回も業務改善やDX推進のヒントになる話題を皆様にお届けしたいと思います。

Power Apps アプリで、ユーザーに情報を入力してもらうとき、選択肢を設けておくと使い勝手は良くなります。キータイプで入力をするよりも、選択肢から選択する方が操作は早くなりますし、入力ミスも減らすことができます。入力されたデータを利活用する際も、文字に揺らぎのあるテキストデータよりも、決まったテキストが選択肢からセットされている方が、データ集計がしやすいはずです。


cloud column microsoft powerplatform 8 1

Power Apps では様々な選択肢用のコントロールが用意されていますが、今回はドロップダウンの追加方法について解説をしたいと思います。


ドロップダウン コントロール

ドロップダウンは、あらかじめ設定しておいた選択肢の中から、ユーザーにひとつだけ選択をさせることができるコントロールです。選択肢の内容はプロパティItemsで設定をします。プロパティには直接テキストを入力してセットすることもできますが、データベースのテーブルやコレクションと連携をさせることもできます。

cloud column microsoft powerplatform 8 2

Power Apps でドロップダウンを追加するには、開発画面の上にある[+挿入]ボタンからメニューを開き、[入力]の中にある[ドロップダウン]を選択します。画面に追加されたドロップダウンは、マウス操作で位置を設定したり、サイズを変更したりすることができます。

cloud column microsoft powerplatform 8 3

プロパティItems に選択肢をセットする

最初にドロップダウンを設定すると、プロパティItemsにはDropDownSampleというサンプルデータがセットされています。選択肢を開くと「1,2,3」という数字がセットされていることがわかります。

cloud column microsoft powerplatform 8 4

この選択肢を設定するには、プロパティItemsを直接編集します。カッコ[]を入力し、中にカンマ区切りで選択肢となるテキストを入力します。
文字列の場合はダブルコーテーション(””)で文字列を囲みます。
試しに、プロパティに [“A”,”B”,”C”] と入力をしてみましょう。ドロップダウンの中身が置き換わり、選択肢には「A、B、C」が表示されるはずです。

cloud column microsoft powerplatform 8 5

ドロップダウンは編集フォームにも追加をすることができます。説明に使用するテストアプリは、前回のコラムにも登場した業務報告アプリを使用したいと思います。今回はじめてコラムを読まれる方は、2回目のコラム(https://dx.si-jirei.jp/cloud-column-microsoft_powerplatform-2/)を読んでいただくか、Power Apps の機能で、Excelテーブルからアプリを自動作成したものをご準備いただければと思います。


ドロップダウンを追加する

編集フォームにある顧客名という入力フォームを、今回はドロップダウンから選択できるようにしたいと思います。
「カード:顧客名」の中にある「テキスト入力コントロール」をマウスで選択すると、「Parent.Default」という値が、Defaultプロパティにセットされているのがわかるかと思います。この入力フォームを同じ場所にドロップダウンを追加して、選択肢から顧客名が選択できるようにしたいと思います。

cloud column microsoft powerplatform 8 6

入力フォームを選択した状態で、「+挿入」からドロップダウンを追加してみましょう。ロックがかかっている場合は「ロック解除と追加」ボタンを押して解除します。
ドロップダウンが追加されると下図のようになります。

cloud column microsoft powerplatform 8 7

ドロップダウンの選択肢を変更してみます。初期値にはDropDownSampleがセットされているはずです。プロパティItemsには [“顧客A”,”顧客B”,”顧客C”] をセットします。セットをすると、選択肢には「顧客A」、「顧客B」、「顧客C」が表示されるようになります。

cloud column microsoft powerplatform 8 8

「カード:顧客名」にはテキスト入力のコントロールが残っている状態です。このまま編集フォームの内容を保存すると、テキスト入力の顧客名が保存されてしまいますので、ドロップダウンで選択した顧客名が保存されるように設定変更します。

「カード:顧客名」を選択した状態で、詳細設定を開くとUpdateのプロパティがあります。ここには「DataCardValue8.Text」がセットされています(※)。

※「.Text」の前の数字は、アプリを作成した状況やタイミングによって変わります。

この「DataCardValue8.Text」はテキスト入力の顧客名を指していますので、ドロップダウンで選択した顧客名が保存されるように「Dropdown1.SelectedText.Value」と変更します。

cloud column microsoft powerplatform 8 9

テキスト入力コントロールを編集フォームから削除または非表示にする

これで「カード:顧客名」にあったテキスト入力コントロールは必要なくなりましたので、編集フォームからは削除したいところですが、削除をしてしまうとエラーが表示されてしまいます。テキスト入力コントロールの情報を参照している箇所がいくつかあり、コントロール自体を削除してしまうと、参照できなくなってしまうためです。エラーの内容を確認しながら、該当箇所を修正するのがベストですが、特に問題がなければ、コントロール自体を非表示にしておくだけでも良いと思います。

cloud column microsoft powerplatform 8 10

別のテーブルを参照してドロップダウンを表示させる

ドロップダウンは別のテーブルを参照して表示することもできます。上記の方法だと選択肢が少ない場合は良いですが、顧客名のように件数が多くなる場合は、別のテーブルで管理する方が運用しやすくなります。
顧客マスタを作成して、選択肢に表示するよう加工をしてみたいと思います。まずは、Excelで顧客マスタを作成します。今回は練習ですので、顧客番号と顧客名だけのシンプルなテーブルを作成します。テストデータがセットされていると作成しやすくなりますので、あらかじめ何件かセットしておきましょう。テーブル名は任意ですがKokyakuMstとしておきます。テーブルの作成方法について知りたい方は、2回目のコラムをご確認ください。
作成したテーブルをOneDriveの任意の場所において、アプリに追加します。「データ」より「+データの追加」を選択。「OneDrive for Business」から作成したテーブルKokyakuMstにチェックを入れ、「接続」を押します。

cloud column microsoft powerplatform 8 11

ドロップダウンのプロパティItemsを変更します。プロパティには、上記の手順で [“顧客A”,”顧客B”,”顧客C”] がセットされているので削除します。代わりにKokyakuMst.顧客名をセットします。正しくマスタに接続ができていれば、ドロップダウンに顧客名が表示されるはずです。

cloud column microsoft powerplatform 8 12

さいごに

今回設定した顧客マスタのような件数が多くなりそうなデータは、選択肢となるテキストを直接プロパティに記述するのではなく、マスタテーブルにしておいてから接続する方が運用しやすいと思います。件数が多くて選択肢から選択をするのが難しい場合は、検索フォームを設けるのもひとつの方法です。この方法は少し複雑になりますので、また別の機会で紹介できればと思います。今回のコラムは以上です。Power Platform に関しましては、お気軽にディーアイエスサービス&ソリューションにお問い合わせください。それでは次回もお楽しみに。


筆者プロフィール

mmishima

ディーアイエスサービス&ソリューション株式会社
クラウドサービス 担当 三島 正裕(みしま まさひろ)

2002年入社。島根県出身。​
Microsoft 365 に関する製品導入や初学者向けの教育支援を担当。Power Platform を中心に教育コンテンツの開発やサービス企画をする傍ら、社内向けの業務アプリ開発にも取り組んでいる。

本コラムは2023年11月現在の情報を基に作成しています。


Power Platform 製品関連情報・サービス


Microsoft Power Apps ハッカソン、イベント登壇レポート


Power Platform 導入事例

関連記事一覧