Skip to Content

Although I travel a lot, I only feel competent in English. When presented with screens on ATMs, ticket kiosks and gas pumps in other countries, I get anxious. Even selecting the option to display in English, if there is one, is tricky as you need to at least know the term for “language” in the default language. I can only imagine what it might be like to use a mobile app in a language that I am not comfortable with. On top of that, imagine the mistakes I might make if I read commas in numbers as denoting thousands/millions/billions vs. decimal places!

Displaying your app in the user’s language and with dates/times/currency formatted as they expect is critical to using the app correctly and to overall app requirements. Mobile development kit, included in SAP Cloud Platform Mobile Service for development and operations , now supports localization of the app’s labels on pages, buttons and messages using standard I18N properties and translation files. Mobile development kit also supports regionalization of displayed values from the source data into locale-specific date, date time, number and currency formats. The Mobile development kit client automatically uses the language based on the end-user settings from the device. On iOS, it uses the settings in the Language & Region from Settings. If there are no translations for the user language, it reverts to the default language.

It is a straightforward  exercise to localize and regionalize your app. Below is an example that should get you started. The product documentation also has a good section on Internationalization and Localization of App Metadata link

Here is a screen shot of a page in my app. Notice the highlighted value for the Headline Text field value. Instead of the text, which is displayed as “Customer Product Sales”, you see “$(L,overview_header_headline)”. The format for localized strings is $(L,<Localization Key>). Let’s click on the link button to the right of the field to bring up the Object Browser to have a closer look at where this expression came from.

 

With mobile development kit 2.1 release, the Object Browser now displays I18n objects as listed below.

 

Select I18n Objects then make sure the Type is Localizable Strings to browse your I18n translation values. Your app probably does not have any localizable strings as you first need to build up the i18n.properties file in your app. Once you do you will see the list of i18n labels to add into the expression field.

 

Here’s an example of what the browser displays when you have an i18n.properties file. My i18n.properties file has several lines and one line is overview_header_headline= Customer Product Sales

 

As you probably know the i18n.properties file is a simple text file in label=value format. The values in i18n.properties files are in the default language, English in this case. The value gets displayed any place in the app you specify the label. From the screen shot of my i18n.properties file, you can see that’s where the app will get the value “Customer Product Sales”.

There are several methods to build your i18n.properties file but one method many developers use is to keep the i18n.properties file open in the editor and create a new entry in the file as you find places where you want to display text, adding the label and never entering text directly into the object’s field. Using this method you would first add the label and value to the 18n.properties file. Then add the label to the object. If it displays what you typed as the value in the properties file, you did it correctly since the WebIDE editor will evaluate the expression as it displays the object in the editor.

Once you have a complete file, you then get the file translated into the languages that you need to support. You can use the service of your choice including SAP Cloud Platform Translation Service to generate the language files for your app. The translation service you use will likely create the correct file names but if you use a different service you should read the section on Nomenclature of i18n files in the mobile development kit documentation link  Even more on the topic in the WebIDE doc section on internationalization & how to configure CP Translation service link

 

Here’s the German translation that will be used in my sample app. Your app could have other languages and hence other files. The languages that are fully supported today in Mobile development kit are English, French, German, Portuguese and Spanish.

 

Mobile development kit displays the translated text so you can quickly and easy way to verify that the text is correct and that it fits in the object space. It also provides you with a visual way to make sure you have translations for each label and that you specified the label (instead of typing text). As you can see in the screen shot below, you do this by clicking on the Language button and then selecting the language file to use. The editor then displays all object text using the values from that language file.

 

You can see that my landing page is now using German text. You may also be able to spot an error.

 

One of my toolbar buttons is displaying “All Orders”, definitely not translated. So let’s fix that by replacing the current expression “All Orders” with the correct I18n Object “orders_button”.

First, select the toolbar item we want to edit. Then open the Object Browser on the field under Caption.

 

Now I select “orders_button” and either click on the button lablled “Insert to Expression” or double click “orders_button” to add it into the Expression field. Then I click OK.

 

Once I do that, you can see that the button displays text from the German translation file.

 

You can translate any text displayed in pages, action messages and buttons using this process. You can also use translate text in rules. The screen shot below shows an example of how to use translation files when your rule displays text.

 

In addition to localized string formats, mobile development kit also now supports localized display of your date, time, date time, currency, number, percent and scientific notation data. Adding the I18n type to the expression is a little tricky if you already have the OData object in the expression as formats are $(typecode,{odata value}). The Object Browser inserts items into the expression where the cursor is positioned in the Expression field. So while it’s not how I would think of building the expression, the easiest way to complete this task is to first select the I18n Date object and add that to the expression – similar to adding functions in a spreadsheet.

Let’s go through an example. I start by opening my Order Details page and selecting Created At. You can see in the screen shot below that I have the Value field is blank.

 

Next, I click on the link icon to the right of the Value field to open the Object Browser. I then select I18N Objects, then Date.

 

I then click on the Insert to Expression button. The screen shot below shows the result.

 

That’s just the formatting expression. I still must add my OData Object value for the date this order was created. To do that I click on the Objects list and select OData Objects.

 

Next, I type Created into the search box and selected the OData object CreatedAt as you can see in the screen shot below.

 

Now the tricky part. I need to add this to the expression, but it needs to be added between the coma and the right parenthesis. To do this I position my cursor between the coma and the right parenthesis and click on the Insert to Expression button. Below is what I ended up with.

 

I click OK to save this expression and value.

 

Here’s an example of an expression that uses Currency. Notice that it’s a little more complex than date. In fact, it’s really the only complex type.

 

Once again, the mobile development kit documentation covers the topic of localizing data values with usage and the display format options for each supported type. link

Keep in mind that mobile development kit does not convert your data (like USD to EURO currency, for example), it simply uses the regional formatting to display the values from your source data.

One area where special attention is required is the Welcome screen for the mobile development client. Through the use of the BrandedSettings.json file you can control the text for things like the Application name, detail message and Start button. If you want these to be displayed in different languages, then you can use the same Localizable string syntax to lookup the translated string associated with the specified key.

For example:

“DetailLabelViewText”: “$(L,detail_label_view_text)”,

Additionally, you can also supply one or more overrides to the default message strings that are displayed.  These can be overridden and also translated in the same way. If you include a value for any of the Onboarding customizations this value will supersede the built-in value and you are then responsible for providing the translation to any of the languages you want to use. Even if you do not change the value of the key, the default translations will not be applied.

If you add custom extensions, you will also need to consider dialogs, messages and formats and work within the Swift framework and the mobile development kit app to handle those.

The new features of mobile development kit give you the ability meet your user requirements for local language and regional display formats. But that’s just one of the new features. You can learn more about new 2.0 SP01 features in Sue’s blog here.

 

Learn more about the topic:

Language Support in the mobile development kit documentation on the SAP help portal link 

Internationalization including how to configure SAP Cloud Platform Translation Service in the WebIDE Full-Stack on the SAP help portal link

 

More mobile development kit learning:

If this is your first introduction to the mobile development kit, I suggest you first review the Learning Map which provides overview topics, blogs, videos, and tutorials.

Next, check out our blogs. This blog, Latest Mobile Development Kit Blogs and Videos , is where we keep the up-to-date list of all blogs, videos, training, blogs, downloads, etc.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply