Skip to Content

Add Internationalization and Localization to an MDK App

Localize the UI text strings and format the values according to device's or browser's or app's current locale.
You will learn
  • 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
jitendrakansalJitendra KansalAugust 5, 2022
Created by
jitendrakansal
April 14, 2021
Contributors
jitendrakansal

Prerequisites

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.

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

    2. Click Start from template on Welcome page.

      MDK

      If you do not see the Welcome page, you can access it via Help menu or via View menu > Find Command > Welcome.

    3. Select MDK Project and click Start.

      MDK

      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.

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

      Field Value
      MDK Template TypeSelect 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
      MDK

      This screen will only show up when your CF login session has expired. Enter your login credentials, click Login icon and select the org & space where you have set up the initial configuration for your MDK app.

      MDK
    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
      MDK
    6. In Data Collections step, select Customers (if not selected by default) and SalesOrderHeaders. Click Finish to complete the project creation.

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

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

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

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

      MDK

      You should see successful messages for both deployments.

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

    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
      
      MDK

      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.

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

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

    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.

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

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

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

  • Step 7

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

      MDK

      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.

      MDK

      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.

      MDK

      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.

      MDK

      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.

    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.

    MDK
  • Step 9

    What is the default value for "Format Options" generated in Currency formatter?

Back to top