Skip to main content

 

 

 

 
Language:

 

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

Dropdown Tags

Dropdown Tags UIパターンは、ドロップダウン検索の使用時に複数選択オプションをユーザーに提供します。

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

この例では、アプリケーションユーザーリストのドロッダウンタグ検索と、選択済みアイテム数を表示するメッセージを作成します。

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

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

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

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

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

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

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

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

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

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

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

    CurrentList.Length

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

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

プロパティ

プロパティ 説明
ItemList(DropdownItem List型): 必須 ドロップダウンに表示するアイテムのリスト。
SelectedItemsList(DropdownItem List型): オプション このパラメータを使用して事前選択するアイテムを設定します。
IsRemoveItems(Boolean型): オプション Trueの場合、アイテムを削除するオプションが有効になります。これがデフォルトです。Falseの場合、アイテムを削除するオプションが無効になります。
IsDisabled(Boolean型): オプション Trueの場合、ドロップダウン検索オプションが無効になります。Falseの場合、ドロップダウン検索が有効になります。これがデフォルトです。
SearchPrompt(Text型): オプション 検索プロンプト/プレースホルダに表示するテキスト。「Search」がデフォルト値です。
NoResultsText(Text型): オプション 検索プロンプト/プレースホルダに表示するテキスト。「No results found」がデフォルト値です。
AdvancedFormat(Text型): オプション 入力によって提供されるもの以外の追加オプションを使用できます。デフォルト値は{}です。

{"searchEnabled": false}

詳細については、Choicesライブラリをご覧ください。

fuse.jsオプションを使用して検索の構成を変更することもできます。構成の詳細については、Fuseをご覧ください。

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



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