Tab and Miscellaneous Settings

Introduction - Miscellaneous Settings:

There are some elements for mobile application which are common but important for better user experience or look and feel. Some settings like Loading view or Alert view has standard layout and configuration supported by iOS or Android platform, but it is nice to have its customized design as per application design theme. From Miscellaneous settings, you can configure design of those elements.
Apart from this, you can also configure Side Panel screens, Status Bar show/hide and other settings.

Loading View

Loading view is an indicator to notify user that some background activity is going on. It is mainly used when any data is being downloaded or activity is being performed. It is displayed in the centre of the screen.

  1. Activity Color : It changes the color of the activity indicator to be displayed in the middle of the loading view.
  2. Background Color : It changes the background color of the loading view popup.
  3. Loading Text : It is a text which is displayed below the indicator on loading view popup.
  4. Loading Type : There are 2 types of loading view popup.
    • Default - It is standard loading view.
    • Animated - It contains circular rotating indicator for loading view.
    • Loading Text Color - It changes the color of Loading text.

Do not forget to click on “Save” button to save the changes made.

Splash Screen

Splash screen is an introductory screen all the users can see when they first open the app. It is mainly used for Branding. This section is for configuring splash screen for your app.

  1. Splash Screen Type - This is for setting type of source for splash screen.
    • Screen -Select this option if you want to configure any screen to be displayed as splash screen. You need to provide name of the screen in "Splash Screen Source" property. While designing a splash screen, make sure that you add only static content such as image, text and activity indicator. No interactive/dynamic controls should be added. If you select this option then you must define the action ‘Redirect’ on the ‘Time Completed’ event of MAIN_VIEW control of the screen.
  2. Splash Screen Source -When splash screen type is set as Screen, you need to set the name of screen from available list of screens as Splash screen source.
  3. Splash Screen Duration - Splash screen will stay active for this number of seconds and then it will redirect to the next screen as per the configuration made. The default duration is 5 seconds.

Do not forget to click on “Save” button to save the changes made.

SIDE PANEL

Side panel usually contains a menu or quick links to navigate to different screens of the application. By default Side panel remains in hidden state on the screen and tapping on button or any other triggering control, it opens from right or left side based on your configuration. Generally a button with Image or an image is used as triggering control to open side panel. When side panel is opened, it slides the current screen left or right and takes the space on screen. You can configure below parameters for side panel.

  1. Left Panel Screen - Left panel screen is the one which you want to display on left side of the main screen as side panel. For that you need to configure any screen which you can select from drop down.
  2. Center Panel Screen -Center panel screen is the main screen that appears to the user. You can select a screen from the list of available screens you have configured in your app.
  3. Right Panel Screen - Right panel screen is the one which you want to display on Right side of the main screen as side panel. For that you need to configure any screen and which you can select from drop down.
  4. Left Panel Animation Type - While opening the left panel, you can set different animation effect. Below are available options :
    • Swingingdoor - Left panel will swing like a door.
    • Parallax - Left panel will open by pushing main screen. This is the default animation type.
    • Slide - Left panel will appear in sliding mode.
    • Slide scale - It opens the left panel in slide with scaling animation. It means while opening or closing left panel screen, it would grow or shrink to the width with sliding animation.
  5. Right Panel Max Width -This settings defines that how much width should be right panel screen when it is opened as side panel. Generally it is 85% of the screen width.
  6. Right Panel Animation Type - This is similar for as Left Panel animation type. Having separate parameters for left and right side panel gives you more flexibility if you want to set different animation type for left or right side panel.
  7. Left Panel Max Width - This is similar as Right panel max width parameter.
  8. Open Side Panel Gesture Mode - If you want to open side panel on swipe gesture of center screen then you need to set this parameter value. Generally user taps on the triggering control to open side panel but for better user experience, you can allow swipe gesture on center screen to open side panel.
    • None - It means you have disabled the side panel opening with gesture and user must tap on triggering control to open side panel. (For this you must configure “Open side panel” property properly for triggering control.)
    • Panning Center View - It will allow user to open side panel by swiping anywhere on center panel screen.
    • Panning On Navigation Bar - It will allow user to open side panel by swiping only on Navigation bar of center panel screen.
  9. Close Side Panel Gesture Mode - If you want to close side panel on swipe or tap gesture of center panel screen then you need to set this parameter.
    • None - It means you have disabled the closing of side panel with gesture.
    • Panning Center View - It will allow users to close side panel by swiping anywhere on center panel screen.
    • Panning On Navigation Bar - It will allow user to close side panel by swiping only on Navigation bar of center panel screen.
    • Tap Center View - It will allow user to close side panel by tapping anywhere on center panel screen.
    • Tap Navigation Bar - It will allow user to close side panel by tapping only on Navigation bar of center panel screen.
    • Panning Drawer View - It will allow user to close side panel by pan or swiping on opened left or right panel screen.
    • All - It will enable all above gestures to close side panel.
  10. Show Shadow -When side panel is open, it shows shadow on the border to give a 3D effect. Uncheck the box, to disable the shadow effect. Default is checked.

