Skip to content

Branding Your Customized App

The Mobile Development Kit SDK is used to generate a custom client. The client is created by running the create-client.command script, which takes A .mdkproject as its input. The client can be customized or branded by making changes to the .mdkproject directory.

Structure Of .mdkproject

  • BrandedSettings.json – Contains runtime configurations such as security settings, URLs for connecting to SAP Mobile Services and more.
  • MDKProject.json – Contains build-time configurations such as the application name, version and bundle ID. See Configuration Of MDKProject.json File for details.
  • App_Resources – Contains any custom resource to be used by the application. See Custom Application Resources for details.
  • App_Resources_Merge - Contains any custom resource to be used (merge) by the application. For more information, see Custom Application Resources Merge.
  • demo – To make an OData service available in demo mode, include the .udb and .rq.udb files for that service here. See Demo App for details.
  • extensions – Any extensions used by the app should be included here. See Custom Extensions for details.
  • metadata – Contains built-in metadata for the application. metadata folder should contains the metadata project directly

For example:

metadata/ (Directory)
  Actions/ (Directory)
  Extensions/ (Directory)
  Images/ (Directory)
  Rules/ (Directory)
  ...

If your metadata project is in a sub folder e.g.

metadata/ (Directory)
  MyProductSalesApp/ (Directory)
    Actions/ (Directory)
    Extensions/ (Directory)
    Images/ (Directory)
    Rules/ (Directory)
    ...

Then you will need to make sure to set BaseProject to MyProductSalesApp in the MDKProject.json

You can personalize an app before making it available to users on the Enterprise App Store, by making changes in the .mdkproject directory. Components that you can brand include the following:

Application Connection Information

The configured file is copied into the generated project at <project folder>/app/branding/BrandedSettings.json. To update the branded settings without having to run the create-client.command script again, modify the file in the project and redeploy the app.

You can find the application connection information in the MDKClient_SDK/branding/BrandedSettings.json file.

Connection Information

Setting Description
AllowCerts Is certificate use allowed.
AppID SAP Mobile Services AppID
ClientID SAP Mobile Services ClientID
ServerUrl SAP Mobile Services Endpoint URL
AuthorizationEndpointUrl SAP Mobile Services Authorization End-Point URL
TokenUrl SAP Mobile Services Token URL
RedirectUrl SAP Mobile Services Redirect URL
EnableScreenSharing Enables/disables screen sharing on the Android client
MultiUserSettings Configure Multi-User feature related settings

AllowCerts and EnableScreenSharing are Boolean flag used at onboarding. The settings mentioned above are required for onboarding the end user to the Mobile Development Kit client app.

Allow Certs

To enable AllowCerts change the RedirectUrl to redirect to your branded MDK Client via URL scheme. The URL scheme is of the following format: <urlscheme>://oauth2redirect.

Consider the following example, if your URL scheme is sapmobilesvcs, then set sapmobilesvcs://oauth2redirect to the following two locations:

  • The RedirectUrl in BrandedSettings (or Override settings)
  • The RedirectUrl in SAP Mobile Services Cockpit > YourApp > Security > OAuth Clients (press edit icon)

Enable Screen Sharing

EnableScreenSharing flag is not set by default and it has the following behavior:

  • When set to false: the client would disallow everything on all versions of Android: No screen sharing, no screenshot and no system screenshot. This is essentially turning on the Android's Secure feature.
  • When set to true: the client would allow everything on all versions of Android: screen sharing, screenshot and system screenshot. This is essentially turning off the Android's Secure feature.
  • When EnableScreenSharing is not set or undefined:
    • In Android 8.x or higher (API level 26 or higher), the client will disallow system screenshot, but allow screen sharing and screenshot,
    • In Android 7.x or lower (API level 25 or lower), the client will disallow all screen sharing & screenshot features. (In Android 7 or older, screen sharing cannot be enabled without disabling the Android security feature, hence screen sharing is disabled by default.)

It is highly advisable that EnableScreenSharing should only be set to true for developmental or demo environment and should not be set it in production environment.

Multi-User Settings

Configure settings related to Multi-User feature.

Setting Description Default Value
MultiUserEnabled Flag to indicate whether to enable Multi-User feature false

Example:

