Skip to main content

 

 

 

 
Language:

 

 
モバイルアプリとリアクティブWebアプリにのみ適用されます
Service Studioバージョン :
 
 
OutSystems

Dropdown Search

Dropdown Search UIパターンは、ユーザーが検索可能なオプションの選択肢を提供します。Dropdown Searchは、可能なオプションのソート順が明確ではない場合に特に便利です。

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

この例では、従業員リストのドロップダウン検索を作成し、従業員が選択されると、メッセージに従業員IDが表示されるようにします。

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

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

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

  3. 画面名を選択して右クリックし、[Fetch Data from Database]を選択します。

  4. データベースエンティティを追加するため、画面をクリックし、[Select Source]ポップアップで関連するデータベースエンティティを選択して[OK]をクリックします。

    この例では、Employeeエンティティを選択します。

    GetEmployee Aggregateが自動的に作成されます。

  5. 画面名をダブルクリックして画面に戻り、Dropdown Searchウィジェットを選択し、[Properties]タブで必須のプロパティ(ItemList、Value、Text)を設定します。

  6. 引き続き[Properties]タブで、[Handler]ドロップダウンから[New Client Action]を選択します。

  7. 関連するコンテンツをクライアントアクションに追加します。

    この例では、Messageをクライアントアクションに追加し、Expressionエディタで以下のロジックを入力し、[DONE]をクリックしています。これにより、選択された従業員の名前とIdが表示されます。 この例では、Messageをクライアントアクションに追加し、Expressionエディタで以下のロジックを入力し、[DONE]をクリックしています。これにより、選択された従業員の名前とIdが表示されます。 この例では、Messageをクライアントアクションに追加し、Expressionエディタで以下のロジックを入力し、[DONE]をクリックしています。これにより、選択された従業員の名前とIdが表示されます。

    SelectedItem.Text + "( Employee ID: " + SelectedItem.Value + ")"

  8. Properties]タブで(オプションの)プロパティを設定し、Dropdown Searchのルックアンドフィールを変更できます。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。この例の結果は以下のようになります。

プロパティ

プロパティ 説明
ItemList(DropdownItem List型): 必須 ドロップダウンに表示するアイテムのリスト。
SelectedItem(DropdownItem型): オプション 事前選択するドロップダウンリストのアイテムを定義します。
IsDisabled(Boolean型): オプション Trueの場合、ドロップダウン検索が無効になります。Falseの場合、ドロップダウン検索が有効になります。これがデフォルトです。
EmptyText(Text型): オプション アイテムが選択されていない場合に表示するテキスト。「Select an item」がデフォルトのテキストです。
SearchPrompt(Text型): オプション 検索プロンプト/プレースホルダに表示するテキスト。
NoResultsText(Text型): オプション 結果がない場合に表示するテキスト。
AdvancedFormat(Text型): オプション 入力によって提供されるもの以外の追加オプションを使用できます。オプションの詳細については、Choicesライブラリをご覧ください。デフォルト値は{}です。fuse.jsオプションを使用して検索の構成を変更することもできます。検索の構成の詳細については、Fuseをご覧ください。
ExtendedClass(Text型): オプション Dropdown Search UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。



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