Do not forget to click on “Save” button to save the changes made.

PULL TO REFRESH

This is for configuring an animating view that appears when a table view or grid view control is pulled down to refresh (reload the content). This view gets animated at the top, until the refresh has completed. When the refresh is processed, the table view or grid view bounces back. User needs to pull down to the threshold to confirm refresh and release it for initiating refresh.

  1. Release to Refresh Text - When user pulls down the table view or grid view control, pull to refresh control appears and until user releases it, refresh would not start. To instruct the user to release the control, this text is displayed on pull down refresh control. Default text is "Release to refresh".
  2. Pull Down to Refresh Text - To confirm the refresh process, user has to pull the control down. To instruct the user to pull down the control, a text is displayed on pull down refresh control. Default text is "Pull down to refresh..".
  3. Loading Text - Loading text is to indicate user that refresh process is going on. The default text is "Loading...".
  4. Background Color - Set the background color for pull down refresh control.
  5. Background Image - Set the background image for pull down refresh control. You can select the image from Asset manager.
  6. Pull Refresh Image - There would be an image on pull down refresh control which animates reflecting user action. If user pulls down, the image rotates downwards and when released the image animates back to default position. You can set this image from Asset manager.
  7. Text Color - Set the color of the text used in this control.
  8. Is Native - Enable this option if you want to use native pull down refresh control. If enabled, above settings will not be applicable.

Do not forget to click on “Save” button to save the changes made.

ALERT VIEW

Alert takes the focus away from the current window, and forces the user to read the message. It prevents the user from accessing rest of the page until the alert view is closed. Alert view is generally displayed when where is some validation error of input parameters. This is used when you want to pass on important information or urgent notification to the user.

  1. Validation Alert Title - WAlert title is the text appeared on title bar of the alert view. Alert title should be a short text. Default alert title would be your app name.
  2. Validation Alert Button Title -For validation alert, there will be a button. On tapping, the alert view will be dismissed from screen. The title for validation alert on the button can be set here. Default title would be "OK".

Do not forget to click on “Save” button to save the changes made.

DEFAULT PAGE

Default page is the first screen of your App. It appears after splash screen (If splash screen is configured) or as first screen when app is launched. You can select from the list of screens you have configured in your app for default screen. You can also select tab bar or side panel screen if you have configured the same anywhere.

Do not forget to click on “Save” button to save the changes made.

STATUS BAR

Status bar is a view that appears on top of every screen. It displays tiny icons that provide variety of information about the current state of device such as mobile tower signal, level of battery charge, Internet connectivity, etc. You can hide or set its appearance using this configuration.

  1. Status Bar Style - This is for setting the style of status bar. The default style is “Default”.
    • Default -The default style as per phone setting would render for status bar. This style can be used if your application screens have light background.
    • Light Content - Setting this style makes status bar transparent in color with white text. This style can be used if your application screens have dark background.
  2. Hide Status Bar -Enabling this will hide the status for the entire app. By default, it would not be selected. Check only if you want to hide the Status Bar.

Do not forget to click on “Save” button to save the changes made.

MAP

If you have used Map in the application then on iOS app uses Apple map by default.

  1. Enable Google Map - If you want to use Google map then enable this setting.
  2. Google Map API Key -In order to use Google maps in your application, you need to set Google Map API key in this parameter for this application. To generate an API key in Google developer console.
  3. Refer the following steps for API key generation :
    • Open Google developer console @ https://console.developers.google.com/
    • Create a project with your application name and agree to Google terms of service.
    • Select your recently created project from the list of projects. Click APIs & auth section and select APIs from the list. Under Google Maps APIs, select Google Maps Android API for Android or Google Maps SDK for iOS. Click on Enable API. Enable any other Google services you want to use in your application same as you did for Google Maps APIs.
    • Now come back and select Credentials user APIs & auth section of same project. Click on Create new Key, a dialog will be opened - select Android key/iOS key option.
    • If you have selected Android key, enter your application certificate fingerprint and package name in the format shown in the dialog or if you have selected iOS key, enter your application bundle identifier and click create.
    • Now copy API key from the result shown on the page and paste in Google Map API Key under Map settings on Configure.IT interface.

