Dropdown Select

Dropdown Selectパターンを他のパターンに適用すると、リスト内に検索機能や複数選択機能を実装できます。拡張コンボボックスやリストボックスをフォームで使用する必要がある場合にDropdown Select UIパターンを使用すると、リストよりも優れたユーザーエクスペリエンスを提供できます。

Dropdown Select UIパターンの使用方法

1.Service StudioのツールボックスでDropdown Selectを検索します。

Dropdown Selectウィジェットが表示されます。

![](<images/dropdownselect-1-ss.png>)

1.ツールボックスから、Dropdown Selectウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

![](<images/dropdownselect-5-ss.png>)

1.ツールボックスからCombo Boxウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグし、［Properties］タブでウィジェットの名前を入力します。この例では、「ListofEmployees」と入力しています。

![](<images/dropdownselect-9-ss.png?width=800>)

1.画面名を右クリックし、［Add Local Variable］を選択して新しい変数の名前を入力します。この例では、「SelectedRecord」と入力しています。

![](<images/dropdownselect-8-ss.png>)

1.Combo Boxウィジェットを選択し、［Properties］タブでVariableプロパティとSource Entityプロパティの値を入力します。この例では、Variableプロパティで［SelectedRecord］を選択し、EmployeesエンティティをCombo Boxウィジェットにドラッグしています。これが自動的にSource Entityプロパティの値になります。

![](<images/dropdownselect-11-ss.png?width=800>)

1.Dropdown Selectウィジェットを選択し、［Properties］タブの［WidgetId］ドロップダウンでCombo BoxウィジェットのIDを選択します。この例では、［ListofEmployees.Id］を選択しています。

![](<images/dropdownselect-12-ss.png>)

1.［Properties］タブで（オプションの）プロパティを設定し、Dropdown Selectのルックアンドフィールを変更できます。

![](<images/dropdownselect-13-ss.png>)

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

このパターンの動作は、バインドの方法によって異なります。

• Combo Boxウィジェットにバインドした場合、Dropdown Selectは選択可能なドロップダウンとして機能します。
• List Boxにバインドした場合、Dropdown Selectは削除可能なタグを含む複数選択ドロップダウンとして機能します。