The Search Plugin

note

The plugin supports Layouts v1 and Layouts v2 but the configuration is slightly different in each case. The info for both layout types is below.

note

To use the search plugin your DSP (a separate plugin for Layouts v1 or an endpoint for Layouts v2) must implement a search type as described below.

Introduction

This search feature is for Quick Brick iOS and Android mobile apps using Zapp Studio.

How does it work?

1 or more Search Screens can be created in an app. A search screen consists of a search navigation bar at the top and a content area below.

Layouts v1

With layouts v1 the search screen targets 2 other screens to derive its content.

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

  • Target screen: This is a separate screen and will display the results of a search query in its content area. This screen does NOT need a specified data source - data will be inherited from the Search Screen.

Layouts v2

  • In layouts v2 the Search Screen presents search result content in components that are placed directly within the Search Screen itself, just like in a general content screen. It does not need the separate Target Screen. The components in the Search Screen have their data source defined to present the required results.

  • It does still target a fallback screen in the same way as layouts v1: 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 components in it with defined data sources to display content. For instance, it could be the app’s Home Screen or any other screen with a content feed.

App Set up

Plugin

Add the plugin “qb_search_screen” to the app. For layouts v2 ensure this plugin is version 2.0.0 or greater.

Screens

Layouts v1

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

Layouts v2

Add 2 screens to your app: The Search Screen and the Fallback Screen. There is no need to add a Search Target screen. In the Search Screen you add components such as Horizontal List, Grid etc. in the same way as for a general content screen. Search results will appear in these components based on the feed attached to the respective component (see below).

Feeds and DSP

Layouts v1

In layouts v1 the Search Screen 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)

Layouts v2

Create a search feed e.g. https://pipes2-server-example.herokuapp.com/media?byType=episode&q={{q}}

If a component in the search screen has the data source configured as below it will return the search results for any query.

  • Source = Search Feed
  • Q Key = Search and q

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.

Connect Target and fallback screens

Target (for layouts v1 only) 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 ‘Quick Brick 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.