Skip to main content

 

 

 

 
Language:

 

 
従来のWebアプリにのみ適用されます

 

 
 
OutSystems

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は削除可能なタグを含む複数選択ドロップダウンとして機能します。

プロパティ

  • { searchPlaceholderValue: 'Search' }
  • プロパティ 説明
    WidgetId(Text型): 必須 要素をトリガーする要素名(Combo BoxおよびList Box)。
    NoResultsText(Text型): オプション 結果がない場合に表示するテキスト。デフォルト値は_"No results found."_です。
    SearchEnabled(Boolean型): オプション Falseの場合、検索機能が削除されます。このプロパティはList Boxでは機能しません。Trueの場合、検索機能が有効になります。これがデフォルト値です。
    SearchResultsLimit(Long Integer)型: オプション 表示される結果数の制限。
    AdvancedFormat(Text型): オプション 入力によって提供されるもの以外の追加オプションを使用できます。オプションの詳細については、Choicesライブラリをご覧ください。デフォルト値は{}です。

    ExtendedClass(Text型): オプション Dropdown Select UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。



    • 空白 - カスタムスタイルを追加しません(デフォルト値)。
    • "myclass" - 適用されるDropdown Select UIのスタイルに_myclass_というスタイルを追加します。
    • "myclass1" "myclass2" - 適用されるDropdown Select UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
    • Was this article helpful?