"ConnectionSettings": {
  "AppId": "ODataOnly",
  ...
  "MultiUserSettings": {
    "MultiUserEnabled": true
  }
}

Note: Currently support for MultiUser feature is only available for Android.

Note: Enable the flag Allow Upload of Pending Changes from Previous User for the corresponding app in the mobile services cockpit, else multi user functionality will not work.

Connection Settings Allowlist

Use this to specify the domains which will be allowed for connection settings fetched via QR Scan onboarding (In-App and 3rd party scan). For example, If you are connecting to AliCloud accounts, you need to add your custom domains under AllowedDomains.

  1. ServerUrl
  2. AuthorizationEndpointUrl
  3. RedirectUrl
  4. TokenUrl

The .hana.ondemand.com, .hanatrial.ondemand.com domains are allowed by default and always. For connection settings using other custom domain, AllowedDomains can be specified as below:

  {
    "ConnectionSettings": {
      "ServerUrl": "https://someservice.abc.com/...",
      "AuthorizationEndpointUrl": "https://someservice.xyz.com/...",
      ...
    },
    "AllowedDomains": [
      ".abc.com",
      ".xyz.com"
    ],
  }

Any valid connection setting should have the allowlist string suffixed to its fully-qualified-domain-name and allowlist string should be of at-least 2 words separated by a "."(dot)

Taking oauthasservices-w915e05df.int.sap.com as an example the valid items in allowlist would be

  • oauthasservices-w915e05df.int.sap.com
  • int.sap.com
  • sap.com

Taking oauthasservices-w915e05df.int.sap.com as an example the invalid items in allowlist would be

  • com
  • sap
  • int
  • oauthasservices-w915e05df
  • oauthasservices-w915e05df.int
  • oauthasservices-w915e05df.int.sap
  • int.sap

Application Name

Use the ApplicationDisplayName property to specify the name of the application while deploying the project initially.

Application Default Language

Use the DefaultAppLanguage property to specify the default language of the app. Accept the ISO 639-1 two letter code, for example, en for English.

Detail Label Text

Use the DetailLabelViewText property to specify the subtitle that appears on the welcome page. This should be a brief description of the app.

Passcode Timeout

Use the PasscodeTimeout property to specify how long the application can remain in the background before the passcode is required.

  • If the value is -1, the passcode screen is never displayed.
  • If the value is 0, the passcode is always required.
  • If the value is >0, it denotes the timeout value in seconds after which the passcode screen is displayed.

If PasscodeTimeout isn't specified, a default value of 0 will be used on iOS. In case of Android, PasscodeTimeout from BrandedSettings.json is no longer supported. The Lock Timeout property will now be used from SAP Mobile Services for Android. A value of 0 implies the app will always require a passcode. Negative value of PasscodeTimeout is not possible in the case of Android.

Note

For Android, a value of 0 is not recommended if you try to access external activities such as the bar code scanner or camera. Returning to the app requires a passcode. Provide adequate time to finish the scanning and choosing of the file.

Debugging Options

The settings in the DebugSettings property are for development use and should not be enabled in a production setting.

Setting Description
DebugODataProvider Adds a console logger to the OData provider set to Debug level
TracingEnabled Turns on Tracing (execution time) for rules, actions, and so on.
Categories Turns on tracing categories in array to enable the console log based on categories.
- "mdk.trace.action" : Tracing on actions
- "mdk.trace.api" : Tracing on ClientAPIs
-"mdk.trace.app" : Tracing on MDK player application
-"mdk.trace.branding" : Tracing on branded settings
-"mdk.trace.core": Tracing on MDK core, such as event handler, rule execution, etc.
-"mdk.trace.i18n": Tracing on internalization
-"mdk.trace.lcms": Tracing on app update
-"mdk.trace.odata": Tracing on OData operations, such as uploadOfflineOData, read, etc.
-"mdk.trace.profiling": Tracing on profiling
-"mdk.trace.targetpath": Tracing on target path, such as processing target path segment, etc.
-"mdk.trace.ui" : Tracing on controls, builders, observables, etc.

Logging Options

Use the LogSettings property if you would like the logger to be started as soon as the Mobile Development Kit client is launched.

