Multi language label texts handling in CDS based Fiori Elements apps

[mohit_bansal3]

Fiori Elements Multi Language Text Handling:

This Blog is about maintaining the multi- language label text for Fiori elements-based applications which is generated with the help of CDS. Annotations plays a key for role generating and rendering of the respective UI applications.

(For more information on Fiori Elements check this link: https://experience.sap.com/fiori-design-web/smart-templates/)

Generally, we use I18N properties for Language based text handling in UI5 applications but in case Fiori Elements CDS based applications, UI elements texts can be handled effectively with CDS UI annotations and Translator editor.

How to guide

• Create the consumption CDS with the help of UI Annotations(which can be exposed for ODATA , directly or via SEGW reference data source).


• Use Label Annotation for defining the text for the respective UI elements (for example: Line Item, selection fields, header, Identification etc)


• Once CDS are created and activated, maintain the multi-language Text for the CDS in Translator editor -SE63


• Create the Fiori elements-based app from the WEBIDE tool, select the Template (i.e. List Report/ Overview Page)

 

Detailed explanation with example

Consumption CDS with the UI annotations



Annotations for Label for the UI Elements as below:

 



 

Maintain Text for the UI Labels used in CDS

a) Go to T Code SE63 and select Short Text



b)Drill Down to A5 and select DDLS- CDS views



c) Enter the CDS Information and Maintain the Texts. In the below example, we are maintaining the Text in French(FR), Click on Edit.



d)Text Maintenance in French Language, For Example I have used “FR” as prefix to show the Text in French:



 

Create the Fiori Elements based List Report

Consume the generated ODATA Service in WEBIDE and select List Report. For more information for generating the list report refer following link

ABAP Programming Model for HANA

Testing the Application(Multi Language Test)

Initially I have default language set in Chrome Browser as English, report will show all the label in English

 



Now change the Language to French (FR) in Chrome browser , clear the cache and test again.

 



Output 

Clear the browser cache and execute the application again, we can see all the Labels for which Texts are maintained in French



 

Summary:

Multi Language  Label texts can be maintained directly by backend Translator edittor(SE63) for the CDS based Fiori elements applications. No need for maintaining label texts explicitly in generated UI5 application's I18N files.