Skip to main content

 

 

 

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

ドロップダウン

Dropdown UIパターンを使用すると、ユーザーが複数のオプションから選択することができます。Dropdown UIパターンは、5つ以上のオプションの選択肢を提供するために使用します。画像などのリッチなコンテンツを表示する場合に、Dropdown UIパターンが使用されます。オプションの数が非常に多い場合は、コンテキストが失われないようにするため、Dropdown Select UIパターンを使用することを検討してください。

Dropdown UIパターンの使用方法

この例では、既存のデータベースにある従業員名のリストを含むドロップダウンを作成します。ドロップダウンで従業員を選択すると、フィードバックメッセージが表示されます。

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

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

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

  3. Properties]タブで、Dropdownウィジェットの名前を入力します。

    この例では、「EmployeeDropdown」と入力しています。

  4. 画面名を右クリックして[Add Preparation]を選択します。

  5. ツールボックスから、AggregateをPreparationにドラッグします。

  6. データベースエンティティを追加するため、Aggregateをダブルクリックします。画面をクリックし、[Select Source]ポップアップで使用するデータベース(この例ではEmployeeデータベース)を選択します。[OK]をクリックします。

  7. 画面名をダブルクリックして画面に戻ります。ツールボックスからList Recordsウィジェットを[DropdownList]プレースホルダにドラッグし、[Properties]タブの[Source Record List]ドロップダウンで関連するレコードリストを選択します。

    この例では、[GetEmployees.List]を選択しています。

  8. ツールボックスからExpressionウィジェットをList Recordsウィジェットにドラッグし、[Properties]タブでValueプロパティをドロップダウンに表示する値に設定します。

    この例では、従業員名に設定しています。

  9. ドロップダウンで各値を選択できるようにするため、Expressionを右クリックして[Link to -> New Screen Action]を選択します。

  10. Properties]タブで、Methodプロパティを[Ajax Submit]に設定します。

  11. 新しい画面アクションをダブルクリックし、Nameプロパティに名前を入力します。

    この例では、「SelectedUser」という名前を付けます。

  12. 新しい画面アクションをダブルクリックし、ツールボックスからRun Server Actionを画面アクションにドラッグします。[Select Action]ポップアップでFeedback_Messageを検索して選択し、[OK]をクリックします。

  13. メッセージのテキストとタイプを設定します。

    この例では、メッセージタイプを[Info]に設定し、現在選択されている従業員を表示するようにメッセージテキストを設定しています。

  14. 画面名をダブルクリックして画面に戻ります。画面名を右クリックして[Add Local Variable]を選択します。変数の名前とデフォルト値を入力します。

  15. 変数をドロップダウンの[Prompt]プレースホルダにドラッグし、名前と値を入力します。

  16. 画面アクションをダブルクリックし、Assignを追加して変数の値を設定します。この例では、変数を現在選択されている従業員に設定しています。

  17. Ajax Refreshを画面アクションに追加し、[Select Widget]ポップアップで更新するウィジェットを選択します。

    この例では、現在選択されている従業員を保持するExpressionを選択しています。

  18. Logic]タブを選択し、[Interaction -> ToggleElement]に移動して画面アクションにドラッグします。これで、値が選択されるとドロップダウンが閉じるようになります。

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

プロパティ

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



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