Skip to Content

A technology is truly beneficial only when it can be accessed by anyone and everyone without any language constraints.

The process of preparing an application to support more than one language and data format is called internationalization.

Localization is the process of adapting an internationalized application to support a specific region or locale. Examples of locale-dependent information include messages and user interface labels. Although all client user interfaces should be internationalized and localized, these processes are particularly important for web applications because of the global nature of the web.

In SAP MII as well, it is important to understand and put forth a process to deal with localization. Though localization is not new in MII. But apart from traditional localization approach of implementing in .irpt file, this blog talks about how localization can implemented for SAP MII UI developed in SAP UI 5”


Some of the questions that this blog will help to answer:

1.) How to create a .properties file?

2.) Where do we give the .properties file?

3.) What does oModel.getResourceBundle () do?


Before starting let’s get into the basics of localization (for those who are new) & some terms you will come across:


Internationalization: Designing and developing a software product to function in multiple locales. This process involves identifying the locales that must be supported, designing features which support those locales, and writing code that functions equally well in any of the supported locales.

Localization: Modifying or adapting a software product to fit the requirements of a particular locale. This process includes (but may not be limited to) translating the user interface.

i18n: Acronym for ‘internationalization’ (‘i’ + 18 letters + ‘n’; lower case i is used to distinguish it from the numeral 1 (one)).

Resource: Any part of a program which can appear to the user or be changed or configured by the user.

Core product: The language independent portion of a software product. Sometimes, however, this term is used to refer to the English product.

Let me come to the steps with a little description to make you understand how localization can be implemented in UI 5”

Step 1: Creating a Resource File

To completely localize our application, we’ll need to gather a collection of strings appropriate for a locale and use them in appropriate places throughout the application. In order to assist us, the Java class library provides resource bundles.

.properties is a file extension for storing strings for localization, these are known as Property Resource Bundles.

Resource bundlesare a collection of*.propertiesfiles. All files are named with the same base name (prefix identifying the resource bundle), an optional suffix that identifies the language contained in each file and the fixed.propertiesextension.

A resource bundle file is a Java properties file. It contains key/value pairs where the values are the language-dependent texts and the keys are language independent text used by the application to identify and access the corresponding values.

When a localized text is needed, the application uses the SAPUI5 APIs to load the properties file that matches the current language best. To retrieve a text from the properties file, the application uses the (language-independent) key. If no text can be found for this key, the next best matching file is loaded and checked for the text. If no file matches, the raw file is loaded and checked.

Developer creates a .property file for the application; say, en_US. Please note that when we mention the property file as just “en”, it is a culture without a region. And when we mention en_US, then it is “English with American English “, culture with region.

The resource bundle can consists of the following individual files:

  • en.properties: Contains English text (without a specific country)
  • en_US.properties: Contains text in American English
  • en_UK.properties: Contains text in British English

For an example:

a. en_us.properties file

b. fr.properties file is created to support language type “French”

Step 2: Initialize Localization in View.js file

You can use the JavaScript module jQuery.sap.resources to access localized texts. The module contains APIs to load a resource bundle file from a given URL and for a given locale.

To make sure that the jQuery.sap.resources module is loaded you have to mention below in your code:


You can then use the jQuery.sap.resourcesfunction to load the resource bundle from the given URL, that is, the bundle name, and for a given locale. When no locale is specified, a default locale (en) is used. The following code snippet shows the use of thejQuery.sap.resourcesfunction to return a jQuery.sap.util.ResourceBundle:


Data Binding

You can also use data binding to access localized texts. The ResourceModel is a wrapper for resource bundles that exposes the localized texts as a model for data binding. You can use ResourceModel to bind text for properties to language dependent resource bundle properties. You can instantiate the ResourceModel either with bundleName (name of a resource bundle) or a bundleUrl, which points to a resource bundle. When you use the bundle name, make sure that the file has a .properties suffix. If no locale is defined, the current language is used. In this below example we are using bundleUrl:

