Adding a Search capability in a Quick Brick Mobile app

Introduction

This search feature is for QB iOS and Android mobile apps using UI (App) Builder

How does it work? - For plugin versions 1.x.x with Zapp Pipes v1

Plugin versions 1.x.x only support Zapp Pipes v1 and search is configured as follows. (see further down for plugin versions 2.x.x with Zapp Pipes v2)

1 or more search screens can be created. A search screen consists of a search navigation bar at the top and a content area below. A search screen targets 2 other screens to derive its content.

• The fallback screen. This screen will be used as the source for content to display in the content area of the search screen when there is no input search query. This fallback screen MUST have a defined data source to display content. For instance, it could be the app’s Home Screen or any other screen with a content feed.

• Target screen. This screen will display the results of a search query in the content area of the search screen. This screen does NOT need a specified data source - data will be inherited from the search screen.

You can create a single search screen or a number of search screens that point to different DSPs.

App Set up

Plugin

Add the plugin “qb_search_screen” to the app

Screens

Add 3 screens to your app. In the below example these are QB Search Screen 1, Search Target and Search Fallback

 

Configure the QB Search Screen1

In UI Builder the configurable components for this search screen can be set as described below:

DSP

SearchScreen supports only atom feeds however it is not required that the type is specifically named. The search endpoint needs to accept &q=search_query. This will be added by the plugin to your data source specified in the Search Screen. For example if your dsp is xyz://fetchData?type=search and the user has put in the search query ‘box’ the plugin will ask for data xyz://fetchData?type=search&q=box.

The result delivered by this endpoint should fit the format of the search result target screen. You might want to return search results split into VOD and LIVE PROGRAM components or different SPORT or MOVIE CATEGORIES. For instance if you add a hero component and a list component in your search results screen the response json should be in the following format to populate both components. In this example it is returning 2 feeds, one for each of the hero and lists called Search 1 and Serach 2 respectively. (The example src feeds just happen to be the same in the code example below, they can be different)

Connect Target and fallback screens

Target should be the screen you add to present the search results

Fallback will be the screen used as a content source for when no search results are present

Set search screen navigation bar styles

Configure the search screen navigation bar and search field. The fields in UI Builder are grouped by iOS and Android. See the linked sketch files at the end of this document. 

iOS Navigation bar

• Nav bar background colour

• Status bar background colour

Android navigation bar

• Nav bar background colour

• Status bar background colour

• Back icon

iOS Search

• Active search font colour

• Cancel Font colour

• Background colour

• Search icon

• Clear icon

• Hint icon

Android Search

• Active search font colour

• Hint font colour

• Hint text

• Clear icon

2 keys are set at CMS level

• The iOS default search text label font = Zapp CMS font SearchTextLabel

• The iOS Active search text label font = Zapp CMS font SearchTextLabel

Search Result screen

This screen will present your search results

Add components in the usual way such as a cell style list or grid. These components do NOT need a data source to be set in UI Builder. The content will come from the search result DSP.

Navigation Bar set up

In UI Builder go to Navigation and select the Quick Brick Navigation Bar

Add a screen type named as per your Search Screen (not the search result screen). In this example this is ‘QB Search Screen 1’

Set the target of this screen to be your search screen and add the search icon. It does not need a source attaching to it.

You configuration of search is complete.

How does it work? - For plugin versions 2.x.x with Zapp Pipes v2

From plugin versions 2.x.x Zapp Pipes v2 is supported. The configuration for search is slightly different. Follow the instructions above for:

• Make sure the search plugin is added to your app before build time
• Add a screen of type = search to your layout as described above
• Add a fallback screen of type = general content, to connect to from the search screen as described above

However,

• It is NOT required to create a separate search result screen. With plugin v2.x.x and Zapp Pipes v2 , the components to present search results are added directly to the search screen itself (just like a general content screen).
• In your components (or at the group component level if you are using groups in the search screen) set the data source to be your search feed and set the query key = search and the parameter as defined in the search feed, e.g. for a search feed https://pipes2-server-example.herokuapp.com/media?byType=episode&q={{q}} then:

• Different components can then be configured by extending the q parameter above eg. q&by... so you could present search results for "Muppets" by movies, TV shows, etc. in separate components.