Fiori List Report with multiple views
Model : Flight
- 1. Create Airline view out of SCARR
- 2. Create Connection view out of SPFLI in association with Airline view
- 3. Create Flights view from SFLIGHT in association with Connection view
- 4. Create Bookings view from SBOOK in association with Airline, Connection, and Flights
- 5. Please note no extra annotations are used till now. All the autogenerated annotations exist. We will add the annotations gradually to get the desired application.
- 6. Now let’s add the first annotation: @ ODATA.PUBLISH
a. This helps in exposing the service out of view to create the application
@AbapCatalog.sqlViewName: 'YCBOOKS'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Booking View'
@OData.publish: true
define view YC_Books as select from sbook
association [0..1] to YI_AirlineV as _Airline on sbook.carrid = _Airline.Airline
association [0..1] to YI_ConnectionV as _Connection on sbook.connid = _Connection.Connections
association [0..1] to Yi_flightv as _Flight on sbook.carrid = _Flight.Airline
{
//sbook
key carrid,
key connid,
key fldate,
key bookid,
customid,
custtype,
smoker,
luggweight,
wunit,
invoice,
class,
forcuram,
forcurkey,
loccuram,
loccurkey,
order_date,
counter,
agencynum,
cancelled,
reserved,
passname,
passform,
passbirth,
_Airline // Make association public }
- 7. To Register/Activate/Maintain the service use T-code /IWFND/MAINT_SERVICE
- a. The service name is CDS View name postfix with _CDS
- 8. Now create a new project from template of LIST REPORT APPLICATION type. In Data Connection step use the service registered earlier.
- 9. The application now looks like this
- 10. A list report contains
- a. a filter bar like ABAP report select options. This section is called smart filter bar.
- b. The table section: just like an ALV table
- 11. Let’s add annotations one by one to see the changes
- 12. To get table header
@UI: {
headerInfo: {
typeName: 'Flight Booking',
typeNamePlural: 'Flight Bookings' }
}
- 13. To get table columns and selection option
a. add UI.LineItem annotations to the CDS fields for columns
b. add UI.SelectionField annotation to CDS field for filters
@UI: { lineItem:
[ { position: 10,label: 'Airline', importance: #HIGH } ],
selectionField: [{ position : 20 }]
}
key carrid as Airline,
@UI: { lineItem:
[ { position: 20,label: 'Connection', importance: #HIGH } ],
selectionField: [{ position : 30 }]}
key connid,
@UI: { lineItem:
[ { position: 30,label: 'Date', importance: #HIGH } ],
selectionField: [{ position : 40 }]}
key fldate,
@UI: { lineItem:
[ { position: 40,label: 'Booking Id', importance: #HIGH } ] ,
selectionField: [{ position : 50 }]}
key bookid,
- 14. To get multiple views in the table section
a. Add variants in Manifest.JSON project file from WEBIDE.
"quickVariantSelectionX": {
"variants": {
"0": { "key": "0", "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#VAR1"},
"2": {"key": "2",
"entitySet": "YI_ConnectionV", "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#VAR2"}
b. Add view level annotation in Bookings view with the same variant decalared earlier
@UI.selectionVariant: [
{ qualifier: 'VAR1',
text: 'BOOKINGS' ,
filter: 'Carrid EQ "LH"'
}]
c. Similarly add in Connections view
@UI.selectionVariant: [
{ qualifier: 'VAR2',
text: 'DISTANCE COVERED'
} ]
- 15. For value help in filter add field level annotation in booking view for carrier id field
@Consumption.valueHelpDefinition: [{
entity: {name: 'YI_AIRLINEV', element: 'Airline' }}]
- 16. Now add Airline view in similar fashion as we have added connections view
- Hint: add a selection variant in manifest.json then add selection variant in view level annotation
- 17. To display chart in one of the views
a. Add presentation variant in manifest.json and then presentation variant in view
b. Our intention is to display distance covered by Airline
i. To do so add aggregate annotation in connection view for distance @DefaultAggregation: #SUM
ii. Expose the aggregated field in bookings view
c. Add chart annotation
@UI.presentationVariant: [{
qualifier: 'Chart1',
text: 'ChartView',
visualizations: [{
qualifier: 'Chart1',
type: #AS_CHART
}] }]
@UI.chart: [{
qualifier: 'Chart1',
title: 'Distance Covered by Airlines',
chartType: #COLUMN,
dimensions: ['Airline'],
dimensionAttributes: [{dimension: 'Airline' , role: #CATEGORY}],
measures: ['Distance'],
measureAttributes: [{measure: 'Distance' , role: #AXIS_1}]
}]
Bookings______________________________________
@AbapCatalog.sqlViewName: 'YCBOOKS'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Booking View'
@OData.publish: true
@UI: {
headerInfo: {
typeName: 'Flight Booking',
typeNamePlural: 'Flight Bookings' }
}
@Search.searchable: true
@UI.selectionVariant: [
{ qualifier: 'VAR1',
text: 'BOOKINGS' ,
filter: 'Carrid EQ "LH"'
}]
@UI.presentationVariant: [{
qualifier: 'Chart1',
text: 'ChartView',
visualizations: [{
qualifier: 'Chart1',
type: #AS_CHART
}] }]
@UI.chart: [{
qualifier: 'Chart1',
title: 'Distance Covered by Airlines',
chartType: #COLUMN,
dimensions: ['Airline'],
dimensionAttributes: [{dimension: 'Airline' , role: #CATEGORY}],
measures: ['Distance'],
measureAttributes: [{measure: 'Distance' , role: #AXIS_1}]
}]
define view YC_Books as select from sbook
association [0..1] to YI_AirlineV as _Airline on sbook.carrid = _Airline.Airline
association [0..1] to YI_ConnectionV as _Connection on sbook.connid = _Connection.Connections
association [0..1] to Yi_flightv as _Flight on sbook.carrid = _Flight.Airline
{
//sbook
@UI: { lineItem: [ { position: 10,label: 'Airline', importance: #HIGH } ],
selectionField: [{ position : 20 }]
}
@Search.defaultSearchElement: true
@Search.fuzzinessThreshold : 0.9
@Consumption.valueHelpDefinition: [{
entity: {name: 'YI_AIRLINEV', element: 'Airline' }}]
key carrid as Airline,
key _Connection.distancePerAirline as Distance,
@UI: { lineItem: [ { position: 20,label: 'Connection', importance: #HIGH } ],
selectionField: [{ position : 30 }]}
key connid,
@UI: { lineItem: [ { position: 30,label: 'Date', importance: #HIGH } ],
selectionField: [{ position : 40 }]}
key fldate,
@UI: { lineItem: [ { position: 40,label: 'Booking Id', importance: #HIGH } ]
,
selectionField: [{ position : 50 }]}
key bookid,
customid,
custtype,
smoker,
luggweight,
wunit,
invoice,
class,
forcuram,
forcurkey,
loccuram,
loccurkey,
order_date,
counter,
agencynum,
cancelled,
reserved,
passname,
passform,
passbirth,
_Airline ,
_Connection // Make association public
}
Connections__________________________________
@AbapCatalog.sqlViewName: 'YICONNECTIONV'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Connection View'
@UI.selectionVariant: [
{ qualifier: 'VAR3',
text: 'DISTANCE COVERED'
} ]
define view YI_ConnectionV
as select from spfli
association [0..1] to YI_AirlineV as _airlinev on $projection.Airline = _airlinev.Airline
{
@UI: { lineItem: [ {position: 10, label: 'Airline', importance: #HIGH } ] }
key carrid as Airline,
key connid as Connections,
countryfr,
cityfrom,
airpfrom,
countryto,
cityto,
airpto,
fltime,
deptime,
arrtime,
distance,
@UI: { lineItem: [ {position: 20, label: 'Dist', importance: #HIGH } ] }
@DefaultAggregation: #SUM
distance as distancePerAirline,
distid,
fltype,
period,
_airlinev
}
Flights____________________________________
@AbapCatalog.sqlViewName: 'YIFLIGHTV'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Flight View'
define view Yi_flightv as select from sflight
association [0..1] to YI_ConnectionV as _Connection
on $projection.carrid = _Connection.Airline
and $projection.connid = _Connection.Connections {
//sflight
key carrid as Airline,
key connid,
key fldate,
price,
currency,
planetype,
seatsmax,
seatsocc,
paymentsum,
seatsmax_b,
seatsocc_b,
seatsmax_f,
seatsocc_f,
_Connection // Make association public
}
Airline_______________________________________
@AbapCatalog.sqlViewName: 'YIAIRLINEV'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Airline View'
@UI.selectionVariant: [
{ qualifier: 'VAR2',
text: 'AIRLINES'
}]
define view YI_AirlineV as select from scarr {
//scarr
@UI: { lineItem: [ { position: 10,label: 'Airline', importance: #HIGH } ]}
key carrid as Airline,
@UI: { lineItem: [ { position: 20,label: 'Carrier ID', importance: #HIGH } ]}
carrname as CarrierID,
currcode,
@UI: { lineItem: [ { position: 30,label: 'URL', importance: #HIGH } ]}
url as URL
}