Skip to main content

 

 

 

 
Language:

 

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

 

 
 
OutSystems

Search Balloon

Search Balloon UIパターンを使用すると、ユーザーに検索フィールドを提供できます。ユーザーがコンテンツを検索している間に、同時に結果リストの結果が更新されます。

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

このユースケースでは、従業員リストのSearch Balloonを作成します。

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

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

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

    デフォルトで、Search Balloonウィジェットには[Icon]、[Input]、[Actions]、[Answers]の各プレースホルダが含まれています。

  3. Inputウィジェットを選択し、[Properties]タブの[Variable]ドロップダウンで[New Local Variable]を選択します。

  4. 変数の名前を入力します。この例では、「SearchText」と入力しています。

  5. 画面名を右クリックして[Add Preparation]を選択し、Preparationアクションを作成します。

  6. Preparationフローに関連するデータをドラッグします。この例では、EmployeeエンティティをPreparationフローにドラッグしています。

  7. ListRecords1ウィジェットを選択し、[Properties]タブの[Source Record List]ドロップダウンで関連するソースリストを選択します。この例では、[GetEmployees.List]を選択しています。さらに、[Start Index]フィールドに「1」を入力します。

  8. Inputウィジェットを選択し、[Properties]タブの[Destination]ドロップダウンで[New Screen Action]を選択します。

  9. Refresh DataノードをOnChangeアクションフローにドラッグし、[Select Data Source]ウィンドウでGetEmployeesを選択して[OK]をクリックします。

  10. Ajax RefreshノードをOnChangeアクションフローにドラッグし、[Select Widget]ウィンドウで関連するウィジェットに移動して選択します。この例では、ListRecords1を選択して[OK]をクリックしています。

  11. Preparationアクションをダブルクリックし、GetEmployees Aggregateをダブルクリックします。

  12. Filters]をクリックしてから[Add Filter]をクリックし、[Filter Condition]フィールドに関連するロジックを入力して[Done]をクリックします。この例では、以下の条件を入力しています。

    Employee.FirstName like "%" + SearchText + "%" or Employee.LastName like "%" + SearchText + "%" or SearchText = ""

    これにより、従業員名にSearchTextが含まれるすべてのレコードがAggregateで返されます。

  13. 画面名をダブルクリックし、Search Balloonウィジェットを選択し、[Text]プレースホルダを右クリックして[Delete]を選択します。

  14. Expressionウィジェットをリストにドラッグし、関連する式の値を入力して[Done]をクリックします。この例では、以下を入力しています。

    ListRecords1. List.Current.Employee.Name + " "

    これにより、リストがフィルタリングされ、従業員名が表示されます。

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

プロパティ

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



  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるSearch Balloon UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1 myclass2" - 適用されるSearch Balloon UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
AdvancedFormat(Text型): オプション 入力パラメータによって提供されるオプションのほかに、追加オプションを使用できます。

  • { arrow: false, showOnInit: true }
詳細については、https://atomiks.github.io/tippyjs/をご覧ください。
  • Was this article helpful?