Usage Scenario
The user must be able to see the progress indicator for each travel in the object page header, similar to that in the list report. Additionally, the user must be able to see the total supplements for each booking in the header of the subobject page.
Task Flow
In this exercise, you will first add the progress indicator for a travel to the header section. You may have already created and implemented the method for calculating and updating the progress for a travel in your CAP service. You have added the progress indicator as a table column in one of the previous exercises. Here, you will use the Page Editor to add it to the travel object page as a header section. You can use the guided development aid named Add a header facet using Data Points as well.
Next, you will add a bullet micro chart. The bullet micro chart will display the total of supplements for each booking, as a header section in the subobject page. You can use the Page Editor to add the bullet micro chart.
Prerequisites
You have completed the exercise Add Travel Status, Total Price, and the Deduct Discount Action to the Header Area in the unit Shaping the Header Area of the Object Page (lesson: Placing Key Figures in the Header Area). Alternatively, you can check out its solution branch: solution/put-travel-status-total-price-deduct-discount-to-header-area-op.
Watch the Simulation and Perform the Steps
This exercise contains a simulation that takes you through all the steps described below. You can follow the simulation and perform the steps using your own trial account.
Steps
Add the progress indicator to the header.
Open your CAP project in Business Application Studio.
In the Explorer view, select Projects\fiori-elements-v4-cap-advanced\app\travel_processor\webapp.
Right-click on webapp.
Select Show Page Map. The Page Map-travel appears.
Select the Edit icon of the object page. The Page Map of TravelObjectPage appears.
Expand Header Sections. You can see the available header sections: Travel Status and Total Price.
Select the Add icon corresponding to the Header Sections.
Choose Add Progress Section. The Add Progress Section dialog appears.
From the Value Source Property dropdown, choose Progress.
Select Add.
In the right pane, under Label, enter the label name Progress of Travel.
Select the globe icon corresponding to the label name.
Select Apply. The label text is added to the i18n.properties file.
Add the bullet micro chart to the header of the subobject page.
Switch back to the SAP Business Application Studio. The Page Editor is open.
Select Page Map to go back to the Page Map.
Select the Edit icon of the subobject page. The page map of BookingObjectPage appears.
Select the Add icon corresponding to the Header Sections.
Choose Add Micro Chart Section. The Add Chart Header Section appears.
From the Chart Type dropdown, select Bullet.
Select Add.
From the Value dropdown, choose TotalSupplPrice.
From the Maximum Value dropdown, enter the value 120.
Select Add.
In the right pane, under Label, enter the label name Total Supplements.
Select the globe icon corresponding to the label name.
Select Apply. The label text is added to the i18n.properties file.
Select Edit in source file. The layout.cds file opens.
Add the TargetValue: 100 property to the @UI.DataPoint annotation.
Add the values DeviationRangeLowValue: 20 and ToleranceRangeLowValue: 75 for the CriticalityCalulation.
Result
You have learned to add a progress indicator to the header section of the Travel object page. You have also learned to add a bullet micro chart to the header section of the Booking object page (subobject page).
Note
- You can find the solution for this exercise on GitHub.
- The solution branch is solution/add-bullet-micro-chart-and-progress-indicator-to-op.
- You can see the code changes compared to the previous branch on GitHub.
Next Steps
For more information, see