Roku - Grid and Horizontal List

Introduction

A Grid or Horizontal list are components that can be added to a General Content Screen, attached to a feed and display a Simple Cell or Power Cell

Setup

Ensure the components plugins are added to your app pre-build.

Add a general content screen to your app - see instructions here: Roku - General Content screen

Add the required Grid and Horizontal List components to your screen

Configure Horizontal List Component

In the UI Builder you can configure your Horizontal List as follows:

Data: Connect the component to a data type and feed that has been created in the feeds section of your app

Target Screen: Use this for setting up connected screens. When a user selects an item in the component you are creating here, the target screen as configured in this section will be launched. Target screens can only be selected here after they have been created.

Data: this section controls how data is loaded in the screen

• Data Depth
• This relates to when we use feed of feeds. The actual content (source feed, metadata) for a component may be 2, 3 or more feeds deep in the feed structure. This parameter indicates the feed depth where the real data for the component can be found
• Reload Strategy. Use case examples
• If content requires to be logged in to see it vs free content then once the user is authorised the component needs to be reloaded
• If content is in a “continue watching” row and then the user has finished watching it then it no longer needs to be visible in that row and the component needs to be reloaded

The content reload strategy for that component can be controlled with a key

• Reload Key
• Auth = authorisation e.g. user has now logged in so make content visible in component
• VOD position = user has partially or completed watching content so update which items are visible in a component
• Override target screen
• This is a work around field to overcome the limitation in Zapp as to what screens can be set as a target, e.g. target the same screen you are in
•  Override target screen for item type
• This is a work around field to overcome the standard function of only targeting a single screen. A different target screen can be set depending in the content type.
• Auto play first content
  • If the first item in the first component on a screen is a video will autoplay

Layout: Configure the position of the component on the screen

• Vertical padding: Distance of the first component from the top of the screen
• Clipping offsets: Can be used to hide components as they scrolling before they go behind a top or side menu
• Floating focus offset: not yet enabled

Cell Styles

A component must be connect to either a specific a Simple Cell design or Power Cell design.

Configure Grid Component

A grid component has the same configuration parameters as the horizontal list. In addition the following can be controlled

• The X Y origin of the top left hand corner of the grid
• The number of rows and columns to display in the grid