Add Localization to Luigi UI5 Micro-Frontend

In this step, you will add a function to get the current language from Luigi Client and then update it, so that the language of the UI5 micro-frontend can be changed accordingly.

Go to the Order.controller.js file and add this below onInit: function (Controller) {:

const updateCurrentLanguage = () => {
  const currentLanguage = LuigiClient.uxManager().getCurrentLocale();
  sap.ui.getCore().getConfiguration().setLanguage(currentLanguage);
}

LuigiClient.addInitListener(updateCurrentLanguage);

Edit the ui5-mf/uimodule/webapp/index.html file by adding the default language (EN) around line 12, above data-sap-ui-theme:

 data-sap-ui-language='en-US'

This step involves the standard process in UI5 for providing translation.

1. Edit the ui5-mf/uimodule/webapp/manifest.json file by adding a model object into the sap.ui5 object:

   "models": {
       "i18n": {
         "type": "sap.ui.model.resource.ResourceModel",
         "settings": {
           "bundleName": "luigi.ui5.i18n.i18n"
         }
       }
     },
   

2. Edit the ​ui5-mf/uimodule/webapp/view/Order.view.xml ​file by marking the translated target text. Replace line 17 with:

   <ObjectAttribute text="{i18n>Quantity}: {orderQuantity}" />
   

Now, your app should be complete and you can run it locally to see if everything works. First, open a terminal/command prompt window and navigate to your project folder.

1. Navigate to the React app and run it:

   cd react-core-mf
   

   and:

   npm start
   

2. In another window, navigate to the UI5 micro-frontend and run it:

   cd ui5-mf
   

   and:

   npm start
   

3. See your completed app at http://localhost:3000/. Try changing the language and clicking around. If there are errors, retrace your steps in the tutorial or compare with the finished app on SAP Samples.