Add Internationalization and Localization to an MDK App

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.

This step includes creating the mobile development kit project in the editor.

1. Launch the Dev space in SAP Business Application Studio.

2. 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.

   

3. 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.

   

4. In Basic Information step, provide the below information and click Next:

   Field	Value
   MDK Template Type	Select List Detail from the dropdown
   Your Project Name	Provide a name of your choice. MDK_i18n_l10n is used for this tutorial
   Your 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

   

5. In Service configuration step, provide the below information and click Next:

   Field	Value
   Data Source	Select Mobile Services from the dropdown
   Mobile Services Landscape	Select standard from the dropdown
   Application Id	Select com.sap.mdk.demo from the dropdown
   Destination	Select SampleServiceV2 from the dropdown
   Enter a path to the OData service	Leave it as it is
   Enable Offline	It’s enabled by default

   

6. In Data Collections step, select Customers (if not selected by default) and SalesOrderHeaders. Click Finish to complete the project creation.

   

7. 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.

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.

1. Right-click Application.app and select MDK: Deploy.

   

2. 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.

   

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.

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.

1. Open i18n.properties and copy & paste the below information:

   JSON

   Copy

   main_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>

2. Right-click the i18n folder and select MDK: New i18n File.

   

3. Enter the file name i18n_de, click Next and then Finish on the confirmation step.

   

4. Copy and paste the below information:

   JSON

   Copy

   main_title=Haupt
   customers_title=Kunden
   salesOrderHeaders_title=Kundenaufträge
   logout_button=Ausloggen
   sync_button=Synchronisieren
   update_button=Aktualisieren
   

   

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.

1. Click Main.page to open it in the MDK Page Editor.

2. 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.

   

3. Similarly, update the Title for both Customers and SalesOrderHeaders Section buttons.

   
   

4. Finally, update the Caption for both Logout, Sync, and Update Toolbar items.

You can find more information about Localized String formatter in help documentation.

You will add Currency and DateTime formatter in the SalesOrderHeaders_List.page.

Let’s start with Currency formatter:
Syntax: $(C, <Value>, <Currency Code>, <Locale>, <Format Options>)

1. Click SalesOrderHeaders_List.page to open it in the MDK Page Editor.

2. The Object Table control’s Status property is bound to the OData property {GrossAmount}. You will format the property value using the Currency formatter. In the Properties pane, click link icon for the Status property.

3. Cut or remove the default expression in the object browser.

4. Select i18n Objects in the dropdown and then select Currency in the formatters dropdown.

5. 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:

   JSON

   Copy

   $(C,,'EUR','',{minimumIntegerDigits:1,minimumFractionDigits:0,maximumFractionDigits:2,useGrouping:true})
   

6. You will now bind the Currency value placeholder with the GrossAmount property of the SalesOrderHeaders entity. Put the cursor before the second comma (from left side). Choose OData Objects option from the dropdown, select the GrossAmount property under the SalesOrderHeader and click Insert to generate the new expression.

   

   The new expression looks like below:

   JSON

   Copy

   $(C,{GrossAmount},'EUR','',{minimumIntegerDigits:1,minimumFractionDigits:0,maximumFractionDigits:2,useGrouping:true})
   

   Since there is already an OData property CurrencyCode part of SalesOrderHeaders 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:

   JSON

   Copy

   $(C,{GrossAmount},{CurrencyCode},'',{minimumIntegerDigits:1,minimumFractionDigits:0,maximumFractionDigits:2,useGrouping:true})
   

7. Click OK.

8. You will now format the Subhead property’s value {CreatedAt} using DateTime formatter.

   Syntax: $(DT, <Value>, <Locale>, <Timezone>)

9. Click link icon for the Subhead property.

10. Cut or remove the default expression in the object browser, select i18n Objects in the dropdown, select DateTime in the formatters dropdown.

11. 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:

    JSON

    Copy

    $(DT,,'','',{format:'medium'})
    

12. You will now bind the DateTime value placeholder with the CreatedAt property of the SalesOrderHeaders entity. Put the cursor before the second comma (from left side). Choose OData Objects option from the dropdown, select the CreatedAt property under the SalesOrderHeader and click Insert to generate the new expression.

    

    The new expression looks like below:

    JSON

    Copy

    $(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.

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.