Skip to Content
Author's profile photo Former Member

SAPUI5 walkthrough step 8 – translatable texts, dive in – how does i18n model work?

Welcome to my SAPUI5 Walkthrough, And Dive In blog series, where I’ll not only walkthrough the tutorial, but dive in, to explore the magic behind SAPUI5. Buckle up and sit tight, it’s gonna be a bumpy ride as I’m no expert in any way shape or form, just a humble learner who loves coding and likes to get to the bottom of things =。=


This is a fairly straight forward step, but let’s go a little bit further than what the tutorial shows us.


Let’s first create an i18n_de.properties file.

/wp-content/uploads/2015/12/01_845812.png


And also, make German as the default language in the Chrome browser language settings.

/wp-content/uploads/2015/12/02_845819.png


With those preparations done, let’s run our application, and see what will happen and more importantly, ask the question how.


We see german on the screen, yeah.

/wp-content/uploads/2015/12/03_845820.png


Here comes the questions:


(1) How does SAPUI5 pick up the browser language setting.

(2) How does SAPUI5 know which i18n file to load.

(3) How does {0} turn into ‘World’.


(1) How does SAPUI5 pick up the browser language setting.


During the Core class instantiation process, a new Configuration object will be created.

/wp-content/uploads/2015/12/04_845821.png


The configuration object will pick up our Browser language settings, and make the first entry (de) as the default language value.

/wp-content/uploads/2015/12/05_845822.png


(2) How does SAPUI5 know which i18n file to load.


We go back to the App.controller.js to instantiate an i18nModel object.

/wp-content/uploads/2015/12/06_845823.png


During the instantiation process, we’ll get the language code from the configuration object.

/wp-content/uploads/2015/12/07_845824.png


It continues to construct the correct url (base url + the sLocale code) for requesting the resource.

/wp-content/uploads/2015/12/08_845825.png


Having the resource loaded.

/wp-content/uploads/2015/12/09_845826.png


(3) How does {0} turn into ‘World’.


Start with getText method call.

/wp-content/uploads/2015/12/10_845827.png

getText invokes jQuery.sap.formatMessage method.

/wp-content/uploads/2015/12/11_845828.png


Which does its regular expression magic to replace the pattern ‘{0}’ with value ‘World’.

/wp-content/uploads/2015/12/12_845829.png


/wp-content/uploads/2015/12/13_845830.png

Mission completed  

/wp-content/uploads/2015/12/14_845831.png

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Venkatesh M
      Venkatesh M

      Hi Ji Wu,

      Very nice article,Thank you.

      I tried debugging like above, but am unable to get the screens as you got.

      /wp-content/uploads/2015/12/04_856053.png

      Could you please guide me and tell me the procedure?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks Venkatesh 🙂

      You can try set a break point at line 39629 of the sap-ui-core-dbg.js, where the the configuration object was instantiated, reload the page, then step into it when break point stops.

      /wp-content/uploads/2015/12/01_857457.png

      You'll see how the navigator languages property was picked up 😀

      /wp-content/uploads/2015/12/02_857458.png

      Author's profile photo Venkatesh M
      Venkatesh M

      Thank you  for your reply Ji Wu