Fiori Elements : List Report with multiple views & graphs

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

}