Add Internationalization and Localization to an MDK App
- How to define a property file to store the language and locale-specific strings
- How to consume localized text strings in metadata definition
- How to use Currency and Date Time formatters
Prerequisites
- Tutorial group: Set Up for the Mobile Development Kit (MDK)
- Install SAP Mobile Services Client on your iOS or Android device.
Android!
iOS
(If you are connecting toAliCloud
accounts then you will need to brand your custom MDK client by allowing custom domains.)
You may clone an existing project from GitHub repository and start directly with step 8 in this tutorial.
- Step 1
Internationalization (i18n) is the process of designing and developing your software or mobile application product so it can be adapted and localized to different cultures, regions, and languages.
Localization (l10n) is the adaptation of your software or mobile application product to meet the language, culture, and other requirements of each locale. It refers to localizing time and date differences, currency, accounting standards, culturally appropriate images, symbols, and hand gestures, spelling, and other locale-specific components.
As a developer, you can now provide translations and localization for your MDK application. This allows end-users to view the mobile application in their own language and regional settings. MDK already supports various languages for end-user facing texts to be translated.
- Step 2
This step includes creating the mobile development kit project in the editor.
-
Launch the Dev space in SAP Business Application Studio.
-
Click Start from template on Get Started page.
If you do not see the
Get Started
page, you can access it by typing>get started
in the center search bar. -
Select MDK Project and click Start.
If you do not see the MDK Project option check if your Dev Space has finished loading or reload the page in your browser and try again.
This screen will only show up when your CF login session has expired. Enter your login credentials, click Sign in. After successful signed in to Cloud Foundry, select your Cloud Foundry Organization and Space where you have set up the initial configuration for your MDK app and click Apply.
-
In Basic Information step, provide the below information and click Next:
Field Value MDK Template Type
Select List Detail
from the dropdownYour Project Name
Provide a name of your choice. MDK_i18n_l10n
is used for this tutorialYour Application Name
<default name is same as project name, you can provide any name of your choice> Target MDK Client Version
Leave the default selection as MDK 6.0+ (For use with MDK 6.0 or later clients)
Choose a target folder
By default, the target folder uses project root path. However, you can choose a different folder path -
In Service configuration step, provide the below information and click Next:
Field Value Data Source
Select Mobile Services
from the dropdownMobile Services Landscape
Select standard
from the dropdownApplication Id
Select com.sap.mdk.demo
from the dropdownDestination
Select SampleServiceV2
from the dropdownEnter a path to the OData service
Leave it as it is Enable Offline
It’s enabled by default -
In Data Collections step, select
Customers
(if not selected by default) andSalesOrderHeaders
. Click Finish to complete the project creation. -
After clicking Finish, the wizard will generate your MDK Application based on your selections. You should now see the
MDK_i18n_l10n
project in the project explorer.
-
- Step 3
So far, you have learned how to build an MDK application in the SAP Business Application Studio editor. Now, you will deploy the application definitions to Mobile Services and Cloud Foundry to use it in the Mobile client and Web application respectively.
Right-click
Application.app
and select MDK: Deploy.Select deploy target as Mobile & Cloud.
MDK editor will deploy the metadata to Mobile Services (for Mobile application) followed by to Cloud Foundry (for Web application).
You should see successful messages for both deployments.
- Step 4
There are two control properties displaying Date and Gross Amount values generated by the template.
You will also learn how you can format these values to be displayed based on the device’s current locale.
- Step 5
The
i18n.properties
file is where language & locale specific strings are stored.The file name structure can consist of up to 4 parts:
<base_filename>_<language_code>_<script_code>_<region_specifier>.properties
for example:
myi18n_zh_Hant_HK.properties
= properties file for Chinese language with Traditional script specifier and Hong Kong region specifier.For this tutorial, you will create the
i18n_de.properties
file for the German language.-
Open
i18n.properties
and copy & paste the below information:JSONCopymain_title=Main customers_title=Customers salesOrderHeaders_title=SalesOrderHeaders logout_button=Logout sync_button=Sync update_button=Update
Each property file contains a list of localization strings that come in key value pair syntax.
<Localization_Key>=<Localized_Value>
-
Right-click the
i18n
folder and select MDK: New i18n File. -
Enter the file name
i18n_de
, click Next and then Finish on the confirmation step. -
Copy and paste the below information:
JSONCopymain_title=Haupt customers_title=Kunden salesOrderHeaders_title=Kundenaufträge logout_button=Ausloggen sync_button=Synchronisieren update_button=Aktualisieren
-
- Step 6
MDK applications support various localization formatter functions:
L: Localizable String
N: Number
C: Currency
S: Scientific
P: Percentage
DT: Date Time
D: Date
T: Time
You will use the Localizable String function to add language support on the Main page of your application.
-
Click
Main.page
to open it in the MDK Page Editor. -
In the Properties pane, click the link icon for the Page caption, select i18n Objects in the dropdown and double click on
main_title:"Main"
to bind Caption to the Localizable String. -
Similarly, update the Title for both
Customers
andSalesOrderHeaders
Section buttons. -
Finally, update the Caption for both
Logout
,Sync
, andUpdate
Toolbar items.
You can find more information about Localized String formatter in help documentation.
-
- Step 7
You will add
Currency
andDateTime
formatter in theSalesOrderHeaders_List.page
.Let’s start with Currency formatter:
Syntax: $(C, <Value>, <Currency Code>, <Locale>, <Format Options>)
-
Click
SalesOrderHeaders_List.page
to open it in the MDK Page Editor. -
The Object Table control’s Status property is bound to the OData property
{GrossAmount}
. You will format the property value using theCurrency
formatter. In the Properties pane, click link icon for the Status property. -
Cut or remove the default expression in the object browser.
-
Select i18n Objects in the dropdown and then select Currency in the formatters dropdown.
-
Select Euro Member Countries for Country Code, click Insert to generate the expression, do not close the Object Browser window.
The generated expression looks like below:
JSONCopy$(C,,'EUR','',{minimumIntegerDigits:1,minimumFractionDigits:0,maximumFractionDigits:2,useGrouping:true})
-
You will now bind the Currency value placeholder with the
GrossAmount
property of theSalesOrderHeaders
entity. Put the cursor before the second comma (from left side). Choose OData Objects option from the dropdown, select theGrossAmount
property under theSalesOrderHeader
and click Insert to generate the new expression.The new expression looks like below:
JSONCopy$(C,{GrossAmount},'EUR','',{minimumIntegerDigits:1,minimumFractionDigits:0,maximumFractionDigits:2,useGrouping:true})
Since there is already an OData property
CurrencyCode
part ofSalesOrderHeaders
entity, it would be best to use the value coming directly from the backend instead providing a constant value. So, replace the ‘EUR’ with{CurrencyCode}
so the final expression should look like below:JSONCopy$(C,{GrossAmount},{CurrencyCode},'',{minimumIntegerDigits:1,minimumFractionDigits:0,maximumFractionDigits:2,useGrouping:true})
-
Click OK.
-
You will now format the Subhead property’s value
{CreatedAt}
usingDateTime
formatter.Syntax: $(DT, <Value>, <Locale>, <Timezone>)
-
Click link icon for the Subhead property.
-
Cut or remove the default expression in the object browser, select i18n Objects in the dropdown, select
DateTime
in the formatters dropdown. -
Select Medium for Display Format and click Insert to generate the expression, do not close the Object Browser window.
The generated expression should look like below:
JSONCopy$(DT,,'','',{format:'medium'})
-
You will now bind the
DateTime
value placeholder with theCreatedAt
property of theSalesOrderHeaders
entity. Put the cursor before the second comma (from left side). Choose OData Objects option from the dropdown, select theCreatedAt
property under theSalesOrderHeader
and click Insert to generate the new expression.The new expression looks like below:
JSONCopy$(DT,{CreatedAt},'','',{format:'medium'})
For Time formatter, you must still provide the full date-time value, the result will only include time portion.
For more details on these formatters, check the help documentation.
What are the various Display Format available in DateTime Formatter?
-
- Step 8
Right-click the
Application.app
file in the project explorer pane, select MDK: Deploy and then select deploy target as Mobile & Cloud.Alternatively, you can select MDK: Redeploy in the command palette (View menu>Find Command OR press Command+Shift+p on Mac OR press Ctrl+Shift+P on Windows machine), it will perform the last deployment.
- Step 9
What is the default value for "Format Options" generated in Currency formatter?