Building the User Interface with SAP Fiori Tools

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

After completing this lesson, you will be able to:

  • Create a responsive application 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 will 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 – by using the instructions provided below, you can perform the steps in your SAP BTP account.
  2. Platform Simulation – follow the step-by-step instructions within the simulation.
Note
We strongly recommend to perform the steps in the live environment first.

The following simulation reproduces the full exercise execution:

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 Home tab of SAP Business Application Studio.

    2. Find the User Interface (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. Choose Next.

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

    5. Choose UI Application Template as List Report Object Page. Choose Next.

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

    7. 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 InformationFormFields.

    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. In the Value Help screen, choose Add Column button.

    9. In the dropdown, select BusinessPartnerFullName.

    10. Repeat step h) and i) with BusinessPartnerIsBlocked.

    11. Disable the Display as Dropdown toggle button.

    12. Choose Apply.

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

Save progress to your learning plan by logging in or creating an account

Login or Register