Studio as a visual development interface or platform offers different functionalities for any organization to design their own apps. The UI is very important and largely reflects the organization’s identity and brand experience. So to enable every organization to customize the look and feel of the apps, Studio provides the different Config Options. You have seen how to use the Styling properties to customize your fonts for your selected app. Now you also have the option for UI Config which enables you to customize the elements like the Status bar background color, font color for the Android devices and iPhone as well.
Once you login to Studio using your organizational authentication, open your App. On the App’s home page , in the top left corner of the screen you can see the Config Options. Click to view the different configurations. Select UI Config to view the UI customizations which appears under Properties.
Under UI Config, you would be taken to the Properties which provides the customization through App Display and Closer and UI Customization.
App Display and Closer
Here you can select if you want to display the app icon or not. You can also select if you want to show a close button in IOS and define the color of the close button. These settings are applicable to the Mobile Apps only. These properties can be toggled on and off to set them according to your application.
There are various changes that you can make to the user interface by changing the UI settings. Under UI customization you get the option to set the Status Bar and the text color and the background color for each. These are applicable to the Mobile Apps only.
Status Bar: Here you turn ON or OFF the toggle button to HIDE or SHOW the status bar. When you select HIDE option the subsequent properties for text color and background color will be hidden.
Status Bar Text Color: This property is used to set the Text color of the Status Bar of your mobile device.
Status Bar Background color: This property sets the background color of the status bar of your mobile device. Now there are options to set the color as solid, gradient, or Transparent. Depending upon your selection you would get further options. For example for Gradient, you would have the color from left to right, and the bottom bar would have a solid color.
iPhone X Bottom Bar Color: This allows you to set the Bottom Bar Color for iPhone. Here also you can have solid, gradient, and transparent colors.
Android Bottom Bar Color: This allows you to set the Bottom Bar Color for Android mobile phones. Here also you can have solid, gradient, and transparent colors.
Note : For the time being the status bar header and footer color will show up only on first-time app launch. However, when the app is loaded the header color overrides it. This feature to change the Status bar color is under development and would be changed eventually. Hence you would be able to customize the Status bar properties even when the App is loaded.
This allows you to choose from the list of all the supported platforms where your app can be used. You can toggle on or off to select supported platforms from Web Browser, Android mobile, Android table, Windows phone, iPad and so on.
If you turn off support for any of the platform listed out, for example the Web Browser, then you would not be able to use the App in the Web Browser even when it is published and you are using the Public link of your App.
You can manage the screen orientations for your app on different devices like the landscape or portrait on mobile devices, portrait or landscape on Tablets and so on.You simply need to toggle on or off. If you have turned off the Orientation for any of the options, the user would not be able to see the app in the specific orientation. For example, if the Phone Landscape is turned off then the user would not be able to rotate the app to Landscape mode. Thus if you do not want any of your app to be viewed in the portrait or landscape orientation because it affects the overall look and feel, then you can turn it off and the user would not be override it.
Here you can set the Screen resolution supported by the app. This would typically be dependent on the kind of app and the minimum resolution that you feel best suits your app’s functionality. You can set the minimum and maximum width of the screen and add a custom error message to be displayed when screen resolution is not supported. As your app would be used on a variety of devices with varying screen sizes and pixel densities it is necessary to have a minimum and maximum resolution set to ensure that the basic scaling and resizing adapts optimally to the user interface of different screens, and does so proportionally for each type of screen.
You can set the Auto-sync as enabled to allow the MicroApp to be downloaded automatically.
When the Auto Sync is turned off you would be prompted to download the updated app. However, this feature has now been deprecated. The app gets automatically downloaded on any new update to the published version when this feature is enabled.
This provides you with the option to add the general details like the Support email, support contact number, and App Admin Panel URL.
These Properties are used to customize your App’s User Interface and ensure the best result on any kind of device used by the users.