Skip to main content

Search

The Search is an essential way for users to discover and browse content. Our search feature includes the search bar, customizable suggestions below the bar and a customizable results screen. In order to use this feature an appropriate data source search feed is required.

Prerequisites

  • A search feed on the data source. For more information see here
  • A General content screen to act as the fallback

iOS and Android

In the plugin configuration, add the QB search screen plugin and build.

In the Feeds section, create a search feed e.g. https://pipes2-server-example.herokuapp.com/media?byType=episode&q={{q}}

In order to implement the Search screen, you need to create two screens in your layout:

  • The Search screen that contains the search field and the results.
  • A General Content screen which will act as a fallback and which will display content by default. This screen displays before there are any results.

Search screen

In the screen, add components such as Horizontal List, Grid etc. Search results will appear in these components based on the search feed. Attach to them cells style.

Attach the search feed you’ve created. Once you select the Search feed, it will detect it automatically and offer you to select Search instead of Entry. Then add the q parameter. See below

On the Fallback field, choose the general content screen you’ve created for the Fallback screen.

Modify the Search component design as needed.

Modify the hint text and design for the search field.

In the search screen right column configuration fields under "iOS search" & "Android search"

You can modify the below:

  • Search Icon (iOS only)
  • Clear Icon (iOS & Android Mobile)
  • Hint text (iOS & Android Mobile)
  • Cancel button text (iOS only)
note

Icons should have the 42x42 Pixel dimension

Fallback screen

Add component and cell style for the default content that you want to present.

Empty State Alert

To inform the user of empty search results, you can add Empty Group Component to the screen.

Android TV, Apple TV, LG TV, samsung TV, Fire TV

Modify the hint text under the Localization section

In the Feeds section, create a search feed e.g. https://pipes2-server-example.herokuapp.com/media?byType=episode&q={{q}}

In order to implement the Search screen, you need to create two screens in your layout:

  • The Search screen that contains the search field and the results.
  • A General Content screen which will act as a fallback and which will display content by default. This screen displays before there are any results

Search screen

In the screen, add components such as Horizontal List, Grid etc. Search results will appear in these components based on the search feed. Attach to them cells style.

Attach the search feed you’ve created. Once you select the Search feed, it will detect it automatically and offer you to select Search instead of Entry. Then add the “q” parameter. See below

on the Fallback field, choose the general content screen you’ve created for the Fallback screen.

Modify the Search design as needed. You can modify the asset, the search fields, etc.

Fallback screen

Add component and cell style for the default content that you want to present.

Empty State Alert

To inform the user of empty search results, you can add Empty Group Component to the screen.

Roku

Coming soon