Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

Search Balloon

SearchBalloonウィジェットを使用すると、ユーザーがコンテンツを検索することができ、同時に検索リストの結果も更新されます。SearchBalloonは、ユーザーが検索フィールドに入力した内容に基づいて推奨事項を示すなどして、ユーザーをガイドするために使用します。

使用方法

ユーザーが検索クエリを入力すると自動的に更新される結果リストを作成するには、以下の手順を実行します。

最初に以下の手順を実行します。

  • アプリでサンプルデータを参照します。
  • 新しい空の画面を作成し、その画面にPreparationアクションを追加します(Web画面を右クリックして[Add Preparation]を選択します)。(サンプルデータから)Sample_EmployeeエンティティをPreparationフローにドラッグします。

次に以下の手順を実行します。

  1. ウィジェットツールボックスからSearchBalloonウィジェットを画面にドラッグします。

  2. SearchBalloonウィジェットに移動して、Inputウィジェットを選択します。Inputのプロパティの[Variable]フィールドをクリックし、リストから[New Local Variable]を選択します。変数に「SearchText」という名前を付けます。

    SearchBalloonの変数

  3. SearchBalloonウィジェットに移動して、ListRecords1ウィジェットを選択します。ListRecords1のプロパティの[Source Record List]フィールドをクリックし、リストから[GetEmployees.List]を選択します。続けて、プロパティの[Start Index]フィールドに「1」を入力します。

  4. SearchBalloonウィジェットに移動して、Inputウィジェットを選択します。Inputのプロパティの[Destination]フィールドをクリックし、リストから[New Screen Action]を選択します。OnChangeアクションが開きます。OnChangeアクションフローで以下の手順を実行します。

    • Refresh Dataノードをドラッグし、[Select Data Source]ウィンドウで「GetEmployees」を選択します。

    • Ajax Refreshをフローにドラッグし、ListRecords1を展開して移動します。ListRecords1を選択して、[OK]をクリックします。

  5. Preparationアクションに移動して、GetEmployees Aggregateをダブルクリックします。[Filters > Add Filter]をクリックして、[Filter Condition]フィールドに以下のテキストを入力します。 Sample_Employee.FirstName like "%" + SearchText + "%" or Sample_Employee.LastName like "%" + SearchText + "%" or SearchText = ""Done]をクリックします。

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

    データとウィジェットを更新するロジックフロー

  6. 画面に戻り、SearchBalloonウィジェットを選択します。

    • プレースホルダの「Put your results here」というテキストを削除し、Expressionウィジェットをリストにドラッグします。

    • Expressionウィジェットをダブルクリックし、「ListRecords1.List.Current.Sample_Employee.FirstName + " " + ListRecords1.List.Current.Sample_Employee.LastName」というExpressionの値を入力します。[Done]をクリックします。

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

    SearchBalloonのExpressionウィジェット

  7. アプリをパブリッシュして、検索フィールドに名前を入力してみます。

ブラウザでのSearchBalloonのデモ

入力パラメータ

入力名 説明 必須 デフォルト値
ExtendedClass このブロックにカスタムスタイルクラスを追加します。Text False なし
AdvancedFormat 入力パラメータによって提供されるオプションのほかに、追加オプションを使用できます。例: { arrow: false, showOnInit: true }。詳細については、https://atomiks.github.io/tippyjs/をご覧ください Text False なし

レイアウトおよびクラス

イベント

イベント名 説明 必須
OnHide バルーンが非表示になるとトリガーされるイベント。 False
OnShow バルーンが表示されるとトリガーされるイベント。 False

高度な設定

以下にウィジェットの高度なユースケースをいくつか示します。

最初に結果を表示する

  1. 検索バルーンをプレビューにドラッグします。
  2. AdvancedFormatパラメータに行「 { showOnInit: true }」を追加します。

結果のアニメーションを変更する

  1. 検索バルーンをプレビューにドラッグします。
  2. AdvancedFormatパラメータに行「 { showOnInit: true }」を追加します。

) )

  • Was this article helpful?