Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

Template:OutSystems/OSLanguageSwitcher
Language:

 

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

 

 

 
OutSystems

Search Balloon

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

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

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

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

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

![](images/searchballoon-1-ss.png)

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

![](images/searchballoon-2-ss.png?width=800)

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

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

![](images/searchballoon-3-ss.png)

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

![](images/searchballoon-4-ss.png)

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

![](images/searchballoon-5-ss.png)

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

![](images/searchballoon-6-ss.png)

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

![](images/searchballoon-8-ss.png)

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

![](images/searchballoon-9-ss.png)

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

![](images/searchballoon-10-ss.png)

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

![](images/searchballoon-11-ss.png?width=800)

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

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

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

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

![](images/searchballoon-12-ss.png)

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

![](images/searchballoon-13-ss.png)

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

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

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

![](images/searchballoon-14-ss.png)

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

プロパティ

プロパティ 説明
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?