Setting Description
FileName File-name to be used for the log file
MaxFileSizeInMegaBytes Maximum file size in megabytes. When the specified max size is reached, it rolls. The default value is 5.
LogLevel Value can be of the following: Error, Warn, Info, Debug

Database Encryption

Use the EncryptDatabase property to specify the database encryption.

  • Set value to true if you want the database to be encrypted.
  • Set value to false if you do not want the database to be encrypted.

It is recommended to encrypt the database in production scenarios. You might want to set this property to false to extract the database for debugging purposes or to get a demo database.

Skip EULA Page

Use the SkipEula property to skip the EULA page during onboarding. This is an optional property and the default value is false. Set this property value as true to skip the EULA page during onboarding. If this property is not used in BrandedSettings.json , application uses the default value (false). Further, if the EULA content resource file is not present, then the EULA page is skipped during onboarding even if the SkipEula property is set to false.

Obfuscate Email

ObfuscateEmail is an optional property. This should be set to true if you want to obfuscate email address on the sign in screen. If not defined, default value is false. Currently, this property is supported only on Android.

Cache Configurations

Images and documents downloaded in the application are cached for better performance. Use the CacheSettings property to specify Image or Document cache configurations. Default values will be used if not specified.

Setting Description Default Value
ImageCacheSizeMB Size of the cache used to store any images used within MDK. Size is in MB. If value specified is a fraction, it will be rounded up and if it is negative or zero, default value is used. 1024
DocumentCacheSizeMB Size of the cache used to store documents downloaded in Open Document Action. Size is in MB. If value specified is a fraction, it will be rounded up and if it is negative or zero, default value is used. 512

Example:

"CacheSettings": {
  "ImageCacheSizeMB": 512,
  "DocumentCacheSizeMB": 256
}

Onboarding Customization

Use the OnboardingCustomizations property to customize the strings used in the Onboarding flow pages such as EULA screen, passcode setup screen, and bio-metric enabling screen. If you do not define these, then the default strings that have been localized to multiple languages are used.

You should only set these properties if you intend to customize them. If you customize these properties, you need to provide your own localization of the custom strings.

You can find this option in the MDKClient_SDK/branding/BrandedSettings.json file.

Example:

Use localization API (recommended):

"OnboardingCustomizations": {
  "eulaTitleString": "$(L,my_eula_title)",
  "agreeButtonString": "$(L,my_eula_agree_btn)",
  "disagreeButtonString": "$(L,my_eula_disagree_btn)"
}

Or use literal string:

"OnboardingCustomizations": {
  "authenticationFailedMessageString": "Wrong credential, please try again. Please contact abc@xyz.com if you need a new account"
}

Include Internalization Properties Files in Your Branded Client

In order to provide i18n properties files, you must provide built-in metadata in your branded client. Here is how you can provide built-in metadata with i18n properties files:

  • Option 1

Export you main app project from SAP Web IDE and place it under <.mdkproject directory>/metadata as built-in metadata.

  • Option 2

If you do not wish to place your main app as built-in metadata in the branded client, you can create an MDK Empty Project and copy all of your i18n properties files from the main project to this empty project. You can then export it from SAP Web IDE and place it under <.mdkproject directory>/metadata as built-in metadata. Note: This empty app will now become the app that run when user onboard to your branded client for the first time. You can design it to look better with landing page if you wish to.

For more details about Internalization, please see Internationalization and Localization of App Metadata

The following table is the list of properties of that can be set to customize the text in Onboarding flow.

