ドロップダウン
Dropdown UIパターンを使用すると、ユーザーが複数のオプションから選択することができます。Dropdown UIパターンは、5つ以上のオプションの選択肢を提供するために使用します。画像などのリッチなコンテンツを表示する場合に、Dropdown UIパターンが使用されます。オプションの数が非常に多い場合は、コンテキストが失われないようにするため、Dropdown Select UIパターンを使用することを検討してください。
Dropdown UIパターンの使用方法
この例では、既存のデータベースにある従業員名のリストを含むドロップダウンを作成します。ドロップダウンで従業員を選択すると、フィードバックメッセージが表示されます。
-
Service Studioのツールボックスで
Dropdownを検索します。Dropdownウィジェットが表示されます。
-
ツールボックスから、Dropdownウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
-
［Properties］タブで、Dropdownウィジェットの名前を入力します。
この例では、「
EmployeeDropdown」と入力しています。
-
画面名を右クリックして［Add Preparation］を選択します。
-
ツールボックスから、AggregateをPreparationにドラッグします。
-
データベースエンティティを追加するため、Aggregateをダブルクリックします。画面をクリックし、［Select Source］ポップアップで使用するデータベース（この例ではEmployeeデータベース）を選択します。［OK］をクリックします。
-
画面名をダブルクリックして画面に戻ります。ツールボックスからList Recordsウィジェットを［DropdownList］プレースホルダにドラッグし、［Properties］タブの［Source Record List］ドロップダウンで関連するレコードリストを選択します。
この例では、［GetEmployees.List］を選択しています。
-
ツールボックスからExpressionウィジェットをList Recordsウィジェットにドラッグし、［Properties］タブでValueプロパティをドロップダウンに表示する値に設定します。
この例では、従業員名に設定しています。
-
ドロップダウンで各値を選択できるようにするため、Expressionを右クリックして［Link to -> New Screen Action］を選択します。
-
［Properties］タブで、Methodプロパティを［Ajax Submit］に設定します。
-
新しい画面アクションをダブルクリックし、Nameプロパティに名前を入力します。
この例では、「SelectedUser」という名前を付けます。
-
新しい画面アクションをダブルクリックし、ツールボックスからRun Server Actionを画面アクションにドラッグします。［Select Action］ポップアップでFeedback_Messageを検索して選択し、［OK］をクリックします。
-
メッセージのテキストとタイプを設定します。
この例では、メッセージタイプを［Info］に設定し、現在選択されている従業員を表示するようにメッセージテキストを設定しています。
-
画面名をダブルクリックして画面に戻ります。画面名を右クリックして［Add Local Variable］を選択します。変数の名前とデフォルト値を入力します。
-
変数をドロップダウンの［Prompt］プレースホルダにドラッグし、名前と値を入力します。
-
画面アクションをダブルクリックし、Assignを追加して変数の値を設定します。この例では、変数を現在選択されている従業員に設定しています。
-
Ajax Refreshを画面アクションに追加し、［Select Widget］ポップアップで更新するウィジェットを選択します。
この例では、現在選択されている従業員を保持するExpressionを選択しています。
-
［Logic］タブを選択し、［Interaction -> ToggleElement］に移動して画面アクションにドラッグします。これで、値が選択されるとドロップダウンが閉じるようになります。
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
プロパティ
| プロパティ | 説明 |
|---|---|
| ExtendedClass（Text型）: オプション | Dropdown UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。 例
|