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
Comments
0 comments
Please sign in to leave a comment.