Key Default String Supported System
eulaTitleString End User License Agreement iOS, Android
agreeButtonString Agree iOS, Android
disagreeButtonString Disagree iOS, Android
authenticationFailedMessageString Authentication failed. Please try again iOS only
networkUnreachableFailureString Network unreachable. Please try again later. iOS only
enterCredentialsMessageString Please sign in to reset the passcode iOS only
maxAttemptsReachedMessageString No more attempts left iOS only
resetPasscodeButtonString Reset Passcode iOS only
attemptsLeftMessageFormat You have %d attempts left iOS only
authenticateWithFaceIDMessageString Authenticate with Face ID iOS only
authenticateWithTouchIDMessageString Authenticate with Touch ID iOS only
changePasscodeTitleString Change Passcode iOS only
choosePasscodeTitleString Choose Passcode iOS, Android
confirmPasscodeString Confirm your passcode iOS, Android
confirmPasscodeTitleString Confirm Passcode iOS, Android
digitsLabelString Digits (0-9) iOS only
enableButtonString Enable iOS only
enterPasscodeAgainString Enter your passcode again iOS only
enterYourCurrentPasscodeMessageString Enter your current passcode iOS only
enterYourPasscodeMessageString Enter your passcode iOS only
faceIDEnableMessage1String Please enable Face ID for fast and secure access iOS only
faceIDEnableMessage2String If Face ID is deactivated, you will be asked for your device passcode iOS only
faceIDMessage1String Enabling Face ID will give you faster access to your information iOS only
faceIDMessage2String You can turn this feature On or Off anytime from Settings iOS only
faceIDTitleString Face ID iOS only
includeRequiredGroupMessage Include the following: iOS only
learnMoreFaceIDLinkString Learn more about Face ID iOS only
learnMoreTouchIDLinkString Learn more about Touch ID iOS only
lowerCaseLabelString Lower case (a-z) iOS only
nextItemString Next iOS, Android
nonAlphabeticLabelString Symbols (!@#...) iOS only
notNowActionString Not Now iOS only
notNowButtonString Not Now iOS only
okButtonString OK iOS only
oneAttempLeftMessageFormat You have 1 attempt left iOS only
passcodeNotMatchMessageString Passcodes did not match. Try again iOS only
passcodeRejectedMessageString Passcode was rejected by FUIPasscodeControllerDelegate iOS only
passcodeTitleString Passcode iOS, Android
passcodeValidationFailedMessageString Passcode validation failed iOS only
retryButtonString Retry iOS only
retryPasscodeMessageString Incorrect passcode. Try again iOS only
scanButtonString Scan iOS, Android
selectOptionString Please select an option iOS, Android
userChoiceString Do you like to ... iOS, Android
continueWithSameAppString Use current application iOS, Android
scanNewQRCodeString Scan new QR code iOS, Android
setPasscodeMessageFormat Choose a passcode with at least %d characters for unlocking the app iOS, Android
settingsActionString Settings iOS only
touchIDEnableMessage1String Please enable Touch ID for fast and secure access iOS only
touchIDEnableMessage2String If Touch ID is deactivated, you will be asked for your device passcode iOS only
touchIDMessage1String Enabling Touch ID will give you faster access to your information iOS only
touchIDMessage2String You can turn this feature On or Off anytime from Settings iOS only
touchIDTitleString Touch ID iOS only
upperCaseLabelString Upper case (A-Z) iOS only
useFaceIDMessageString Use Face ID iOS only
useTouchIDMessageString Use Touch ID iOS only
eulaRejectAlertTitleText Without consent, you will not be able to continue onboarding iOS only
eulaRejectAlertQuitBtnText Quit Process iOS only
eulaRejectAlertConsentBtnText Give Consent iOS only

Demo App

If you want to allow user to access the app in the demo mode, place your demo application definitions in <.mdkproject folder>/demo/demo.js.

If your demo app need different connection settings when the client launches in the demo mode, add them under the Demo section. If you launch the demo mode without adding a connection setting, it falls back to the live settings. This is needed if your demo offline database is generated with different server endpoint.

Use the DemoAppLanguage property (found in the MDKClient_SDK/branding/BrandedSettings.json file) to specify the language code (for example, en for English) if the demo database supports the required language parameters.

Creating a Demo App

If you'd like to design a demo app that's different from your built-in app or you do not have built-in app, you can create, design and build your demo app as Mobile Development Kit app:

  • In SAP Business Application Studio:

    • Once deployment is successful, copy the path to the upload bundle zip file from the Task Bundle Build.
    • Open a terminal, execute below command: cp <path to your upload bundle zip file> . For example: cp /tmp/vscode-unpacked/xxxx/extension/tools/application-bundler/uploadBundle.zip . There is a dot/period at the end of the command. This copies the file to the current workspace.
    • Right click the uploadBundle.zip and click Download.
    • Once the bundle zip file is downloaded you can extract the bundle.js and rename it to demo.js.
    • Place the demo.js file in <.mdkproject directory>/demo
  • In SAP Web IDE:

    • Export it via MDK Deploy and Activate context menu and check Download application bundle to local machine option.
    • Once the bundle zip file is downloaded you can extract the bundle.js and rename it to demo.js.
    • Place the demo.js file in <.mdkproject directory>/demo.

Including Demo App to Your Branded Client

By default, a demo app bundle is not included for your app. You can enable it by setting the Demo property in the BrandedSettings.json file. If this property is present (even if it is only an empty object), the create-client command generates a demo app based on the following criteria:

  • If a demo.js file is present in the <.mdkproject directory>/demo directory, it is used as the demo app. See above on how to create a separate demo app
  • If a demo.js file is not present in the <.mdkproject directory>/demo directory, your main app (bundle.js) is copied as demo.js to be used as the demo app.

Demo Database For Offline OData

You can brand a demo database of your app for users to try the app without having to authenticate with the SAP Mobile Services.

The database comes in the form of two files with the extensions .udb and .rq.udb. The names of both of these files must match the destination name for the OData service. You can include them in the app by adding them to the <.mdkproject directory>/demo.

For example, if the app uses a destination called com.sap.sam.swe, you can brand the Offline OData store by including com.sap.sam.swe.udb and com.sap.sam.swe.rq.udb in the branding directory. If multiple destinations are used by the app, include additional pairs of database files for each additional destination. When the app is built with one or more branded databases, click Try the Demo on the launch screen to use those databases.

You can obtain these database pairs from an existing application after the offline OData has been initialized. Since only unencrypted databases are supported in the demo mode, you must set the EncryptDatabase flag in MDKClient_SDK/branding/BrandedSettings.json to false for this step.

To get the files:

  • From the Android simulator, go to Android studio > Device File Explorer > sdcard > Android > data > [com.your.appid] > files.

  • From the iOS simulator (on MAC), go to the terminal app and use the following command to list all the .rq.udb files sorted in reverse chronological order:

find ~/Library/Developer/CoreSimulator -name '*.rq.udb' -print0 | xargs -0 ls -lt

The corresponding .udb file can be found in the same location.

If the app is installed on a device, you can obtain the files using a third party file manager application.

If you want different connection settings for when users launch the app in the demo mode, specify the settings under the Demo section.

Configuration Of MDKProject.json File

Configure the following settings in the MDKProject.json file before running the create-client.command:

Setting Description
AppName This determines the name of the application project and the app as they appear on your device
AppVersion The client project application version
AndroidVersionCode The Android application version code. It accepts value 'Auto' or any positive integer value. If it is not defined, the default version code will be 1. For more details on 'Auto' see Android Application Version Code.
BaseProject The subdirectory of metadata where the project is found
BundleID The unique ID for your app that'll be used for code signing. It's also known as App ID or Identifier in iOS and application ID in Android.
Externals A list of NPM modules that should not be included in the application bundle. You can use this option for dependencies that you expect to be in the environment when the application is built.

Note that the modules file-system and ui/dialogs are automatically used as externals because they are included in the client application.
NSPlugins A list of additional NativeScript plugins to be used in the application, these plugins are automatically downloaded and added to the Mobile Development Kit client application.
Add the modules from these plugins that you would consume in your application in the “Externals” property. You can access their modules in rules via the required API.
UrlScheme Allows you to specify a custom URL scheme which opens the client.
If the URL includes connection settings as URL parameters, these settings will override the ones used by the client. The default is mdkclient.

Android Application Version Code

AndroidVersionCode represent the android:versionCode in the AndroidManifest.xml.

AndroidVersionCode accepts value 'Auto' or any positive integer value. If it is not defined, the default version code will be 1.

If AndroidVersionCode is set to "Auto", then it will generate the version code based on the AppVersion value, using the following rule:

android:versionCode = (AppVersion.MajorVersion * 10000) + (AppVersion.MinorVersion * 100) + (AppVersion.PatchVersion)

Examples:

  • AppVersion = "1.5.8", auto generated version code will be "10508"
  • AppVersion = "10.2.4", auto generated version code will be "100204"
  • AppVersion = "10.99.88", auto generated version code will be "109988"

In 'Auto' mode, the limit for the Minor version and Patch version are both 99. There's not limit for Major version. An error will be thrown if you exceed the limit.

Application Version

The Mobile Development Kit client keeps track of several versions, which can be viewed in the iOS Settings menu. These are identified as the application version, the definitions version and the framework versions for the frameworks used in the client build.

You can specify the application version while generating a client project. This allows you to version the client project itself, which may be useful if you make changes to extension controls or other branded settings.

To specify the application version, specify the AppVersion property in MDKProject.json before running the create-client command.

To further customize your app's entry in the iOS Settings, you can manually edit <project directory>/app/App_Resources/iOS/Settings.bundle/Root.plist after the script has completed. You can add new entries, but it is recommended that you do not remove any existing entries, in order for the app to function properly.

Custom Extensions

See Create Extension Controls with TypeScript for detailed description on creating extensions.

Custom Application Resources

Custom Application Resources for iOS

You can include custom application resources by placing the files in <.mdkproject directory>/App_Resources/iOS. This may include one of the following:

Setting Description
Assets.xcassets An asset catalog to be used by the app.
This can include an AppIcon.appiconset directory for custom app icons and a LaunchImage.launchimage directory for custom launch images. See App Launcher Icon and Splash Screen for iOS for details
Custom icons or images Custom icons which can be referenced in the metadata and shown in the app.
For example, an image called menuIcon.png is included in <.mdkproject directory>/App_Resources/iOS/. It can be accessed by the app with the identifier res://customImgName.

Note
Apple's image naming for iOS different resolution devices is supported.
EULA text Custom text for the EULA page can be specified in either EULAText.html or EULAText.txt. If both of EULAText.html and EULAText.txt files are available, then EULAText.html file is loaded in priority. You can also provide localized version by adding the language specifiers, e.g. EULAText_en.html or EULAText_en.txt, EULAText_fa.html or EULAText_fa.txt, EULAText_en_US.html or EULAText_en_US.txt, EULAText_zh_Hant_HK.html or EULAText_zh_Hant_HK.txt. For more details on language specifiers, see Internationalization and Localization of App Metadata
Custom logo See below for details

Custom Application Resources for Android

You can include custom application resources by placing the folders & files in <.mdkproject directory>/App_Resources/Android/src/main/. This may include one of the following (if the folders doesn't exist, please create them):

Setting Description
res You can add subfolders named drawable and drawable-x (where x is the different DPI for the different devices). These folders will store the image resources for your app that can be accessed by the app with the identifier res://customImgName and also store icons for app launcher icon, splash screens and onboarding screens. See the example below for a list of possible drawable resources folders
assets You can add custom content for EULA page by providing your own EULAText.html. Do note that it must be in HTML format. You can also provide localized version by adding the language specifiers, e.g. EULAText_en.html, EULAText_fa.html, EULAText_en_US.html, EULAText_zh_Hant_HK.html. For more details on language specifiers, please see Internationalization and Localization of App Metadata
Custom logo See below for details

Examples of possible drawable folders:

  • drawable: Default resources folder if none of the qualifier matches.
  • drawable-ldpi: Resources for low-density (ldpi) screens (~120dpi).
  • drawable-mdpi: Resources for medium-density (mdpi) screens (~160dpi). (This is the baseline density.)
  • drawable-hdpi: Resources for high-density (hdpi) screens (~240dpi).
  • drawable-nodpi: Resources for all densities. These are density-independent resources. The system does not scale resources tagged with this qualifier, regardless of the current screen's density. Important: In NativeScript this is the folder that holds splash_screen.xml – the file that creates your launch screen.
  • drawable-xdpi: Resources for extra-high-density (xhdpi) screens (~320dpi).
  • drawable-xxdpi: Resources for extra-extra-high-density (xxhdpi) screens (~480dpi).
  • drawable-xxxdpi: Resources for extra-extra-extra-high-density (xxxhdpi) uses (~640dpi).

Custom Logo and Splash Screen

App Launcher Icon and Splash Screen for iOS

App launcher icon and splash screen for iOS is customizable by providing the following resources in the /App_Resources/iOS/ folder.

  • Assets.xcassets: The resource folder that holds your image asset catalogs (for AppIcons, LaunchImages and LaunchScreen).
  • LaunchScreen.storyboard: Your default storyboard used for your launch screen (used in iOS versions 8+).

You can use the template version provided by Mobile Development Kit as your initial template from here:

  • <MDKClient_SDK Folder>/App_SDK/template/app/App_Resources/iOS/Assets.xcassets
  • <MDKClient_SDK Folder>/App_SDK/template/app/App_Resources/iOS/LaunchScreen.storyboard

Tip

You are highly recommended to use Xcode to modify the Assets.xcassets or LaunchScreen.storyboard, so that you can ensure you have provided all of the required icons and images.

In the template version of Assets.xcassets you will find the following sub-folders:

  • The app launcher icons are stored in AppIcon.appiconset

    • AppIcon.appiconset: The resource that holds the images for your app launch icons for all iOS versions.
    • Note: Make sure the resolution of the images and icons are correct.
  • The splash screen images used by the LaunchScreen.storyboard are stored in the following folders:

    • LaunchImage.launchimage: The resource folder that holds the images for your launch screen images (for iOS 7 and lower versions).
    • LaunchScreen.AspectFill.imageset: The resource folder that holds the background image for your LaunchScreen.storyboard (for iOS versions 8+).
    • LaunchScreen.Center.imageset: The resource folder that holds the centered image for your LaunchScreen.storyboard (for iOS versions 8+).

Warning

Make sure you have provided all required images or your app will be rejected from publishing in the Apple App Store.

Custom Icon for Onboarding Screen in iOS

You can specify this by adding a Branding.nss file in the App_Resources/iOS directory. If a file exists, the client will pick it up and load it first. NSS is cumulative, so styles in Branding.nss can be overridden by SDK level styles in the definitions out of the box.

For example, this file can be used to brand the Welcome Page Logo:

/* Branding.nss */
fdlFUIWelcomeScreen_logoImageView {
  image-name: custom-logo.png;   /* user is in charge of putting this file in the App_Resources/iOS as well */

}

App Launcher Icon for Android

App launcher icon in Android can be customized by providing a resource named icon in the drawable folders. e.g.

drawable/icon.png drawable-mdpi/icon.png drawable-hdpi/icon.png drawable-xhdpi/icon.png

Or

drawable-nodpi/icon.xml

Splash Screen for Android

Splash Screen in Android can be customized by providing a resource named splash_screen in your drawable folders.

You are recommended to use LayerList image for splash screen so that it can be scaled automatically.

e.g. splash_screen.xml in drawable-nodpi folder:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="fill">
  <item>
    <!-- This is where you specify the drawable for Splashscreen Background-->
    <bitmap android:gravity="fill" android:src="@drawable/background" />
  </item>
  <item>
    <!-- This is where you specify the drawable for image or icon-->
    <bitmap android:gravity="center" android:src="@drawable/splash_logo" />
  </item>
</layer-list>

In this example, you can have 2 images (background and splash_logo) in your drawable folders. The background image will be used to fill the background of the splash screen and the splash_logo will be displayed at the center in the splash screen. You can also provide splash_logo in the different drawable-<dpi> folders.

Custom Icon for Onboarding Screen in Android

You can specify this by adding custom logo file to the drawable resource folders and creating a separate XML file in the metadata application resource values folder. You need to add your custom logo file in the /res/drawable (or drawable-XYZ) folder(s). For example: /res/drawable/custom_icon.png

And, create an XML file in the metadata application .mdkproject/App_Resources/Android/src/main/res/values, with the below information. You can give any name with .xml extension. Sample Code

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
  <style name="OnboardingLogo">
          <!-- The value is always @drawable/<your_logo_name_without_ext> -->
          <!-- Do not add the file extension e.g. .png -->
          <item name="android:src">@drawable/custom_icon</item>
          <item name="android:layout_width">wrap_content</item>
          <item name="android:layout_height">24dp</item>
  </style>
</resources>

Note

android:layout_width and android:layout_height in custom OnboardingLogo is only supported from Mobile Development Kit version 6.0 or newer

Built-in Metadata

To use an existing metadata project as the initial metadata for your app, copy an exported metadata project from editor or a previously generated bundle.js file into the metadata directory.

This is also used as the metadata for the demo mode. If this directory is left blank, the default app metadata is used.

This acts as a blank application that tries to connect to the app update feature on mobile services.


Last update: July 7, 2021