Adjusting the Standard SAP Fiori Elements UI Texts

Objective

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. For that right-click on i18n and select New File. Enter customTravel.properties.

      Note

      The file name must end with .properties.

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

      Code Snippet
      1
      C_TRANSACTION_HELPER_CONFIRM_DELETE_WITH_OBJECTTITLE_PLURAL=Do you really want to delete these travels?

      Note

      You can overwrite the standard UI texts provided by SAP Fiori elements with your application-specific texts. 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. For more information, see Localization of UI Texts.

    5. Register your newly created i18n file in manifest.json. For that add the following code snippet to the manifest.json file under sap.ui5 > routing > targets > TravelList > options > settings:

      Code Snippet
      1
      "enhanceI18n" : "i18n/customTravel.properties",

  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

Learning

SAP FacebookSAP YoutubeSAP LinkedIn