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.
NoteNote 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:
- Live Environment – by using the instructions provided below, you can perform the steps in your SAP BTP account.
- Platform Simulation – follow the step-by-step instructions within the simulation.
NoteThe following simulation reproduces the full exercise execution:
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 Navigate to the Home tab of SAP Business Application Studio.
Find the User Interface (see: User Interface) tile, and choose the + icon to add a new user interface.
A screen will show up where you can add the Display name: Risks, and enter a Description of your choice. Choose Next.
Select UI Application Type as Template-Based, Responsive Application to create an SAP Fiori elements based UI. Choose Next.
Choose UI Application Template as List Report Object Page. Choose Next.
Below Data Objects, select risks as Main Entity, to show risks entity in UI. Choose Finish.
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
Update the list report.
Use the following data:
Field Value Columns supplier_BusinessPartner Find the entry List Report on the Page Map, and choose the Edit icon to edit.
In the Page Editor, expand the Columns section, choose the + icon, and select Add Basic Columns from the dropdown.
In the pop-up, choose supplier_BusinessPartner for Columns. Choose Add.
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 Choose the arrow to navigate back and find the entry Object Page on the Page Map. Choose the Edit icon to edit.
In the entry Sections, open General Information → Form → Fields.
Choose the + icon to add new fields to the UI. In the dropdown, select Add basic fields.
See the table above to add the following fields from the dropdown:
- miti_ID
- BusinessPartnerFullName
- BusinessPartnerIsBlocked
Choose Add.
Choose supplier_BusinessPartner from the Fields list in the outline panel to the left.
Find the entry Display Type in the property panel to the right, and choose Value Help in the dropdown.
In the Value Help screen, choose Add Column button.
In the dropdown, select BusinessPartnerFullName.
Repeat step h) and i) with BusinessPartnerIsBlocked.
Disable the Display as Dropdown toggle button.
Choose Apply.
