1. Home
  2. Building a Canvas app
  3. Using the Advanced Configuration

Using the Advanced Configuration

The basic configuration of Canvas will give you control over the tabbed menu and its colors, but in order to make further changes to the design and even behaviors of your app, you will need to use the advanced configuration.

Below you will find a detailed explanation for each one of the available settings for the advanced configuration:

General Configuration

Configuration Name Type Description
Remote_Server_Available true/false If true, the app will look for the MobiLoud Canvas plugin and the login endpoint on the URL specified below.
Remote_Server_Root_URL text (url) The URL to your website where the Mobiloud Canvas is installed.
Development_Always_Download_New_Config  true/false You can enable this to make sure the app always downloads the latest remote configuration when it starts. It makes sense to disable it once the app is published and configuration changes are less frequent (it will take a couple loads of the app for a change to take effect, but the start time will be reduced).
Allow_Local_Caching_For_Offline_Mode When local caching is enabled, the app stores the pages opened during a session (all tabs, any link clicked) and makes them available for offline use.
Main_Page_URL text (url) The page that will be displayed when the app is launched in case tabs are not configured.
Preload_Main_Page_URL true/false Preload the main page during the splash screen.
Configuration Name Type Description
iOS_Pull_To_Refresh true/false If disabled, pulling the screen down will not refresh the current page on iOS
Android_Pull_To_Refresh true/false If disabled, pulling the screen down will not refresh the current page on Android
iOS_Back_Button_Bar true/false If enabled a bar containing a back button will be displayed at the bottom section of your iOS app, allowing users to return to the previous page – swipe from left should still work even if disabled.
Android_Back_Button_Bar true/false If enabled a bar containing a back button will be displayed at the bottom section of your Android app, allowing users to return to the previous page – physical back button should still work even if disabled
Enable_Progress_View true/false If enabled displays a progress bar above the tabbed navigation while the content is loading.
Open_Links_In_A_New_Screen true/false If enabled, whenever a link is clicked a new window will be displayed, over everything, and the link content will load there. Keeping this feature disabled will cause links to load on the current view/tab.
Open_External_Links_In_App true/false If enabled, external links will open in the app rather than the device’s native browser.
Share_Button true/false If enabled a share button will be displayed in the bottom bar.
Exit_App_With_Back_Button true/false On Android, if this is enabled, using the device back button from the app’s main screen will close the app.
Enable_Webview_Transition_Animation true/false If true, when navigating to an internal/external link, an animation will be displayed when the new content is loaded.

Tab Menu

Configuration Name Type Description
Show_Tab_Menu true/false Set it to true to display the bottom tabbed navigation containing the tabs that were configured in the Items section.
Auto_Hide_Tab_Menu_On_Scroll true/false If enabled, this feature will cause the bottom tabbed navigation to be automatically hidden if the user starts to scroll.
Items array This item contains the details for each one of the tabs that will be displayed in the bottom tabbed navigation, each item has its own settings as you can see below.

Items Array

Key Type Description
Background Color hex The background color of the tab
Status_Bar_Color hex The color of your status bar when the tab is selected
Preload true/false If enabled the content of the tab will be pre-loaded in the splash screen.
Icon_Font string
Icon_Font_Name string The code used for the icon that should be displayed in the tab.
Icon_URL string (url) In case you decide to use a custom icon rather than the available icon libraries, you can insert the URL to the icon image here.
URL string (url) The URL that should be loaded in the tab
Label array Contains the label for each one of the different languages, using the language code for the key and the label for value, as in the following example:

“en”: “Home”,
“es”: “Início”

Type constant: “Webview” or “Alerts” Categorizes the tab item into a certain type.

Styling

