In the previous article, we discussed what are the different types of components that can be added to a screen, and the basic functionalities of each.
Now that you know what each type of component is used for, you can go ahead and start adding the desired Components to your screen, and configure their respective data sources (Feeds).
Adding Components to your Screen
1) Select your relevant UI Builder App Layout:
For more information on how to Select a Layout, click HERE
2) Go inside ‘Layouts screen’, and click on the Screen you have created:
3) Click on ‘Add Component’.
4) Choose the component you wish to add to your screen:
Once you have chosen the component, it will be added to your screen. You will be able to see it on the left-hand side of your screen.
5) By clicking on the component, you will see on the right-hand side of the screen all of the configurational options of the component.
You can add as many components as needed.
Connecting the components to your data Feeds
The next step will be connecting the component to a feed you would like to show on your app.
Click on the component you have created. You will now be able to populate the configurational fields on the right-hand side pane:
Click on the drop down arrow and choose the type of data:
You will only see the types of data you have created in the Feed section.
For more information on How to create a Feed, click HERE .
Click on the drop down arrow to choose the source (being the Feed you have previously created)
The source is the name you gave for the Fed you have created.
Manual Feed -
You have an option to 'Create New Feed', . This is a Manual Feed, which can promote other types of content such as Screens, etc...
For more information on creating Manual Feeds, click HERE
Target Screen (Connected Screen)
The target screen enables you to connect your component to another Connected Screen, in which the multi-leveled content.
Once you enable the Connected option, you need to choose the Target screen, by clicking on the drop down arrow.
For more information on creating Connected Screens click HERE
Item Limit -
The item limit option allows you to limit the number of items you would like to be displayed per specific component.
For example, a "List" component can be fed by a Feed data source that contains 10 items, but you can limit the component to show only the first 3 items that appear in this data source.
This simply shows the Family Style you have chosen when you created the screen.
Note that the Family Style cannot be chosen on an individual component level, but rather on a per-screen basis.
Cell Styles -
Choose which cell style variation, you would like to use. When you hover on top of each cell style variation, you will see a preview of what this cell style looks like (note this is the preview of the cell style template, and not of your actual content).
You can choose a whether to show a header for your component, and what type.
Header Target -
Should you wish your header to be Clickable (Tappable) and redirect to a specific Screen in your app, you cab choose the the target screen which will open upon clicking on the header:
For more information on Tappable Headers, click HERE.
Enabling this option, enables to display an Inline Banner in different locations within the screen (*Note: this is different than the Bottom Banner on a Screen Level).
Once you have enabled the "Insert Banner Ads" button, you will need to fill in the fields :
Notice that for each of these fields, you can click on the ‘info button’, to get more details about the feature:
For more information on configuring Inline Banners click HERE
We now know how to configure Screens and Populate them with Components.
In the next section, we will learn how to set the Navigation of the app, both from the Navigation Bar (Nav Bar), and from the Side Menu.
For more information on on the Navigation Bar configuration, click HERE.