Building the User Interface with SAP Fiori Tools

Business Scenario

After defining the service and data model as the 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.

Task 1: Create a User Interface

Steps

Create a user interface.
Use the following data:
Field Value
Display name Risks
Description (of your choice)
UI Application Type Template-Based, Responsive Application
UI Application Template List Report Object Page
Main Entity risks
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 element 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 the 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.

Field	Value
Display name	Risks
Description	(of your choice)
UI Application Type	Template-Based, Responsive Application
UI Application Template	List Report Object Page
Main Entity	risks

Task 2: Update the List Report

Steps

Update the list report.
Use the following data:
Field Value
Columns supplier_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.

Field	Value
Columns	supplier_BusinessPartner

Task 3: Update the Object Page

Steps

Update the object page.
Use the following data:
Field Value
Fields miti_ID
BusinessPartnerFullName
BusinessPartnerIsBlocked
Display type Value 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 preceding table 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.