/** Set the resource model with the symbolic name “i18n”


The coding of the test page looks as follows:

HTML Page:

Setting up the SAPUI5 bootstrap and required libraries in index.html file

Add the required libraries in the “data-sap-ui-libs” tag

  1. Test.View.js Page:



Language Type: ENGLISH


Language Type: French

To report this post you need to login first.

16 Comments

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

  1. Pradip Ray

    Hi Pallavi,

    Nice document. I forwarded this to couple of my friends. The only change I suggested to use the META INF language file instead of the local property files. The files you can assess via

    XMII/Catalog?ObjectName=CustomerExamples/META-INF/Bundles/<Project>_<language(2)>.properties&Mode=LOAD.


    Thanks,

    Pradip

    (0) 
  2. Harsh Sahu

    Hi Pradip,

    I am trying localization using SAPUI5 and for the same reason I am trying to call resource bundle from META-INF in js file using the syntax you had provided above. But , I am getting below error while referring to the above syntax.

    Error: resource URL ‘/XMII/Catalog?ObjectName=CustomerExamples/META-INF/Bundles/<Project>_<language>.properties&Mode=LOAD’ has unknown type (should be one of .properties,.hdbtextbundle).

    Please let me know if there is any fix to it or something that is missing in the above syntax.

    Thanks.

    Harsh

    (0) 
    1. Michael Appleby

      Please create a new Discussion marked as a Question.  Comments to a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

      (0) 
            1. christian libich

              Pradip,

              I think Mike may have got your responses confused and thought you were Harsh. I think you can write a blog about your solution if you desire.

              Regards,
              Christian

              (0) 
    2. Pradip Ray

      Save this as irpt file

      <SERVLET NAME=”Catalog”>

      <HR>

      Illuminator Content Here

      <HR>

      <PARAM NAME= “Mode” VALUE=”LOAD”>

      <PARAM NAME= “ObjectName” VALUE=”Default/META-INF/Bundles/Default.properties”>

      <PARAM NAME= “Stylesheet” VALUE=”/XMII/CM/Default/XSL/metaInf.xsl”>

      </SERVLET>

      Copy these GitHub Files:

      ilyakharlamov/xslt_base64 · GitHub

      You have to change the path of the files as per your server.

      Now write the xsl as below at Path /XMII/CM/Default/XSL/metaInf.xsl:

      ——

      <?xml version=”1.0″ encoding=”UTF-8″?>

      <xsl:stylesheet version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform

        xmlns:java=”http://xml.apache.org/xslt/java

            exclude-result-prefixes=”java”

        xmlns:b64=”<the path where you saved the GitHub files>”>

        <xsl:output method=”text” media-type=”text/csv” encoding=”UTF-8″/>

        <xsl:include href=”base64.xsl”/>

        <xsl:template match=”/”>

        <xsl:for-each select=”Rowsets”>

        <xsl:for-each select=”Rowset”>

        <xsl:for-each select=”Row[Name=’Payload’]/Value”>

        <xsl:variable name=”value” select=”.”></xsl:variable>

        

        <xsl:call-template name=”b64:decode”>

                  <xsl:with-param name=”base64String” select=”$value”></xsl:with-param>

                   </xsl:call-template>

        </xsl:for-each>

        </xsl:for-each>

        </xsl:for-each>

        </xsl:template>

      </xsl:stylesheet>

      ————–

      You may need to correct the GitHub file for new line.

      Now use the irpt file in the URL parameter.

      (0) 
      1. christian libich

        Pradip,
        Thanks for coming back and posting a more complete solution. I had hoped there was a way to do this without the base 64 conversion that I had not discovered. 😐   

        ❗ The Catalog service is undocumented by SAP and there have been some changes over the years. I recommend caution in using it this way in a production environment.

        I think a better solution would be to ask SAP to make improvements to the MII localization infrastructure to accommodate UI5. 

        Regards,
        Christian

        (0) 

Leave a Reply