SAPUI5 – Resource Model for Freshers

WONDERING WHAT 18 MEANS?

18 stands for number of alphabets between I & N in InternationalizatioN. Did you just count the alphabets? Did anyone tell you this before?

We use internationalization and localization in our SAPUI5 application for replacing the hard coded text from the application. It is one of the best practices of SAP to use i18n for hard coded texts. Generally, we use Resource Model for defining it, since it is one-time binding.

Use Case

We are going to display a table where the column heading texts will be translatable according to our i18n model.

Steps:

  1. Create a new folder i18n and file inside the folder
  2. Configure in manifest.json
  3. Add the translatable texts in i18n files
  4. Do the binding in view.xml
  5. Execute the application

Step – 1: Create a new folder i18n and file inside the folder as shown below.

Step – 2: Configure in manifest.json.

In our manifest.json we have to configure the above created i18n file under models area within SAPUI5 section as shown below.

Note: I have done the configuration directly in code editor. If you use descriptor editor then automatically the code will generated .

Step-3: Add the translatable texts in i18n files.

I am going to provide texts for 3 different language files.

For English(default) – i18n.properties

For Tamil – i18n_ta. Properties

For German – i18n_de. Properties

Note: The above Tamil and German texts has been translated using Google translate. What would we do if Google becomes a paid service or shuts down one day.

Step-4: Do the binding in view.xml as shown below.

Step-5: Execute the application

Note: From the above image we could see, by default it displays English language text.

If we want to display the text in Tamil language, then append the text ‘&sap-ui-language=ta’ at the end of URL.

Now execute the application to see the output in another language.

If we need the text in German language, do the same as shown below (‘&sap-ui-language=de’) and execute the application.

Now execute the application to see the output in another language.

DO WE NEED TO CHANGE THE LANGUAGE AT THE URL EVERY TIME?

A big NO..

In real time if you are logging into a Fiori or UI application, it will open the Fiori Launchpad page where you have to enter your credentials as shown below.

From the above image you can see the option Language where you can select your language there so that the corresponding i18n file for the selected language will be called and displays the texts.

As easy as that. Right?

In one of our US project with German roll out, the Fiori App was opening in only German by default. Even for our US client. That was a tricky situation.