Fiori Elements- CDS View with Association

Fiori Elements- CDS View with Association with UI Annotations

---

This post shows how to create a Fiori App with UI annotations. 

Before this check the first post to get basic idea Fiori Elements- CDS View with UI Annotations

This includes a search and result list ( operation performed on SCARR table) and when you navigate to one of the line item, then it show the line  item details and shows the corresponding records as line items from SPFLI table and then user can select one of the line of SPLFI table to see the details.

---

Here we have designed few CDS table- 

CDS (BASIC) view on SCARR tabel.

CDS (BASIC) view on SPFLI tabel.

---

 

Below two CDS(transaction) views designed on top of the CDS BASIC views with Association. 

 

---

Finally design two CDS(consumption) views with UI annotations designed on top of transaction views  that performs association.

---

---

---

---

First Consumption view with oData Enabled

---

@AbapCatalog.sqlViewName: ‘ZZSCARR_CP’
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: ‘Consumption Scarr Processing’
@OData.publish: true

@UI: { headerInfo:{ typeName: ‘Flight Basic’, typeNamePlural: ‘Flight Basics’} }
@Search.searchable: true
@VDM.viewType: #CONSUMPTION
define view ZZ_SCARR_CP
as select from ZZ_SCARR_TP
association [1..*] to ZZ_SPFLI_CP as _Spfli on $projection.carrid = _Spfli.carrid
{
//ZZ_SCARR_TP
@UI: {
facet: [
{ id: ‘ID1’, position: 10, type: #COLLECTION },
{ id: ‘ID2’, position: 20, type: #LINEITEM_REFERENCE, targetElement: ‘_Spfli’ },
{ parentId: ‘ID1’, type: #FIELDGROUP_REFERENCE, targetQualifier: ‘General’}
],
lineItem: [{ position: 10 }],
identification: [{ position: 10 }]
}
@Search.defaultSearchElement: true // carrid as the default search field
key carrid,

@UI: {
fieldGroup: [{ qualifier: ‘General’, position: 10 }], // search filter position
lineItem: [{ position: 20 }], // list view position
identification: [{ position: 20 }] // details view position
}
carrname,

@UI: {
fieldGroup: [{ qualifier: ‘General’, position: 20 }],
lineItem: [{ position: 30 }],
identification: [{ position: 30 }]
}
currcode,

@UI: {
identification: [{ position: 40 }]
}
url,
/* Associations */
//ZZ_SCARR_TP
_Spfli

}

---

Second consumption view

---

@AbapCatalog.sqlViewName: ‘ZZSPFLI_CP’
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: ‘Consumption Spfli Processing’

@UI: { headerInfo:{ typeName: ‘Flight Detail’, typeNamePlural: ‘Flight Details’} }
@VDM.viewType: #CONSUMPTION
define view ZZ_SPFLI_CP
as select from ZZ_SPFLI_TP
association [1..1] to ZZ_SCARR_CP as _Scarr on $projection.carrid = _Scarr.carrid
{
//ZZ_SPFLI_TP
@UI: {
facet: [ { id: ‘ID11’, position: 10, type: #COLLECTION } ],
lineItem: [{ position: 10 }],
identification: [{ position: 10 }]
}
key carrid,
@UI: { lineItem: [{ position: 20 }], identification: [{ position: 20 }] }
key connid,
@UI: { lineItem: [{ position: 30 }], identification: [{ position: 30 }] }
countryfr,
@UI: { lineItem: [{ position: 40 }], identification: [{ position: 40 }] }
countryto,
@UI: { lineItem: [{ position: 50 }], identification: [{ position: 50 }] }
cityfrom,
@UI: { lineItem: [{ position: 60 }], identification: [{ position: 60 }] }
cityto,
@UI: { identification: [{ position: 70 }] } // only displayed in detailed view
airpfrom,
@UI: { identification: [{ position: 80 }] } // only displayed in detailed view
airpto,
@UI: { identification: [{ position: 90 }] } // only displayed in detailed view
distance,
@UI: { identification: [{ position: 100 }] } // only displayed in detailed view
distid,
/* Associations */
//ZZ_SPFLI_TP
_Scarr
}

---

register and activate the service in Tx- /iwfnd/maint_service

Create a fiori app from the  webIDE.

Select the oData service.

By default the text appears as highlighted.

Let’s change it to some thing meaning.

Test.

Select the APP.

The search and result list appears. Select GO on the search bar.

Here we can see all the records from SCARR table are displayed in the list but one all fields are displayed (SCARR_URl) not displayed as a column. Select a line.

Here we have two facets(tabs)- basic and detail.

The SCARR line item selected, its details are displayed and the items from SPFLI are shown as a result of association/navigation. Select a line of SPFLI to see the details of that line.

Details of SPFLI. Go back… to home.

Also we can see the details of the Search Filter.

---