Fiori Elements:Enabling Search in association view

Fiori Elements:Enabling Search in the association view

---

In the last post Fiori Elements- Use of value help     we have seen the value help assignment to a search field. The consumption view is build on SCARR table and then it has association to the SPFLI table. And the Search is enabled on the SCARR fields. In this post let’s see how to enable search on the association view.

The consumption view on SCARR table with association to spfli.

---

@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
{
@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
@Consumption.filter.hidden: true // hide this field in the consumption filter

key carrid,

@UI: {
fieldGroup: [{ qualifier: ‘General’, position: 10 }], // search filter position
lineItem: [{ position: 20 }],identification: [{ position: 20 }] }
@EndUserText.label: ‘Carrier Name’

carrname,

@UI: {
fieldGroup: [{ qualifier: ‘General’, position: 20 }],
lineItem: [{ position: 30 }], identification: [{ position: 30 }] }
@Consumption: { valueHelpDefinition: [{ entity:{ element: ‘currcode’, name: ‘ZZ_SCARR_VH’} }],
filter: { multipleSelections: true, selectionType: #SINGLE }
}

currcode,

@UI: { identification: [{ position: 40, importance: #LOW }] }
@Consumption.filter.hidden: true // hide this field in the consumption filter

url,

/* Associations */
//ZZ_SCARR_TP
_Spfli
}

---

The SPFLI 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
{
@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 */
_Scarr
}

---

Run the app . The first appears the SCARR search and list display. Select a line.

Here the details of the SCARR line are displayed and then all the SPFLI records with SCARR carrid are shown. Here the countryfr and countryto  label are same, let’s assign suitable different label for these two fields and then create a search option for SPFLI list table and the search should work on COUNTRYFR field.

---

Enable search for the view and make COUNTRYFR as the default search field and provide suitable text label for country from and country to field. Activate the view and test the app.

---

Here the search option appears on the SPFLI list and the text label appears correctly for the countryfr and countryto field.

The search works on the country from field. Provide a country name and the spfli list appears for that countryfr.

---

@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’} }
@Search.searchable: true
@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
{
@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,
@EndUserText.label: ‘Depat. Country’
@Search.defaultSearchElement: true
@UI: { lineItem: [{ position: 30 }], identification: [{ position: 30 }] }
countryfr,
@EndUserText.label: ‘Arri. Country’
@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 */
_Scarr
}

---