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 a mobile project in SAP Build Lobby.

1. In the SAP Build Lobby, click Create > Create to start the creation process.

   

2. Click the Application tile and choose Next.

   

3. Select the Mobile category and choose Next.

   

4. Select the Mobile Application to develop your mobile project in SAP Business Application Studio and choose Next.

   

5. Enter the project name mdk_i18n_l10n (used for this tutorial) , add a description (optional), and click Review.

   

   SAP Build recommends the dev space it deems most suitable, and it will automatically create a new one for you if you don’t already have one. If you have other dev spaces of the Mobile Application type, you can select between them. If you want to create a different dev space, go to the Dev Space Manager. See Working in the Dev Space Manager.

6. Review the inputs under the Summary tab. If everything looks correct, click Create to proceed with creating your project.

   

7. Your project is being created in the Project table of the lobby. The creation of the project may take a few moments. After the project has been created successfully, click the project to open it.

   

8. The project opens in SAP Business Application Studio.

   

   When you open the SAP Business Application Studio for the first time, a consent window may appear asking for permission to track your usage. Please review and provide your consent accordingly before proceeding.
   

   

The Storyboard provides a graphical view of the application’s runtime resources, external resources, UI of the application, and the connections between them. This allows for a quick understanding of the application’s structure and components.

• Runtime Resources: In the Runtime Resources section, you can see the mobile services application and mobile destination used in the project, with a dotted-line connected to the External Resources.
• External Resources: In the External Resources section, you can see the external services used in the project, with a dotted-line connection to the Runtime Resource or the UI app.
• UI Application: In the UI Applications section, you can see the mobile applications.

1. Click on + button in the Runtime Resources column to add a mobile services app to your project.

   

   This screen will only show up when your CF login session has expired. Use either Credentials OR SSO Passcode option for authentication. 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.

   

2. Choose myapp.mdk.demo from the applications list in the Mobile Application Services editor.

   

3. Select com.sap.edm.sampleservice.v4 from the destinations list and click Add App to Project.

   

   You can access the mobile services admin UI by clicking on the Mobile Services option on the right hand side.

   In the storyboard window, the app and mobile destination will be added under the Runtime Resources column. The mobile destination will also be added under the External Resources with a dotted-line connection to the Runtime Resource. The External Resource will be used to create the UI application.

   

4. Click the + button in the UI application column header to add mobile UI for your project.

   

5. In the Basic Information step, select the MDK Template Type as List Detail, leave the other options as they are. Since the option to Enable Auto-Deployment to Mobile Services After Project Creation is set to Yes, the MDK project will automatically be deployed to the Mobile Services after it is generated. Click Next to continue.

   

   The List Detail template generates the offline or online actions, rules, messages and pages to view records. More details on MDK template is available in help documentation.

6. In the Data Collections step, provide the below information and click Finish. Data Collections step retrieves the entity sets information for the selected destination.

   Field	Value
   Enter a path to service (e.g. /sap/opu/odata/sap/SERVICE_NAME)	Leave it as it is
   Select the Service Type	Leave the default value as OData
   Enable Offline	It’s enabled by default
   Select all data collections	Leave it as it is
   What types of data will your application contain?	Select Customers (if not selected by default) and select SalesOrderHeaders

   

   Regardless of whether you are creating an online or offline application, this step is needed for app to connect to an OData service. When building an MDK Mobile application, it assumes the OData service created and the destination that points to this service is set up in Mobile Services.

   Since you have Enable Offline set to Yes, the generated application will be offline enabled in the MDK Mobile client.

   Data Collections step retrieves the entity sets information for the selected destination.

7. After clicking Finish, the storyboard is updated displaying the UI component. The MDK project is generated in the project explorer and automatically deployed to the Mobile Services based on your selections. You will now see a QR code for onboarding the mobile app. Leave the Onboarding dialog box open for the next step.

   
   

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. Navigate to MDK_i18n_l10n | i18n, right click on the i18n.properties and open it with Text Editor. Replace the existing content with below.

   JSON

   Copy

   Main_title=Main
   Customers=Customers
   Customer_Detail=Customer Detail
   SalesOrderHeaders=SalesOrderHeaders
   SalesOrderHeader_Detail=SalesOrderHeader Detail
   SalesOrderItem_Detail=SalesOrderItem Detail
   Support_popovermenuitem=Support
   About_popovermenuitem=About
   

   

   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 as i18n_de, click Finish.

   

4. The i18n_de.properties opens in the i18n Editor. Provide the following values for the existing keys under i18n_de column.

   Key	Value
   Main_title	Haupt
   Customers	Kunden
   Customer_Detail	Kundendetail
   SalesOrderHeaders	Verkaufsauftragsübersicht
   SalesOrderHeader_Detail	Verkaufsauftragskopfdaten
   SalesOrderItem_Detail	Verkaufspositionsdetails
   Support_popovermenuitem	Unterstützung
   About_popovermenuitem	Über

   

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. Once the page opens in the page editor, click on the white area to select it’s Action Bar. 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. Navigate to Actions → Application → UserMenuPopover.action and update the Title for both Support and About Popover items to $(L,'support_popovermenuitem') and $(L,'about_popovermenuitem') respectively.

   

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

You will add Currency formatter in the SalesOrderHeaders_List.page.

Syntax: $(C, <Value>, <Currency Code>, <Locale>, <Format Options>)

1. Navigate to Pages → com_sap_edm_sampleservice_v4_SalesOrderHeaders → SalesOrderHeaders_List.page.

2. You’ll update the Object Table control’s StatusText property which is currently bound to the OData property {GrossAmount}. You will format the property value using the Currency formatter.

3. In the Properties pane, click the link icon for the StatusText property.

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

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

6. Click Insert to generate the expression, do not close the Object Browser window.

   

   The generated expression looks like below:

   JSON

   Copy

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

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

8. Choose OData Objects option from the dropdown, select the GrossAmount property under the SalesOrderHeader. Click Insert to generate the expression, do not close the Object Browser window.

   

   The new expression looks like below:

   JSON

   Copy

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

9. You will now bind the Currency Code placeholder. 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. Put the cursor before the third comma (from left side). Select the CurrencyCode property under the SalesOrderHeader and click Insert to generate the expression.

   

   The generated expression looks like below:

   JSON

   Copy

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

10. Click OK.

    For more details on these formatters, check the help documentation.

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

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

2. Click the link icon for the Subhead property.

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

4. 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'})
   

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

   

6. The new expression looks like below. Click OK.

   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.

You will now deploy the updated project to your MDK client.

Click the Deploy option in the editor’s header area, and then choose the deployment target as Mobile Services