This article explains the basics of how to add a new Screen to your app, using the UI Builder.
Creating the Screen:
i- Enter the UI builder for your app.
ii- Click on the "Layouts" section on the left-hand menu:
You will see a list opening with the screens available in your app.
* When you create a new app, it opens creates the “Home” screen as a default.
iii- To create a new screen click on “Add Screen” bottom, located at the bottom of the screen:
iv- Choose the type of the screen you wish to add (for example a "General Content" screen)
The types of main screens you have are:
1. General Content - This screen is suitable for any type screen that contains Content, suchas Categories, Show screen, All shows... or any other screen where you need to populate with content feed. As such, the "General Content" screen type is the Most common, and widely used.
2. Settings Twitter Login - This screen can be added as part of your app Settings, which logs you into the twitter account for the related app.
3. Settings Facebook Login - This screen can be added, also, as a part of your app settings, which logs you into the facebook account for the related app.
4. Contact Us - This screen can be added, as a part of your app settings, which leads to the contact details screen.
5. About Us - This screen can be added, as a part of your app settings, which leads you to the "About Us" information screen.
6. Favorites - This screen allows you to add a list of favorite Content Entries (videos, articles…) from your app (by clicking in the app level on the ‘favorite’ button).
7. Audio Player React Native -
This Requires the relevant Plugin to be installed on the Version level, in order to enjoy the Audio Player.
Full Screen Plugins:
- Note: It is possible to add additional Screens to your app, by connecting your app versions with the desired "Full Screen Plugins".
For more information on Full Screen Plugins and how to add them to your app, click HERE.
v- Once you choose the screen, click on the “add screen” button at the bottom:
vi- The following screen will appear in your screen list, on the left:
In order to rename the screen, click on it. You will see that the Screen screen has opened.
On the right, click on the 'pencil icon', and then insert the new Name for the screen:
Insert the name you want --> click on "Enter" (do not forget this!) --> and then click on the "Save" button, on the upper-right corner of the page
***it’s a must in every action you do in the “App builder”, to click on “Save”.
vii- Now that the screen has been created, you will see it was also allocated a specific identifier.
This identifier can be used in case you would like to send a Push notification or open the app on this specific screen, using a URL Scheme.
You can add as many screens you need.
'General Content' Screen Parameters:
On the right panel of the General Content Screen, and after you change the name for your screen, you will find few more fields with configurable parameters.
i- Home -
Any screen can become a ‘Home’ screen, by enabling it in the Home toggle switch (of course, one screen at a time).
The screen which you toggle as Home screen, shall be the screen with which the app opens.
ii- Styles -
Under ‘styles’, you need to choose the Family of Cell Style Components which you want to work with.
by clicking on the drop down arrow, you will see a list of style families.
Choose whichever family of Cell Styles you require for your app.
Points to pay attention to:
a) In order to use a Family in the app, you first need to have the Plugin corresponding to this specific Family, added on a Version level.
b) Each family Style has it own unique design for different Components.
c) You can choose one family pair screen. its not possible to mix different Families of Cell Style Components within one screen.
iii- Rules --> Refresh -
You can choose if you want to have the Screen "Refresh" feature, activated or not, in your app.
if you do wish to have it activated, choose the type:
The types available are:
- Auto Refresh - means the app will refresh itself automatically.
- Pull to Refresh - means the app will be refresh once you pull your screen to the top.
- Auto & Pull to Refresh - means you can have both 1 & 2 refresh type.
Once the screen has been created, you can then start populating it with Components, according to the Family you selected for this Particular screen.
For more information on the Screen Refresh feature, click HERE.
iv- Screen Storyboard
The Screen Storyboard (or Screen Hooks), is an infrastructure that enables development of pre and post loading hooks for UIBuilder's screens.
The flexible pre-screen logic triggers or blocks certain events as a new screen launches.
For more information on the Screen Storyboard, click HERE.
The advertising section, allows to configure a Google DFP Bottom Banner and/or a Google DFP Interstitial, on a Per-Screen Level (meaning, Not an an App level, and Not on a Component level).
For more information on the Screen Advertising, click HERE.
vi- Connected Screens
Sometimes the screen we are opening is not a "Flat" screen, and there is actually another layer of content and UI beneath it.
For example If I click on a Component and it opens a list of Videos, this is a Flat Screen.
But if I click on the Component and it opens a List of Shows --> and upon clicking on each show we get respective list of Videos... than the original component is "Multi-Leveled".
Connecting a screen, allows you to use a Multi-Leveled data source (via Feed / Applicaster2 CMS / or Manual Feed) where the screens are connected to each other in a Dependent fashion.
For more information on Connected Screens, click HERE
Adding Components to a Screen
Now that you have completed setting up your Screens in the app, it's time to populate them with the desired Components and Data Feeds.
The following article will provide a general overview of the main types of components available to be added to your app screens.
For more information on the Predominant types of Components that can be added to a Screen, click HERE