Building the User Interface with SAP Fiori Tools

Objective

After completing this lesson, you will be able to create a responsive application user interface

Reference Links: Creation of a responsive application user interface

To read more about the creation of a responsive application user interface, see here: Create a template-based responsive user interface

Create a Responsive Application User Interface

Business Scenario

After defining the service and data model as foundation of your application, we will add an SAP Fiori elements-based responsive user interface to the application, using SAP Fiori tools.

In this exercise, you perform the following tasks:

  • Create a user interface showing a list of Risks and their details.
  • Add further content to the List Report page of the Risks application user interface.
  • Add further content to the detail Object Page of the Risks application user interface.

Prerequisites

You have successfully completed the previous exercises. You have created the data model and service for risks, and imported the business partner external service.

Note

Note that some of the services that this learning journey links to, can incur costs.

If you are concerned about charges, you can opt to skip the corresponding exercises and watch the simulation instead.

Exercise Options

You can perform this exercise in two ways:

  1. Live Environment / Practice System: you can perform the steps provided below, either in your SAP BTP account or you use the "Practice System Access" provided below.
  2. Simulation: follow the step-by-step instructions within the simulation.

Note

You can try out this exercise in the practice system below. Open the system by choosing the button at the end of this page.

Note that the practice system access only covers access to the SAP Business Application Studio. When deploying to an SAP BTP runtime or consuming other SAP BTP services, you have to use an SAP BTP Trial Account, Free-Tier, or an Enterprise Account.

Note

We recommend performing the steps in the live environment first.

The following simulation reproduces the full exercise execution:

ExerciseStart Exercise

Task 1: Create a User Interface

Steps

  1. Create a user interface.

    Use the following data:

    FieldValue
    Display nameRisks
    Description(of your choice)
    UI Application TypeTemplate-Based, Responsive Application
    UI Application TemplateList Report Object Page
    Main Entityrisks

    1. Navigate to the Storyboard tab of SAP Business Application Studio.

    2. Find the UI Applications (see: User Interface) tile, and choose the + icon to add a new user interface.

    3. A screen will show up where you can add the Display name: Risks, and enter a Description of your choice.

    4. Make sure to select RiskManagementService as DataSource.

    5. Choose Next.

    6. Select UI Application Type as Template-Based, Responsive Application to create an SAP Fiori elements based UI. Choose Next.

    7. Choose UI Application Template as List Report Page. Choose Next.

    8. Below Data Objects, select risks as Main Entity, to show risks entity in UI. Choose Finish.

    9. Wait until the Page Map of the user interface, showing two pages, is opened on the right side of the screen.

Task 2: Update the List Report

Steps

  1. Update the list report.

    Use the following data:

    FieldValue
    Columnssupplier_BusinessPartner

    1. Find the entry List Report on the Page Map, and choose the Edit icon to edit.

    2. In the Page Editor, expand the Columns section, choose the + icon, and select Add Basic Columns from the dropdown.

    3. In the pop-up, choose supplier_BusinessPartner for Columns. Choose Add.

Task 3: Update the Object Page

Steps

  1. Update the object page.

    Use the following data:

    FieldValue
    Fieldsmiti_ID
    BusinessPartnerFullName
    BusinessPartnerIsBlocked
    Display typeValue Help
    (for)BusinessPartnerFullName
    BusinessPartnerIsBlocked

    1. Choose the arrow to navigate back and find the entry Object Page on the Page Map. Choose the Edit icon to edit.

    2. In the entry Sections, open General Information → Form → Fields.

    3. Choose the + icon to add new fields to the UI. In the dropdown, select Add basic fields.

    4. See the table above to add the following fields from the dropdown:

      • miti_ID
      • BusinessPartnerFullName
      • BusinessPartnerIsBlocked

    5. Choose Add.

    6. Choose supplier_BusinessPartner from the Fields list in the outline panel to the left.

    7. Find the entry Display Type in the property panel to the right, and choose Value Help in the dropdown.

    8. Choose the link Edit properties for Value Help below the Display Type drop-down list box.

    9. In the Value Help screen, check if the following attributes are available as Result List Properties.

      • BusinessPartnerFullName
      • BusinessPartnerIsBlocked

    10. You may decide to delete the other value help properties. Use the recycle bin icon in that case.

Log in to track your progress & complete quizzes