In the previous article, we discussed how to create a screen in the App Builder.
Now that you have completed setting up your Screens in the app, it's time to structure them with the desired Components and populate them with data Feeds.
This article provides a general overview of the main types of components available to be added to your app screens.
The App Builder contains several Families of cell styles (as Colorado, Chagres, Rhine...).
Each of the families includes different components as Grid, List, Horizontal list, Hero, Tab bar, Screen picker, Webview, Banner, Ticker & Group, etc...
*Note: Webview & Screen picker act de-facto as a screen, which means you cannot add another components within the same screen that contains one of these two.
Each Family has it's own variety of components, and each component, has it's own variety of Cell Styles to choose from. These cell styles differ in UI and can be utilised for different needs and scenarios.
For Example - Hero (Carousel) Cell Style:
When you stand on hero cell style, you can see the preview for the cell style (look image above).
Main Components in the Cell Style Families
Below, is a short introduction of the main types of the components :
This component is usually used at the top of a screen. It allows you to swipe sideways between items:
Horizontal List (Rails ) -
The Rails component allows you to scroll between your items horizontally:
The Grid component displays the items in a sort of grid/net-looking style, with a more square look and feel:
The List component displays the items one beneath the other :
Screen picker -
As mentioned above, the Screen Picker component occupied the entirety of the screen (which is why you cannot add any other components within this screen). It will display tabs at the top of the screen, that are populated with different screens.
In the example below, you can see the tabs "Home", "Live TV", "Watch" and "Listen".
You can swipe between them. Clicking on each of the tabs, will open a designated Screen from the app.
The Banner component allows you to add Inline banners content according to location Within the screen:
i- At the Top of the screen
ii- Between components
iii- At the the bottom of the screen
It also allows to choose the type of Banner:
i- Bottom Banner
ii- Smart Banner
iii- Box Banner
For more information on Inline Banners, click HERE.
The Webview component is one of those that display across the whole screen (which is why you cannot add any other components within this screen). This component allows you to use any URL from the web, and it will display it as is, in a Native Webview (ie: the End-user will still be located within the app and the Navigation Bar will still appear)
Tab Bar -
The Tab Bar component is used as a sub-menu to select items or categories.
The number of tabs will be defined according to the hierarchy of connected collections in the Applicaster2 CMS / or according to the hierarchy in the Content Feeds (ie: One feed leading to another feed, and so on...)
Unlike the Screen Picker, the Tab Bar does Not occupy the entire screen, as it promotes Components, and not Screens.
This allows, for example, to display an image at the top of the screen, and then tabs underneath.
You can choose which type of component you want the tab items to display.
In this example, a "List" component was chosen for the items display.
*Note: For the Tab Bar to work, the UI and components you selected much match perfectly the hierarchy of your content (either from the CMS or from data Feeds).
For more information on configuring the Tab Bar, click HERE.
Html Ticker -
The Html Ticker component is usually placed at the top of the screen beneath the Navigation bar, for the promotion of news flashes (but can be essentially be added in any part of your screen):
The Group component is a component which serves as a container that can group together multiple components with a single data source.
*Mind that you must fill in the limit items to allow the group to move on to the next component.
For more information on configuring the Group Components, click HERE.
How to populate your screen with Components and Feeds
Now you have knowledge of the different types of components that can be added to a screen, and the basic functionalities of each.
It's time to move ahead and actually populate your screen with the desired components, and configure their respective data sources (Feeds).
For more information on How to populate your Screen with Components and Feeds, click HERE