Quick Brick TV Apps - Using Screen Picker / Side Menu

Using the Screen Picker

Important: The Screen Picker is only designed to work with a grid or horizontal as a component inside each screen picker page. If you use a Hero Carousel component you wil not be able to navigate out of the carousel back to the screen picker

The Screen Picker creates a left side sub-category menu for drilling down through content hierarchies such as movie categories.

In UI builder add the following full screen component to a create screen. NOTE: When a screen picker is used in a screen no other component type can be added to that screen. The content related to the screen picker entries comes from the feed.

Configure your screen picker as follows

• Attach to a data source type and feed
  • Manual feeds of type = screen can be used to create screen picker titles and linked screens
  • Create those screens individually in UI Builder, attach them to a data type and source, add components and cell styles then build your manual feed to attach to the screen picker
  • 

Title color and underline

If a cell style is not attached to a screen picker component then the styling will be taken by default from the app's SDK style keys at build time. Note these are shared with other font colors.

More flexibility is available if you add a specific cell style to the screen picker.

Ensure the following power cell plugin is added to your app (rebuild if necessary)

Configure the power cell design as required for the screen component. For the screen picker only these parameters in the above power cell plugin will have any effect

• Default text color
  • The color of the text when the item is not in focus
• Focus text color
  • The color of the text and the underline when the item is in focus

Add the cell type to the screen picker for to to take control over the screen picker styling

Use a feed to construct a side menu (example)

The feed itself can be used to build the screen picker. The following is just an example where a feed will populate a screen picker with the titke "Germany" and place 2 cells inside a grid - one with a video item and one which is a link to launch a second grid

Create a Screen

1. 1. Select +Add Screen and add a General Content screen
   2. Add the screen picker component to this screen

2. Add a target screen to link to from the above Screen Picker component.
   1. Create a Grid Screen and name it ‘Screen Picker Grid’ 
   2. Link the screen picker component created in step 1 above to this screen with the target field as in the screenshot below

Note: This grid screen does not need a feed of its own.

3. Create a 3rd screen and add a screen picker component. Link it back to the grid screen created in step 2 above with the target field. 

Note: Do Not add a feed to this screen.

4. Add a feed to the screen picker created in step 1 above. Configure the screen picker correctly to build a screen picker menu and correctly display the content to the screen 

Screen Picker JSON example for above 3 screen structure

The below JSON creates a 2 level screen picker with a video and category item displayed at each level.

{

  "xmlns:applicaster": "http://schemas.applicaster.com/atom/1",

  "xmlns": "http://www.w3.org/2005/Atom",

  "xml:lang": "en-us",

  "title": "title",

  "subtitle": "subtitle",

  "link": {

    "rel": "self",

    "type": "atom"

  },

  "updated": "2019-06-10T09:10:32.355Z",

  "id": "29f330c3-2f74-4c90-aab0-b8439724a263",

  "entry": [

    {

      "type": {

        "value": "feed"

      },

      "id": "13f72507-dca9-400c-b535-afd84300ca30",

      "title": "Germany",

      "summary": "description",

      "published": "2019-06-10T09:10:32.355Z",

      "media_group": [

        {

          "type": "thumbnail",

          "media_item": [

            {

              "scale": "large",

              "type": "thumbnail",

              "key": "thumbnail-large"

            },

            {

              "scale": "small",

              "type": "thumbnail",

              "key": "thumbnail-small"

            }

          ]

        }

      ],

      "content": {

        "src": "general-provider://fetchData?type=FEED_JSON&url=aHR0cDovL3N0b3JhZ2UuZ29vZ2xlYXBpcy5jb20vZmVlZC1nZW5lcmF0b3ItMTk2MWEuYXBwc3BvdC5jb20vMTNmNzI1MDctZGNhOS00MDBjLWI1MzUtYWZkODQzMDBjYTMwLWF0b20uanNvbg%3D%3D"

      },

      "extensions": {

        "is_downloadable": true

      }

    }

  ]

}