In this article we will review 2 methods for configuring the Settings Screen of your UI Builder app.
Through the Settings screen, you are able to see the app version installed on your device and to contact or report a problem to the email address configured in the system.
In order to configure the Settings Screen go to the App Builder and open the Layout to which you want to add the Settings Screen.
1. The first step, would be to determine which options would be promoted inside of your Settings screen, and to create individual screens to represent each of these options:
i- Click on the "Add Screen" button at the bottom of the Screens section of the UI Builder:
ii- Select the relevant Settings Screen/s you would like to promote. You can choose between the following options:
- Settings Contact Us
- Settings About Us screen
It's recommended to promote both in the app.
*NOTE: It is also possible to promote via this method any other Screen Plugin you have developed / are using in your app.
The result shall look as a screen with an Empty configuration:
2. Now that you have created the individual screens that shall be promoted in your Settings Screen, it's time to create a new Settings "General Content" type screen.
This new Settings screen, will of type "General Content" shall serve as a de-facto Container that contains the different options (screens), you have created in the previous step.
i- In order to create the Settings screen, click on the "Add Screen" button at the bottom of the screen:
ii- Then select the "General Content" screen:
iii- Go to the new added screen and rename it to the desired name
iv- Select the Cell Style Family you would want to use in your app.
For example: Jordan
3) Now that you have created the Settings Screen, you can proceed to enter it and configure it's look-and-feel, and add the Setting Options you would like to promote:
i- Add a new component to that screen.
For example: List Component
ii- Click on the component you added, and select the relevant cell style you wish to promote:
4) After adding the component and selecting the cell style, it's time to add the Settings Screens you would wish to promote:
i- Go to the Data Source, and select "Create New Feed"
A popup dialogue screen shall open, where you insert the information of the promoted Setting Screens:
4) Now we will add the screens we created Step 1 , into the main screen we've created in Step 2 and just edited.
i- Give the manual feed a name that will represent the Settings Screen and then start adding the About Us screen and Contact Us screen
ii- Give a Label name e.g About Us
iii- Select type "Screen"
iii- Lastly, select the identifier which is the screen name of each specific screen we've created in Step 1.
* Don't forget to press on update feed at the bottom:
5) Now all you have to do is to promote the main Settings screen we made in Step 2 , to your Navigation pane (Bottom Tab Bar, Side Menu or Navigation bar).
i- In order to do so, click on the navigation pane and select where do you want to promote the settings screen e.g Side Menu:
ii- Click on the Side Menu and add to it a new screen item:
iii- Rename the screen so you could identify it in the future and set the target to screen we've created in step 1. If you want you can set also an icon for that screen.
iv- Dont forget to click on save layout.
1. In order to configure the native Settings Screen pulling the info from the CMS, all you have to do is to go to the navigation pane:
2. Select the Navigation pane you would like to add the Settings Screen to e.g Side Menu:
3. Click on add item:
4. Select Settings:
You can always add an icon if required:
Again, don't forget to save your changes: