Exercise: Generating a User interface

After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Generate a User Interface (UI) using SAP Fiori Elements

Generate a User Interface using SAP Fiori Elements

Business Example - Introduction

The SAP Fiori Elements app is an application that uses SAPUI5, its controls, and its Model View Controller (MVC) concepts. Most of the code of an SAP Fiori Elements app is outside the project, managed centrally by the SAP Fiori Elements team at SAP. The code inside a project only references these central components, which take care of creating the UI according to the latest SAP Fiori design guidelines and covers all the controller logic for you out of the box. The UI can be influenced by OData annotations. They determine, for example, which properties of an OData service make up the columns of a table that displays the content of the service.

Exercise Options

You can perform this exercise in two ways:

  1. Live Environment – using the following instructions provided, you can perform the tasks in the SAP BTP Free Tier account
  2. Platform Simulation – follow the step-by-step instructions within the simulation by choosing the Start Exercise button
We strongly recommend that you first perform the tasks in the live environment.


Ensure that by this moment you have successfully implemented the CAP-based service as described in the previous exercise.


  1. Generate the UI with an SAP Fiori Elements Template.

    1. In SAP Business Application Studio, invoke the Command Palette (ViewFind Command or Cmd+Shift+P) and choose Fiori: Open Application Generator.

    2. Choose SAP Fiori Elements and List Report Object Page and select Next.

    3. In the next dialog, choose Use a Local CAP Project and point to the folder of your current RiskManagement project. Select RiskService (Node.js) as the OData service and select Next.

    4. As the Main entity, choose Risks, and as answer to the question, choose Yes.

    5. Enter risks as the module name. Enter Risks as the application title and Risk Management as the description for the application. Enter riskmanagement as the namespace. Choose No for all additional settings. Choose Finish.

      (If you get a pop-up that says A project has been generated. What would you like to do with it?, you can ignore it and just close the pop-up).

      The application is now generated and after a couple of seconds you can see it in the app folder of your project. It contains a risk-management and a webapp folder with a Component.js file, which is characteristic for a UI5 app. However, the code there is minimal and it basically inherits its logic from the sap/fe/core/AppComponent.

    6. If cds watch isn't still running from the previous lesson, execute it in a terminal and press on the Open in New Tab button in the right lower corner. If it is still running from the last exercise, it is enough to refresh the browser page where it is running.

      You can now see that cds watch has discovered an HTML page in your app folder:

      You also see the launchpad.html file, which was part of the cloned starter template from GitHub. With this, you will get the look and feel of the SAP Fiori Launchpad integration and you are able to navigate through the SAP Fiori Elements User Interfaces. We recommend opening the app using the launchpad instead of opening it directly.
    7. Click on the launchpad.html link. On the launch page that now comes up, Choose the Risks tile.

      You can now see the list page, it looks like this:

      Unfortunately, the app looks rather empty and not yet ready for the rollout to the end users. For example, the list has still its technical column names. This is because we miss an essential part of a SAP Fiori elements application that tells it about columns, form fields, and many other things: it is missing UI annotations.

      UI-specific annotations can either be added manually to the annotations files (.cds-files inside the generated risk-management UI folder) or visually with the SAP Fiori Tools. These tools are pre-installed in the SAP Business Application Studio and in the following steps you will use them to customize the user interface.
  2. Open the Page Map.

    When it is opened, it should look like this the following:

    To enter the editing mode for the List Report page, select the Pencil icon.

  3. Choose the plus sign to add a filter field.

  4. Choose prio_code from the dropdown menu and choose Add

  5. Rename the field and activate localization (i18n).

    Select the added filter field under Filter Fields , set the title to Priority, and choose Apply.

    By clicking on Apply, the _i18n folder will be added to your project and the name is set to Variable {i18n>Priority}. When you access the application later, your browser's default language will be used to choose from which language to choose. Read more about Localization, i18n in CAP here.

  6. Update the table columns.

    1. Rename the table columns like you renamed the filter field. Ensure to click on the globe icon to activate localization. See the table below for the new names of the columns.

      Actions for Updating Table Columns

      Old NameNew NameAction
      titleTitleRename & Activate Localization
      ownerOwnerRename & Activate Localization
      prio_codePriorityRename & Activate Localization
      descr Remove this column
      impactImpactRename & Activate Localization
    2. Add a new column for Mitigation Description

      Select the + sign next to Columns to add a new column. Choose miti/descr from the dropdown menu.

    3. Rename the mitigation field to Mitigation and activate localization by choosing the globe icon. Then rearrange the order of columns by dragging and dropping the Mitigation column further up.

  7. Go back to the Page Map

  8. Open the Object Page in Editing Mode.

  9. Configure the Header Section of the Object Page.

    Set the following properties:

    Object Page Header

    Description TypeProperty
    Icon URLsap-icon://alert
    It should look like the following:

  10. Remove the General Information section under Sections.

    Choose the delete icon for the General Information section.

  11. Add a new Group Section and name it Risk Overview.

  12. In the newly created Risk Overview section, add a new Form Section and call it Risk Details.

  13. Add Basic Fields to the Risk Details section.

    Choose title, owner, descr, prio_codeand impact.

    It should then look like this:

  14. Rename the fields accordingly and enable localization (i18n).

    Repeat this step for all added fields (owner → Owner, descr → Description, prio_code → Priority, impact → Impact).
    It should look like this:

  15. Add a new Group Section and call it Mitigation Overview

  16. Add a new Form Section and call it Mitigation Details

  17. Add Basic Fields to the Mitigation Details 'Form'

    1. Choose Add Basic Fields

    2. Choose miti_ID, miti/owner, miti/timeline and select Add.

  18. Rename and configure the added basic fields.

    1. Rename and configure miti_ID.

      Rename mitigation to Mitigation and enable localization by choosing the globe icon. Additionally, choose descr as value for the Text property. For Display Type choose Value Help. Configure the Value Help in the dedicated pop-up as shown in the following figure.

    2. Rename and configure owner

    3. Rename and configure the timeline field.

  19. Preview the application.

    Ensure that the cds watch is still running. If not, run cds watch in your terminal again.
    1. Select an entry on the list page.

      Choose Go to fetch the data and select one entry to navigate to the object page.

    2. Choose Edit to update the entry and test the value help.

    3. Choose a different Mitigation and choose Save.

      It will look like the following:


Well done! You have created a SAP Fiori Elements UI for your application. In the next unit, you will add custom business logic to your application to add highlighting to some fields.

Log in to track your progress & complete quizzes