In this exercise we will add a table column of type micro chart by using the Page Map.
The micro chart shall show the Customer VIP Status per booking, based on all cumulated bookings for the corresponding airline.
(1)(2) The data to be shown in the micro chart is based on the shown properties in entity Booking defined in file db/schema.cds.
The properties are annotated with @Core.Computed. The values are calculated in a read handler implementation for entity Booking in (3) file /srv/travel-service.js , (4) section Exercise 6: Data for Bookings table micro chart. The calculation cumulates all bookings and returns the result grouped by Customer ID and Airline ID (see the highlighted select statement in the screenshot below).
In order to add a micro chart to a table, you have to define an annotation of type @UI.DataPoint (representing the visualization of a single point of data, typically a number). Its mandatory properties are value (which we will set to the cumulated bookings value BookedFlights from the calculation above) and a target value (referring to a value VIPCustomerBookings which is statically defined per carrier in the master data).
The data point needs then to be referenced in the measure attributes of annotation @UI.Chart.
Chart type #Donut displays a radial chart. Properties Measures and MeasureAttributes are mandatory.
(5) In the Page Map table section click on Add Columns 
.
(6) Select Add Chart Column.
(7) For the Chart Type, select Radial.
(8)(9) For Value select property BookedFlights.
(10)(11) For Target Value select VIPCustomerBookings.
(12) Click 
.
(13) Drag column BookedFlights and (14) drop below column AirlinePicUrl.
We now define how the color of the chart should be calculated by defining the criticality property.
(15) In the property pane for chart column BookedFlights, open drop-down Criticality Source and choose Property.
(16) (17) In dialog Define Property, select property EligibleForPrime.
(18) Click 
.
(19) For the second column BookedFlights, enter VIP Status as label and generate a text key for it by clicking
.
(20) Click
.
(21) On renamed column VIP Status click Navigate to source code 
.
(22) This opens up the corresponding UI.DataFieldForAnnotation definition.
(23) It refers to a UI.Chart annotation that was also generated:
Switch to the preview browser tab.
(24) On the Object Page, the table now shows the micro chart column.
You've now successfully added a micro chart column to the table by using the Page Map.
Continue to - Exercise 7 - Guided Development: Adding a Chart Building Block