SAP Learning Journey

Adjusting the Standard SAP Fiori Elements UI Texts

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Adapt standard SAP Fiori elements UI texts

Replacement of Standard UI Texts

An SAP Fiori elements application generates various controls such as tables, buttons, and fields at runtime, based on the predefined templates, annotations, and settings.

SAP Fiori elements provides standard texts for UI controls. Standard texts are available in the generic framework (for example, the button texts for delete or create actions) and belong to the template components (for example, list report and object page).

However, you can replace some standard UI texts for apps that you have created with SAP Fiori elements to suit the application-specific needs.

For example, an application with a button named Create a Travel improves the user experience more than a button named Create.

For more information about the texts that can be overwritten, see Localization of UI Texts.

Change the Standard UI Texts

In this exercise, you will adapt the standard UI texts provided by SAP Fiori elements with custom UI texts.

Task Flow

In the Manage Travels application, you will adapt the standard UI text that appears on the Delete confirmation dialog when you try to delete multiple items.

Prerequisites

You have completed the exercise Adjust the Object Page of the Display Customers App in the unit Getting an Overview of SAP Fiori Tools (lesson: Creating a Second App using the Application Generator).Alternatively, you can check out its solution branch: configure-object-page-customer-app. Note that the flexible column layout configured in the previous exercise Enable the Flexible Column Layout has been disabled for this exercise and all upcoming exercises of this training. You can keep the flexible column layout enabled if you wish.

Watch the Simulation and Perform the Steps

This exercise contains a simulation that guides you through the list of steps below. Performing these steps allows you to follow the simulation in your trial account.

ExerciseStart Exercise

Steps

  1. Replace the standard UI text used in the confirmation popup for deleting several items in the list report.

    1. Open SAP Business Application Studio.

    2. In the Explorer window, select the Projects/webapp/i18n folder.

    3. Create a new file named customTravel.properties.

      Note
      The file name must end with properties.

    4. Add the following application-specific text to the customTravel.properties file:

      Code snippet
      C_TRANSACTION_HELPER_CONFIRM_DELETE_WITH_OBJECTTITLE_PLURAL=Do you really want to delete these travels?
      Expand
      Note
      • You must add the new UI text to the custom resource bundle. Use the technical key specified by SAP Fiori elements for a certain UI text. These keys are provided in the documentation of SAP Fiori elements.

      • Translators access the i18n.properties file to view the new UI texts and add their language-specific translations to the corresponding language-specific file. For example, i18n_de.properties is the language-specific file for German.

    5. In the manifest.json file, add the following code snippet to the settings of TravelList:

      Code snippet
      "enhanceI18n" : "i18n/customTravel.properties",
      Expand

  2. Check the adapted UI text that appears on the Delete confirmation dialog for deleting several items.

    1. Open the Manage Travels application.

    2. Select the items in the Travels table that you want to delete.

    3. Choose Delete to delete the selected items.

      Result

      The Delete confirmation dialog now appears with the adapted UI text, Do you really want to delete these travels?

Result

You have replaced the standard UI text provided by SAP Fiori elements with a custom text.

Note

Log in to track your progress & complete quizzes