Do not forget to click on “Save” button to save the changes made.

Image Cache

In order to shorten data access time and reduce latency, Configure.IT maintains internal cache by saving downloaded images from online URL. This saves time as image can be reused from cache instead of downloading it every time. As the images are saved in application data, it reduces the phone memory. Hence, cache has to be cleared to improve memory performance.

  1. Expiry in Days - Cache expiration time in days. Image cache will be cleared after every ‘n’ number of days you set here. If 0 is set, cache will not be cleared at all and downloaded images will stay forever. Default is 1 day.

Do not forget to click on “Save” button to save the changes made.

App Settings

This section helps you configure API related settings. Configure.IT supports different level of API security. You can configure that security parameters from this settings. These are common settings for the whole App.

  1. Base URL - It is base URL for all API calls. Generally during configuration, APIs are set from Configure.IT server but once you deploy the API on Configure.IT hosted server or your own server then you need to set base URL of API on this parameter. So that all API calls (configured via Data source) will be executed from this URL.
  2. Enable Token Authentication - If you want to enable Token Authentication mechanism for API calls for security purpose then enable this parameter. It will pass token value in all API calls of the application.
  3. Enable CheckSum Authentication - Checksum is another mode of authentication mechanism for API calls. Enabling this parameter will validate all parameter values passed to API at server end with checksum value.
  4. Enable Data Encryption - This is highest level of security. It will encrypt all input parameter and its value before sending to server. Same way it will encrypt all API response and decrypt at mobile end before its usage. Configure.IT is using AES-256 bit algorithm for encryption.
    • Enter Encryption Key - If you are using Data encryption mechanism then you need to enter encryption key. Please note that it needs to be similar as API level configuration.
    • API Name for Create Token - If you are using Token authentication mechanism for security then here you need to enter the name of API which is used to generate a token.
  5. Enable Interactive POP Gestu - This enables swipe gesture on screen. When user swipes left, previous screen will be shown to user just like Back action.

Do not forget to click on “Save” button to save the changes made.

Tab Bar - Introduction

Tab Bar helps you organize your app into one or more distinct modes of operation. A tab bar interface is useful in situations where you want to provide different perspectives on the same set of data or in situations where you want to organize your app along functional lines.

Enable Tab

  1. To add tab in your app, you need to enable the checkbox. As soon as you enable the Tab, it shows you Tab Settings where you can set different properties as listed below :

TAB Setting

  1. Background Image
    • The image that will be displayed in the Tab bar background.Click on “Select” button to choose the image from the Assets List.
  2. Total Tabs
    • Set the number of the tabs that you want to display in the Tab bar.
    • The default value is 2.
    • You can have maximum 5 tabs.
  3. Default TAB selected
    • The index of the selected tab will be displayed when the Tab Bar is loaded in the app.
    • The default value is 1.0.
    • By default, the first tab will be selected in the tabbar control.
  4. Badge background color
    • Helps you set the background color for badge shown on top right corner of a tab in Tab bar.
  5. Badge text color
    • This is for setting text color for badge in Tab bar.
  6. Badge text font
    • Set the font of text for badge in Tab bar.

TAB 1 Setting

  1. TAB Hover Image
    • The image to be displayed in the selected state of the tab.
    • Tap on ‘SELECT’ and this will open the Asset List. Pick the image you desire.
  2. TAB Normal Image
    • The image to be displayed in the normal state of the tab .
  3. Load Screen
    • The screen that you want to display in the tab .
    • Select the screen from the list of already created screens.

SAVE

  1. Tap on Save button to save all the settings of the app.