Configuration Name Type Description
Status_Bar_Color hex value The status bar color is displayed at the very top of the screen. This can be customized to match the interface colors of your app, but we recommend keeping it black.
External_Links_Status_Bar_Color hex value The background color of the status bar when the webview displays an external link in the internal/external screen
View_Background_Color hex value The background color for all the screens in the app. This color can be overriden by Webview_Background_Color in each tab item
Android_Theme constants: “Dark” or “Light” Two main styles for the UI elements, following Android standards
No_Internet_Connection_Color hex value The color used as a background for the “No internet connection available” message.
No_Internet_Connection_Text_Color hex value The color used as text color for the “No internet connection available” message.
Tab_Bar_Loading_Progress_Color hex value The color to use for the progress bar displayed above the tab bar
Tab_Bar_Background_Color hex value The background color of the Tab Menu
Tab_Bar_Selected_Tab_Color hex value The color of the icon+text used in the Tab Menu when that tab item is selected
iOS_Translucency true/false
Android_Tab_Bar_Disabled_Tab_Color hex value The color of the icon+text used in the Tab Menu when that tab item is NOT selected (default state)
Android_UI_Tab_Background_Color hex value The background color of any other tab bar (i.e. top Alerts bar) used in the app
Android_UI_Tab_Selected_Color hex value The color of the icon+text used in any other tab bar (i.e. top Alerts bar) inside the app, when that tab item is selected
Android_UI_Tab_Disabled_Color hex value The color of the icon+text used in any other tab bar (i.e. top Alerts bar) inside the app, when that tab item is NOT selected (default state)
Android_Alerts_Tab_Bar_Bottom_Line_Selector hex value Mostly used on Android, this colors the line which marks the selected tab in the Alert’s top bar
Webpage_Unavailable_Button_Color hex value The color for the button which is shown when the page inside a webview is not available
Android_Toggle_Switch_Thumb_Color_On hex value The color of the thumb (knob of the switch) when the switch is ON
Android_Toggle_Switch_Thumb_Color_Off hex value The color of the thumb (knob of the switch) when the switch is OFF
Android_Toggle_Switch_Background_Color_On hex value The color of the background of the switch when the switch is ON
Android_Toggle_Switch_Background_Color_Off hex value The color of the background of the switch when the switch is OFF
iOS_Toggle_Switch_Thumb_Color_On hex value The color of the thumb (knob of the switch) when the switch is ON
iOS_Android_Toggle_Switch_Thumb_Color_Off hex value The color of the thumb (knob of the switch) when the switch is OFF
iOS_Toggle_Switch_Background_Color_On hex value The color of the background of the switch when the switch is ON
iOS_Toggle_Switch_Background_Color_Off hex value The color of the background of the switch when the switch is OFF

Login

Configuration Name Type Description
Modal_Login_Enabled true/false If true the app will require users to login in order to access the content
Exit_Login_Button_Enabled true/false Show or hide the bottom tab bar on the login screen modal that allows users to exit the login process
Show_Login_On_Start true/false If enabled the login window will be displayed when the app is launched
Login_URL text (url) URL that will be displayed in the login window
Signup_URL text (url) If users should be allowed to register within the app you can insert the sign up URL here.
Login_Complete_String_Messages array of text values If your page is not redirected to a different URL when the user logs in, you can use this to identify a specific string on the page, to help the app identify if a user is logged in or not. When using this, do not use “Login_Complete_Regex”
Login_Complete_Regex text (url – regex) If your user is redirected after logging in you must include the URL to the redirect page so that the app can identify if a user is successfully logged in or not.
Signup_Complete_String_Messages array of text values If after registering for an account on your website the user is not redirected to a different URL, you can use this to identify a specific string in the success registration page. When using this, do not use “Signup_Complete_Regex”
Signup_Complete_Regex text (url – regex) the regex of URL that represents a successful signup.,After a successful registration, the website will redirect to a URL. This regex will represent that URL.
Logout_Complete_String_Messages array of text values If after logging out on your website the user is not redirected to a different URL, you can use this to identify a specific string in the success logout page. When using this, do not use “Logout_Complete_Regex”
Logout_Complete_Regex text (url – regex) If your user is redirected after logging out you must include the URL to the redirect page so that the app can identify if a user is logged out.
Login_Check_URL text (url) can contain $$USER$$ to be replaced in app with the userName URL that responds with a redirect when the user is not logged in. Performing a request at this URL, if the response.URL then the user is not logged in
Login_Check_String_Messages array of text values when there is no redirect, the page should contain this string. Notw! Settings this requires “Login_Check_URL” to be set as well

Advertising

Configuration Name Type Description
Advertising_Enabled true/false Use true to enable the advertising settings below
Advertising_Platform text (constant) Use one of our available platforms: “Mopub”, “Admob”, “DFP”
Banner_Screen_Locations array of text (constants) Accepted constants: “Home”, “PushDetails”,”InternalLinks”
iOS_Phone_Banner_Unit_Id text
iOS_Tablet_Banner_Unit_Id text
iOS_Banner_Position text (constant) Accepted constants: “bottom”,”top”,”both”
iOS_Interstitial_Unit_Id text
iOS_Interstitial_Interval number The number of internal/external links displayed to the user after which we display an interstitial ad
Android_Phone_Banner_Unit_Id text
Android_Tablet_Banner_Unit_Id text
Android_Banner_Position text (constant) Accepted constants: “bottom”,”top”,”both” !! USE ONLY ONE !
Android_Interstitial_Unit_Id text
Android_Interstitial_Interval number The number of internal/external links displayed to the user after which we display an interstitial ad
Banner_Background_Color hex value The color of the background where the banner will go.

Related Articles