Skip to main content

 

パターン

 

 

OutSystems

SearchBalloon

バルーンに結果を表示しながらユーザーがコンテンツを検索することができます。

SearchBalloonは、ユーザーが検索フィールドでクエリを作成または編集するときに推奨クエリを示すなどして、ユーザーをガイドするために使用します。

使用方法

Inputウィジェットをプレースホルダにドラッグします。このウィジェットを検索入力として使用し、[Answer]プレースホルダには結果を表示するコンテナを含めます。

  1. 検索バルーンをプレビューにドラッグします。

  2. 検索入力の変数を設定します。

  3. 検索結果を保持するために使用するレコードを設定します。リストが長い場合、Line Countを小さい数字(5など)に設定します。

  4. 名前を設定します(例: 「Filtered Users」)。

  5. 検索入力にonChangeアクションを設定します。

  6. Refresh Dataをドラッグし、使用するレコードをデータソースに設定します。

  7. Ajax Refreshをドラッグし、ウィジェットに手順3でレコードに設定した名前を付けます。

  8. Aggregateに移動してダブルクリックします。フィルタに移動して以下のフィルタを追加します。 User.Name like "%" + SearchValue + "%" or User.Username like "%" + SearchValue + "%" or SearchValue = ""

  9. パブリッシュします。

入力パラメータ

入力名 説明 必須 デフォルト値
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?