Points to be noted :

  1. Unlike a single view screen, Tab Bar is a container control that enables encapsulates multiple views in an organised way. It makes switching between views easier. So in order to show a Tab Bar you need to redirect to Tab Bar on a whole. If you redirect to a single screen only that screen will be shown even if it is a part of tab bar. Tab Bar will be visible only if you are loading Tab Bar using Redirect action or setting Tab Bar as Default Page in your app's MISCELLANEOUS SETTINGS. When you are configuring a Redirect action for tab bar, select Tab Bar from Select Screen dropdown.
  2. Change Tabbar Properties action works only if Tab Bar is loaded into app either using Redirect action or Tab Bar set as Default Page.
  1. What to do if I get ERROR - “Default page configuration is not set properly”?
    Answer :
    This error indicates that you have not set Default Page. Please follow below steps to set the default page.
    • Select "MISCELLANEOUS SETTINGS" button which is available in your configuration page as highlighted in below image. Select "Default Page" from the list.

    • You will get new options . In that select your screen from drop down box which you want to use as "Default page" in your application and Tap on SAVE button.

      Ex: Here default screen is "Home". So "Home" screen will act as default screen while your app will launch.

  2. From where can I change the Base API URL?
    Answer :
    You can change base URL from Mobile Configuration Panel using following steps:
    • Please go to Miscellaneous settings then select “APP Settings”

    • In App Settings, enter Base URL and SAVE it.

  3. I have a screen where it requires user location, where to Start Location action? First Screen? Related screen (if yes then how)? I tried to do it on the same screen, Load > Actions > Start Location but it didn't work, as there are other actions for the main view to load other than Starting location.
    Answer :
    You need to configure 'Start Location' action on Splash Screen 'MAIN_VIEW >> Load' event, so that before entering the app, user location coordinates will be loaded.
  4. Is it possible to do actions on Splash screen? Like Starting Location?
    Answer :
    Yes it is possible. Make sure that either your actions must complete before completion of splash screen duration or actions you configure should run in background(e.g Start Location) without hampering user experience.
  5. How to hide the tab bar on some screens at the moment? If I do not choose the tab bar tool, the mobile screen will display a black block in the bottom of the screen.
    • You need to enable Hide BottomBar When Pushed parameter of Redirect action to hide tab bar on particular screen as shown in below screenshot.

  6. Could I use the two set of tabs in the same project?
    • We facilitate usage of only 1 tab bar per app. As an alternative you can configure 1 tab bar in Tab Bar settings which has less redirection of screen and for simple tab bar you can add buttons at bottom of the screen and configure Redirect action for each button click manually.
  7. The Tab Bar Settings are defined and enabled. In the MainView Tab Hosting is enabled the Tab Bar appears in the Interface Builder but not in the PreviewIT. Where I am wrong?
    • Please get assured that you configured "Redirect" action to "Tab bar". It is the main reason for tab bar not loading in PreviewIT app. If you have a Splash screen in your app configure "Redirect" action with "Tab Bar" selected from "Select Screen" dropdown, in MAIN_VIEW (control in Splash Screen) >> Time Completed event.

    • If you do not have splash screen and want to show Tab Bar on load of app, you need to set "Default Page" in "MISCELLANEOUS SETTINGS" to "Tab Bar"

    • Select “Tab Bar” as default page and “Save” this setting.

    • Now re-download your app in PreviewIT to check if tab bar works as it should work now.
  8. How is tab bar visible on the screen
    • If you want to show Tab Bar after Splash Screen, you need to configure "Redirect" action with "Tab Bar" selected from "Select Screen" dropdown, in MAIN_VIEW (control in Splash Screen) >> Time Completed event.

      • If you do not have splash screen and want to show Tab Bar on load of app, you need to set "Default Page" in "MISCELLANEOUS SETTINGS" to "Tab Bar"

      • If you want to load tab bar after some other screen of your app, you can use “Redirect” action for tab bar as described for Splash Screen. the dimension of the background image and the tab icons.(icon/image format). Background image must be of size 320x49. And tab images must be of size (320/number of tabs) x 50
  9. What should be the size of background image and tab icons?
    • The size of tab bar background image must be size 320 x 49 and tab icons should be of 64 x 49.
  1. How to Configure Tab bar Part-1:
  2. How to Configure Tab bar Part-2:
  1. http://www.configure.it/community/d/242-side-panel-not-working-on-previewit
  2. http://www.configure.it/community/d/50-how-can-i-configure-my-side-panel
  3. http://www.configure.it/community/d/221-strange-behaviour-sidepanel-does-not-appear-anymore-on-previewit-ios/4
  4. http://www.configure.it/community/d/212-tab-bar/